摘要：当然我们还可以引入框架，这些框架一般都自带模板处理引擎，比如等语义化命名和语义化标签我们尽量多采用语义化来命名，并且采用语义化标签来书写代码，多用中新增的标签来书写。
1.黄金法则（Golden rule）
不管有多少人参与同一个项目，一定要确保每一行代码都像是同一个人编写的。
Every line of code should appear to be written by a single person, no matter the number of contributors.
这就需要在一个项目中，我们永远遵循同一套编码规范。在项目开发前，制定一套行之有效的编码规范，每个项目组成员都要按这个规范来编码。
2.命名规范
CSS 文件名使用英文小写，多个单词时，中间用下划线（_）连接，如：index.html web-guide.html
id 命名使用英文驼峰命名法，多采用语义化来命名
自定义属性采用英文小写命名，多个单词时，中间用中划线（-）连接，如：generate-catalogue
以 data- 开始的属性名，是用来存储数据的，具体可参考 W3C Html 5 data- 。html可以通过 dataset 来取属性中的值，对于不支持的浏览器，可以通过getAttribute来获取。例如：data-city="ShangHai" ，如果对应的html标签id为 cityList，则 document.getElementById("cityList").dataset("city"); 对于不支持的浏览器，应该document.getElementById("cityList").getAttribute("-data-city");
3.书写规范
3.1 语法
使用两个空格来代替制表符（tab）作为缩进，— 这是保证代码在各种环境下显示一致的唯一方式
嵌套元素应当缩进一次（即两个空格）
对于属性中的值，确保全部使用双引号，不要使用单引号，也不要省略引号
不要在自闭合（self-closing）元素的尾部添加斜线 — HTML5 规范 中明确说明这是可选的
不要省略可选的结束标签（closing tag）（例如， 或
不要一行写太长的html代码，建议设置最大长度为120列，超过120列是最好换行书写，方便阅读和排版
嵌套元素最好多带带写在一行
行内元素中不要嵌套块级元素，比如：不推荐写法
p标签中是不能嵌套块级元素的，浏览器会解析为两个独立的标签，而不能到达你想要的结果
3.2 HTML5 doctype
为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。
3.3 语言属性 Language attribute
根据 HTML5 规范：
强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。
更多关于 lang 属性的知识可以从 此规范 中了解。
3.4 IE 兼容模式
Internet Explorer 支持使用 标签来指定使用什么版本的 IE 来渲染页面。除非有强烈的特殊需求，否则最好设置为 edge mode，从而让 IE 采用其所支持的最新模式来渲染。
具体信息可以参考 这里
3.5 字符编码
通过声明一个明确的字符编码，让浏览器正确的呈现内容，防止出现乱码，通常字符编码为 UTF-8
3.6 引入 CSS 和 JavaScript 文件
根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。
3.7 实用高于完美
尽量遵循 HTML 标准和语义，但是不应该以浪费实用性作为代价。任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。
3.8 属性顺序
HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
class
id, name
data-*
src, for, type, href
title, alt
aria-*, role
class 用于标识高度可复用组件，因此应该放在首位。id 用于标识具体组件，应该尽量少使用（例如，页面内的书签），因此排在第二位。
以上顺序也不一定是绝对的，可以根据需要把常用的放在首位
3.9 布尔（boolean）型属性
Boolean 属性指不需要声明值的属性。XHTML 需要每个属性声明值，但是 HTML5 并不需要。了解更多内容，参考 WhatWG section on boolean attributes
一个元素中 Boolean 属性的存在表示取值 true，不存在则表示取值 false。如果一定要为其赋值的话，请参照 WhatWG 中的说明。
如果属性存在，其值必须是空字符串或 [...] 属性的本身名称，并且不要在首尾添加空白符。
简单来说，就是不用赋值。
虽然 HTML5是这样规定的，但是对于IE浏览器，如果不指定属性值，有时会有问题的，尤其是readonly和 disabled ，所以最好还是设置为 readonly="readonly" disabled="disabled"
3.10 减少标签嵌套的数量
在编写 HTML 代码时，尽量避免多余的父节点。很多时候，需要通过迭代和重构来使 HTML 变得更少。 请看下面的例子
3.11 避免利用JavaScript 生成标签或html片段
通过 JavaScript 生成的标签或html片段让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免，我们可以采用模板的方式来处理，常用的模板有
handlebars（模板引擎类），Ember.js 就采用该模板引擎
knockoutjs，除了支持模板，他还是一个轻量级的MVVM框架
mustashe， 一个模板引擎
JsRender，一个非常好用的html模板引擎类
在不引入其他mvc或mvvm框架的前提下，采用 JsRender 或 handlebars 来处理html模板，这两个模板支持循环、条件语句，还支持在模板中动态执行JavaScript脚本（不建议这样做）。当然我们还可以引入MVC框架，这些框架一般都自带模板处理引擎，比如Angular、Ember、KnockoutJs等
4.语义化命名和语义化标签
我们尽量多采用语义化来命名id，并且采用语义化标签来书写html代码，多用html5中新增的标签来书写。
5.Emmet帮助我们快速书写html代码
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/49614.html
摘要：前端编码规范之使用规范前端编码规范之样式编码规范前端编码规范之结构规范前端编码规范之最佳实践前端编码规范之编码规范命名的原则是通俗易懂，尽量保持不重复冲突，尽量不要用。我觉得应该避免出现出现这种方式用预处理器拼接出来的名称，会生成。 前端编码规范之：Git使用规范 前端编码规范之：样式（scss）编码规范 前端编码规范之：HTML结构规范 前端编码规范之：Vue最佳实践 前端编码规范...
摘要：用两个空格代替制表符这是唯一能保证在所有环境下获得一致展现的方法。编辑器配置将你的编辑器按照下面的配置进行设置，以免常见的代码不一致和差异用两个空格代替制表符保存文件时删除尾部的空白符设置文件编码为在文件结尾添加一个空白行。 黄金定律 永远遵循同一套编码规范 - 可以是这里列出的，也可以是你自己总结的。如果发现规范中有任何错误，敬请指正。 HTML 语法 用两个空格代替制表符 (ta...
摘要：文档规范和文档必须采用编码格式文档必须使用的标准文档格式编写规范和的标签属性类名都必须使用小写字母和的属性类名命名必须具有语义化代码必须保持文档结构清晰，必须合理的进行代码缩进文件禁止样式表内引用文件编写格式，样式代码保持一行，多个选择器 HTMLCSS文档规范 HTML和CSS文档必须采用UTF-8编码格式； HTML文档必须使用HTML5的标准文档格式； HTMLCSS编写规范...
摘要：文档规范和文档必须采用编码格式文档必须使用的标准文档格式编写规范和的标签属性类名都必须使用小写字母和的属性类名命名必须具有语义化代码必须保持文档结构清晰，必须合理的进行代码缩进文件禁止样式表内引用文件编写格式，样式代码保持一行，多个选择器 HTMLCSS文档规范 HTML和CSS文档必须采用UTF-8编码格式； HTML文档必须使用HTML5的标准文档格式； HTMLCSS编写规范...
摘要：文档规范和文档必须采用编码格式文档必须使用的标准文档格式编写规范和的标签属性类名都必须使用小写字母和的属性类名命名必须具有语义化代码必须保持文档结构清晰，必须合理的进行代码缩进文件禁止样式表内引用文件编写格式，样式代码保持一行，多个选择器 HTMLCSS文档规范 HTML和CSS文档必须采用UTF-8编码格式； HTML文档必须使用HTML5的标准文档格式； HTMLCSS编写规范...
阅读 3343·2021-11-24 09:38
阅读 3162·2021-11-22 09:34
阅读 2075·2021-09-22 16:03
阅读 2323·2019-08-29 18:37
阅读 346·2019-08-29 16:15
阅读 1741·2019-08-26 13:56
阅读 826·2019-08-26 12:21
阅读 2168·2019-08-26 12:15
