高质量的HTML

博前“废话”：

昨天理解到javaweb的前端技术有html、css、javascript等技术，然后今天一大早就迫不及待地开始动手敲代码，但是敲着敲着发现代码混乱、质量也不高，更别说性能了。那怎么办呢？ 脑袋第一反应是“问度娘”，结果还真有一些专门讲解然后优化代码的书籍。加之今天讲师推荐了一本《编写高质量代码 web前端开发修炼之道》曹刘阳著，于是拜读了此书。以下是对拜读此书的一些总结。

高质量的HTML

1.标签的语义
既然学习html语言，那么标签肯定不陌生。这里对常用的标签做一个总结.

标签	全拼	含义
p	paragraph	段落
a	anchor	锚
h1~h6	header1~6	标题1-标题6
font	font	字体
div	divisjon	分隔
span	span	范围
ul	unordered list	不排序列表
ol	ordered list	排序列表
li	list item	列表项目
table	table	表格
img	image	图片
input	input	用于收集用户信息
form	form	表单

其中span、div其实没有语义的，span作用于行内元素，div作用于作用于块级元素。

2.为什么要将标签语义化呢？

现在的搜索引擎越来越多了，当然也各有差异。有些搜索引擎看不到定义的视觉效果，能看到的是代码，而且只能通过标签来判断语义。然而带语义的标签是通用的。这样一来，搜索引擎便能更好的显示视觉效果了。

3.到底怎样提高代码质量?

提高代码质量无非就是代码规范化，使用带语义的标签进行布局。下面举一个例子：
<div class="h2">带标签的语义
<a href="http://www.w3school.com.cn">还有更多哟</a></div>
<div class="p">在w3school上还有更多值得我们学习的带语义的标签</div>
<style type="text/css">
.h2{ position:relative;background:blue;}
.p{text-align:center;color:red;}
</style>
上面是一个初学者会写的代码。
<h2>带标签的语义</h2>
<a href="http://www.w3school.com.cn">还有更多哟</a>
<p>在w3school上还有更多值得我们学习的带语义的标签</p>
<style type="text/css">
h2{ position:relative;background:blue;}
p{text-align:center;color:red;}
</style>
这样的代码看起来是不是要好很多。
通过观察我们可以发现第一段代码里使用的是类选择器，而第二段则使用的是标签选择器。换句话说，标签选择器的代码质量高于类选择器。

4.使用语义化标签时应注意如下几个问题?

1. 尽可能少地使用无语义标签div和span
2. 在语义不明显，既可以用div的地方也可以用p标签的地方，尽量使用p标签，因为p标签在默认情况下有上下间距，去除样式后的可读性更好，对兼容性特殊终端有利
3. 不要使用纯样式标签，比如font、b和del等，改用CSS设置。而强调文本可以使用strong、em,分别对文本进行加粗、斜体进行”强调”。