HTML代码编码规范

博客来自：http://www.gbtags.com/gb/tutorials/215/1163.htm

个人主页：http://www.itit123.cn/ 更多干货等你来拿

HTML代码编码规范

为了保证项目代码的质量，书写HTML和CSS相关代码的时候，需要遵循一定的规则和逻辑，虽然HTML相关代码没有太复杂的逻辑，并且记得一定要验证代码正确性，下面是一些相关的编码规范

书写符合兼容性的代码

为了保证代码一致性，需要保证HTML代码嵌套正确，比如，是否正确的闭合元素

不符合编码规范

<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.

符合编码规范

<p class="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</strong>.</p>
<p class="intro">The caramel apple cider is delicious.</p>

使用语义化的元素

选择和使用具体元素的时候，注意一定要选择能够正确表达HTML结构和逻辑的元素，否则不利于他人理解书写代码的逻辑性

不符合编码规范

<span class="heading"><strong>欢迎登陆</span></strong>
<br><br>
好久没有登录本站，最近如何？
<br><br>

符合编码规范

<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>

使用正确的文档结构

文档结构是HTML编辑基础，确定使用最新正确的文档结构，不要随意的删除和添加基础文档结构

不符合编码规范

<html><h1>Hello World</h1><p>This is a web page.</p>
</html>

符合编码规范

<!DOCTYPE html>
<html><head><title>Hello World</title></head><body><h1>Hello World</h1><p>This is a web page.</p></body>
</html>

保证语法的统一

随着页面内容的增加，管理HTML会非常的麻烦，好在这里有一些规则能够帮助我们将语法设计的更加干净和有组织。包扩：

在元素名称，属性，值中使用小写字母
缩进嵌套的元素
严格使用双引号，不要写单引号，或者干脆不使用引号
自闭合的元素不要写斜杠（例如，<img>）
忽略boolean属性对应的值

下面是一对例子：

不符合编码规范

<Aside>
<h3>Chicago</h3>
<H5 HIDDEN='HIDDEN'>City in Illinois</H5>
<img src=chicago.jpg alt="Chicago, the third most populous city in the United States" />
<ul>
<li>234 square miles</li>
<li>2.715 million residents</li>
</ul>
</ASIDE>

符合编码规范

<aside><h3>Chicago</h3><h5 hidden>City in Illinois</h5><img src="chicago.jpg" alt="Chicago, the third most populous city in the United States"><ul><li>234 square miles</li><li>2.715 million residents</li></ul>
</aside>

使用实在的ID或者Class值

创建id和class可能是书写HTML代码最坑的地方。这些定义必须和页面逻辑和结构息息相关，而并非仅仅用来定义页面的样式。下面是具体代码例子：

不符合编码规范

<p class="red">出错，请刷新~</p>

符合编码规范

<p class="alert">出错，请刷新~</p>

在图片中使用说明文字

书写图片中alt属性对应值，会帮助其它相关体验软件更好的识别文字，同时对于搜索引擎来说，alt属性能更好的帮助搜索引擎找到对应的内容

不符合编码规范

<img src="puppy.jpg">

符合编码规范

<img src="puppy.jpg" alt="漂亮的小宠物">

将内容和样式隔离

千万不要使用行内的样式。这样会造成非常差的代码维护性和重用性。尽量使用外部的样式文件来定义样式。

不符合编码规范

<p style="color: #393; font-size: 24px;">Thank you!</p>

符合编码规范

<p class="alert-success">Thank you!</p>

避免过度使用div

div在过去的前端代码开发中会被广泛的使用，用来定义布局或者具体内容，但随着HTML5标准的发布，带来了一些新的HTML元素，例如：

section
article
aside
更多

因此我们尽量使用语义明显的标签来构建布局，例子如下：

不符合编码规范

<div class="container"><div class="article"><div class="headline">Headlines Across the World</div></div>
</div>

符合编码规范

<div class="container"><article><h1>Headlines Across the World</h1></article>
</div>