《图解HTML》第五节 HTML编码规范
通过前面的四节，我们对HTML已经有了一个基本的认识和使用。可是，当我们写了很多的HTML时，我们会发现即便一样的展现效果，可是我们却写得全然不同。
例如：
<body> <span style="background-color: red;">这是span</span> <p style="background-color: red; display: inline;">这是p</p></body>
通过上面的例子我们会发现，元素的样式，是可以通过css去改变的，所以变得非常灵活。可是在真正得开发中，我们希望不同人开发的出来的代码都是尽可能一样的，包括标签的选取使用，属性的顺序等等。
以下的规范是参考：https://codeguide.bootcss.com/ 选取的关于HTML的编码规范，之后可能会根据自身需要进行修改成符合自身的规范。
语法
- HTML大小写不敏感，但是标签不要大写，DOCTYPE大写。
- 用两个空格来代替制表符（tab） — 这是唯一能保证在所有环境下取得一致展示的方法。
- 嵌套元素应当缩进一次（即两个空格）。
- 对于属性的定义，永远一律使用双引号，绝不要使用单引号。
- 不要在自闭合（self-closing）元素的尾部增加斜线 — HTML5 规范 中明确说明斜线是可忽略的。
- 不要省略可选的结束标签（closing tag）（例如，
</li>或者</body>）。
示例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <!-- HTML大小写不敏感，但是标签不要大写，DOCTYPE大写 --> <!-- good --> <p>Hello World</p> <!-- not good --> <P>Hello World</P> <!-- 用两个空格来代替制表符（tab） --> <!-- good --> <div> 前面有两个空格</div> <!-- not good --> <div> 前面有一个tab</div> <!-- 嵌套元素应当缩进一次（即两个空格）。 --> <!-- good --> <div> parent <div> child </div> </div> <!-- not good --> <div> parent <div> child </div> </div> <!-- 对于属性的定义，永远一律使用双引号，绝不要使用单引号 --> <!-- good --> <img src="../../img/browser.jpg" alt="browser"> <!-- not good --> <img src='../../img/browser.jpg' alt='browser'> <!-- 不要在自闭合（self-closing）元素的尾部增加斜线 --> <!-- good --> <br> <!-- not good --> <br /> <!-- 不要省略可选的结束标签 --> <!-- good --> <ul> <li>Hello</li> <li>World</li> </ul> <!-- not good --> <ul> <li>Hello <li>World </ul></body></html>属性顺序
HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
- class
- id,name
- data-*
- scr,for,type,href,value
- title,alt
- role,aria-*
class 用于标识高度可复用组件，因而应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因而排在第二位。
示例：
<a class="..." id="..." data-toggle="modal" href="#"> Example link</a><input class="form-control" type="text"><img src="..." alt="...">其余
- 布尔型属性不用赋值
元素的布尔型属性假如有值，就是 true，假如没有值，就是 false。 - 减少标签的数量
编写 HTML 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现。 - 尽量避免JavsScript生成的标签
示例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <!-- 布尔型属性不用赋值 --> <!-- good --> <input type="checkbox" checked> <!-- not good --> <input type="checkbox" checked=true> <!-- 减少标签的数量 --> <!-- good --> <img class="avatar" src="..."> <!-- not good --> <span class="avatar"> <img src="..."> </span> <!-- 尽量避免JavsScript生成的标签 --> <!-- goood --> <div id="append"><p>i'm child.</p></div> <!-- not good --> <div id="append"></div> <script> const element = document.querySelector('#append'); const child = document.createElement('p'); child.textContent = 'i\'m child.'; element.appendChild(child); </script></body></html>最后
尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。
假如文章能够对您有所帮助，我便感到十分荣幸。如若文章能被您点赞，那便是万分荣幸~
说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 《图解HTML》第五节 HTML编码规范
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 《图解HTML》第五节 HTML编码规范
