尽量遵循 HTML 标准和语义,但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。
1.通用约定
标签
- 自闭和 (self-closing) 标签, 无需闭合 (例如:
img
input
br
hr
等); - 可选的闭合标签 (closing tag),需闭合 (例如:
</li>
或</body>
); - 尽量减少标签数量
1 | <img src="//atts.w3cschool.cn/attachments/image/cimg/google.png" alt="Google"> |
Class 与 ID
- class 应以功能或内容命名,不以表现形式命名;
- class 与 id 单词字母小写,多个单词组成时,采用中划线
-
分隔; - 使用唯一的 id 作为 Javascript hook,同时避免创建无样式信息的 class;
1 | <!-- Not Recommended --> |
属性顺序
HTML 属性应该按照特定的顺序出现以保证易读性。
- id
- class
- name
- data-xxx
- src, for, type, href
- title, alt
- aria-xxx, role
1 | <a id="..." class="..." data-model="..." href="###"></a> |
引号
属性的定义,统一使用双引号。
1 | <!-- Not recommended --> |
嵌套
a 不允许嵌套 div
这种约束属于语义嵌套约束,与之区别的约束还有严格嵌套约束,比如 a 不允许嵌套 a
。
严格嵌套约束在所有的浏览器下都不被允许;而语义嵌套约束,浏览器大多会容错处理,生成的文档树可能不太一样。
语义嵌套约束
<li>
用于<ul>
或<ol>
下;<dd>
,<dt>
用于<dl>
下;<thead>
,<tbody>
,<tfoot>
,<tr>
,<td>
用于<table>
下;
严格嵌套约束
- inline-Level 元素,仅可以包含文本或其他 inline-Level 元素;
<a>
里不可以嵌套交互式元素<a>
、<h1>~<h6>
、<p>
、<ul>/<ol>/<li>
、<dl>/<dt>/<dd>
、<form>
等。
布尔值属性
HTML5 规范中,disabled
、 checked
、selected
等属性不用设置值。
1 | <input type="text" disabled> |
2.语义化
没有 CSS
的 HTML
是一个语义系统而不是UI系统。
通常情况下,每个标签都是有语义的,所谓语义就是你的衣服分为外套,裤子,裙子,内衣等,各自有对应的功能和含义。
此外,语义化的 HTML
结构,有助于机器(搜索引擎)理解,另一方面多人协作时,能迅速了解开发者意图。
常见标签语义
标签 | 语义 |
---|---|
<p> |
段落 |
<h1><h2><h3>... |
标题 |
<ul> |
无序列表 |
<ol> |
有序列表 |
<blockquote> |
大段引用 |
<cite> |
一般引用 |
<b> |
为样式加粗而加粗 |
<strong> |
为强调内容而加粗 |
<i> |
为样式倾斜而倾斜 |
<em> |
为强调内容而倾斜 |
code |
代码标识 |
abbr |
缩写 |
示例
将你构建的页面当作一本书,将标签的语义对应其功能和含义:
- 书的名称:
<h1>
- 书的每个章节标题:
<h2>
- 章节内的文章标题:
<h3>
- 小标题/副标题:
<h4><h5><h6>
- 章节的段落:
<p>
3.这样去写你的HTML
文档声明:<!Doctype>
为了兼容性更好,特别是在向后兼容的页面,推荐写法:<!Doctype html>
链接:<a>
互联网的联几乎可以说是用 <a>
来实现的,作为一个页面最常见的元素,我们应该如何对待呢?
- 为关键链接添加
accesskey
- 除非万不得已,不要去掉
focus
的虚线框
1 | <a href="" title="" accesskey="M" rel="">Link</a> |
缩写:<abbr>
HTML tag 的正确使用非常重要,这有利于读屏软件使用者对于页面结构的正确理解。特别是 <h1><h2><h3>
这些标签,滥用非常容易造成结构费解。
对于 <abbr>
最重要的应该是添加一个 title
属性对缩写进行描述,比如:
1 | <abbr title="Web Developer">WD</abbr> |
大段引用:<blockquote>
,一般引用:<cite>
有大段引用的时候使用 <blockquote>
,而行内引用则使用 <cite>
,让你的结构更加易读。
删除:<del>
当需要强调某些东西是被删除的,可以使用 <del>
标签
定义列表:<dl>
<dl>
最好是使用在某些有“定义”意义的条目,如 w3cschool 的例子,对牛奶和咖啡的定义:
1 | <dl> |
有序/无序列表:<ol>/<ul>
列表对于每个前端来说都再熟悉不过,因为列表的结构可以非常灵活的应用在导航、列表、Tab等。但有一点还是需要明白的,那就是不要相信什么 <ul><ol>
是 <table>
的替代品。在我们常用的 HTML tag 中,每个标签都有自己的作用,谁都不是谁的替代品。
表格:<table>
不要用段落或列表来代替表格。除非万不得已,并且它们是可以转换的。另外还有一些要注意的点:
- 给
<table>
添加summary
属性 (HTML5不再支持该属性) - 添加
<tbody>
,如果没添加,浏览器会自动为你添加 - 必要时使用
<col><colgroup>
来控制表格的栏
格式化片段:<code>/<pre>
<code>
是指 computer code text
,而 <pre>
是指 preformatted text
。<pre>
的范围更广,并且是块状元素,可能被用来格式化各种文本,特别是代码。使用没有特别需要注意的,主要是语义上的正确使用,不如不要用 <pre>
来代替一般的 <p>
。
换行:<br>
在现代网页中,使用 <br>
的情况是非常少见的。网页中的留白,一般是使用 CSS 的 padding 或 margin 来实现。
分割线:<hr>
<hr>
具有非常良好的语义作用。问题在于它的视觉效果很难控制,一般也很少会用到。
无语义标签:<div>/<span>
其实 <div>/<span>
两个标签是有语义的,都是 defines a section in a document
,和 h5 中是 <section>
其实是一样的。只是因为搜索引擎的原因,搜索引擎认为它们是无语义的,因此它们就成为了“无语义”标签。推荐用法是尽量用来作为页面框架的容器,比如布局、添加额外的视觉效果,而不是段落等的替代品。
段落/标题:<p>,<h1>/<h2>/<h3>...
见 2.2
强调:<em>/<strong>
<em>
是 emphasize 的缩写,而 <strong>
是 strong emphasize。基本已经被废置的 <i>
和 <b>
就相当于现在的 <em>
和 <strong>
。一般情况下按内容重要性排序:strong > em = cite。
表单项:<input>/<textarea>/<select>...
表单项是 HTML 中相对比较复杂的标签,需要注意的点也比较多:
- 需要给每个表单项添加
<label>
对其进行描述,当不能使用<label>
时,为表单添加 title 属性。 - 当表单是必填项时,使用
*
符号来标记。 - Flash 创建表单项一般是不会生成
<label>
的,请勾上auto label
选项。
图片:<img>
对于图片,盲人看不到。提供 alt 来表示替代文本,告诉它们这是一张什么样的图。
框架:<iframe>
尽量避免使用 <iframe>
框架,但当你需要使用它的时候,最好提供一个 title 对其进行描述。
流媒体:<video>/<audio>/<object>/<embed>
- 为视听媒体提供相应的文本,包括相应的场景
- 如果像交响乐这种不能提供具体描述的,可以对其进行简单说明
- 如果文本较长,不能在当前页面展示,可以在媒体后提供一个链接到相应替代文本的链接
- 如果媒体中有可能会引起癫痫发作的,应做相应的说明
网页标题:<title>
网页中一定要包含有标题,并且每个标签应具有辨识度。
4.HEAD
文档类型
为每个 HTML 的第一行添加标准模式(standard mode)的声明,这样能确保在每个浏览器中拥有一致的表现。
1 |
语言属性
使用 lang="zh-cmn-Hans"
而不是常用的 lang="zh-CN"
。参考知乎
1 | <!-- 中文 --> |
字符编码
以无 BOM 的 utf-8 编码作为文件格式
指定字符编码的
meta
必须是head
的第一个直接子元素
1 | <html> |
IE 兼容模式
优先使用最新版本的 IE 和 Chrome 内核。
1 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
SEO 优化
1 | <head> |
viewport
viewport
:一般指的是浏览器窗口内容区的大小,不包含工具条、选项卡等内容;width
:浏览器宽度,输出设备中的页面可见区域宽度;device-width
:设备分辨率宽度,输出设备的屏幕可见宽度;initial-scale
:初始缩放比例;maximum-scale
:最大缩放比例;
为移动端设备优化,设置可见区域的宽度和初始缩放比例。
1 | <meta name="viewport" content="width=device-width,initial-scale=1.0"> |
IOS 图标
apple-touch-icon 图片自动处理成圆角和高光等效果;
apple-touch-icon-precomposed 禁止系统自动添加效果,直接显示设计原图;
1 | <!-- iPone 和 iTouch,默认 57x57 像素,必须有 --> |
favicon
在未指定 favicon 时,大多数浏览器会请求 Web Server 根目录下的 favicon.ico。为了保证 favicon 可访问,避免 404,必须遵循以下两种方法之一:
- 在 Web Server 根目录放置 favicon.ico 文件;
- 使用 link 指定 favicon;
1 | <link rel="shortcut icon" href="path/to/favicon.ico"> |
HEAD 模板
1 |
|