前端

前端 HTML规范

2019-03-05  本文已影响0人  Diogoxiang

1.基本设置

1.1 缩进使用4个空格(四个空格在所有编辑器上显示缩进一致)

1.2 嵌套的节点应该缩进

示例：

<!--bad-->
<html>
<div class="demo">我并没有缩进</div>
<div class="demo">我确实没有缩进</div>
</html> 
<!--good--> 
<html>
    <div class="demo">我并没有缩进</div>
    <div class="demo">我确实没有缩进</div>
</html>

1.3 所有标签和属性名称一律小写(否则可能导致Angular的不兼容。)

<!-- bad-->  
<div class="demo" ATTR1="1">我使用的是大写</div>
<!--good-->
<div class="demo" attr1="1">我使用的是小写</div>

1.4 属性值一律使用双引号(统一标准，方便js的代码构建)

1.5 不要在自动闭合标签结尾处使用斜线（参考见HTML5 规范）

2.HTML doctype

统一在页面开头使用<!DOCTYPE html>这个doctype来启用标准模式，使其在每个浏览器中得到一致的渲染。

3.语言属性

建议html标签上加上lang属性。因为这样会给语音工具和翻译工具帮助，告诉它们应当怎么去发音和翻译。

具体可以在sitepoint上可以查到语言列表；

<!--示例-->
<html lang="zh-CN">
    <!-- ... -->
</html>

4.字符编码

通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）。

<!--示例-->
<head>
    <meta charset="UTF-8">
</head>

5.IE兼容模式

用 <meta> 标签可以指定页面应该用什么版本的IE来渲染；详细的解读可以点击这个链接； 不同doctype在不同浏览器下会触发不同的渲染模式。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。

<!--示例-->
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    </head>
    ...
</html>

6.标签语义化

使用有良好语义的标签，能够很好地实现自我解释，方便搜索引擎理解网页的结构，抓取重要内容。去掉样式后也会根据浏览器的默认样式很好地组织网页内容，具有很好的可读性，从而实现对特殊终端的兼容。

<!--bad-->
<div class="h2">
    标签的语义<a href="#">更多>></a>
</div>  
<div class="p">
    段落一的内容……
    <span class="strong">根据浏览器的默认样式</span>。。。
</div>  
<div class="p">段落二的内容……</div> 

<!--good-->
<div class="title">  
    <h2>标签的语义</h2>  
    <a href="#">更多>></a>  
</div>  
<p>段落一的内容……<strong>根据浏览器的默认样式 </strong>……</p>  
<p>段落二的内容</p>

7.布尔（boolean）型属性

boolean属性就是指不需要声明取值的属性，XHTML需要每个属性声明取值，但是HTML5并不需要； HTML5 规范中 disabled、checked、selected 等属性不用设置值。

<!--示例-->
<select>
    <option value="1" selected>1</option>
</select>
<input type="text" disabled>
<input type="video" value="1" checked>

8.代码嵌套

8.1尽量减少嵌套的层次

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

<!-- not well -->
<span class="imgCon">
    <img src="...">
</span>

<!-- better -->
<img class="imgCon" src="...">

8.2 嵌套要合理，不要胡乱嵌套

譬如：<li>就应该用在ul,ol的下面；dd,dt就应该嵌套在dl下面。

<!--bad-->
<ul>
    <div>我嵌套到ul里面了</div>
</ul>
<!--good-->
<ul>
    <li>我嵌套到ul里面了</li>
</ul>

8.3 块级元素不能放在标签p里面，a里面不能再嵌套a标签。

<!--bad-->
<p><div>我是块级元素</div></p>
<a href="###"><a href="###">我是锚点</a></a>
<!--good-->
<p><span>我是块级元素</span></p>
<a href="###"><strong>我是锚点</strong></a>

9.favicon

保证favicon的可访问性。 在未指定 favicon 时，大多数浏览器会请求根目录下的 favicon.ico 。为了保证favicon可访问，可以采取下面2个方法： 1.在 Web Server 根目录放置 favicon.ico 文件。 2.使用 link 指定 favicon,如右所示：<link rel="icon" href="/icon/favicon.ico">

10.viewport

上一篇 下一篇

猜你喜欢

热点阅读