HTML5 簡介、瀏覽器支持、新元素


什么是 HTML5?

HTML5 是最新的 HTML 標准。

HTML5 是專門為承載豐富的 web 內容而設計的,並且無需額外插件。

HTML5 擁有新的語義、圖形以及多媒體元素。

HTML5 提供的新元素和新的 API 簡化了 web 應用程序的搭建。

HTML5 是跨平台的,被設計為在不同類型的硬件(PC、平板、手機、電視機等等)之上運行。

注釋:在下面的章節中,您將學到如何“幫助”老版本的瀏覽器處理 HTML5。

HTML5 中的新內容?

HTML5 的新的文檔類型(DOCTYPE)聲明非常簡單:

<!DOCTYPE html>
The new character encoding (charset) declaration is also very simple:
<meta charset="UTF-8">

HTML5 實例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>

注釋:HTML5 中默認的字符編碼是 UTF-8。

HTML5 - 新的屬性語法

HTML5 標准允許 4 中不同的屬性語法。

本例演示在 <input> 標簽中使用的不同語法:

類型 示例
Empty <input type="text" value="John Doe" disabled>
Unquoted <input type="text" value=John Doe>
Double-quoted <input type="text" value="John Doe">
Single-quoted <input type="text" value='John Doe'>

在 HTML5 標准中,根據對屬性的需求,可能會用到所有 4 種語法。

HTML5 - 新特性

HTML5 的一些最有趣的新特性:

  • 新的語義元素,比如 <header>, <footer>, <article>, and <section>。
  • 新的表單控件,比如數字、日期、時間、日歷和滑塊。
  • 強大的圖像支持(借由 <canvas> 和 <svg>)
  • 強大的多媒體支持(借由 <video> 和 <audio>)
  • 強大的新 API,比如用本地存儲取代 cookie。

HTML5 - 被刪元素

