HTML5 ??

HTML5? ?? ???? ??? ?????? ??? HTML ????? ? ?? ??? ??? ??? ??? ??? ??? ?? HTML? ???????. HTML5? ??? ???????

HTML5 ??

HTML5是HTML最新的修訂版本，2014年10月由萬維網(wǎng)聯(lián)盟（W3C）完成標準制定。

HTML5的設計目的是為了在移動設備上支持多媒體。

HTML5 簡單易學。

HTML5? HTML? ?? ?? ????, 2014? 10? W3C(World Wide Web Consortium)?? ??? ???????. HTML5? ??? ???? ?????? ????? ???????. HTML5? ??? ????.

HTML5? ??????

HTML5? ??? HTML ?????.

HTML, HTML 4.01? ?? ??? 1999?? ??????. ? ??? ?? ??? ???? ?????.

HTML5? ?? ?? ?? ?????. ??? ???? ?? ?????? ?? HTML5? ?? ???? ????.

HTML5? ??? ???????

HTML5? W3C? WHATWG(Web Hypertext Application Technology Working Group) ?? ??? ?????. .

WHATWG? ? ??? ??????? ??? ??, W3C? XHTML 2.0? ??? ?? ????. 2006?? ? ???? ??? ??? HTML? ??? ?? ????? ??????.

HTML5? ? ?? ???? ? ??:

??? ?? ??? ??

??? ??? ?? ??? ? ??? ??

???? ???? ??? ?? ? ?? ??

??, ???, ??, ??, ??? ?? ??? ?? ??? ??

???, ??, ??, ???, URL? ?? ??? ?? ??? , ??

HTML5 <!DOCTYPE>

< HTML5 ??? ? ?? ?? ??? ?? ?????.

<!DOCTYPE html>

? ?? ?? ?? <!DOCTYPE>

?? ?? HTML5 ??

? ????? ??? ? ????. ??? ??? HTML5 ?????:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文檔標題</title>
</head>
<body>
文檔內(nèi)容......
</body>
</html>

??: ??? ????? ?? <meta charset="utf-8">? ???? ???? ???? ???. ??? ??? ??? ??? ?????.

HTML5 ??

??? ??
??? ??
CSS3 ?? ??
??? ? ???
2D/3D ???
?? ????
?? SQL ???
? ??????

HTML5 ?????

HTML5? ???? ?????? ???? ???? ???? ??? ? ????. HTML5

??????

HTML5? ???? ??? ??????? ??? ? ????.

?? ??? ???

?? ?? ???

?? SQL ???

?? ??
Javascript Worker
??? ???:
<canvas> ?? ??
??? SVG ??
CSS3 2D/3D ??

CSS3? ???? HTML5

? ???
??? ??
?????
2D/3D ??
?? ???
??? ??
???? ??? ??

CSS3? ?? ??? ?????. ? ???? ?????. CSS3 ????.

?? ??

HTML5? ??? ?? ?? ?? ??? ?????.

標簽	描述
<article>	定義頁面獨立的內(nèi)容區(qū)域。
<aside>	定義頁面的側(cè)邊欄內(nèi)容。
<bdi>	允許您設置一段文本，使其脫離其父元素的文本方向設置。
<command>	定義命令按鈕，比如單選按鈕、復選框或按鈕

????? ???? ??? ??? ?????.

< side>

???? ???? ??? ?? .

< bdi>

?? ??? ??? ?? ???? ????? ??????.

< command>

???? ?? ?? ?? ?? ?? ??, ???? ?? ??

<details>	用于描述文檔或文檔某個部分的細節(jié)
<dialog>	定義對話框，比如提示框
<summary>	標簽包含 details 元素的標題
<figure>	規(guī)定獨立的流內(nèi)容（圖像、圖表、照片、代碼等等）。
<figcaption>	定義 <figure> 元素的標題

<footer>	定義 section 或 document 的頁腳。
<header>	定義了文檔的頭部區(qū)域
<mark>	定義帶有記號的文本。
<meter>	定義度量衡。僅用于已知最大和最小值的度量。
<nav>	定義導航鏈接的部分。

