HTML5主要新增标签的使用代码分享

黄舟原创: 2017-03-30 13:12:25 1780浏览

HTML5介绍

HTML5是继HTML4以后的下一代HTML标准规范，它提供了一些新的元素和属性。新型的标签有利于搜索引擎和语义分析，同时更好地帮助小屏幕装置和视障人士使用，除此之外，也提供了一些新的功能，总结而言，有如下几大特点：

1、取消了一些HTML4里过时的元素和属性标记

其中包括纯粹显示效果的标记，如<font>和<center>，它们已经被CSS取代。HTML5吸取了XHTML2的一些建议，包括一些用来改善文档结构的功能，比如，新的HTML标签header，footer，dialog，aside，figure等的使用，将使内容创作者更加语义地创建文档，之前的开发者在实现这些功能时一般都是使用p。

2、内容与展式分离

b和i标签依然保留，但它们意义和之前有不同，这些标签的意义是为了将一段文字标识出来，而不是为了设置粗体或斜体样式。u,font,center,strike这些标签则被完全去掉了。

3、新增加一些全新的表单输入对象

包括日期，URL，Email地址，其它的对象则增加了对非拉丁字符的支持。HTML5还引入了微数据，这一使用机器可以识别的标签标注内容的方法，使语义Web的处理更为简单。总的来说，这些与结构有关的改进使内容创建者可以创建更干净、更容易管理的网页，这样的网页对搜索引擎、对读屏软件等更为友好。

4、全新的、更合理的标签

多媒体对象将不再全部绑定在object或embedTag中，而是视频有video标签，音频有audio标签。

5、本地存储

增加了localStorage/sessionStorage/indexedDB等浏览器端存储功能。

6、Canvas对象

将给浏览器带来直接绘制图形的能力，可以直接在浏览器中操作图形。

7、新的API扩展

为HTMLDocument和HTMLElement接口提供了新的API扩展。

8、新语法

（1）DOCTYPE

HTML5的HTML语法要求文档必须声明DOCTYPE以确保浏览器可以在标准模式下展示页面。声明方式是：

<!DOCTYPE html>

不区分大小写。

（2）Charset

HTML5的HTML语法里，有三种形式可以声明字符串的encoding类型：

在传输级别（transport level）上，在HTTP实例的header里设置Content-Type。
在文件的开头，设置一个Unicode的Bype Order Mark(BOM)，该字符为文件的encoding方式提供了一个签名。
在文档的前1024个byte之间的内容里，使用带有charset属性的meta元素来声明encoding方式。例如：<meta charset="utf-8">。

（3）MathML和SVG

HTML5的HTML语法允许在文档里使用MathML（数学标记语言）和SVG（可伸缩矢量图）元素。例如，一个非常简单的HTML页面包含一个svg元素画出的圆：

<!doctype html><title>SVG in text/html</title><p>
 A green circle: <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg></p>

section

section 元素是对页面文档结构进行划分的最基本也是最主要的结构元素，主要用来对网站或应用程序中的页面上的内容进行层次结构上的划分。一个section元素通常由内容及其标题组成。

如果元素的内容集中到一起显示可以表达相应的意思的话，可以定义成article元素，而没必要使用section元素。

section元素不是一般的容器元素，所以如果一个元素需要定义相应的style或script脚本的话，推荐使用p元素，section的使用是确保这个元素的内容能够明确地展示在文档的大钢里。

如：

<!DOCTYPE Html><html><head>
    <title>Graduation Ceremony Summer 2022</title></head><body>
    <h1>Graduation</h1>
    <section>
        <h1>Ceremony</h1>
        <p>Opening Procession</p>
        <p>Speech by Validactorian</p>
        <p>Speech by Class President</p>
        <p>Presentation of Diplomas</p>
        <p>Closing Speech by Headmaster</p>
    </section>
    <section>
        <h1>Graduates</h1>
        <ul>
            <li>Molly Carpenter</li>
            <li>Anastasia Luccio</li>
            <li>Ebenezar McCoy</li>
            <li>Karrin Murphy</li>
            <li>Thomas Raith</li>
            <li>Susan Rodriguez</li>
        </ul>
    </section></body></html>

article

article 元素代表文档、页面或应用程序中的所有“正文”部分，它所描述的内容应该是独立的、完整的、可以独自被外部引用的，可以是一篇博客、一篇报刊中的文章、一篇论坛帖子、一段用户评论、一个独立的插件，或任何独立于上下文中其他部分的内容。

