编码规范_html代码规范化编写

更新日期: 2018-12-01 阅读: 3.8k 标签: 规范

语法

  • 缩进使用soft tab(4个空格);

  • 嵌套的节点应该缩进;

  • 在属性上,使用双引号,不要使用单引号;

  • 属性名全小写,用中划线做分隔符;

  • 不要在自动闭合标签结尾处使用斜线(html5 规范 指出他们是可选的);

  • 不要忽略可选的关闭标签;


HTML5 doctype

在页面开头使用这个简单地doctype来启用标准模式,使其在每个浏览器中尽可能一致的展现;

虽然doctype不区分大小写,但是按照惯例,doctype大写 (关于html属性,大写还是小写)。

<!DOCTYPE html>


lang属性

根据HTML5规范:

应在html标签上加上lang属性。这会给语音工具和翻译工具帮助,告诉它们应当怎么去发音和翻译。

更多关于 lang 属性的说明在这里;

在sitepoint上可以查到语言列表;

但sitepoint只是给出了语言的大类,例如中文只给出了zh,但是没有区分香港,台湾,大陆。而微软给出了一份更加详细的语言列表,其中细分了zh-cn, zh-hk, zh-tw。

<html lang="en-us">


字符编码

通过声明一个明确的字符编码,让浏览器轻松、快速的确定适合网页内容的渲染方式,通常指定为'UTF-8'。

<meta charset="UTF-8"> 


IE兼容模式

用<meta>签可以指定页面应该用什么版本的IE来渲染; 

代码示例:

<meta http-equiv="X-UA-Compatible"content="IE=Edge">


引入css, JS

根据HTML5规范, 通常在引入CSS和JS时不需要指明 type,因为 text/css和 text/javascript 分别是他们的默认值。


HTML5 规范链接

  • 使用link

  • 使用style

  • 使用script

<!-- External CSS -->
<link rel="stylesheet" href="code_guide.css">

<!-- In-document CSS -->
<style>    
</style>

<!-- External JS -->
<script src="code_guide.js"></script>

<!-- In-document JS -->
<script>   
</script>


属性顺序

属性应该按照特定的顺序出现以保证易读性;

  • class

  • id

  • name

  • data-*

  • src, for, type, href, value , max-length, max, min, pattern

  • placeholder, title, alt

  • aria-*, role

  • required, readonly, disabled

class是为高可复用组件设计的,所以应处在第一位;

id更加具体且应该尽量少使用,所以将它放在第二位。

<a id="..." data-modal="toggle" href="#">
Example link
</a>
<img src="..." alt="...">


boolean属性

boolean属性指不需要声明取值的属性,XHTML需要每个属性声明取值,但是HTML5并不需要;boolean属性的存在表示取值为true,不存在则表示取值为false。

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>   
<option value="1" selected>1</option>
</select>


JS生成标签

在JS文件中生成标签让内容变得更难查找,更难编辑,性能更差。应该尽量避免这种情况的出现。


减少标签数量

在编写HTML代码时,需要尽量避免多余的父节点;

很多时候,需要通过迭代和重构来使HTML变得更少。


实用高于完美

尽量遵循HTML标准和语义,但是不应该以浪费实用性作为代价;

任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/1471

相关推荐

什么是驼峰命名?骆驼式命名法规范

骆驼式命名法(Camel-Case)又称驼峰式命名法,是电脑程式编写时的一套命名规则(惯例)。正如它的名称CamelCase所表示的那样,是指混合使用大小写字母来构成变量和函数的名字

web开发,前后分离接口规范

目前我们现在用的前后端分离模式属于第一阶段,下一阶段可以在前端工程化方面,对技术框架的选择、前端模块化重用方面,可多做考量。也就是要迎来“==前端为主的 MV* 时代==”。

CSS规范

CSS 指层叠样式表 (Cascading Style Sheets),定义如何显示 HTML 元素,但由于 CSS 天生全局性,随着项目复杂度增加,极易出现样式覆盖以及其它的问题。

前端变量命名规范

程序开发过程中变量命名不仅是一个头疼问题,也是一个对开发者综合素质的检验,它会直接影响到代码的最终交付质量、代码Review人员心智承受力。如何写出具有创造性、优雅性、易读性的高质量代码,需要开发者在实际工作中不断总结、提炼

js中箭头函数的编码规范,如何更好的使用箭头函数

当您必须使用匿名函数,请使用箭头函数表示法,它创建了一个在 this 上下文中执行的函数的版本,这通常是你想要的,而且这样的写法更为简洁。如果你有一个相当复杂的函数,你或许可以把逻辑部分转移到一个声明函数上。

Web前端开发规范手册

文件命名规则:文件名称统一用小写的英文字母、数字和下划线的组合。引文件统一使用index.htm index.html index.asp文件名(小写),图片的名称分为头尾两部分,用下划线隔开,头部分表示此图片的大类性质

W3C标准及规范

W3C的意思是万维网联盟(World Wide Web Consortium),创建于1994年10月,是一个会员组织,它的工作是对web进行标准化--->W3C 致力于实现所有的用户都能够对 web 加以利用

web前端js中ES6的规范写法

引号的使用,单引号优先(如果不是引号嵌套,不要使用双引号)、空格的使用问题:(关键字后 符号后 排版 函数 赋值符号= )等、不写没有使用过的变量,如果定义了一个变量,后来一直没有参与过运算,那么不应该定义这个变量...

JavaScript 命名约定最佳实践

在开发过程中,遵循标准的命名约定可以提高代码的可读性。下面就来看看 JavaScript 中命名约定的最佳实践。JavaScript 变量名称是区分大小写的,大写和小写字母是不同的。

用standard来管理JavaScript 代码规范

standard是一个开源的JS代码规范库,制定了所谓standard(标准)的JS代码规范,配合编辑器插件可以实时检查代码规范以及语法错误,通过执行命令检查代码规范以及语法错误,自动修复(可以直接修复的)不合规范的代码,使其符合规范

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!