用浏览器查看样式
按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
中文为搜索引擎优化。是一种利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位,获得品牌收益。很大程度上是网站经营者的一种商业行为,将自己或自己公司的排名前移。
好的语义化可以提高网站排名,再往上就需要给搜索引擎掏钱了。