恶心_3da6
恶心_3da6

书写HTML的规范

文章目录

1.1通用约定

标签

Class 与 ID

属性顺序

引号

嵌套

语义嵌套约束

严格嵌套约束

布尔值属性

1.2语义化

常见标签语义

示例

1.3HEAD

文档类型

语言属性

字符编码

IE兼容模式

SEO优化

viewport

iOS图标

favicon

完整的HEAD模板

1.1通用约定

标签

自闭合（self-closing）标签，无需闭合 ( 例如： img input br hr 等 )；

可选的闭合标签（closing tag），需闭合 ( 例如：

或 )；

尽量减少标签数量；

xxx

     

  • Style

    •  

  • Guide

 

1

2

3

4

5

6

7

8

9

10

11

12

13

Class 与 ID

class 应以功能或内容命名，不以表现形式命名；

class 与 id 单词字母小写，多个单词组成时，采用中划线-分隔；

使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class；

1

2

3

4

5

属性顺序

HTML 属性应该按照特定的顺序出现以保证易读性。

id

class

name

data-xxx

src, for, type, href

title, alt

aria-xxx, role

...

1

2

3

4

5

引号

属性的定义，统一使用双引号：

Google

Google

1

2

3

4

5

嵌套

a 不允许嵌套 div这种约束属于语义嵌套约束，与之区别的约束还有严格嵌套约束，比如a 不允许嵌套 a。

严格嵌套约束在所有的浏览器下都不被允许；而语义嵌套约束，浏览器大多会容错处理，生成的文档树可能相互不太一样。

语义嵌套约束

  • 用于
      或
        下；

        ,
        用于
        下；

        , , , , 用于

        下；

        严格嵌套约束

        inline-Level 元素，仅可以包含文本或其它 inline-Level 元素;

        里不可以嵌套交互式元素、