html 怎么让tr的css覆盖td的_简单聊聊 HTML 语义化

以前：

相信大家对 div+css 一定不陌生，以前的网页，打开就是一堆 div+css 。尽管这方便了开发者，但是这对搜索引擎和其他设备的解析却并不友好。

为了改变上述这种情况，HTML语义化逐渐地就诞生了。

---

什么是语义化？

简单来说：用正确的标签做正确的事。

如：

• 头部：header
• 导航：nav
• 主体内容：main
• 标题：h1 ~ h6
• 段落：p
• 侧边栏：aside
• 页脚：footer

---

怎么知道我的标签用的对不对？

可以尝试去掉CSS，只将HTML代码显示在页面中，看看你的内容结构是否依然清晰、好看。

你还可以把代码上传到 W3C 标记验证服务 ，它会帮你验证你的代码是否有效或合理。

---

语义化的好处？

• 网页加载慢导致CSS文件还未加载时（没有CSS），页面仍然清晰、可读、好看。
• 提升用户体验，例如title、alt可用于解释名词或解释图片信息。
• 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息。
• 方便其他设备（如屏幕阅读器、盲人阅读器、移动设备）更好的解析页面。
• 使代码更具可读性，便于团队开发和维护。

---

怎么写出更有语义化的HTML代码？

1. 尽可能少的使用无意义的标签，如 div 和 span 。
2. 语义不明显时，如既可以使用div也可以使用p时，尽量用p，因为p在默认情况下有上下间距，对兼容特殊终端有利。
3. 不推荐使用 b、font、u、center 等纯样式标签，推荐使用 CSS 控制样式。
4. 需要强调的文本，可以使用 strong 或 em 标签，strong 默认样式是加粗显示，em 默认样式是斜体显示。
5. 使用表格时，标题用 caption，表头用 thead，主体部分用 tbody 包围，尾部用 tfoot 包围。表头和一般单元格要区分开，表头用 th，单元格用 td。
6. 表单域要用 fieldset 标签包起来，并用 legend 标签说明表单的用途（可理解为表单标题）。如：

<form>
  <fieldset>
    <legend>Personalia:</legend>    <!-- legend 可理解为表单标题 -->
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form>

7. 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

如：

<label for="username">请输入用户名: </label> 
<input type="text" id="username" name="username">

或者直接在label中内嵌控件。如：

<label>请输入用户名<input type="text" id="username"    name="username"></label>

---

关于命名规范：

标签的语义化，提高了代码的可读性，同理，我们在命名时，无论是CSS或JS等，命名时一定要遵循命名规范，同时要能体现出代码用途，一定不要写出 "abc" 或 使用拼音命名。

推荐一篇HTML语义化好文：

杯面isaac：初探 · HTML5语义化​zhuanlan.zhihu.com