关于前端:HTML标签语义化

39次阅读

共计 920 个字符,预计需要花费 3 分钟才能阅读完成。

标签语义化:

语义和默认款式的区别:

  • 默认款式是浏览器设定的一些罕用 tag 的表现形式;
  • 语义化的次要目标就是让大家直观的意识标签和属性的用处和作用;

标签语义化作用:

  • 当只有 HTML 页面时,没有 CSS,咱们依然能够很清晰的看懂页面的 DOM 构造
  • 团队保护,当团队来 review 代码或者重构时,加强代码的可读性,更利于保护
  • 有利于 SEO,搜索引擎爬虫依赖于标签来确定上下文和各个关键字的权重
  • 进步用户体验,比方 title 和 alt 等用来解释内容信息

罕用语义化的标签:

  • <header>头部标签,用来写网页最上方的公共头部,也就是页眉。
<header>
    <h1> 一级题目 </h1>
    <h2> 二级题目 </h2>
</header>
  • <nav>标签,用来写导航,个别写在 <header> 标签外面,外部用 <ul> 无序列表。
<nav>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</nav>
  • <code>:code 能够包裹 html 语句而不会被浏览器再去解析。
  • <pre><samp>:这是一段 HTTP 协定的内容形容,因为这段内容的换行是十分严格的,所以咱们不须要浏览器帮咱们做主动换行,因而咱们应用了 pre 标签,示意这部分内容是事后排版过的,不须要浏览器进行排版。
  • <article>标签,当咱们要写网页文章的次要内容时,要用到这个标签。
<article>
    <h2> 题目 </h2>
    <p> 内容 </p>
</article>
  • <address>标签,定义文档作者或拥有者的分割信息。

如果 <address> 元素位于 <article> 元素外部,则它示意该文章作者或拥有者的分割信息。

通常的做法是将 address 元素增加到网页的头部或底部。

  • <p>段落标签

晓得了 <p> 作为段落,你就不会再应用 <br/> 来换行了,而且不须要 <br/> 来辨别段落与段落。
<p></p>中的文字会主动换行,而且换行的成果优于<br/>

<p> 段落内容 </p>
  • <span>标签

<span>标签的语义为被用来组合文档中的行内元素

  • <b><em><strong>

<b>标签语义为“加粗”

<em>标签语义为“强调”

<strong>标签语义为“更强烈的强调”而且 em 默认用斜体示意,strong 用粗体示意。

正文完
 0