article是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块。一般来说，article会有标题部分。

当article内嵌article时，原则上来说，内部的article的内容是和外层的article内容相关的。例如，一篇博客中，包含用户提交的评论的article应该嵌套在包含博客文章article中。

<article>
    <h1>Safari 5 released</h1>
    <p>7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC.</p>
    <p>Apple announced the release of Safari 5 for Windows and Mac......</p></article>

nav

nav 元素是一个可以作为页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。一个页面可以拥有多个nav元素，作为页面整体不同部分的导航。在nav元素中，一般以ul列表的形式来具体放置该组链接元素。

下面是w3c给出的一个示例代码：

<body>
    <h1>The Wiki Center Of Exampland</h1>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/events">Current Events</a></li>
            ...more...        </ul>
    </nav>
    <article>
        <header>
            <h1> Demos in Exampland</h1>
            <p>Written by A. N. Other.</p>
        </header>
        <nav>
            <ul>
                <li><a href="#public">Public demonstrations</a></li>
                <li><a href="#destroy">Demolitions</a></li>
                ...more...            </ul>
        </nav>
        <p>
            <section id="public">
                <h1>Public demonstrations</h1>
                <p> ...more...</p>
            </section>
            <section id="destroy">
                <h1>Demolitions</h1>
                <p>...more...</p>
            </section>
            ...more...        </p>
        <footer>
            <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
        </footer>
    </article>
    <footer>
        <p><small>© copyright 1998 Exampland Emperor</small></p>
    </footer></body>

aside

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

根据目前的规范，aside元素有两种使用方法：

被包含在article中作为主要内容的附属信息部分，其中的内容可以是当前文章有关的引用，词汇列表等。
在article外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏，其中的内容可以是友情链接、附属导航或广告单元等。

下面的代码示例综合了以上两种方法：

<body>
    <header>
        <h1>My Blog</h1>
    </header>
    <article>
        <h1>My Blog Post</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua.</p>
        <aside>
            <h1>Glossary</h1>
            <dl>
                <dt>Lorem</dt>
                <dd>ipsum dolor sit amet</dd>
            </dl>
        </aside>
    </article>
    <aside>
        <h2>Blogroll</h2>
        <ul>
            <li><a href="#">My Friend</a></li>
            <li><a href="#">My Other Friend</a></li>
            <li><a href="#">My Best Friend</a></li>
        </ul>
    </aside></body>

hgroup

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

<hgroup>
  <h1>Welcome to my WWF</h1>
  <h2>For a living planet</h2></hgroup><p>The rest of the content...</p>

header

header 元素是一种具有引导作用和导航作用的结构元素，通常用来放置整个页面或页面内的一个article元素或section元素的标题，也可以包含其他内容，例如数据表格、搜索表单或相关的logo图片。

我们可以使用该标签来显示整个网页的标题部分：

<header>
    <h1>The most important heading on this page</h1></header>

同一个页面内，每一个内容区块都可以有自己的header元素，例如：

<header> 
  <h1>The most important heading on this page</h1></header><article> 
  <header>   
    <h1>Title of this article</h1> 
  </header> 
  <p>...Lorem Ipsum dolor set amet...</p></article>

footer

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

过去(及目前)，我们通常使用类似下面这样的代码来写页面的页脚：

<p id="footer">
  <ul>
     <li>copyright</li>
     <li>sitemap</li>
     <li>contact</li>
     <li>to top</li>
  </ul><p>

在HTML5中，我们可以不使用p，而用更加语义化的footer来写：

<footer>
  <ul>
     <li>copyright</li>
     <li>sitemap</li>
     <li>contact</li>
     <li>to top</li>
  </ul></footer>

在同一个页面中可以使用多个footer元素，即可以用作页面整体页脚，也可以作为一个内容区块的结尾，例如，我们可以将footer直接写在section或是article中：

<section>
   Section content appears here.   <footer>
      Footer information for section.   </footer></section><article>
   Article content appears here.   <footer>
      Footer information for article.   </footer></article>

address

address元素用来在文档中呈现联系信息，包括文档创建者的名字、站点链接、电子邮箱、真实地址、电话号码等；address不只是用来呈现电子邮箱或真实地址这样的“地址”概念，而应该包括与文档创建人相关的各类联系方式信息。

