Web前端编写高质量代码-高质量的HTML

标签（空格分隔）： Web前端

文章目录

Web前端编写高质量代码-高质量的HTML@[toc]标签的语义：标签语义对照表表单：表格： 语义化标签时应该注意哪些问题？div、spanh1-h6： 为什么要使用语义化标签？如何确定你的标签是否语义良好？

标签的语义：

标签语义对照表

标签名 英文全拼 中文翻译 div division 分隔 span span 范围 ol ordered list 排序列表 ul unordcred list 不捧序列表 li list item 列表项目 dl definition list 定义列表 dt definition term 定义术语 dd definition description 定义描述 del deleted 删除 ins inserted 插入 hl~.h6 header 1 to header 6 标题1到标题6 P paragraph 段落 hr horizontal rule 水平尺 a anchor 锚 abbr abbreviation 缩写词 acronym acronym 取首字母的缩与词 address address 地址 var variable 变量 pre prefdrmatted 预定义格式（原样输出） 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 別除线

表单：

标签语义对照表

form 表单 fieldset 域集 legend 域集名(说明表单用途) label 表单项

例子：

<form action="" method=""> <fieldset> <legend>登录</legend> <p> <label for="name">账号</label> <input id="name" type="text" /> </p> </fieldset> </form> <style> fieldset { border: none; } /* 去除默认边框 */ legend { display: none; } /* legend说明表单用途，一般样式不需要，满足设计需求，将其隐藏 */ </style>

表格：

标签语义对照表

table 表格 caption 表格标题 thead 表格头部 tbody 表格主体 tfoot 表格尾部 tr 单元行 th 表头用th td 一般单元格

例子：

<table border="1"> <caption>几种页面实现的比较</caption> <thead> <tr> <th>实现方式</th> <th>代码量</th> <th>搜索引擎友好</th> <th>特殊终端兼容</th> </tr> </thead> <tbody> <tr> <th>table 布局 </th> <td> 多 </td> <td> 差 </td> <td> 一 般 </td> </tr> <tr> <th>乱用标签的 CSS 布局</th> <td>少</td> <td>一般</td> <td>差 </td> </tr> <tr> <th>标签语义良好的CSS布局</th> <td>少</td> <td>好</td> <td>好</td> </tr> </tbody> </table>

语义化标签时应该注意哪些问题？

不要使用纯样式标签，例如b、font和u等，改用CSS设置。语义上需要强调的文本可以包在strong或em标签里，strong和em有“强调”的语意，其中strong的默认样式是加粗，而em的默认样式是斜体。

div、span

1、div和span其实是没有语义的，它们只是分别用作块级元素和行内元素的区域分隔符。

2、尽可能少地使用无语义标签div和span；当页面内标签无法满足涉及需要时，才会适当添加div和span等无语义标签来辅助实现

3、在语义不明显，既可以用p也可以用div的地方，尽量用p，因为p默认情况下有上下间距，去样式后的可读性更好，对兼容特殊终端有利；

h1-h6：

h标签的含义是“标题”，搜索引擎对这个标签比较敏感，尤其是hl和h2。一个语义良好的页面，h标签应该是完整有序没有断层的。也就是说，要按照hl、h2、h3、h4这样依次排列下来，不要出现类似hl、h3、h4，漏掉h2的情况。

为什么要使用语义化标签？

代码量少，浏览器端的下载时间就会更短，语义清晰就会对搜索引擎更友好。

如何确定你的标签是否语义良好？

判断网页标签语义是否良好的一个简单方法就是：去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。语义良好的网页去掉样式后结构依然很清晰。

**工具：Web Developer是Firefox上的一款网页调试插件。**它提供了丰富的调试功能，其中有一项是禁用网页中的CSS，快捷键是Ctrl + Shift + S。有了这个功能，我们可以轻松而快速地査看网页去样式后的表现。