目录
- 语义化
- 可访问性
- DOCTYPE
- lang
- meta
- 元素
- 换行和缩进
- 属性
- 超链接
- 标签名、属性名和属性值的使用需要符合其语义
- 使用有意义的 id 和 class 名称(英文单词为主),并尽量简短(避免使用
ad
等关键词,会被去广告插件屏蔽)
<!DOCTYPE html>
为 html 元素提供 lang 属性,表明当前内容的语言。
<html lang="en"></html>
- charset="UTF-8"
<meta charset="UTF-8">
- 使用小写标签名
- 编写成对标签的结束标签
- 省略空元素的结束标记
/
- 正确嵌套成对的标签
- 减少不必要的元素和嵌套层级
<h1></h1>
<img src="">
<ul>
<li>1</li>
<li>2</li>
</ul>
- 每个块级元素、列表项和表格元素独占一行
- 包含子元素的元素,其开始标签和结束标签均独占一行
- 每级子元素缩进两个空格
- 行内文本元素可以和其他文本放在同一行
<section>
<h2>title</h2>
<p>content</p>
<ul>
<li>1</li>
<li>2</li>
</ul>
</section>
<p><em>注意</em>这里</p>
- 使用小写字母作为属性名
- 使用双引号
""
包含属性值 - 属性值关键词使用小写字母
- 使用
-
连接属性名、id 和 class 名称中的单词
<button title="Send Message">OK</button>
<input type="radio" value="true">
当属性较多时,使用换行和缩进提高可读性。
- 在开始标签名后换行
- 使用四个空格缩进后续内容
- 将开始标签的
>
放在最后一个属性之后
<input
type="text"
name="username"
placeholder="Your username or email address">
注意:不要在文本内容中使用换行。
- 使用超链接实现页面和锚点跳转,而非其他元素的点击事件
- 禁止阻止超链接的点击事件