不要一直用<div>啦!语义化标签了解下?

原创
10/22 12:08
阅读数 21

为什么不要盲目使用<div>

先看一个例子:

<div>
    <div>这是一个xx</div>
    <div>
        xxxx
    </div>
    <div>
        xxxx
    </div>
    <div>xxxx</div>
</div>
复制代码

如果你看到一个这样的html页面结构,你能想到这是什么吗?

如果你接手了这个页面,那么进行维护的时候,可能工作感受不亚于理清一个缠在一起的耳机线...

那么接下来的这个页面结构呢?

<body>
    <header>这是一个页面</header>
    <aside>
        广告位或者导航
    </aside>
    <main>
        页面内容
    </main>
    <footer>这个页面是xxx写的</footer>
</body>
复制代码

是不是能很自然的想到这样的网页结构?(不许说想不到😋)

通过这样的网页结构,需要修改哪一部分,只要对症下药就好,妈妈再也不用担心我头秃了。

这就是今天要说的语义化标签在开发中最直观的作用。它更加直观的表现出了网页结构。可能在一个人开发的时候害体现不太出来,但是当多人合作或者回看自己写的页面时,就很容易体现出这一特点。

除此之外,语义化标签的作用一共大体有这几大点:

  • 优化了代码结构,在不看css的情况下,也能够呈现出很好的内容结构
  • 爬虫依赖标签来确定关键字的权重,更多的语义化标签,帮助爬虫抓取更多的有效信息,也增加了页面权重
  • 增加了无障碍阅读的体验,让每一部分都附有其意义

常见的语义化标签

<header>网页的页眉部分

<header>这是一个页面</header>
复制代码

<main>网页的主要部分

<main>
    页面内容
</main>
复制代码

<footer>网页的页脚部分

<footer>页眉,这个页面是xxx写的</footer>
复制代码

<aside>可用于侧边栏的广告,链接或者与附近内容相关的内容

<aside>
    <h2>I社新作现已发售!</h2>
    <p>
        拉娜的奇妙洞窟冒险,内容来源:I社游戏-https://isheweiyi.com (滑稽)
    </p>
</aside>
复制代码

<nav> 标签定义导航链接的部分。

<nav>
    <a>Home</a>
    <a>Other</a>
    <a>About</a>
</nav>
复制代码

<article>定义页面独立的内容,其中可以嵌套<header>,<footer>,<sections>

<article>
    <header>小页面标题</header>
    <main>内容</main>
</article>
复制代码

<section>网页文档部分,长表单或者文章

<section>
    <p>xxxx</p>
</section>
复制代码

<figure>用于文档中的图像

<figure>
  <p>黄浦江上的的卢浦大桥</p>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
复制代码

这些语义化标签,都可以在使用过程中代替<div>来更加有意义的描述一个网页结构

特殊标签

除了上述的语义化标签,这些特殊标签也可以一定程度的代替一味的<div>的使用。他们往往有独特的作用,可以给网页带来某些效果。

<b></b> 将字体变粗

If you can understand these words, you <b>understand</b> them
复制代码

<big></big> 将字体变大一号(但是不会变粗)

If you can understand these words, you <big>understand</big> them
复制代码

<wbr> 确定一个长字符串的切换行的位置:

<!--当页面宽度变化时会在wbr标签处换行-->
<p>abcde<wbr>fghigkl<wbr>mnpqrs<wbr>tuvwxyz</p>
复制代码

<code>和<pre> code标签的一个功能是暗示浏览器code标签所包围的文本是计算机源代码,浏览器可以做出自己的 样式处理,pre标签则没有这项功能,但是pre标签可以保留文本中的空格和换行符,保留文本中的空格换行符是计算机源代码显示 所必须的样式。 一般codepre的嵌套使用为<pre><code>hrllo world</code></pre>

<!--尝试空格带来的影响(发现只有pre会保留空格)-->
    &lt;script type=&quot;text/javascript&quot; src=&quot;loadxmldoc.js&quot;&gt;
    <br>
    <code>    &lt;script type=&quot;text/javascript&quot; src=&quot;loadxmldoc.js&quot;&gt;</code>
    <pre>    &lt;script type=&quot;text/javascript&quot; src=&quot;loadxmldoc.js&quot;&gt;</pre>
复制代码

<meta>提供有关页面的元信息(meta-information)

<!--以上代码告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--页面宽等于屏宽,缩放比等于1.0,防止出现横向滚动条-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--定义网页编码为gb2312-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="HTML,ASP,PHP,SQL">
复制代码

<picture> 设计多个图像来更好地填充浏览器视口

<!--在650px及以上,采用iamge1.jpg,650px-465px,采用image2.jpg...-->
<picture>
  <source media="(min-width:650px)" srcset="/image1.jpg">
  <source media="(min-width:465px)" srcset="/image2.jpg">
  <img src="/image3.jpg" alt="Flowers" style="width:auto;">
</picture>
复制代码

<progress>显示程序的下载进度

<progress value="45" max="100">
</progress>
复制代码

<strong>强调内容

<p>To compare with other all you life is the <strong>source</strong> of life tragedy</p>
复制代码

<em> 同样是标记重点,通常为斜体文字

<p>To compare with other all you life is the <em>source</em> of life tragedy</p>
复制代码

这些特殊的标签,除了可以更加清晰的表述网页结构外,更有一些特殊的作用可以更加方便的表述网页。

如果你一下子记不住这些标签,可以收藏一下。每次需要优化页面结构的时候翻阅一下,说不定能帮上你哦😋

最后

如果你觉得此文对你有一丁点帮助,点个赞。或者可以加入我的开发交流群:1025263163相互学习,我们会有专业的技术答疑解惑

如果你觉得这篇文章对你有点用的话,麻烦请给我们的开源项目点点star: http://github.crmeb.net/u/defu 不胜感激 !

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部