社群 學習 工具庫 休閒
搜尋
繁体中文

HTML5 簡介

HTML5 是什麼樣的，怎麼用？其實在我們的HTML教學的第一個章節，我們裡面給大家的例子裡面用的程式碼都是HTML來寫的。下面我們再來詳細了解HTML5

HTML5 簡介

9.jpg

##HTML5是HTML最新的修訂版本，2014年10月由萬維網聯盟（W3C）完成標準制定。 ######HTML5的設計目的是為了在行動裝置上支援多媒體。 ######HTML5 簡單易學。 ################

什麼是 HTML5?

HTML5 是下一代 HTML 標準。

HTML , HTML 4.01的上一個版本誕生於 1999 年。自從那以後，Web 世界已經經歷了巨變。

HTML5 仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些 HTML5 支援。

HTML5 是如何開始的？

HTML5 是 W3C 與 WHATWG 合作的結果,WHATWG 指 Web Hypertext Application Technology Working Group。 。

WHATWG 致力於 web 表單和應用程序，而 W3C 專注於 XHTML 2.0。在 2006 年，雙方決定進行合作，來建立一個新版本的 HTML。

HTML5 中的一些有趣的新功能：

用於繪畫的canvas 元素

用於媒介回放的video 和audio 元素

對本地離線儲存的更好的支援

新的特殊內容元素，例如article、footer、header、nav、section

新的表單控制項，例如calendar、date、time、email、url、search

#HTML5 <!DOCTYPE>

<! doctype> 宣告必須位於HTML5 文件中的第一行,使用非常簡單:

<!DOCTYPE html>

############### ######你可以看一下我們的第一章範例是不是由<!DOCTYPE>開頭的###############最小的HTML5文件#### ########下面是一個簡單的HTML5文件：###
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>

注意：對於中文網頁需要使用 <meta charset="utf-8"> 宣告編碼，否則會出現亂碼。

HTML5 的改進

  • ##新屬性

  • 完全支援CSS3

  • #Video 和Audio

  • 2D/3D 製圖

本機儲存

本機SQL 資料

Web 應用程式

HTML5 多媒體

使用HTML5 你可以簡單的在網頁中播放影片(video)與音訊(audio) 。 HTML5 <video>

HTML5 

<audio>

  • HTML5應用

  • 使用HTML5 你可以簡單地開發應用程式

  • #本地資料儲存

    • ##存取本機檔案

    • 本機SQL 資料

    • 快取參考

##Javascript 工作者XHTMLHttpRequest 2

  • #HTML5 圖形

  • ##使用HTML5 你可以簡單的繪製圖形:

  • 使用 <canvas> 元素

    #########使用內嵌 SVG############使用CSS3 2D/3D###

HTML5 使用CSS3

  • #新選擇器

  • ##新屬性

  • 動畫

  • #2D/3D 轉換

  • 圓角

  • 陰影效果

  • 可下載的字體

了解更多CSS3知識請查看本站的 CSS3 教學。

語意元素

#HTML5 新增了許多語意元素如下所示：

              <#article>定義頁面獨立的內容區域。     <aside>#定義頁面的側邊欄內容。     <bdi>#可讓您設定一段文本，使其脫離其父元素的文字方向設定。     <command>#定義指令按鈕，例如單選按鈕、核取方塊或按鈕
標籤說明
##    <dialog>定義對話框，例如提示框標籤包含details 元素的標題#規定獨立的串流內容（影像、圖表、照片、程式碼等等）。 定義 <figure> 元素的標題
    <details>用來描述文件或文件某部分的細部
#    <dialog>
    <summary>
#    <figure>
    <figcaption>
#########    <mark>定義帶有記號的文字。 #定義度量衡。僅用於已知最大值和最小值的度量。 #定義導覽連結的部分。
    <footer>#定義 section 或 document 的頁尾。
    <header>#定義了文件的頭部區域
##    <mark>
    <meter>
    <nav>
######
    <progress>#定義任何類型的任務的進度。
    <ruby>#定義 ruby​​ 註解（中文註音或字元）。
    <rt>#定義字元（中文註音或字元）的解釋或發音。
    <rp>#在 ruby​​ 註解中使用，定義不支援 ruby​​ 元素的瀏覽器所顯示的內容。
    <section>#定義文件中的節（section、區段）。
    <time>定義日期或時間。
    <wbr>#規定在文本中的何處適合新增換行符號。

HTML5 表單

#新表單元素, 新屬性，新輸入類型，自動驗證。

#已移除元素

以下的HTML 4.01 元素在HTML5中已經刪除:

  • <acronym>

  • <applet>

  • <basefont>

  • #<big>

  • <center>


###########################################' #########<dir>############<font>############<frame>##### #######<frameset>############<noframes>###########<strike>####### ##############實例 ############下面的範例給大家看一下在網頁上播放影片###r​​rreee######你可以在本地找一個視頻，在src中放入視頻的位置及名稱，嘗試一下###############HTML5 瀏覽器支援#########

最新版本的 Safari、Chrome、Firefox 以及 Opera 支援某些 HTML5 特性。 Internet Explorer 9 將支援某些 HTML5 特性。

7.jpg4.jpg

你可以讓一些早期的瀏覽器（不支援HTML5）支援 HTML5。


現代的瀏覽器都支援 HTML5。

此外，所有瀏覽器，包括舊的和最新的，對無法識別的元素會作為內聯元素自動處理。

正因為如此，你可以 "教會" 瀏覽器處理 "未知" 的 HTML 元素。

甚至你可以教導 IE6 (Windows XP 2001) 瀏覽器處理未知的 HTML 元素。

將HTML5 元素定義為區塊元素



##HTML5 定了8 個新的HTML 語意（semantic） 元素。所有這些元素都是 塊級 元素。

為了能讓舊版的瀏覽器正確顯示這些元素，你可以設定CSS 的 display 屬性值為 block:

header,

section

,

footer

,

aside

,

nav###, ###main###, ###article###, ## #figure ###{###    display: block; ###}##################為HTML 新增元素########### ##你可以為HTML 新增新的元素。 ######此實例新增至 HTML的新元素，並為此元素定義樣式，元素名稱為 <myHero> ：###
<!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>
###執行程式看看###

JavaScript 語句 document.createElement("myHero") 是為 IE 瀏覽器新增新的元素。

Internet Explorer 瀏覽器問題

#你可以使用以上的方法來為IE 瀏覽器新增HTML5 元素，但是：

Internet Explorer 8 及更早IE 版本的瀏覽器不支援以上的方式。


我們可以使用Sjoerd Visscher 建立的"HTML5 Enabling JavaScript", " shiv" 來解決該問題:

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

以上程式碼是註釋，作用是在IE 瀏覽器的版本小於IE9 時將讀取html5.js 文件，並解析它。

注意：國內用戶請使用百度靜態資源庫（Google 資源庫在國內不穩定）：

<!--[if lt IE 9]>
  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif ]-->

針對IE瀏覽器html5shiv 是比較好的解決方案。 html5shiv主要解決HTML5提出的新的元素不被IE6-8識別，這些新元素不能作為父節點包裹子元素，並且不能應用CSS樣式。

完美的Shiv 解決方案

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>php中文网(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>

html5shiv.js 引用程式碼必須放在<head> 元素中，因為IE瀏覽器在解析HTML5 新元素時需要先載入該檔案。



#
繼續學習
||
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(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>
提交重置程式碼
上一節 下一節
教程列表
獲取幫助
  • 課程推薦
  • 課件下載
課件暫不提供下載，工作人員正在整理中，後期請多關注該課程~

看過本課程的同學也在學習

最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)  492836 次播放