<progress>	定義任何類型的任務的進度。
<ruby>	定義 ruby 注釋（中文注音或字符）。
<rt>	定義字符（中文注音或字符）的解釋或發(fā)音。
<rp>	在 ruby 注釋中使用，定義不支持 ruby 元素的瀏覽器所顯示的內(nèi)容。
<section>	定義文檔中的節(jié)（section、區(qū)段）。

<time>	定義日期或時間。
<wbr>	規(guī)定在文本中的何處適合添加換行符。

HTML5 ??

? ?? ??, ? ??, ? ?? ??, ?? ??? ??.

?? ???

?? HTML 4.01 ??? HTML5?? ???????.

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<????>
<noframes>
<strike>

?? ?? ?????? ???? ???? ??? ?????

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文檔標題</title>
</head>
<body>
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    你的瀏覽器不支持 video 標簽。
</video>
</body>
</html>

You You ???? ???? ?? src? ???? ??? ??? ?? ? ????.

HTML5 ?????

? ?????.

?? ??? Safari, Chrome, Firefox ? Opera? ?? HTML5 ??? ?????. Internet Explorer 9? ?? HTML5 ??? ?????.

?? ?? ????(HTML5? ???? ??)?? HTML5? ????? ? ? ????.

?? ????? HTML5? ?????.

?? ?? ????? ? ????? ???? ?? ????? ??? ? ?? ??? ???? ??? ??? ?????.

? ??? ????? "? ? ??" HTML ??? ????? "??? "? ? ????.

IE6(Windows XP 2001) ????? ???? ?? HTML ??? ????? ??? ?? ????.

HTML5 ??? ?? ??? ??

HTML5? 8?? ??? HTML ?? ??? ?????. ? ?? ??? ?? ?? ?????.

?? ??? ?????? ??? ??? ???? ????? CSS ?? ?? ?? ??? ?? ????? ??? ? ????.

header , ??, ???, ?, nav, ??, ??, ?? {
?????: ??
}

HTML? ? ?? ??

HTML? ??? ??? ??? ? ????.

? ?? HTML? ? ??? ???? ??? ???? ?????. ?? ??? <myHero>???.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
    <meta charset="utf-8">
    <title>為 HTML 添加新元素</title>
    <script>document.createElement("myHero")</script>
    <style>
        myHero {
            display: block;
            background-color: #9dddd7;
            padding:40px;
            font-size: 30px;
        }
    </style>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
<myHero>我的第一個新元素</myHero>
</body>
</html>

????? ???? ?????

JavaScript ? document.createElement("myHero")? IE ????? ? ??? ???? ????.

Internet Explorer ???? ??

? ??? ???? IE ????? HTML5 ??? ??? ? ???,

Internet Explorer 8 ?? IE ??????? ? ??? ???? ????.

Sjoerd Visscher? ?? "HTML5 Enabling JavaScript", " shiv"? ???? ? ??? ??? ? ????.

? ??? ????, IE ???? ??? 1?? ?? ? html5.js ??? ?? ? ?????. IE9? ???? ?? ?????.

??: ?? ???? Baidu ?? ??? ?????? ?????. (Google ??? ?????? ???? ??????.):

html5shiv? IE ????? ? ?? ??????. html5shiv? ?? HTML5?? ??? ? ??? IE6-8?? ???? ?? ??? ?????. ??? ? ??? ?? ??? ???? ?? ?? ??? ??? ? ??? CSS ???? ??? ? ????.

??? Shiv ???

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
    <meta charset="utf-8">
    <title>渲染 HTML5</title>
    <!--[if lt IE 9]>
    <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
</head>
<body>
<h1>學習HTML就到PHP中文網(wǎng)</h1>
<article>
    php中文網(wǎng) ——  php中文網(wǎng)！！
</article>
</body>
</html>

html5shiv.js ?? ??? IE ????? <head> ? HTML5 ??? ?? ??? ? ?? ? ??? ???? ???.

???? ??

??? ??

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文網(wǎng)(php.cn)</title> <meta charset="utf-8"> <title>為 HTML 添加新元素</title> <script>document.createElement("myHero")</script> <style> myHero { display: block; background-color: #9dddd7; padding:40px; font-size: 30px; } </style> </head> <body> <h1>我的第一個標題</h1> <p>我的第一個段落。</p> <myHero>我的第一個新元素</myHero> </body> </html>

?????? ???

????