用浏览器查看样式

按f12或者右键检查,即可调出来样式查看;左上角的指针点击即可在页面选中元素,elements是html,下边的styles是css。

用span写h1

我们先写一个h1标签:

<h1>这是h1标签</h1>

然后我们再写一个span标签

<span>这是span标签</span>

然后我们给span添加样式:

<style>
.myh1 {
display: block;
font-size: 2em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
</style>
<span class="myh1">这是span标签</span>

我们就可以用span把h1展示出来,同理,我们可以用div或者span甚至任意一个标签表示出来另一个标签,那么为什么前端还要设计这么多的标签,这就涉及到了标签的语义化。

什么是语义化

说白了就是对应的标签做对应的事,这个多写代码就能记住对应的标签。

为什么语义化

  • 方便代码维护,减少沟通成本
  • 有利于SEO
  • 方便盲人阅读网页

什么是SEO

中文为搜索引擎优化。是一种利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位,获得品牌收益。很大程度上是网站经营者的一种商业行为,将自己或自己公司的排名前移。

好的语义化可以提高网站排名,再往上就需要给搜索引擎掏钱了。

关联

code
视频