我最开始在学习
HTML
中,和大多数初学者一样觉得这也太简单了,觉得没有多少东西,只要记住这些个标签就可以了。当我第二次学习时才发现,HTML
并没有我想象中的那么简单。其实,学习HTML的重点不在于我们掌握了多少标签,而是在于掌握标签的语义以及如何编写一个语义结构良好的页面。有些人可能会因为对标签语义的不熟悉,常常用某一个标签代替另一个标签来实现某些效果,这是不可取的。
HTML
精髓就在于标签的语义。 学习HTML
并不是看你学了多少标签,而是在于在你需要的地方能否用到正确的语义化标签。把标签用对地方,才是学习HTML的目的所在。
前端最核心的技术是
HTML、CSS、JavaScript
。 其中HTML
是网页的结构,CSS
是网页的外观,JavaScript
是网页的行为。 这三大元素中,HTML
才是最重要的,而CSS、JavaScript
只是用来修饰的,这就好比盖房子,房子再好看,如果结构不稳是会崩塌的
编写一个语义良好的页面在实际开发中极其重要。主要有两个最大的优点:
h1~h6
标题标签,h 在语义上代表header。h1~h6
在HTML语义化中占有极其重要的地位。h1~h6
不一定全部都用上,都是根据需求使用。
h1
标签表示每个页面中最高级的标题,搜索引擎会赋予h1
标签最高权重。 在W3C
标准中,没有明确规定一个页面不能有多个h1标签,但是我们还是要遵循 “一个页面只能有一个h1标签” 的原则。 因为,如果一个页面出现多个h1
,对搜索引擎是不友好的。你也不要纠结,想想高中我们写作文时,一篇作文都是只写一个标题。
搜索引擎对
h1~h6
标签比较敏感,尤其是h1和h2
。 语义良好的页面,h1~h6
应是完整有序且未出现断层的。 也就是按照 h1、h2、h3、...的顺序依次排列下来,而不是中间拉掉谁。
h1~h6
是有默认样式。 在实际开发中,很多时候我们需要为文本定义大小或字体加粗;那你是否曾想过用h1~h6
来代替CSS? 使用标签来控制样式,是一种错误的做法。HTML关注的是结构(语义),CSS关注的是样式。结构与样式应分离。
从语义上讲,页面中的标题应该使用
h1~h6
标签,不要使用 div 来代替。 div 是无语义的标签,若用 div 来代替h1~h6
,后期维护会很困难,而且对 SEO 的影响较大,因为这样会让这个页面丢失大量权重。
在
HTML
中,需要使用img
标签来表示图片。 关于图片的语义化,需从以下 2 方面来介绍:
img
标签有2个重要属性:alt 和 title。 alt 属性用于图片描述,其中的描述文字是给搜索引擎看的,并且当图片无法显示时,页面会显示alt中的文字。 title 属性同样用于图片描述,但其中的描述文字是给用户看的,并且当鼠标移动到图片上时,会显示title中的内容。
<img src="" alt="给搜索引擎看的图片描述" title="给用户看的图片描述">
我们可以一眼看出一张图片描绘的是什么,但是机器却不可以,它只能读取HTML代码,通过
img标签
的 alt 属性或页面上下文来判断图片的内容。 所以,对于img标签
我们一定要给它添加alt属性
,以便搜索引擎识别图片内容。alt属性
在搜索引擎优化中也很重要,并且会被赋予一定权重。
title属性
是img标签
可选属性,可加可不加。alt属性
是img标签
必需属性,一定要添加,并在alt属性
中添加必要的描述性息。<div>
<img src="" alt=""/> <!--图片-->
<span>見贤思齊</span> <!--图注-->
</div>
图片和图注可以通过上述代码来实现,但是这种实现方式语义并不好,所以在
HTML5
中,引入了figure、figcaption
来增强图片的语义化。
<figure> <!--包含图片和图注 -->
<img src="" alt=""/> <!--图片-->
<figcaption>見贤思齊</figcaption> <!--图注-->
</figure>
在实际开发中,对于 “图片+图注” 效果,通过使用 figure元素和figcaption元素来实现,从而使得页面语义更加良好。
在实际开发中,不建议使用表格布局,应使用浮动布局或定位布局。 但对于表格数据形式,最好的选择是
table
。 在表格中,比较常用的标签是table、tr、td
,W3C为了加强表格的语义化,新增了5个标签:th、caption、thead、tbody、tfoot
:
有了新增的这几个标签,表格语义更加良好,结构更加清晰。
标签 | 说明 |
---|---|
table | 表格 |
caption | 标题 |
thead | 表头(语义划分) |
tbody | 表身(语义划分) |
tfoot | 表尾(语义划分) |
tr | 行 |
th | 表头单元格 |
td | 表格单元格 |
thead、tbody、tfoot 是表格中非常重要的3个标签,因为它们从语义上区分了表头、表身、表脚,千万不要忽视了它们的重要性。 这 3 个标签,不一定能全都用上,比如说tfoot就很少用,在实际开发中,要视情况而定。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>表格</title>
<style type="text/css">
table,th,td,thead,tbody,tfoot{
border: 1px solid #00FFFF;
}
</style>
</head>
<body>
<table>
<caption>表格语义化</caption> <!--标题-->
<thead> <!--表头-->
<tr>
<th>
姓名
</th>
<th>
语文
</th>
<th>
数学
</th>
<th>
英语
</th>
</tr>
</thead>
<tbody> <!--表身-->
<tr> <!--第2行-->
<td>王小淘</td>
<td>100</td>
<td>90</td>
<td>80</td>
</tr>
<tr> <!--第3行-->
<td>贤思齊</td>
<td>90</td>
<td>80</td>
<td>100</td>
</tr>
<tr> <!--第4行-->
<td>君初见</td>
<td>80</td>
<td>100</td>
<td>90</td>
</tr>
</tbody>
<tfoot> <!--表脚-->
<tr> <!--第5行-->
<td>平均</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
</tfoot>
</table>
</body>
</html>
表格语义化例1.png
W3C规范定义,
label标签
用于显示在输入控件旁边的说明性文字。简单来讲,就是将某个表单元素和某段说明文字关联起来。
<label for="">说明性文字</label>
label标签
的for属性值
为所关联的表单元素的id
。 例:<input id="name" type="text">
其所关联的label标签
为<label for="name"></label>
for属性
使得鼠标单击的范围扩大到label元素
上,极大地提高了用户单击的可操作性)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>表单语义化</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div>
<input id="radio1" type="radio"/>单选框
<input id="checkbox1" type="checkbox"/>复选框
</div>
<hr/>
<div>
<input id="radio2" type="radio"/><label for="radio2">单选框</label>
<input id="checkbox2" type="checkbox"/><label for="checkbox2">复选框</label>
</div>
</body>
</html>
<!--
1.在第1组表单中,只能点击单选框才能选中单选框,而点击说明文字是不能选中的。
2.在第2组表单中,点击单选框能选中单选框,而点击说明文字也能选中。
3.等价性:
<input id="radio2" type="radio"/><label for="radio2">单选框</label> 等价于
<label>单选框<input id="radio2" type="radio"/></label>
-->
在表单中,我们可以使用
fieldset标签
来给表单元素进行分组,legend标签用于定义某一组表单的标题。
<fieldset>
<legend>表单的标题</legend>
...
</fieldset>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>表单语义化</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<form action="index.aspx" method="post">
<fieldset> <!--给表单元素进行分组-->
<legend>
見贤思齊
</legend>
<p>
<label for="name">账号:<input type="text" id="name" name="name"/></label>
</p>
<p>
<label for="pwd">密码:<input type="password" id="pwd" name="pwd"/></label>
</p>
<label for="remember_me"><input type="checkbox" id="remember_me" name="remember_me"/>记住我 </label>
<input type="submit" value="登录">
</fieldset>
</form>
</body>
</html>
<!--使用fieldset标签和legend标签加强语义化后,表单形成了非常美观的书签效果-->
fieldset标签和legend标签.png
你有没有过,使用
<br/>
标签来换行,或是用多个<br/>
标签来实现元素之间的上下间距的经历? 那你有没有想过,你的用法可能是错误的呢?
<br/>
标签有自己特定的语义,不能随便用来实现换行效果。W3C
标准规定,<br/>
标签仅仅用于段落中的换行,不能用于其它情况。 也就是说,<br/>
标签只适用于p标签
内部的换行,不能用于其它标签。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>br语义化</title>
</head>
<body>
<p>
沈阳市<br/>
铁西区<br/>
翟家街道<br/>
沈阳经济开发区沈辽西路111号<br/>
沈阳工业大学
</p>
</body>
</html>
<!--这样做才是<br/>标签的正确用法-->
br标签语义化.png
在实际开发中,对于列表型数据,为了实现良好的语义,建议使用无序列表(有序列表不推荐),不建议使用div等标签来实现。 大多数情况下都是使用无序列表,极少情况下会使用有序列表。
<ul>
<li><span>1</span>HTML控制网页的结构(语义)</li>
<li><span>2</span>CSS控制网页的样式</li>
<li><span>3</span>JavaScript控制网页的行为</li>
</ul>
<!--当然以上代码,可以用以下代码代替-->
<div>
<div><span>1</span>HTML控制网页的结构(语义)</div>
<div><span>2</span>CSS控制网页的样式</div>
<div><span>3</span>JavaScript控制网页的行为</div>
</div>
<!--第2种方法,缺乏语义化,且不利于维护-->
可以看到,每一个列表项前都有数字,那应该用有序列表实现啊!那为什么我用无序列表呢? 这是因为,有序列表前的数字外观是固定的,而用无序列表可以通过
CSS
进行样式改变。
strong 用于实现加粗文本,em 用于实现斜体文字。 基于结构和样式分离的原则,标签仅仅是为了实现简单的加粗或斜体效果,一般不会用这两个。
W3C
将这两个标签赋予“ 强调 ”的语义,在strong
或em
标签内部的文本被强调为重要文本。 搜索引擎对这 2 个标签赋予一定的权重。 如果在一个页面中,为了SEO
而想要突出某些关键字,可以使用strong
和em
这 2 个标签。 一般情况下,我们会去掉strong
和em
的默认样式,然后使用CSS
重新定义新的样式,但这并不影响这 2 个标签的语义。也就是说,样式只会改变标签的外观,而不会改变标签的语义。
在
HTML
中,del和ins
这两个标签是配合使用的:
一般情况下,我们会使用CSS
来重新定义del和ins
标签的样式。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>del标签和ins标签</title>
</head>
<body>
<p>麻辣小龙虾</p>
<p><del>原价:99元/kg</del></p>
<p><ins>现在仅售:77元/kg</ins></p>
</body>
</html>
del标签和ins标签.png
想要在页面中显示一张图片,有两种方式:
img标签
。使用
img标签
添加图片,是通过HTML
来实现。 使用背景图片,是通过CSS
来实现。
那么什么时候使用
img标签
,什么时候使用背景图片呢? 我们应根据HTML
语义来判断,如果图片作为HTML
的一部分,并想要被搜索引擎识别,则应使用img标签
,例如常见的图片列表。 如果图片仅仅起到修饰作用,并不想被搜索引擎识别,则应该使用背景图片。
以上这些是在实际开发中比较常见的语义标签,
HTML5
新增了很多结构语义标签,若想要实现语义更为良好的页面,应该去主动关注。
讲了这么多,该如何判断一个页面是否语义良好呢? 最简单的一个方法是:去掉CSS样式,然后看页面是否还具有很好的可读性。 一个标签可以用另一个标签来代替,并且使用CSS修饰实现相同的效果,简单来讲,不同的HTML标签可以通过不同的CSS来实现相同的效果,但是一个语义良好的页面跟一个语义不好的页面在去除样式之后的表现是截然不同的。一个语义良好的页面在“CSS裸奔”之后,可读性也是非常高的。
要想查看一个页面在“CSS裸奔”之后的效果,我们可以使用火狐浏览器的一款网页测试插件
Web Developer
来实现。
工具栏 -> CSS -> Disable Styles -> Disable All Styles,选中之后即可查看页面去除样式之后的效果。
在
HTML5
中,除了新增的标签外,也将部分标签进行舍弃。 被舍弃的标签,总体可以分为 2 大类:
标签 | 说明 |
---|---|
basefont | 定义页面文本的默认字体、颜色或尺寸 |
big | 定义大字号文本 |
center | 定义文本居中 |
font | 定义文本的字体样式 |
strike | 定义删除线文本 |
s | 定义删除线文本 |
u | 定义下划线文本 |
标签 | 说明 |
---|---|
dir | 定义目录列表,应用 ul 替代。 |
acronym | 定义首字母缩写,应用 abbr 替代。 |
applet | 定义嵌入的 applet,应用 object 代替。 |
isindex | 定义 与文档相关的可搜索索引。 |
frame | 定义frameset中的特定一个框架。 |
frameset | 定义一个框架集。 |
noframes | 为那些不支持框架的浏览器显示文本。 |
为了实现页面的语义化,在实际开发中不应再去使用这些标签。