本节书摘来自异步社区《Web前端开发精品课 HTML与CSS进阶教程》一书中的第2章,第2.1节,作者: 莫振杰 更多章节内容可以访问云栖社区“异步社区”公众号查看。
第02章 语义化
2.1 语义化简介
由于HTML简单,很多初学者对它存在一种偏见,觉得它没多少东西,因此在学习的过程中随便对待。其实,学习HTML的重点不在于掌握了多少标签,而是在于掌握标签的语义以及如何编写一个语义结构良好的页面。
在实际开发过程中,很多人由于对标签语义不熟悉,常常用某一个标签代替另外一个标签来实现某些效果。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body{font-family:"微软雅黑";font-size:14px;}
.content
{
width:300px;
padding:10px;
border:1px dashed gray;
}
.content div
{
font-size:16px;
font-weight:bold;
height:24px;
line-height:24px;
}
</style>
</head>
<body>
<div class="content">
<div>web前端开发</div>
<p>web前端开发最核心3个技术:HTML、CSS和JavaScript。HTML控制网页的结构,CSS控制网页的样式,JavaScript控制网页的行为。</p>
</div>
</body>
</html>
在浏览器预览效果如图2-1所示。
![713c8c8b6bd3b2c422ff54aa0aed08755f2daafa](https://i-blog.csdnimg.cn/blog_migrate/6d7936533a25f81797d237bb73779d3e.png)
对于上面的标题效果,正确的做法应该是使用h1~h6标签来实现,但这里却使用div来代替了。虽然页面效果一样,但是这种“用某一个标签代替另外一个标签来实现相同效果”的做法是完全不可取的,因为它违背了HTML这门语言的初衷。
HTML的精髓就在于标签的语义。在HTML中,大部分标签都有它自身的语义,例如p标签,表示的是“paragraph”,标记的是一个段落;h1标签,表示“header1”,标记的是一个最高级标题……而div和span是无语义的标签,我们应该尽可能少用。
HTML很简单,因此很多初学者往往忽略了它的目的和重要性。我们学习HTML并不是看自己学了多少标签,更重要的是在你需要的地方能否用到正确的语义化标签。把标签用在对的地方,这才是HTML学习的目的所在。
我们都知道前端最核心的技术是HTML、CSS和JavaScript这三种。其中HTML是网页的结构,CSS是网页的外观,JavaScript是网页的行为。在这三大元素中,HTML才是最重要的,而CSS和JavaScript只是用来修饰结构的。就像你盖房子,房子装饰得再漂亮,如果结构不稳也容易塌。
整站开发时,编写的代码往往都是成千上万行,如果我们全部使用div和span来代替语义化标签,后期维护会非常困难。此外对于一个页面来说,我们可以根据一个页面的外观来判断哪些是标题,哪些是图片。但是搜索引擎跟人不一样,它可“看不懂”一个页面长什么样的。它只会根据HTML代码来识别。搜索引擎一般都是根据HTML标签来识别这里是一个img标签,那里是一个p标签等。如果整个页面都是div和span,搜索引擎小蜘蛛肯定会迷路,可能以后都不想来光顾你这个站点。要是这样的话,你崩溃了,你的老板也跟着崩溃了。
从上面我们知道,编写一个语义结构良好的页面在实际开发中极其重要。主要有两个最大的优点:①利于开发调试和后期维护;②利于搜索引擎优化。在这一章,我们从以下7个方面给大家详细讲解HTML语义化。
(1)标题语义化。
(2)图片语义化。
(3)表格语义化。
(4)表单语义化。
(5)其他语义化。
(6)语义化验证。
(7)HTML 5摒弃的标签。