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

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

2.7 语义化验证

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

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

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


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


《Web前端开发精品课 HTML与CSS进阶教程》——2.7 语义化验证https://yqfile.alicdn.com/ee269875c704244200191c1ab66e2d293b3874e8.png" >

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

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


《Web前端开发精品课 HTML与CSS进阶教程》——2.7 语义化验证https://yqfile.alicdn.com/2006452b868b2df0979b423dd1251a0fba25029f.png" >
上一篇:前端面试送命题 - callback,promise,generator,async-await


下一篇:前端页面兼容性问题学习