zoukankan      html  css  js  c++  java
  • (2) html 语义化

    HTML语义化标签

    1 什么是语义化标签?

    通过标签判断内容语义,例如根据h1标签判断出内容是标题,根据 p 判断内容是段落、input 标签是输入框等。

    2 为什么要标签语义化?

    1.搜素引擎友好
    2.更容易让屏幕阅读器读出网页内容
    3.去掉或者丢失样式的时候能让页面呈现出清晰地结构
    4.便于团队开发和维护

    3 常用语义化的标签有哪些?

    3.1 title

    title 元素可定义文档的标题。
    浏览器会以特殊的方式来使用标题,并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样,当把文档加入用户的链接列表或者收藏夹或书签列表时,标题将成为该文档链接的默认名称。

    <html>
     
      <head>
        <title>XHTML Tag Reference</title>
      </head>
    
      <body>
        The content of the document......
      </body>
    
    </html>
    

    3.2 header

    header 标签定义文档的页眉(介绍信息)。

    <header>
    <h1>Welcome to my homepage</h1>
    <p>My name is Donald Duck</p>
    </header>
    
    <p>The rest of my home page...</p>
    

    3.3 nav

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

    <nav>
    <a href="index.asp">Home</a>
    <a href="html5_meter.asp">Previous</a>
    <a href="html5_noscript.asp">Next</a>
    </nav>
    

    3.4 main

    main 标签规定文档的主要内容。
    main 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。
    注释:在一个文档中,不能出现一个以上的 main 元素。main 元素不能是以下元素的后代:article、aside、footer、header 或 nav。

    <main>
      <h1>Web Browsers</h1>
      <p>Google Chrome、Firefox 以及 Internet Explorer 是目前最流行的浏览器。</p>
    </main> 
    

    3.5 progress

    progress标签标示任务的进度(进程)。

    <progress value="22" max="100"></progress> 
    

    3.6 pre

    可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。pre 标签的一个常见应用就是用来表示计算机的源代码。

    <pre>
    &lt;html&gt;
    
    &lt;head&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;loadxmldoc.js&quot;&gt;
    &lt;/script&gt;
    &lt;/head&gt;
    
    &lt;body&gt;
    
      &lt;script type=&quot;text/javascript&quot;&gt;
        xmlDoc=<a href="dom_loadxmldoc.asp">loadXMLDoc</a>(&quot;books.xml&quot;);
        document.write(&quot;xmlDoc is loaded, ready for use&quot;);
      &lt;/script&gt;
    
    &lt;/body&gt;
    
    &lt;/html&gt;
    </pre>
    

    footer 标签定义文档或节的页脚。
    footer 元素应当含有其包含元素的信息。
    页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
    您可以在一个文档中使用多个 footer 元素。

    <footer>
      <p>Posted by: W3School</p>
      <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
    </footer>
    

    3.8 aside

    aside 标签定义其所处内容之外的内容。
    aside 的内容应该与附近的内容相关。

    <p>Me and my family visited The Epcot center this summer.</p>
    <aside>
    <h4>Epcot Center</h4>
    The Epcot Center is a theme park in Disney World, Florida.
    </aside>
    

    3.9 section

    section 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

    <section>
      <h1>PRC</h1>
      <p>The People's Republic of China was born in 1949...</p>
    </section>
    

    3.10 article

    article 标签规定独立的自包含内容。
    一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发。

    <article>
      <h1>Internet Explorer 9</h1>
      <p>Windows Internet Explorer 9(简称 IE9)于 2011 年 3 月 14 日发布.....</p>
    </article>
    

    本文部分内容摘自w3school

  • 相关阅读:
    复杂链表的复制
    [CSP-S模拟测试]:抽卡(概率DP)
    [CSP-S模拟测试]:计划(前缀和)
    [CSP-S模拟测试]:公园(BFS+剪枝)
    [CSP-S模拟测试]:长寿花(DP+组合数)
    [CSP-S模拟测试]:喝喝喝(模拟)
    [CSP-S模拟测试]:次芝麻(数学)
    [CSP-S模拟测试]:赤壁情(DP)
    [CSP-S模拟测试]:密州盛宴(贪心)
    [CSP-S模拟测试]:春思(数学)
  • 原文地址:https://www.cnblogs.com/hanqingtao/p/8763161.html
Copyright © 2011-2022 走看看