css 便签-HTML5 新标签

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

在以前的HTML页面中，大家基本都是采用Div+CSS的布局形式。 当搜索引擎抓取一个页面的内容时，它只能推断出你的其中一个Div中的内容是文章内容容器，导航模块容器，或者是作者引入的容器等。也就是说，结构整个 HTML 文档的内容没有明确定义。 为了解决这个问题，HTML5专门添加了：页眉、页脚、导航、文章内容等与结构相关的结构元素标签。

在讲这个新标签之前，我们先看一下普通页面的布局：

<div id='header'>
    <div id='nav'>
    </div>
</div>
<div id='content'>
    <div class='article'>
        <div class='section'></div>
    </div>
</div>
<div class='footer'></div>

在上图中，我们可以清楚地看到一个普通的页面有腹部、导航、文章内容、附加的右侧边栏和顶部模块。 我们通过类来区分，并使用不同的css样式来处理。 但相对而言，class并不是一个通用的标准规范。 搜索引擎只能推测某些部分的功能。 另外，如果这个页面程序给视障人士阅读，文档结构和内容都不会很清晰。 HTML5新标签带来的新布局如下：

<header>
    <nav></nav>
</header>
<div id='content'>
    <article>
        <section></section>
    </article>
</div>
<footer></footer>

那么这样就更有利于浏览器分析，而且每个标签的含义也会变得更加生动。

那么下面我们就详细说说html5中新标签的含义：

标头

页眉标签定义文档的页脚，通常是一些指导和导航信息。 不限于写在网页的颈部，也可以写在网页的内容上。 通常 header 标签至少包含（但不限于）标题标签（h1-h6），还可以包含 hgroup 标签、表格内容、徽标、搜索表单、nav 导航等。

<header>
 <hgroup>
  <h1>网站名称</h1>
  <h2>辅助信息</h2>
 </hgroup>
</header>

导航

nav标签代表页面的一部分，是一个链接组，可以用作页面导航。 导航元素链接到其他页面或当前页面的其他部分，使 html 代码在语义上更加精确，同时对于屏幕来说也更加准确。 对读卡器等设备的支持也更好。

<nav>
    <a href='http://www.zhufengpeixun.cn/'>珠峰培训首页</a>
    <a href='http://www.zhufengpeixun.cn/customize/node/index.html'>node培训课程</a>
    <a href='http://www.zhufengpeixun.cn/customize/js/index.html'>html5培训课程</a>
    <a href='http://www.zhufengpeixun.com/bbs2014/forum.php'>珠峰论坛</a>
</nav>

部分

部分标签定义文档中的部分。 例如章节、页眉、页脚或文档的其他部分。 通常用于分段内容，它将在文档流中开始一个新的部分。 它用于表示常见的文档内容或应用程序块，通常由内容及其标题组成。 但section元素标签并不是一个普通的容器元素，它代表一个主题内容，通常带有一个标题。

当我们描述一个具体的事物时，通常鼓励我们使用冠词而不是节； 当我们使用section时，我们仍然可以使用h1作为标题，而不必担心它的位置以及是否在其他地方使用； 当容器需要直接设置样式或通过脚本进行操作时，建议使用 div 元素而不是节。

<section>
    <h1>section是什么？</h1>
    <p>是一个独立的章节</p>
    <article>
       <h2>关于section</h1>
        <p>section的介绍</p>
    </article>
 </section>

文章

Article是一种特殊的section标签，其语义比section更清晰。 它代表一个独立且完整的相关内容块css 便签，可以独立于页面上的其他内容使用。 示例包括完整的峰会帖子、博客文章、用户评论等。一般来说，一篇文章会有标题部分（通常包含在页眉中），有时还有页脚。 文章可以嵌套，并且内部文章与内部文章标签有从属关系。 例如，一篇博客文章可以显示为一篇文章，然后可以将一些评论嵌入其中作为一篇文章。

<article>
    <header>
        <hgroup>
            <h1>这是一篇介绍HTML 5结构标签的文章</h1>
            <h2>HTML 5的革新</h2>
       </hgroup>
       <time datetime="2016-11-18">2016.11.18</time>
  </header>
  <p>文章内容详情</p>
 </article>

