當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML5主要新增标签

發布時間：2024/4/17 HTML 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5主要新增标签小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

HTML5介紹

HTML5是繼HTML4以后的下一代HTML標準規范，它提供了一些新的元素和屬性。新型的標簽有利于搜索引擎和語義分析，同時更好地幫助小屏幕裝置和視障人士使用，除此之外，也提供了一些新的功能，總結而言，有如下幾大特點：

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

其中包括純粹顯示效果的標記，如<font>和<center>，它們已經被CSS取代。HTML5吸取了XHTML2的一些建議，包括一些用來改善文檔結構的功能，比如，新的HTML標簽header，footer，dialog，aside，figure等的使用，將使內容創作者更加語義地創建文檔，之前的開發者在實現這些功能時一般都是使用div。

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腳本的話，推薦使用div元素，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><div><section id="public"><h1>Public demonstrations</h1><p> ...more...</p></section><section id="destroy"><h1>Demolitions</h1><p>...more...</p></section>...more...</div><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 temporincididunt 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 元素通常包括其相關區塊的腳注信息，如作者、相關閱讀鏈接以及版權信息等。

過去(及目前)，我們通常使用類似下面這樣的代碼來寫頁面的頁腳：

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

在HTML5中，我們可以不使用div，而用更加語義化的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><div 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></div> </footer>

video

通過<video>標簽，我們可以拋棄最近不怎么討好的Flash，直接在頁面中播放視頻文件。視頻文件自然是最符合語義化的文件格式，但該元素標簽同樣支持音頻與圖片。

過去(及目前)，我們通常要使用類似下面這樣繁冗丑陋的代碼來將視頻放置在頁面中，但這種方式要求瀏覽器安裝有Flash插件，并支持JavaScript：

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>元素標簽的屬性很類似。下面我們來看一個代碼范例：

根據定義規范，以下幾種API方法是可以使用的：

play()：播放音頻
pause()：暫停播放
canPlayType()：命令瀏覽器判斷當前音頻文件是否可以被播放
buffered()：設定文件需要緩沖部分的開始與結束時間點。

另外，我們可以使用<source>元素標簽來配合<audio>；<source>用來指定多個音頻文件，如果當前瀏覽器不支持第一個文件，那么<audio>會自動嘗試播放下面一個<source>中指定的文件；我們還可以在它們后面加上目前常規的<embed>代碼來加載Flash播放器，作為后備方案；范例如下：

datalist

datalist 與 input 的新屬性list一起使用可以創建組合框，雙擊input的時候可以提供選項讓用戶選擇，類似歷史記錄一樣。

轉載于:https://www.cnblogs.com/jscode/archive/2013/01/25/3566602.html

總結

以上是生活随笔為你收集整理的HTML5主要新增标签的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

标签