以下 HTML 4.01 元素已從 HTML5 中刪除:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>

    HTML5 瀏覽器支持

    所有現代瀏覽器都支持 HTML5。

    此外,所有瀏覽器,不論新舊,都會自動把未識別元素當做行內元素來處理。

    正因如此,您可以幫助老式瀏覽器處理”未知的“ HTML 元素。

    注釋:您甚至可以教授石器時代的 IE6 如何處理未知的 HTML 元素。

    把 HTML5 元素定義為塊級元素

    HTML5 定義了八個新的語義 HTML 元素。所有都是塊級元素。

    您可以把 CSS display 屬性設置為 block,以確保老式瀏覽器中正確的行為:

    實例

    header, section, footer, aside, nav, main, article, figure {
    display: block;
    }

    向 HTML 添加新元素

    您可以通過瀏覽器 trick 向 HTML 添加任何新元素:

    本例向 HTML 添加了一個名為 <myHero> 的新元素,並為其定義 display 樣式:

    實例

    <!DOCTYPE html>
    <html>

    <head>
    <title>Creating an HTML Element</title>
    <script>document.createElement("myHero")</script>
    <style>
    myHero {
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
    }
    </style>
    </head>

    <body>

    <h1>My First Heading</h1>

    <p>My first paragraph.</p>

    <myHero>My First Hero</myHero>

    </body>
    </html>

    已添加的 JavaScript 語句 document.createElement("myHero"),僅適用於 IE。

    Internet Explorer 的問題

    上述方案可用於所有新的 HTML5 元素,但是:

    注意:Internet Explorer 8 以及更早的版本,不允許對未知元素添加樣式。

    幸運的是,Sjoerd Visscher 創造了 "HTML5 Enabling JavaScript", "the shiv":

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    The code above is a comment, but early versions of IE9 will read it (and understand it).

    完整的 Shiv 解決方案

    實例

    <!DOCTYPE html>
    <html>

    <head>
    <title>Styling HTML5</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    </head>

    <body>

    <h1>My First Article</h1>

    <article>
    London is the capital city of England.
    It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.
    </article>

    </body>
    </html>

    引用 shiv 代碼的鏈接必須位於 <head> 元素中,因為 Internet Explorer 需要在讀取之前認識所有新元素。

    HTML5 Skeleton

    實例

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>HTML5 Skeleton</title>
    <meta charset="utf-8">

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
    </script>
    <![endif]-->

    <style>
    body {font-family: Verdana, sans-serif; font-size:0.8em;}
    header,nav, section,article,footer
    {border:1px solid grey; margin:5px; padding:8px;}
    nav ul {margin:0; padding:0;}
    nav ul li {display:inline; margin:5px;}
    </style>
    </head>

    <body>

    <header>
    <h1>HTML5 SKeleton</h1>
    </header>

    <nav>
    <ul>
    <li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li>
    <li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
    <li><a href="html5_canvas.asp">HTML5 Graphics</a></li>
    </ul>
    </nav>

    <section>

    <h1>Famous Cities</h1>

    <article>
    <h2>London</h2>
    <p>London is the capital city of England. It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
    </article>

    <article>
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
    </article>

    <article>
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
    </article>

    </section>

    <footer>
    <p>© 2014 W3Schools. All rights reserved.</p>
    </footer>

    </body>
    </html>

    新的語義/結構元素

    HTML5 提供的新元素可以構建更好的文檔結構:

    標簽 描述
    <article> 定義文檔內的文章。
    <aside> 定義頁面內容之外的內容。
    <bdi> 定義與其他文本不同的文本方向。
    <details> 定義用戶可查看或隱藏的額外細節。
    <dialog> 定義對話框或窗口。
    <figcaption> 定義 <figure> 元素的標題。
    <figure> 定義自包含內容,比如圖示、圖表、照片、代碼清單等等。
    <footer> 定義文檔或節的頁腳。
    <header> 定義文檔或節的頁眉。
    <main> 定義文檔的主內容。
    <mark> 定義重要或強調的內容。
    <menuitem> 定義用戶能夠從彈出菜單調用的命令/菜單項目。
    <meter> 定義已知范圍(尺度)內的標量測量。
    <nav> 定義文檔內的導航鏈接。
    <progress> 定義任務進度。
    <rp> 定義在不支持 ruby 注釋的瀏覽器中顯示什么。
    <rt> 定義關於字符的解釋/發音(用於東亞字體)。
    <ruby> 定義 ruby 注釋(用於東亞字體)。
    <section> 定義文檔中的節。
    <summary> 定義 <details> 元素的可見標題。
    <time> 定義日期/時間。
    <wbr> 定義可能的折行(line-break)。

    閱讀更多有關 HTML5 語義的內容。

    新的表單元素

    標簽 描述
    <datalist> 定義輸入控件的預定義選項。
    <keygen> 定義鍵對生成器字段(用於表單)。
    <output> 定義計算結果。

    閱讀更多有關 HTML 表單元素中新老元素。

    新的輸入類型

    新的輸入類型 新的輸入屬性
    • color
    • date
    • datetime
    • datetime-local
    • email
    • month
    • number
    • range
    • search
    • tel
    • time
    • url
    • week
    • autocomplete
    • autofocus
    • form
    • formaction
    • formenctype
    • formmethod
    • formnovalidate
    • formtarget
    • height 和 width
    • list
    • min 和 max
    • multiple
    • pattern (regexp)
    • placeholder
    • required
    • step

    學習 HTML 輸入類型中的所有新老輸入類型。

    學習 HTML 輸入屬性中的所有輸入屬性。

    HTML5 - 新的屬性語法

    HTML5 允許四種不同的屬性語法。

    該例演示 <input> 標簽中使用的不同語法:

    標簽 描述
    Empty <input type="text" value="John Doe" disabled>
    Unquoted <input type="text" value=John>
    Double-quoted <input type="text" value="John Doe">
    Single-quoted <input type="text" value='John Doe'>

    在 HTML5 中,根據屬性所需,可能會使用所有這四種語法。

    HTML5 圖像

    標簽 描述
    <canvas> 定義使用 JavaScript 的圖像繪制。
    <svg> 定義使用 SVG 的圖像繪制。

    閱讀更多有關 HTML5 Canvas 的內容。

    閱讀更多有關 HTML5 SVG 的內容。

    新的媒介元素

    標簽 描述
    <audio> 定義聲音或音樂內容。
    <embed> 定義外部應用程序的容器(比如插件)。
    <source> 定義 <video> 和 <audio> 的來源。
    <track> 定義 <video> 和 <audio> 的軌道。
    <video> 定義視頻或影片內容。

    閱讀更多有關 HTML5 視頻的內容。

    閱讀更多有關 HTML5 音頻的內容。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com