《编写高质量代码-Web前端开发修改之道》笔记--第三章 高质量的HTML
标签的语义
HTML标签的设计都是有语义考虑的，部分标签的中文翻译图示及本章内容参看：3.1 标签的语义。其中div和span是没有语义的，它们只是分别用作块儿级元素和行内元素的区域分割符。
为什么要使用语义化标签
搜索引擎看不到视觉效果，看到的只是代码，只能通过标签来判断内容的语义。
专注于结构：通过标签可以知道“这是个标题”、“这是个段落”，等等。
CSS布局的一个误区：只要不是table布局，只要是通过CSS布局就是对的，就是符合Web标准的。
在HTML、CSS、JavaScript这三大元素中，HTML才是最重要的，结构才是重点，样式是用来修饰结构的。正确的做法是，先确定HTML ，确定语义的标签，再来选用合适的CSS。
如何确定你的标签是否语义良好
浏览器会根据标签的语义给定一个默认的样式。判断网页标签语义是否良好的一个简单方法是：去掉样式，看网页结构是否组织清晰有序，是否仍然有良好的可读性。
值得重点提及的h标签，其含义为“标题”，搜索引擎对这个比较敏感，尤其是h1,h2。h标签应该是完整有序没有断层的。即h1、h2、h3、h4这样依次列排下来，不能出现漏掉h2的情况。
调试插件：Firefox--Web Developer。参考站点：W3C官方站点。
常见模块你真的很了解吗
标题和内容
<div> <h2>标题</h2> <a href="#">更多</a> </div> <p> 内容 </p>
表单
<form action="" method=""> <fieldset> <legend>登录表单</legend> <p> <label for="name">账户：</label><input type="text" id="name" name="name" /> </p> <p> <label for="pwd">账户：</label><input type="text" id="password" name="password" /> </p> <input type="submit" value="登录" /> </fieldset> </form>
一般来说，表单域要用fieldset标签包起来并用legend标签说明表单的用途。每个input标签对应的说明文本都需要用label标签，并通过为input设置id属性，在label标签中设置for=someld，来让说明文本和相应的input关联起来。在用户点击这个说明文本的时候，相关联的input自动获得焦点，方便用户输入信息或变成相应的选中状态等。
表格
table。虽然在CSS布局中table不推荐用来布局，但它仍有一席之地--在二维数据展示方面它是最好的选择。
表格标题要用caption，表头要用thead包围，主体部分用tbody包围，尾部要用tfoot包围，表头一般和单元格要区分开，表头用th，一般单元格用td。
语义化标签应注意的一些其它问题
为了保证网页去样式后的可读性，并且又符合Web标准，我们应注意以下几点：
- 尽量少的使用无语义标签div和span；
- 在语义不明显，既可以用p也可以使用div的情况下，尽量用p，p默认情况下有上下间距，去样式后的可读性更好，对兼容特殊终端有利；
- 不要使用纯样式标签，如b、font和u等，改用CSS设置。语义上需要强调的文本可以包在strong或em标签里，strong和em有“强调”的语意，strong默认加粗，em默认斜体。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
