大家好,我是qishilong。
首先我们先来了解一下什么是语义化:
然后我们再来聊聊语义化:
<a></a>
: a元素,超链接<p></p>
: p元素,段落<h1></h1>
: h1元素,一级标题 <!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 这些内容我们以后会提到
重要:选择什么元素,取决于内容的含义,而不是显示出的效果 ??? 牢记这句话。
这里就不再详细介绍这部分内容了,想要详细了解的,我这里放一些文章的链接,大家下去可以自己了解下。 语义化:https://developer.mozilla.org/zh-CN/docs/Glossary/Semantics
写语义标记的一些好处如下:
SEO:https://developer.mozilla.org/zh-CN/docs/Glossary/SEO HTML 语义化:https://www.cnblogs.com/zhuochong/p/11412332.html 什么是语义化的HTML?有何意义?为什么要做到语义化?:https://www.cnblogs.com/wuqiutong/p/5986220.html 谈谈对于 HTML 语义化的理解:http://www.yaohaixiao.com/blog/thinking-of-html-semantic/
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。