HTML5 基礎教程
HTML 介紹HTML 元素HTML 屬性HTML 文字樣式元素HTML 水平線HTML 清單元素HTML +CSSHTML +JavascriptHTML 超連結HTML 檔案路徑HTML <!-- 註解 -->HTML 特殊文字HTML 顏色HTML 區塊元素與佈局XHTMLHTML5 多媒體教程
HTML <table>表格HTML <iframe>線內框架HTML <img> 圖片HTML <video> 影片HTML <audio> 音樂HTML5 表單教程
HTML <form> 表單HTML 各種表單元素HTML <input>HTML <input>屬性HTML5
HTML5 介紹HTML5 支援HTML5 新元素HTML5 正確語法HTML5 Graphics
HTML5 CanvasHTML5 SVGHTML5 Google MapsHTML5 瀏覽器支援
HTML5 可支援所有現在的瀏覽器。
除此之外,不論新舊的瀏覽器都可將沒有見過的新元素解釋成「線內元素」,因此你可以透過 CSS 及 Javascript 教導舊的瀏覽器讀懂那些元素。
定義 HTML5 新增的區塊元素
在 HTLM5 新增了許多區塊元素,利用 CSS 即可使這些新元素支援舊版瀏覽器。
- header, section, footer, aside, nav, main, article, figure {
- display: block;
- }
添加新元素到 HTML5
你甚至可以在 HTML5 中添加自己自訂義的元素
例如,你想增加一個名為<hadname>的元素,並定義他的樣式:
- <style>
- hadname{
- display: block;
- background-color: #151515;
- color:#fff;
- font-size:20px;
- }
- </style>
- <hadname>Hadname Online 有名線上科技</hadname>
若要使你自訂的新元素能在 IE8及更早版本 上運作,你必需使用 Javascript document.createElement("hadname")
IE8 問題
IE 瀏覽器問題很多,你無法透過上面方法在「IE8及更早版本」對自訂義元素新增樣式。
然而,Sjoerd Visscher 創造了 HTML5Shiv。HTML5Shiv 是一個以 JavaScript 為基底,使 HTLM5 新元素能順利在IE9及更早版本上運作。
HTML5Shiv 語句
HTML5Shiv 放罝於 <head> 標籤內
The HTML5Shiv 是一個 JavaScript 文件,使用 <script> 標籤以引用他。
當你使用下列 HTML5 所新增的元素時,才需使用他:<article>, <section>, <aside>, <nav>, <footer>
你可以在此下載 HTML5Shiv 的.js文件:https://s.had.name/CVX/ 或在此參考 CDN(Content delivery network) 版本:https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js
- <head>
- <meta charset="UTF-8">
- <!--[if lt IE 9]>
- <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
- <![endif]-->
- </head>