《Web前端开发精品课 HTML与CSS进阶教程》——第02章 语义化2.1 语义化简介-阿里云开发者社区

开发者社区> 开发与运维> 正文

《Web前端开发精品课 HTML与CSS进阶教程》——第02章 语义化2.1 语义化简介

简介:

本节书摘来自异步社区《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

对于上面的标题效果,正确的做法应该是使用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摒弃的标签。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章