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、打补丁。