网页前端开发之HTML标签语义
标签名 | 英文全拼 | 中文翻译 |
div | division | 分隔 |
span | span | 范围 |
ol | ordered list | 排序列表 |
ul | unordered list | 不排序列表 |
li | list item | 列表项目 |
dl | definition list | 定义列表 |
dt | definition term | 定义术语 |
dd | definitiion description | 定义描述 |
del | deleted | 删除 |
ins | inserted | 插入 |
h1~h6 | header 1 to header 6 | 标题1到标题6 |
p | paragraph | 段落 |
hr | horizontal rule | 水平尺 |
a | anchor | 锚 |
abbr | abbreviation | 缩写词 |
acronym | acronym | 取首字母的缩写词 |
address | address | 地址 |
var | variable | 变量 |
pre | preformatted | 预定义格式 |
blockquote | block quotation | 区块引用语 |
strong | strong | 加重 |
em | emphasized | 加重 |
b | bold | 粗体 |
i | italic | 斜体 |
big | big | 变大 |
small | small | 变小 |
sup | superscripted | 上标 |
sub | subscripted | 下标 |
br | break | 换行 |
center | center | 居中 |
font | font | 字体 |
u | underlined | 下划线 |
s | strikethrough | 删除线 |
fieldset | fieldset | 城集 |
legend | legend | 图标 |
caption | caption | 标题 |
其中,div和soan其实是没有语义的,它们只是分别用作块级元素和行内元素的区域分隔符。
如何确定你的标签是否语义良好
判断网页标签语义是否良好的一个简单方法就是:去掉样式,看网页结构是否组织良好有序,是否仍然有很好的可读性。 语义良好的网页去掉样式后结构依然很清晰。
同样的设计图,不同的HTML标签可以通过不同的CSS实现同样的页面,但语义不好的CSS布局和语义良好的CSS布局在去样式后的表现却可能截然不同。
如果选用的标签几乎全是不带语义的,那么在去样式后网页中几乎看不到任何结构信息,可读性非常差;如果选用的都是语义适合的标签,去样式后网页依然具有非常好的可读性。
所以我们的开发过程中,不要拿到一个任务后就马上开始写代码,在拿到设计稿后不要急于马上进行开发,而是先根据页面结构进行分析,先考虑好框架,适用的标签等,会让整个开发过程更有规划、更顺畅,是一个先慢后快的过程。反之就可能出现先快后慢的局面,越到后期开发速度越慢,反复修改bug、打补丁。