时间戳

首页 > 技术文章 > HTML5新增标签

HTML5新增标签

qijunjun 2017-07-11 23:59 原文

一、h5新增的主要语义化标签如下：

1、header 页面头部、页眉

header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但是也可以包含其他内容，例如

2、nav 页面导航

　　nav元素是一个可以用作页面导航的连接组，其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的连接组都要被放进nav元素，只需要将主要的、基本的连接组放进nav元素即可。

注：html5中不能使用menu元素来代替nav元素

nav元素应用场景：

　　传统导航条、侧边栏导航、页内导航、翻页操作

<article>
    <header>
        <h1>HTML5与CSS3的历史</h1>
        <nav>
            <ul>
                <li><a href="javascript:void(0);">HTML5历史</a></li>
                <li><a href="javascript:void(0);">CSS3的历史</a></li>
                <li><a href="javascript:void(0);">Ajax的历史</a></li>
            </ul>
        </nav>
    </header>
    <section>
        <h1>html5历史</h1>
        <p>一些文字说明....</p>
    </section>
    <section>
        <h1>css3历史</h1>
        <p>一些文字说明....</p>
    </section>
    <footer>
        <a href="">删除</a>
        <a href="">修改</a>
    </footer>
</article>
<footer>
    <p><small>版权声明：</small></p>
</footer>

3、atricle 一篇文章

4、section 文章中的章节

　　section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。

通常不推荐没有标题内容使用section元素

总结：

　　a、不要将section元素作为设置样式的页面容器。

　　b、如果article元素、aside元素、nav元素更符合使用条件，就不要使用section元素

　　c、没有标题内容不要使用section元素。

5、aside 侧边栏

aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有区别主要内容的部分。

第一种是在article元素内部使用

<article>
    <h1>语法</h1>
    <p>文章的正文....</p>
    <aside>
        <h1>名词解释</h1>
        <p>这是一个对语言很重要的内容题</p>
    </aside>
</article>

第二种是在article元素外部使用

<aside>
    <nav>
        <h2>评论</h2>
        <ul>
            <li><a href="javascript:void(0);">2017-7-31</a></li>
            <li><a href="javascript:void(0);">张三：好好学一下！</a></li>
        </ul>
    </nav>
</aside>

6、footer 页面底部、页脚

footer元素可以作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。
<footer>
    <ul>
        <li>版权信息</li>
        <li>关注我们</li>
        <li>联系我们</li>
    </ul>
</footer>

7、time元素与微格式

<time datetime="2017-7-31">2017-7-31</time>
<time datetime="2017-7-31T20:00">2017-7-31</time>
<time datetime="2017-7-31T20:00Z">2017-7-31</time>
<time datetime="2017-7-31T20:00+09:00">2017-7-31</time>
<article>
    <header>
        <h1>苹果</h1>
        <p>发布日期
            <time datetime="2017-2-1" pubdate>2017-2-1</time>
        </p>
        <p>舞会时间
        <time datetime="2017-3-1">2017-3-1</time>
        </p>
    </header></article>

8、address元素

用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等、address不只用来呈现电子邮箱或真实地址，还用来
展示跟文档相关的联系人的所有联系信息


<address>
    <a href="#">作者</a>
    <time datetime="2017-7-31">2017-7-31</time>
</address>


9、hgroup元素


hgroup元素是将标题及其子标题进行分组的元素。hgroup元素通常会将h1~h6元素进行分组，譬如一个内容区块的标题及其子元素算一组


<hgroup>
    <h2>文章主标题</h2>
    <h3>文章子标题</h3>
</hgroup>


PC端兼容h5新标签的方法，在页面中引入一下js文件


<script  type="text/javascript"  src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>


二、HTML5新增表单控件


1、新增类型：网址  邮箱  日期  时间  星期  数量  范围  电话  颜色  搜索


　　a、<label>网址：</label><input type="url" name=" " required>
　　b、<label>邮箱：</label><input type="email" name=" " required>
　　c、<label>日期：</label><input type="date" name=" ">
　　d、<label>时间：</label><input type="time" name=" ">
　　e、<label>星期：</label><input type="week" name=" ">
　　f、<label>数量：</label><input type="number" name=" ">
　　g、<label>范围：</label><input type="range" name=" " >
　　h、<label>电话：</label><input type="tel" name=" " >
　　i、<label>颜色：</label><input type="color" name=" ">
　　j、<label>搜索：</label><input type="search" name=" ">


2、新增常用表单控件属性


<input  type="text"  placeholder="请输入用户名"  autofocus  autocomplete="off">


　　a、placeholder  设置文本框默认提示文字  


　　b、autofocus  自动获得焦点


　　c、autocomplete  设置是否有联想关键词下拉，一般设置为"off",将其关掉   如：autocomplete="off"


3、表单内元素的属性


formtarget属性：在HTML5中，可以对提交按钮分别使用formtarget属性来指定提交后在何处打开所需加载的页面。


formaction属性：在HTML5中，可以为所有的提交按钮，增加不同的formaction属性，使单击不同的按钮时可以将表单提交到不同的页面。


formmethod属性：可以为每个表单元素增加formmethod属性，分别指定不同的提交方法。get/post


formenctype属性：在HTML5中，可以使用formenctype属性对表单元素分别指定不同的编码方式。text/plain、multipart/form-data、application/x-www-form-urlencoded


autofocus属性：为文本框、选择框或按钮控件加上autofocus属性，当画面打开时，该控件自动获得光标焦点。


required属性：可以应用在大多数输入元素上，在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字。


三、HTML5音频audio和视频video


html5增加了audio和video标签，提供了在页面上插入音频和视频的标准方法


1、audio标签  支持格式：ogg、wav、mp3


对应的属性：


　　a、autoplay  自动播放


　　b、controls 显示播放器


　　c、loop  循环播放器


　　d、preload 预加载


　　e、multed 静音


如：<audio src="source/audio.mp3" autoplay controls loop preload></audio>


<audio autoplay controls loop preload>


　　<source src="source/audio.wav" type="">


　　<source src="source/audio.mp3" type="">


</audio>


source标签的作用是提供多个媒体文件地址，如果一个地址的文件不兼容，就使用下一个地址。


2、video标签  支持格式：ogg、mp4、webM


对应的属性：


　　a、width


　　b、height


　　c、Poster


如：<video src="source/audio.mp3" autoplay controls loop preload width="600" height="400"></video>


3、可选择第三方播放器


　　a、cyberplayer


　　b、tencentPlayer


　　c、youkuPlayer







	

		


推荐阅读