社区首页 >专栏 >HTML 核心篇：语义化

HTML 核心篇：语义化

原创

qishilong

修改于 2023-02-19 13:07:00

76600

代码可运行

文章被收录于专栏：qishilong的学习记录qishilong的学习记录

运行总次数：0

代码可运行

大家好，我是qishilong。

语义化

首先我们先来了解一下什么是语义化：

语义化是前端开发里面的一个专用术语，其优点在于标签语义化有助于构架良好的html结构，有利于搜索引擎的建立索引、抓取；另外，亦有利于页面在不同的设备上显示尽可能相同；此外，亦有利于构建清晰的机构，有利于团队的开发、维护。 -- 维基百科
在编程中，语义指的是一段代码的含义 — 例如 "运行这行 JavaScript 代码会产生怎样的影响？", 或者 "这个 HTML 的元素有什么作用，扮演了什么样的角色"（而不只是 "它看上去像是什么？"。）...... -- MDN （因为篇幅过长，如果想要详细了解的同学，可以去MDN文档中关于语义化的详细介绍）
......

然后我们再来聊聊语义化：

每一个 HTML 元素都有具体的含义
1. <a></a>: a元素，超链接
2. <p></p>: p元素，段落
3. <h1></h1>: h1元素，一级标题
4. ......

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>语义化</title>
 </head>
 
 <body>
     <a href="https://www.baidu.com">百度一下</a>
     <p>这是一个段落</p>
     <h1>这是一级标题</h1>
 </body>
 
 </html>

所有元素与展示效果无关

元素展示到页面中的效果，应该由CSS决定。 因为浏览器在将元素渲染到页面上时，会在对应的标签上加山对应的默认属性，所有不同的标签在初始情况下渲染的样式不同，下面我们来验证一下： 通过在浏览器页面上按下鼠标右键 -> 检查或者使用电脑上的 Fn+F12按键打开浏览器的控制台，来查看或者调试页面。

想要详细了解谷歌浏览器的控制台功能，可以看这篇文章的介绍：https://www.cnblogs.com/xiaowenshu/p/10450848.html

现在我们来看一下a标签渲染到页面上时的初使样式。让我们选中a元素，然后在控制台中查看：

我们可以看到标签出事渲染到页面上时，会自动带一些初使样式，例如a标签就带有以下初使样式：

 a:-webkit-any-link {
   color: -webkit-link;
   cursor: pointer;
   text-decoration: underline;
 }

这些属性在以后的内容篇中会逐步讲到，我在这里先大致说一下： color: 元素中字体的颜色； cursor: 鼠标移动到元素上时，鼠标的样式，cursor: pointer;表示的是一个小手的样式，这个属性还有其他属性值，在讲到CSS时会在详细的介绍这个属性； text-decoration: 用于设置文本的修饰线外观的（下划线、上划线、贯穿线/删除线或闪烁）。看到这里，不知道细心的同学有没有发现，这些CSS属性也有很大的语义化，比如设置字体颜色，就是color，设置鼠标指针的形状就是cursor，设置文本下划线属性，就是text-decoration，其实很多的CSS属性根据字面意思就能猜出来，这个属性的作用是什么，具体的CSS内容会在后面逐步介绍到。其实还有一点，不知道大家有没有注意到，在上面的图片中，出现了这样一句话user agent stylesheet，这句话的意思很字面--浏览器默认样式，所以谷歌的浏览器很贴心啊，默认样式都在控制台中标注出来了，并且在单独的内容框里，这也是为什么我十分推荐谷歌浏览器的原因。我们再来看下p元素的：

h1元素的：

现在我们通过在控制台中向对应的元素加入或改变一些CSS属性，看元素会有什么变化： a元素：

可以看到，页面中字体的颜色变了，字体类型变了，下划线的位置变了

在控制台的element.style一栏中可以加入自己想要给定的元素样式，不过这个自己在控制台中加的样式不是永久的，在重新刷新页面后，这些自己添加的样式会自动取消，在平时的开发和练习中可以在这一栏中加入自己想要给定的样式，方便测试。

p元素：

h1元素

看到这里，我想同学们应该能够理解上面所讲的 元素展示到页面中的效果，应该由CSS决定。 因为浏览器在将元素渲染到页面上时，会在对应的标签上加山对应的默认属性，所有不同的标签在初始情况下渲染的样式不同 这两句话的意思了，元素的样式应该有CSS决定，而之所以不同的元素在渲染到页面上时会有不同的样式，是因为在渲染时，浏览器会为其加上特有的默认属性，而自己也可以通过改变元素的CSS属性来改变元素的样式。

不知道有没有同学在这地方有过疑问：

这个是什么？ :any-link CSS 伪类选择器代表一个有链接锚点的元素，而不管它是否被访问过，也就是说，它会匹配每一个有 href 属性的 <a>、<area> 或 <link> 元素。因此，它会匹配到所有的 :link 或 :visited。想要具体了解的，请看下面这片文章： https://developer.mozilla.org/zh-CN/docs/Web/CSS/:any-link 这些内容我们以后会提到

重要：选择什么元素，取决于内容的含义，而不是显示出的效果 🌟🌟🌟 牢记这句话。