根据以上定义，我们可以使用下面的代码来展示一些志愿者的名字及主页链接：

The HTML5 Doctor is run by the following group of volunteers:<address>
  <a href="http://html5doctor.com/author/jacko">Jack Osborne</a>,  
  <a href="http://html5doctor.com/author/richc">Rich Clark</a>,  
  <a href="http://html5doctor.com/author/miker">Mike Robinson</a>,
  </address>

下面是另一个范例：

<footer>
  <p class="vcard"> by    <address class="author">
      <em class="fn"><a title="Posts by Jack Osborne" href="#">Jack Osborne</a></em>
    </address> on    <time datetime="2009-11-04" class="published updated">November 4th, 2009</time>
  </p></footer>

video

通过<video>标签，我们可以抛弃最近不怎么讨好的Flash，直接在页面中播放视频文件。视频文件自然是最符合语义化的文件格式，但该元素标签同样支持音频与图片。

过去(及目前)，我们通常要使用类似下面这样繁冗丑陋的代码来将视频放置在页面中，但这种方式要求浏览器安装有Flash插件，并支持JavaScript：

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" 
height="344"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
  <param name="allowFullScreen" value="true" />
  <param name="allowscriptaccess" value="always" />
  <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" />
  <param name="allowfullscreen" value="true" />
  <embed type="application/x-shockwave-flash" width="425" height="344"
  src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true">
  </embed></object>

HTML5的方式：

<video width="640"  height="360" src="http://www.youtube.com/demo/google_main.mp4"  controls autobuffer>
  <p>
    Try this page in Safari  4! Or you can    
    <a  href="http://www.youtube.com/demo/google_main.mp4">download the  video</a>
    instead.  </p></video>

<video>标签有如下几个常用属性：

Autoplay: 用来设定视频是否在页面加载后自动播放。
Src: 为视频指定文件链接或下载路径，当浏览器不支持<video>标签或发生某种播放错误时，可以提供给用户进行下载。
Autobuffer: 用来设定视频是否自动缓冲；如果设定，那么页面加载之后，视频会自动下载缓冲，当用户点击播放按钮后，至少已经有一部分视频可以直接观看而无需等待了。
Poster: 用来为视频设置一个“相框默认图片”性质的背景图片；当视频无法正常加载播放时可以向用户呈现。
Controls: 用来设置是否为视频添加控制条，例如“播放”、“暂停”等；控制条的外观可以自定义。
Loop: 用来设置视频是否循环播放。
Width , Height: 用来控制视频的宽度与高度。

audio

HTML5中的新元素标签<audio>是被大家等待已久的，它有原生支持音频播放的功能，而不需要浏览器安装额外的扩展

<audio>元素标签的一些常用属性：

src：音频文件路径。
autobuffer：设置是否在页面加载时自动缓冲音频。
autoplay：设置音频是否自动播放。
loop：设置音频是否要循环播放。
controls：设置是否显示播放控制面板。

可以看到这些属性和<video>元素标签的属性很类似。下面我们来看一个代码范例：

<audio src="elvis.ogg" controls autobuffer></audio>

根据定义规范，以下几种API方法是可以使用的：

play()：播放音频
pause()：暂停播放
canPlayType()：命令浏览器判断当前音频文件是否可以被播放
buffered()：设定文件需要缓冲部分的开始与结束时间点。

另外，我们可以使用<source>元素标签来配合<audio>；<source>用来指定多个音频文件，如果当前浏览器不支持第一个文件，那么<audio>会自动尝试播放下面一个<source>中指定的文件；我们还可以在它们后面加上目前常规的<embed>代码来加载Flash播放器，作为后备方案；范例如下：

<audio controls autobuffer>
  <source src="elvis.ogg" />
  <source src="elvis.mp3" />
  <!-- now include flash fall back --></audio>

datalist

datalist 与 input 的新属性list一起使用可以创建组合框，双击input的时候可以提供选项让用户选择，类似历史记录一样。

<input list="browsers"><datalist id="browsers">
 <option value="Safari">
 <option value="Internet Explorer">
 <option value="Opera">
 <option value="Firefox"></datalist>

以上就是HTML5主要新增标签的使用代码分享的详细内容，更多请关注php中文网其它相关文章！

HTML5，新增标签 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：HTML5新标签之Canvas详细介绍下一条：HTML5本地存储之localStorage、sessionStorage的具体分析