几个新的H5标签介绍

最新推荐文章于 2024-05-30 09:37:34 发布

林中明月间。

最新推荐文章于 2024-05-30 09:37:34 发布

阅读量1.5w

点赞数 5

分类专栏： Html+Css+Js 文章标签： H5

本文链接：https://blog.csdn.net/a772116804/article/details/80625385

版权

Html+Css+Js 专栏收录该内容

55 篇文章 3 订阅

订阅专栏

<h2>mark突出部分文本</h2>    
<p>Do not forget to buy <mark>milk</mark> today.</p>  

<h2>sub标签可定义下标文本。sup可定义上标文本</h2>    
<p>    
    This text contains <sub>subscript</sub>    
</p>    
<p>    
    This text contains <sup>superscript</sup>    
</p>

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu所有浏览器都不支持, nav, section, summary 都是块级元素

<address> 标签定义文档或文章的作者/拥有者的联系信息。 兼容所有浏览器

<area> 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。兼容所有浏览器

<b> 标签规定粗体文本。 兼容所有浏览器

<tt> 标签呈现类似打字机或者等宽的文本效果。 兼容所有浏览器

<i> 标签显示斜体文本效果。 兼容所有浏览器

<big> 标签呈现大号字体效果。 兼容所有浏览器

<small> 标签呈现小号字体效果。 兼容所有浏览器

<base> 标签为页面上的所有链接规定默认地址或默认目标。 兼容所有浏览器

<bdo> 元素可覆盖默认的文本方向。 兼容所有浏览器

<blockquote> 长文本引用。 兼容所有浏览器

<caption>元素定义表格标题。 兼容所有浏览器

<del> 定义文档中已被删除的文本 兼容所有浏览器

<sub> 标签可定义下标文本。 兼容所有浏览器

<sup> 标签可定义上标文本。 兼容所有浏览器

<article> 标签规定独立的自包含内容。 IE9及以上

<aside> 标签定义其所处内容之外的内容。 IE9及以上

<audio> 标签定义声音，比如音乐或其他音频流。 IE9及以上

<bdi> 标签允许您设置一段文本，使其脱离其父元素的文本方向设置。 只有 Firefox 和 Chrome 支持 <bdi> 标签

<canvas> 标签定义图形，比如图表和其他图像。 IE9及以上

<footer> 标签定义文档或节的页脚。 IE9及以上

<nav> 标签定义导航链接的部分。 IE9及以上

<video> 标签定义视频，比如电影片段或其他视频流。 Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <video> 标签

<article> 标签规定独立的自包含内容。

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

article标签内可以放置section标签来表现该内容DIV块的章节内容或是在section标签再旋转article标签。

</article>

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

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

<hgroup> 标签用于对网页或区段（section）的标题进行组合。

<hgroup>
  <h1>Welcome to my WWF</h1>
  <h2>For a living planet</h2>
</hgroup>

<summary> 标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。

<details>
<summary>HTML 5</summary>
This document teaches you everything you have to learn about HTML 5.
</details>

<aside> 标签定义其所处内容之外的内容。

aside 的内容应该与附近的内容相关。

<aside>
<h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.
</aside>

<figcaption> 标签定义元素的标题（caption）。

"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

<figure>
  <figcaption>黄浦江上的的卢浦大桥</figcaption>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

<footer> 标签定义 section 或 document 的页脚

<footer>This document was written in 2010</footer>

<header> 标签定义文档的页眉（介绍信息）。

<header>
<h1>Welcome to my homepage</h1>
<p>My name is Donald Duck</p>
</header>

<main> 标签规定文档的主要内容。

<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。

注释：在一个文档中，不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。所有浏览器都支持 <main> 标签，除了 Internet Explorer。

<main>
  <article>
    <h1>Mozilla Firefox</h1>
    <p>Firefox 是一款来自 Mozilla 的免费开源 web 浏览器，发布于 2004 年。</p>
  </article>
</main>

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

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

综合实例

<body> 
  <div id="container"> 
    <header id="page-header"> 
      <div></div>
        <nav id="main-navigation"> 
          <ul> 
          <li class="current"><a href="#">首页</a></li> 
        </nav> 
    </header> 
    <main>
      <article id="page-content"> 
      <section> 
        <hgroup> 
        <h1>这是一个用HTML5做的网页</h1> 
        <h2>HTML5+CSS3网页</h2> 
        </hgroup> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing Fusce vel massa erat.</p> 
        <h2>A demonstration of list items</h2> 
        <ul> 
          <li>Lorem ipsum dolor sit amet</li> 
        </ul> 
        <ol> 
          <li>Lorem ipsum dolor sit amet</li> 
        </ol> 
      </section> 
      <aside> 
      <h2>这就是aside部分的内容</h2> 
        <p>Aliquam id lorem ac tellus fringilla bibendum et at </p>
      </aside> 
      <details>
        <summary>HTML 5</summary>
        This document teaches you everything you have to learn about HTML 5.
      </details>
    </article> 
    </main>
  </div> 
  <footer> 
  Copyright Dave Woods 2009 
  </footer> 
</body>

林中明月间。

关注

5
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
0
评论
几个新的H5标签介绍

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu所有浏览器都不支持, nav, section, summary 都是块级元素&lt;address&gt; 标签定义文档或文章的作者/拥有者的联系信息。兼容所有浏览器&lt;area&gt; 标签定义图像映射中的区域（注：图像映...
复制链接

扫一扫