html5语义化

Qwe7

发布于 2022-05-18 08:49:47

4470

发布于 2022-05-18 08:49:47

文章被收录于专栏：网络收集

3、id和class

id和class是HTML元素中两个最基本的公共属性。一般情况下，id和class都用来选择元素，以便进行CSS操作或者JavaScript操作。但是很多新手对id和class这两个属性感到很迷茫，不知道什么时候用id,什么时候用class,甚至随便使用。1

（一）id 属性

id属性具有唯一性，也就是说在一个页面中相同的id只允许出现一次。W3C建议，对于页面关键的结构或者大结构，我们才使用id。所谓的关键结构，指的是诸如LOGO、导航、主体内容、底部信息栏等结构。对于一些小地方，还是建议使用class属性。

我们知道搜索引擎识别一个页面结构，是根据标签的语义以及id属性来识别的。因此 id属性不要轻易使用。此外，id的命名也十分关键，特别是对搜索引擎优化而言。对于id和 class的命名，我们在CSS进阶部分会详细介绍。

（二）class属性

class,顾名思义，就是“类”。它釆用的思想跟C、Java等编程语言中的“类”相似。我们可以为同一个页面的相同元素或者不同元素设置相同的class,然后使得相同class的元素具有相同的CSS样式。

如果你要为两个或者两个以上元素定义相同的样式，建议使用class属性。因为这样可以减少大量的重复代码。

注意，对于一个元素而言，我们可以定义多个classo 一般来说，定义多个class的目的在于：一般用一个class抽取公共样式，然后用另外一个class定义单独样式。

对于id和class,我们总结一下：对于页面关键结构，建议使用id；对于小地方，建议使用class。就算我们不需要对关键结构进行CSS操作或者JavaScript操作，也建议加上id.以便搜索引擎识别页面结构。

4、浏览器标题栏小图标

在浏览网页的时候，我们会发现几乎所有网站的页面在浏览器标题栏前面都会有一个小图标

想要实现这个效果，我们只需要在head标签添加一个link标签即可。

语法：

说明：

rel和type这两个属性的取值是固定形式，无需多讲。href属性取值为小图标的地址, 这个地址是根据小图标在站点文件夹路径而定的，跟图片引用路径是一样的道理。

这里注意一下，小图标格式是.ico,而不是.jpeg、.png、.gif等格式。对于.ico格式的图标制作，我们可以搜索一下“在线icon",会发现很多不错的在线工具，大家可以收藏一下。


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML进阶学习</title> 
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"/>
</head>
<body>
</body>
</html>

5、语义化

（一）简介

由于HTML简单，很多初学者对它存在一种偏见，觉得它没多少东西，因此在学习的过程中随便对待。其实，学习HTML的重点不在于掌握了多少标签，而是在于掌握标签的语义以及如何编写一个语义结构良好的页面。

在实际开发过程中，很多人由于对标签语义不熟悉，常常用某一个标签代替另外一个标签来实现某些效果。

举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
    <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>

在浏览器预览效果如图所示。

对于上面的标题效果，正确的做法应该是

使用h1 ~ h6标签来实现，但这里却使用div 来代替了。虽然页面效果一样，但是这种“用某一个标签代替另外一个标签来实现相同效果”的做法是完全不可取的，因为它违背了 HTML这门语言的初衷。

HTML的精髓就在于标签的语义。在HTML中，大部分标签都有它自身的语义，例如p标签，表示的是"paragraph",标记的是一个段落；hl标签，表示“headerl”,标记的是一个最高级标题……而div和span是无语义的标签，我们应该尽可能少用。

HTML很简单，因此很多初学者往往忽略了它的目的和重要性。我们学习HTML并不是看自己学了多少标签，更重要的是在你需要的地方能否用到正确的语义化标签。把标签用在对的地方，这才是HTML学习的目的所在。

我们都知道前端最核心的技术是HTML、CSS和JavaScript这三种。.其中HTML是网页的结构，CSS是网页的外观，JavaScript是网页的行为。在这三大元素中，HTML才是最重要的，而CSS和.JavaScript只是用来修饰结构的。就像你盖房子，房子装饰得再漂亮，如果结构不稳也容易塌。

整站开发时，编写的代码往往都是成千上万行，如果我们全部使用div和span来代替语义化标签，后期维护会非常困难。此外对于一个页面来说，我们可以根据一个页面的外观来判断哪些是标题，哪些是图片。但是搜索引擎跟人不一样，它可“看不懂” 一个页面长什么样的。它只会根据HTML代码来识别。搜索引擎一般都是根据HTML标签来识别这里是一个img标签，那里是一个p标签等。如果整个页面都是div和span,捜索引擎小蜘蛛肯定会迷路，可能以后都不想来光顾你这个站点。要是这样的话，你崩溃了，你的老板也跟着崩溃了。

从上面我们知道，编写一个语义结构良好的页面在实际开发中极其重要。主要有两个最大的优点：①利于开发调试和后期维护；②利于搜索引擎优化。

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html