HTML规范
使用小写元素名
HTML5 元素名可以使用大写和小写字母。
应该使用小写字母：
- 混合了大小写的风格是非常糟糕的。
- 开发人员通常使用小写 (类似 XHTML)。
- 小写风格看起来更加清爽。
- 小写字母容易编写。
<!-- 错误 -->
<SECTION>
<p>这是一个段落。</p>
</SECTION>
<!-- 错误 -->
<Section>
<p>这是一个段落。</p>
</SECTION>
<!-- 正确 -->
<section>
<p>这是一个段落。</p>
</section>
关闭所有 HTML 元素
在 HTML5 中, 你不一定要关闭所有元素 (例如
元素)，但我们应该每个元素都要添加关闭标签。
<!-- 错误 -->
<section>
<p>这是一个段落。
<p>这是一个段落。
</section>
<!-- 正确 -->
<section>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
</section>
关闭空的 HTML 元素
在 HTML5 中, 空的 HTML 元素也不一定要关闭，
我们可以这么写：
<!-- 错误 -->
<meta charset="utf-8">
应该始终这么写：
<!-- 正确 -->
<meta charset="utf-8" />
使用小写属性名
HTML5 属性名允许使用大写和小写字母。
应该始终使用小写字母属性名：
<!-- 错误 -->
<div CLASS="test">
<!-- 正确 -->
<div class="test">
属性值使用引号包裹
HTML5 属性值可以不用引号。
属性值应该始终使用引号：
- 如果属性值含有空格需要使用引号。
- 混合风格不推荐的，建议统一风格。
- 属性值使用引号易于阅读。
<!-- 错误 -->
<div class=test container>
<!-- 正确 -->
<div class="test container">
图片的alt属性
图片使用使用 alt 属性。 在图片不能显示时，它能替代图片显示。
<!-- 推荐 -->
<img decoding="async" src="html5.gif" alt="HTML5">
定义好图片的尺寸，在加载时可以预留指定空间，减少闪烁。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
空格和等号
等号前后可以使用空格。
但是实际开发中不应该这么做
<!-- 错误 -->
<link rel = "stylesheet" href = "styles.css">
<!-- 正确 -->
<link rel="stylesheet" href="styles.css">
避免一行代码过长
使用 HTML 编辑器，左右滚动代码是不方便的。
每行代码尽量少于 80 个字符。（可在编辑器配置）
空行和缩进
不要无缘无故添加空行。
为每个逻辑功能块添加空行，这样更易于阅读。
缩进使用两个空格，不建议使用 TAB。
比较短的代码间不要使用不必要的空行和缩进。
<!-- 不推荐 -->
<body>
<h1>主标题</h1>
<h2>子标题</h2>
<p>
段落段落段落段落段落段落段落段落段落
段落段落段落段落段落段落段落段落段落
段落段落段落段落段落段落段落段落段落
</p>
</body>
<!-- 推荐 -->
<body>
<h1>主标题</h1>
<h2>子标题</h2>
<p>段落段落段落段落段落段落段落段落段落。
段落段落段落段落段落段落段落段落段落。
段落段落段落段落段落段落段落段落段落。</p>
</body>
标签语义化
现在开发基本是SPA单页面应用，但是并不代表语义化标签就无用武之地。使用语义化标签对于后期的维护，能减少理解成本，快速理解页面结构，是非常有必要的，不应该整个页面都是div + span。
8910
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
