当前位置：首页 > 资讯 > 系统环境 > windows

《图解HTML》第五节 HTML编码规范

时间：2021-03-20 20:55 作者：张中华来源：阅读：472
扫一扫，手机访问

摘要：通过前面的四节，我们对HTML已经有了一个基本的认识和使用。可是，当我们写了很多的HTML时，我们会发现即便一样的展现效果，可是我们却写得全然不同。例如： body span style=”background color: red;” 这是span /span p style=

通过前面的四节，我们对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 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。

假如文章能够对您有所帮助，我便感到十分荣幸。如若文章能被您点赞，那便是万分荣幸~

全部评论(0)

上一篇：正则表达式的金牌辅助——模式修饰符
下一篇：浅谈JS中的JSON.stringify() 和 JSON.parse()

dedecms织梦模板店

店铺

推荐商品