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

简介:

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

2.7 语义化验证

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

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

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


f1f38eddca30c26cfc4f903d40355a752a29e58f


<a href=https://yqfile.alicdn.com/ee269875c704244200191c1ab66e2d293b3874e8.png" >

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

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


<a href=https://yqfile.alicdn.com/2006452b868b2df0979b423dd1251a0fba25029f.png" >
相关文章
|
16天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
23 0
|
22天前
|
缓存 前端开发
前端代码整洁与规范之CSS篇
【4月更文挑战第2天】 前端代码整洁与规范之CSS篇
41 4
|
7天前
|
数据采集 前端开发 网络协议
如何使用代理IP通过HTML和CSS采集数据
如何使用代理IP通过HTML和CSS采集数据
|
11天前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
19 1
|
11天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
11天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
12天前
|
前端开发 JavaScript Java
《手把手教你》系列技巧篇(十九)-java+ selenium自动化测试-元素定位大法之By css下卷(详细教程)
【4月更文挑战第11天】按计划今天宏哥继续讲解css的定位元素的方法。但是今天最后一种宏哥介绍给大家,了解就可以了,因为实际中很少用。
35 2
|
14天前
|
前端开发 JavaScript Java
《手把手教你》系列技巧篇(十八)-java+ selenium自动化测试-元素定位大法之By css中卷(详细教程)
【4月更文挑战第10天】本文主要介绍了CSS定位元素的几种方法,包括ID属性值定位、其他属性值定位和使用属性值的一部分定位。作者提供了示例代码,展示了如何使用这些方法在Java+Selenium自动化测试中定位网页元素。通过CSS选择器,可以更精确地找到页面上的特定元素,如输入框、按钮等,并进行相应的操作,如输入文本、点击等。文章还提供了实际运行代码后的控制台输出和浏览器动作的示例。
50 0
|
14天前
|
前端开发 JavaScript 搜索推荐
CSS框架是前端开发中不可或缺的工具
【4月更文挑战第12天】CSS框架是前端开发中不可或缺的工具
18 2
|
15天前
|
前端开发 JavaScript Java
《手把手教你》系列技巧篇(十七)-java+ selenium自动化测试-元素定位大法之By css上卷(详细教程)
【4月更文挑战第9天】本文介绍了CSS定位方式的使用,包括它的优势和8种常用的定位方法。CSS定位相比XPath定位更快、更稳定。文章通过示例详细讲解了如何使用CSS定位元素,包括通过id、name、class name、tag name、link text、partial link text以及XPath进行定位。还提供了Java代码示例来演示如何在自动化测试中使用这些定位方法。
41 1