2.语义化-HTML进阶
一、什么是语义化?
1.第二次学习的感受
我最开始在学习
HTML
中,和大多数初学者一样觉得这也太简单了,觉得没有多少东西,只要记住这些个标签就可以了。当我第二次学习时才发现,HTML
并没有我想象中的那么简单。其实,学习HTML的重点不在于我们掌握了多少标签,而是在于掌握标签的语义以及如何编写一个语义结构良好的页面。有些人可能会因为对标签语义的不熟悉,常常用某一个标签代替另一个标签来实现某些效果,这是不可取的。
2.HTML精髓
HTML
精髓就在于标签的语义。 学习HTML
并不是看你学了多少标签,而是在于在你需要的地方能否用到正确的语义化标签。把标签用对地方,才是学习HTML的目的所在。
3.HTML的重要性
前端最核心的技术是
HTML、CSS、JavaScript
。 其中HTML
是网页的结构,CSS
是网页的外观,JavaScript
是网页的行为。 这三大元素中,HTML
才是最重要的,而CSS、JavaScript
只是用来修饰的,这就好比盖房子,房子再好看,如果结构不稳是会崩塌的
4.语义化优点
编写一个语义良好的页面在实际开发中极其重要。主要有两个最大的优点:
- 利于开发调试和后期维护。
- 利于搜索引擎优化。
二、标题语义化
h1~h6
标题标签,h 在语义上代表header。h1~h6
在HTML语义化中占有极其重要的地位。h1~h6
不一定全部都用上,都是根据需求使用。
1.一个页面只能有一个h1标签
h1
标签表示每个页面中最高级的标题,搜索引擎会赋予h1
标签最高权重。 在W3C
标准中,没有明确规定一个页面不能有多个h1标签,但是我们还是要遵循 “一个页面只能有一个h1标签” 的原则。 因为,如果一个页面出现多个h1
,对搜索引擎是不友好的。你也不要纠结,想想高中我们写作文时,一篇作文都是只写一个标题。
2.h1~h6之间不要出现断层
搜索引擎对
h1~h6
标签比较敏感,尤其是h1和h2
。 语义良好的页面,h1~h6
应是完整有序且未出现断层的。 也就是按照 h1、h2、h3、...的顺序依次排列下来,而不是中间拉掉谁。
3.不要用h1~h6来定义样式
h1~h6
是有默认样式。 在实际开发中,很多时候我们需要为文本定义大小或字体加粗;那你是否曾想过用h1~h6
来代替CSS? 使用标签来控制样式,是一种错误的做法。HTML关注的是结构(语义),CSS关注的是样式。结构与样式应分离。
4.不要用div来代替h1~h6
从语义上讲,页面中的标题应该使用
h1~h6
标签,不要使用 div 来代替。 div 是无语义的标签,若用 div 来代替h1~h6
,后期维护会很困难,而且对 SEO 的影响较大,因为这样会让这个页面丢失大量权重。
三、图片语义化
在
HTML
中,需要使用img
标签来表示图片。 关于图片的语义化,需从以下 2 方面来介绍:
- alt 属性和 title 属性。
- figure 元素和 figcaption 元素。
1.alt属性和title属性
img
标签有2个重要属性:alt 和 title。 alt 属性用于图片描述,其中的描述文字是给搜索引擎看的,并且当图片无法显示时,页面会显示alt中的文字。 title 属性同样用于图片描述,但其中的描述文字是给用户看的,并且当鼠标移动到图片上时,会显示title中的内容。
(1)语法
<img src="" alt="给搜索引擎看的图片描述" title="给用户看的图片描述">
我们可以一眼看出一张图片描绘的是什么,但是机器却不可以,它只能读取HTML代码,通过
img标签
的 alt 属性或页面上下文来判断图片的内容。 所以,对于img标签
我们一定要给它添加alt属性
,以便搜索引擎识别图片内容。alt属性
在搜索引擎优化中也很重要,并且会被赋予一定权重。
(2)实际开发
-
title属性
是img标签
可选属性,可加可不加。 -
alt属性
是img标签
必需属性,一定要添加,并在alt属性
中添加必要的描述性息。
2.figure元素和figcaption元素
(1)图片和图注的实现
①普通实现
<div>
<img src="" alt=""/> <!--图片-->
<span>見贤思齊</span> <!--图注-->
</div>
图片和图注可以通过上述代码来实现,但是这种实现方式语义并不好,所以在
HTML5
中,引入了figure、figcaption
来增强图片的语义化。
② figure和figcaption实现
- figure元素用于包含图片和图注。
- figcaption元素用于表示图注文字。
Ⅰ.语法
<figure> <!--包含图片和图注 -->
<img src="" alt=""/> <!--图片-->
<figcaption>見贤思齊</figcaption> <!--图注-->
</figure>
(2)实际开发
在实际开发中,对于 “图片+图注” 效果,通过使用 figure元素和figcaption元素来实现,从而使得页面语义更加良好。
四、表格语义化
在实际开发中,不建议使用表格布局,应使用浮动布局或定位布局。 但对于表格数据形式,最好的选择是
table
。 在表格中,比较常用的标签是table、tr、td
,W3C为了加强表格的语义化,新增了5个标签:th、caption、thead、tbody、tfoot
:
- th: 表头单元格。
- caption: 表格标题。
- thead、tbody、tfoot: 将表格从语义上分为3部分,表头、表身、表脚。
有了新增的这几个标签,表格语义更加良好,结构更加清晰。
1.表格标签
标签 |
说明 |
---|---|
table |
表格 |
caption |
标题 |
thead |
表头(语义划分) |
tbody |
表身(语义划分) |
tfoot |
表尾(语义划分) |
tr |
行 |
th |
表头单元格 |
td |
表格单元格 |
(1)thead、tbody、tfoot
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
五、表单语义化
1.label标签
W3C规范定义,
label标签
用于显示在输入控件旁边的说明性文字。简单来讲,就是将某个表单元素和某段说明文字关联起来。
(1)语法
<label for="">说明性文字</label>
① 说明
label标签
的for属性值
为所关联的表单元素的id
。 例:<input id="name" type="text">
其所关联的label标签
为<label for="name"></label>
Ⅰ.for属性的2个作用
- 语义上绑定了 label 元素和表单元素。
- 增强了鼠标可用性,当我们点击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>
-->
2.fieldset标签和legend标签
在表单中,我们可以使用
fieldset标签
来给表单元素进行分组,legend标签用于定义某一组表单的标题。
(1)语法
<fieldset>
<legend>表单的标题</legend>
...
</fieldset>
① 说明
Ⅰ.fieldset、legend标签2个作用
- 增强表单的语义。
- 可以定义fieldset元素的 disabled 属性来禁用整个组中的表单元素。
Ⅱ.示例
<!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
六、其它语义化
1.换行符< br/>
你有没有过,使用
<br/>
标签来换行,或是用多个<br/>
标签来实现元素之间的上下间距的经历? 那你有没有想过,你的用法可能是错误的呢?
(1)语义
<br/>
标签有自己特定的语义,不能随便用来实现换行效果。W3C
标准规定,<br/>
标签仅仅用于段落中的换行,不能用于其它情况。 也就是说,<br/>
标签只适用于p标签
内部的换行,不能用于其它标签。
① 示例
Ⅰ.例1
<!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
2.无序列表ul
(1)实际开发
在实际开发中,对于列表型数据,为了实现良好的语义,建议使用无序列表(有序列表不推荐),不建议使用div等标签来实现。 大多数情况下都是使用无序列表,极少情况下会使用有序列表。
① 示例
Ⅰ.例1
<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
进行样式改变。
3.strong标签和em标签
strong 用于实现加粗文本,em 用于实现斜体文字。 基于结构和样式分离的原则,标签仅仅是为了实现简单的加粗或斜体效果,一般不会用这两个。
(1)搜索引擎优化
W3C
将这两个标签赋予“ 强调 ”的语义,在strong
或em
标签内部的文本被强调为重要文本。 搜索引擎对这 2 个标签赋予一定的权重。 如果在一个页面中,为了SEO
而想要突出某些关键字,可以使用strong
和em
这 2 个标签。 一般情况下,我们会去掉strong
和em
的默认样式,然后使用CSS
重新定义新的样式,但这并不影响这 2 个标签的语义。也就是说,样式只会改变标签的外观,而不会改变标签的语义。
4.del标签和ins标签
在
HTML
中,del和ins
这两个标签是配合使用的:
- del:表示“ delete ”,用于定义被删除的文本。
- ins:表示“ insert ”,用于定义被更新的文本。
一般情况下,我们会使用CSS
来重新定义del和ins
标签的样式。
(1)示例
<!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
5.img标签
想要在页面中显示一张图片,有两种方式:
- 使用
img标签
。 - 使用背景图片。
(1)二者区别
使用
img标签
添加图片,是通过HTML
来实现。 使用背景图片,是通过CSS
来实现。
(2)实际开发
那么什么时候使用
img标签
,什么时候使用背景图片呢? 我们应根据HTML
语义来判断,如果图片作为HTML
的一部分,并想要被搜索引擎识别,则应使用img标签
,例如常见的图片列表。 如果图片仅仅起到修饰作用,并不想被搜索引擎识别,则应该使用背景图片。
6.总结
以上这些是在实际开发中比较常见的语义标签,
HTML5
新增了很多结构语义标签,若想要实现语义更为良好的页面,应该去主动关注。
七、语义化验证
讲了这么多,该如何判断一个页面是否语义良好呢? 最简单的一个方法是:去掉CSS样式,然后看页面是否还具有很好的可读性。 一个标签可以用另一个标签来代替,并且使用CSS修饰实现相同的效果,简单来讲,不同的HTML标签可以通过不同的CSS来实现相同的效果,但是一个语义良好的页面跟一个语义不好的页面在去除样式之后的表现是截然不同的。一个语义良好的页面在“CSS裸奔”之后,可读性也是非常高的。
1.Web Developer
要想查看一个页面在“CSS裸奔”之后的效果,我们可以使用火狐浏览器的一款网页测试插件
Web Developer
来实现。
(1)流程
工具栏 -> CSS -> Disable Styles -> Disable All Styles,选中之后即可查看页面去除样式之后的效果。
八、HTML5舍弃的标签
在
HTML5
中,除了新增的标签外,也将部分标签进行舍弃。 被舍弃的标签,总体可以分为 2 大类:
- 仅仅为了定义样式,没有任何语义,因此被舍弃。
- 很少使用 或 已被新标签代替,因此被舍弃。
1.仅为了定义样式而舍弃
标签 |
说明 |
---|---|
basefont |
定义页面文本的默认字体、颜色或尺寸 |
big |
定义大字号文本 |
center |
定义文本居中 |
font |
定义文本的字体样式 |
strike |
定义删除线文本 |
s |
定义删除线文本 |
u |
定义下划线文本 |
2.很少使用或已被新标签代替而舍弃
标签 |
说明 |
---|---|
dir |
定义目录列表,应用 ul 替代。 |
acronym |
定义首字母缩写,应用 abbr 替代。 |
applet |
定义嵌入的 applet,应用 object 代替。 |
isindex |
定义 与文档相关的可搜索索引。 |
frame |
定义frameset中的特定一个框架。 |
frameset |
定义一个框架集。 |
noframes |
为那些不支持框架的浏览器显示文本。 |
3.实际开发
为了实现页面的语义化,在实际开发中不应再去使用这些标签。
- 【请您听我说】PHP语法特点的一些看法
- 喵哈哈村的魔法考试 Round #1 (Div.2) 题解&源码(A.水+暴力,B.dp+栈)
- 查找第k小的元素(O(n)递归解法)
- C/C++对bool operator < (const p &a)const的认识,运算符重载详解(杂谈)
- C/C++中substr函数的应用(简单讲解)
- C++ STL学习之容器set和multiset (补充材料)
- Codeforces Round #410 (Div. 2)(A,字符串,水坑,B,暴力枚举,C,思维题,D,区间贪心)
- 关于int *a[常量]与int (*a)[常量]的分析与区分(详解)
- python笔记3-发送邮件(smtplib)
- 关关的刷题日记01—Leetcode 169. Majority Element
- 关小刷刷题02——Leetcode 169. Majority Element 方法2和3
- 树链剖分简单分析及模板(杂谈)
- 第十五届北京师范大学程序设计竞赛现场决赛题解&源码(A.思维,C,模拟,水,坑,E,几何,思维,K,字符串处理)
- python+requests接口自动化项目完整框架设计
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- php5.5使用PHPMailer-5.2发送邮件的完整步骤
- 详细对比php中类继承和接口继承
- 解决Keras的自定义lambda层去reshape张量时model保存出错问题
- 解决Keras中Embedding层masking与Concatenate层不可调和的问题
- 浅谈keras使用预训练模型vgg16分类,损失和准确度不变
- 关于tf.matmul() 和tf.multiply() 的区别说明
- python中执行smtplib失败的处理方法
- PHP+Ajax简单get验证操作示例
- Python matplotlib读取excel数据并用for循环画多个子图subplot操作
- python转化excel数字日期为标准日期操作
- thinkPHP框架通过Redis实现增删改查操作的方法详解
- PHP中引用类型和值类型功能与用法示例
- PHP文件上传小程序 适合初学者学习!
- php的扩展写法总结
- 实例介绍PHP删除数组中的重复元素