首頁 >web前端 >H5教程 >HTML5主要新增標籤的使用程式碼分享

HTML5主要新增標籤的使用程式碼分享

黄舟原創: 2017-03-30 13:12:252658瀏覽

HTML5介紹

HTML5是繼HTML4以後的下一代HTML標準規範，它提供了一些新的元素和屬性。裝置和視障人士使用，除此之外，也提供了一些新的功能，總結而言，有以下幾大特點：

1、取消了一些HTML4裡過時的元素和屬性標記

其中包含純粹顯示效果的標記，如240cb830ca84ebaabbd07850110b414d和bacbf9e1ad7f40415ce1670e31edfee3，它們已經被CSS取代。結構的功能，例如，新的HTML標籤header，footer，dialog，aside，figure等的使用，將使內容創作者更加語義地創建文檔，之前的開發者在實現這些功能時一般都是使用p。

##2、內容與展式分離

b和i標籤仍然保留，但它們意義和之前有不同，這些標籤的意義是為了將一段文字標識出來，而不是為了設定粗體或斜體樣式。輸入物件

包括日期，URL，Email位址，其它的物件則增加了對非拉丁字元的支援。 HTML5還引入了微數據，這項使用機器可以識別的標籤標註內容的方法，使語義Web的處理更為簡單。容易管理的網頁，這樣的網頁對搜索引擎、對讀屏軟體等更為友善。

##多

媒體物件將不再全部綁定在object或embedTag中，而是影片有video標籤，音訊有audio標籤。儲存增加了localStorage/sessionStorage/indexedDB等瀏覽器端儲存功能。帶來直接繪製圖形的能力，可以直接在瀏覽器中操作圖形。 HTMLElement介面提供了新的API擴充。

8、新語法

（1）DOCTYPE

#HTML5的HTML語法要求文件必須宣告DOCTYPE以確保瀏覽器可以在標準模式下展示頁面。宣告方式是：

<!DOCTYPE html>

不區分大小寫。

（2）CharsetHTML5的HTML語法裡，有三種形式可以宣告

字串

的encoding類型：

#在傳輸層級（transport level）上，在HTTP實例的header裡設定Content-Type。

在檔案的開頭，設定一個Unicode的Bype Order Mark(BOM)，該字元為檔案的encoding方式提供了一個簽章。

在文件的前1024個byte之間的內容裡，使用帶有charset屬性的meta元素來宣告encoding方式。例如：09477266eebbc8a01f42387ae29e71dd。

（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

通过39000f942b2545a5315c57fa3276f220标签，我们可以抛弃最近不怎么讨好的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>

39000f942b2545a5315c57fa3276f220标签有如下几个常用属性：

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

audio

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

b97864c2e0ef2353a16c4d64c7734e92元素标签的一些常用属性：

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

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

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

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

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

另外，我们可以使用e02da388656c3265154666b7c71a8ddc元素标签来配合b97864c2e0ef2353a16c4d64c7734e92；e02da388656c3265154666b7c71a8ddc用来指定多个音频文件，如果当前浏览器不支持第一个文件，那么b97864c2e0ef2353a16c4d64c7734e92会自动尝试播放下面一个e02da388656c3265154666b7c71a8ddc中指定的文件；我们还可以在它们后面加上目前常规的d8e2720730be5ddc9c2a3782839e8eb6代码来加载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中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：HTML5新標籤之Canvas詳細介紹下一篇：HTML5新標籤之Canvas詳細介紹

看更多