html语义化代码示例,html语义化(示例代码)

html语义化

> 1.使用div进行布局 不要用div进行无意义的包裹

> 2.span没有任何语义

> 3.既可以使用div也可以使用P时，尽量使用p，p为分段

> 4.不要使纯样式标签，如: b、font、u等，改用css设置

> 5.需要强调的文本，用em(斜体，不要使用i)或strong(加粗，不要使用b)

> 6.使用表格时，标题caption，表头thead，主体tbody，尾部tbody，表头th，单元用td

> 7.每个input标签加上id，要求说明部分用lebel包裹起来，加上for="someid"，关联起来

> 8.使用ul和ol来表述列表

> 9.多使用html5标签，header、nav、main、footer、article、section

> 10.简化html，尽量使用::after和::before来增加附近内容

//要实现

123

666

444

//传统做法

123

666

444

//h5语义化做法

.d1{}

.d1::before{

content:"123",

display: inline-block;

}

.d2::after{

content:"444",

display: block;

}

//这样做的好处，简化了html结构，减少dom层的渲染时间，便于维护

语义化布局

1楼

2楼

3楼

地址