《Web前端开发精品课 HTML与CSS进阶教程》——2.7　语义化验证

简介：

本节书摘来自异步社区《Web前端开发精品课 HTML与CSS进阶教程》一书中的第2章，第2.7节，作者： 莫振杰 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.7　语义化验证

前面这几节，我们介绍了页面语义化需要注意的各个地方。那么平常有什么好的办法来判断一个页面是否语义良好呢？一个很简单的办法就是：去掉CSS样式，然后看页面是否还具有很好的可读性。

我们都知道，很多HTML标签都有一定的默认样式，例如p标签有上下边距、strong标签对字体加粗、ul标签有缩进效果，等等。

在前面我们接触过，我们可以使用一个标签来代替另外一个标签，并且使用CSS修饰来实现相同的效果。也就是说，不同的HTML标签可以通过不同的CSS来实现相同的效果。但是“一个语义良好的页面”跟“一个语义不好的页面”在去除样式之后的表现却是截然不同的。

https://yqfile.alicdn.com/ee269875c704244200191c1ab66e2d293b3874e8.png" >

从上面两张图我们可以看出：一个语义良好的页面在“CSS裸奔”之后，可读性也是非常高的。想要查看一个页面在“CSS裸奔”下的效果，我们可以使用Firefox浏览器的一款网页调试插件“Web Developer”来测试。

在Web Developer工具栏找到“CSS”→“Disable Styles”→“Disable All Styles”并且选中，就可以查看页面去掉样式后的效果，如图2-21所示。Web Developer插件的安装和使用，请自行搜索，很简单。

https://yqfile.alicdn.com/2006452b868b2df0979b423dd1251a0fba25029f.png" >