zoukankan      html  css  js  c++  java
  • HTML5新增常用标签

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

    <body>
    
    <article>
    <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
    </header>
    <p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p>
    </article>
    
    </body>
    </html>

    2.nav 标签定义导航链接的部分。如果文档中有“前后”按钮,则应该把它放到 <nav> 元素中。

    <body>
    <nav>
    <a href="/html/">HTML</a> |
    <a href="/css/">CSS</a> |
    <a href="/js/">JavaScript</a> |
    <a href="/jquery/">jQuery</a>
    </nav>
    </body>

    3.footer 标签定义 section 或 document 的页脚。在典型情况下,该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。假如您使用 footer 来插入联系信息,应该在 footer 元素内使用 <address> 元素。

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

    4.artide 标签定义独立的内容。可能的 article 实例:论坛帖子、报纸文章、博客条目、用户评论等。<article> 标签的内容独立于文档的其余部分。(具有语义化)

    <body>
    
    <article>
      <h1>What Does WWF Do?</h1>
      <p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p>
    </article>
    
    </body>

    5.section  标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。(相当于div的作用,具有语义化)

    <body>
    
    <section>
    <h1>WWF</h1>
    <p>
    The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, 
    research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.
    </p> </section> <section> <h1>WWF's Panda symbol</h1> <p> The Panda has become the symbol of WWF. The well-known panda logo of WWF originated
    from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.
    </p> </section>

    6.aside 标签定义其所处内容之外的内容。aside 的内容应该与附近的内容相关。<aside> 的内容可用作文章的侧栏。

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

    7.datalist 标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。请使用 input 元素的 list 属性来绑定 datalist。所有主流浏览器都支持 <datalist> 标签,除了 Internet Explorer 和 Safari。

    <body>
    
    <input type="text" list="cars" />
    <datalist id="cars">
        <option value="BMW">
        <option value="Ford">
        <option value="Volvo">
    </datalist>
    
    </body>

    8.<fieldset> 标签用于从逻辑上将表单中的元素组合起来。<fieldset> 标签会在相关表单元素周围绘制边框。<legend> 标签为 fieldset 元素定义标题。

    <body>
    
    <form>
      <fieldset>
        <legend>Personalia:</legend>
        Name: <input type="text" /><br />
        Email: <input type="text" /><br />
        Date of birth: <input type="text" />
      </fieldset>
    </form>
    
    
    </body>

  • 相关阅读:
    bootstrap-select.js 下拉框多选后动态赋值
    vs2012 未找到与约束 ContractName Microsoft.VisualStudio.Utilities.IContentTy...
    jquery 报错 Uncaught TypeError: Illegal invocation
    火狐浏览器的RestClient,接口测试,Post提交数据
    destoon二次开发 操作数据库可运行示例
    ZendStudio13 PHP调试环境快速配置
    VR发展的最大障碍在于内容?
    优秀博文链接
    LoopMatrix
    串口输出float型数据
  • 原文地址:https://www.cnblogs.com/EricZLin/p/8854807.html
Copyright © 2011-2022 走看看