组

hgroup标签是组合网页或section部分的标题元素（h1-h6）。 例如，如果某个部分中有连续 h 系列标签元素，则可以使用 hgroup 将它们括起来。

<hgroup>
    <h1>主标题</h1>
    <h2>副标题</h2>
</hgroup>

在旁边

side 标签用于加载非文本内容，被视为页面的单独部分。 它包含的内容与页面的主要内容分开css 便签，可以删除而不影响页面的内容、部分或信息。 示例包括广告、分组链接、侧边栏等。

 <aside>
     <h1>简介</h1>
     <p>我是简介内容，嘿嘿</p>
 </aside>

数字

在文档中用作插图的图像，带有标题。

 <figure>
      <figcaption>标题</figcaption>
      <img src="img.jpg" alt="figure标签" title="figure标签" />
 </figure>

图标题

该标签定义图形元素的标题。

“figcaption”元素应放置为“figure”元素的第一个或最后一个子元素。

 <figure>
      <img src="img.jpg" alt="figure标签" title="figure标签" />
      <figcaption>标题</figcaption>
 </figure>

声音的

定义声音，例如音乐或其他音频流。

以下是该标签的相关属性：

autoplay autoplay 如果存在，音频将在准备好后立即播放。

控件 控件 如果存在，则会向用户显示控件，例如播放按钮。

循环 循环 如果存在，则每次音频结束时重新开始播放。

muted muted 指定视频输出应静音。

preload preload 如果存在此属性，则音频将在页面加载时加载并准备播放。

如果使用“自动播放”，则忽略此属性。

src url 要播放的音频的 URL。

<audio src="someaudio.wav">
    您的浏览器不支持 audio 标签。

巴迪

bdi指的是比迪烟隔离。

bdi 标签允许您将一段文本设置为远离其父元素的文本方向设置。

当发布用户评论或您无法完全控制的其他内容时，此标签非常有用。

目前只有 Firefox 和 Chrome 支持 bdi> 标签。

dir是这个标签的属性，有三个可选值：ltr、rtl、auto。

这些值指定 bdi 元素内文本的文本方向。 默认值：自动。

<ul>
    <li>Username <bdi>Bill</bdi>:80 points</li>
    <li>Username <bdi>Steve</bdi>: 78 points</li>
</ul>

帆布

canvas标签定义图形，例如图表和其他图像。

canvas标签只是图形的容器，你必须使用脚本来绘制图形。

<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>

数据列表

datalist 标签定义选项列表。 将此元素与输入元素结合使用来定义输入的可能值。

数据列表及其选项不会显示，它只是有效输入值的列表。

请使用input元素的list属性来绑定datalist。

除了 Internet Explorer 和 Safari 之外，所有主要浏览器都支持标签。

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

仪表

仪表标签定义了已知范围或分数值内的标量检测。 也称为量规。

示例：可以使用进度条。

可以通过属性来定义：

form form_id指定meter元素所属的一个或多个表单。

high number 指定被视为高的值的范围。

low number 指定被视为低的值的范围。

max number 指定范围的最大值。

min number 指定范围的最小值。

最佳数指定度量的最佳值。

所需的值数。 指定度量的当前值。

<meter value="3" min="0" max="10">十分之三</meter>
<meter value="0.6">60%</meter> 

输出

输出标签定义不同类型的输出，例如脚本的输出。

可以通过属性来定义：

for element_id 定义与输出域相关的一个或多个元素。

form form_id 定义输入数组所属的一种或多种形式。

name name 定义对象的唯一名称。 （提交表格时使用）

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
    <input type="range" id="a" value="50">100
    +<input type="number" id="b" value="50">
    =<output name="x" for="a b">
</form>

页脚

页脚标签定义节或文档的页脚，其中包含与页面、文章或部分内容相关的信息，例如文章的作者或日期。 当用作页面的页码时，一般包括版权、相关文档和链接。 它与 header 标签基本相同，可以在一个页面上多次使用。 如果在节前面添加页脚，则它相当于该节的页码。

<footer>
    <span>copyRight@珠峰培训</span>
</footer>