第一章 1.6 HTML5 的新功能(一)

時間  2019-12-08
標籤 第一章 1.6 html5 html 功能 欄目 HTML5 简体版
原文   原文鏈接

在討論 HTML5 編程以前，讓咱們快速預覽一下 HTML5 的新功能。css

1.6.1新的 DOCTYPE 和字符集html

首先，根據 HTML5 設計準則的第 3 條——化繁爲簡，Web 頁面的 DOCTYPE 被極大地簡化了。如下面這段 HTML4 DOCTYPE 代碼爲例進行對比：
<!DOCTYPE HTML PUBLIC 「-//W3C//DTD HTML 4.01 Transitional//EN」 」http://www.w3.org/TR/html4/loose.dtd」>
誰能記得住？因此在新建頁面的時候，咱們每每只能經過複製粘貼的方式添加這麼長的DOCTYPE，同時腦子裏還不肯定複製的對不對。HTML5 乾淨利索地解決了這個問題：
<!DOCTYPE html>
如今的 DOCTYPE 好記多了。跟 DOCTYPE 同樣，字符集的聲明也被簡化了。過去是這樣的：
<meta http-equiv=」Content-Type」 content=」text/html; charset=utf-8″>
如今成了：
<meta charset=」utf-8″>
使用新的 DOCTYPE 後，瀏覽器默認以標準模式（standards mode）顯示頁面。例如， Firefox用打開一個 HTML5 頁面，而後點擊「 工具➤頁面信息」 （Tools ➤ Page Info），會看 到圖 1-1 所示的畫面。示例頁面是以標準模式顯示的。使用 HTML5 的 DOCTYPE 會觸發瀏覽器以標準兼容模式顯示頁面。衆所周知，Web 頁面有多種顯示模式，好比怪異模式（Quirks） 近標準模式、（Almost Standards）以及標準模式（Standards）。其中標準模式也被稱爲非怪異模式（no-quirks） 瀏覽器會根據 DOCTYPE 來識別該使用哪一種模式，。以及使用什麼規則來驗證頁面。在怪異模式下，瀏覽器會盡可能不中斷頁面顯示，即便沒有徹底經過驗證也會將其顯示出來。HTML5 引入了新的標記元素和其餘機制（隨後會詳細討論），所以若是堅持使用已廢棄的元素，那麼頁面將沒法經過驗證。html5

1.6.2 新元素和舊元素web

HTML5 引入了不少新的標記元素，根據內容類型的不一樣，這些元素被分紅了 7 大類。見表1-1。編程

HTML5的內容類型canvas

內容類型 描述
內嵌 向文檔中添加其餘類型的內容，例如audio、video、canvas和iframe等
流 在文檔和應用的body中使用的元素，例如form、h1和small等
標題 段落標題，例如h一、h2和hgroup等
交互 與用戶交互的內容，例如音頻和視頻的控件、button和texta
元數據 一般出如今頁面的head中，設置頁面其餘部分的表現和行爲，例如script、style
短語 文本和文本標記元素，例如mark、kbd、sub和sup等
片斷 用於定義頁面片斷的元素，例如article、aside和title等

上述全部類型的元素均可以經過 CSS 來設定樣式。此外，雖然其中一些元素，如 canvas、audio 和 video，在使用時每每須要其餘 API 來配合，以實現細粒度控制，但它們一樣能夠直接使用。咱們在後續章節中詳細討論這類元素 API。限於篇幅，本書討論的內容沒法涵蓋全部新元素，不過片斷類元素是全新的，咱們會在下一節討論，而 canvas、audio 和 video 做爲 HTML5 新增的元素也會在後續章節中詳細討論。瀏覽器

一樣地，對於舊的標籤元素，網上的資料已經不少了，咱們不會把全部舊的標籤元素都羅列出來。不過須要注意的是，HTML5 中移除了不少在行內設樣式的標記元素，如 big、center、font 和 basefont 等，以鼓勵開發人員使用 CSS。ide

1.6.3 語義化標記模塊化

片斷類的內容類型包含許多 HTML5 元素。HTML5 定義了一種新的語義化標記來描述元素的內容。雖然語義化標記不會讓你立刻感覺到有什麼好處，可是它能夠簡化 HTML 頁面設計，而且未來搜索引擎在抓取和索引網頁的時候，也絕對會利用到這些元素的優點。前面咱們說過，HTML5 的宗旨之一就是存在即合理。Google 分析了上百萬的頁面，從中發現了 DIV 標籤的通用 ID 名稱重複量很大。例如，不少開發人員喜歡使用 DIV id=」footer」來標記頁腳內容，因此 HTML5 引入了一組新的片斷類元素，在目前主流的瀏覽器中已經能夠用了。工具

 1-2 HTML5中新的片斷類元素

元素名 描述
header 標記頭部區域的內容（用於整個頁面或頁面中的一塊區域）
footer 標記腳部區域的內容（用於整個頁面或頁面中的一塊區
section Web頁面中的一塊區域
article 獨立的文章內
aside 相關內容或者引文
nav 導航類輔助內容

上面全部的元素都能用 CSS 設定樣式。以前說到了 HTML5 效率優先的設計理念，它推崇表現和內容的分離，因此在 HTML5 的實際編程中，開發人員必須使用 CSS 來定義樣式。代碼清單1-1 是一個 HTML5 頁面的概貌，其中使用了新的 DOCTYPE、字符集和語義化標記元素——新的片斷類元素。示例代碼對應的源碼在 code/intro 文件夾中。

代碼清單 1-1 HTML5 示例頁面

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8" >
 5 <title>HTML5</title>
 6 <link rel="stylesheet" href="html5.css">
 7 </head>
 8 <body>
 9 <header>
10     <h1>Header</h1>
11     <h2>Subtitle</h2>
12     <h4>HTML5 Rocks!</h4>
13 </header>
14 <div id="container">
15     <nav>
16         <h3>Nav</h3>
17         <a href="http://www.example.com">Link 1</a> 
18         <a href="http://www.example.com">Link 2</a>
19         <a href="http://www.example.com">Link 3</a>
20     </nav>
21     <section>
22         <article>
23             <header>
24                 <h1>Article Header</h1>
25             </header>
26             <p>Lorem ipsum dolor HTML5 nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna.</p>
27             <p>Per inceptos himenaeos. Quisque feugiat, justo at vehicula pellentesque, turpis lorem dictum nunc.</p>
28             <footer>
29                 <h2>Article Footer</h2>
30             </footer>
31         </article>
32         <article>
33             <header>
34                 <h1>Article Header</h1>
35             </header>
36             <p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio</p>
37             <footer>
38                 <h2>Article Footer</h2>
39             </footer>
40         </article>
41     </section>
42     <aside>
43         <h3>Aside</h3>
44         <p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio rhoncus</p>
45     </aside>
46     <footer>
47         <h2>Footer</h2>
48     </footer>
49 </div>
50 </body>
51 </html>

 


沒有樣式的頁面看起來有些枯燥乏味。代碼清單1-2是一些能夠用來設置內容樣式的 CSS 代碼。須要注意的是，這份樣式表使用了 CSS3的一些新特性，好比圓角（border-radius）和旋轉變換（transform:rotate();）。CSS3同 HTML5同樣也正在開發過程當中，而且爲了便於瀏覽器逐步支持，也採用了模塊化的方式發佈子規範（例如變換（transformation） 動畫、（animation）和過渡（transition）分別對應不一樣的子規範）。

CSS3 的規範極可能還會變更，CSS3 中的功能也處於實驗期，所以爲了不命名空間衝突，這些功能都會加上瀏覽器廠商的前綴。要顯示圓角、漸變（gradients）、陰影（shadows）和變形（transformations）的話，須要在聲明的部分加上前綴：-moz-（Mozilla 瀏覽器）、o-（Opera 瀏覽器）和-webkit-（Safari 和 Chrome 等基於 WebKit 核心的瀏覽器）。代碼清單 1-2 HTML5 頁面對應的 CSS 文件

body {
 background-color:#CCCCCC;
 font-family:Geneva, Arial, Helvetica, sans-serif;
 margin: 0px auto;
 max-width:900px;
 border:solid;
 border-color:#FFFFFF;
}
header {
 background-color: #F47D31;
 display:block;
 color:#FFFFFF;
 text-align:center;
}
header h2 {
 margin: 0px;
}
h1 {
 font-size: 72px;
 margin: 0px;
}
h2 {
 font-size: 24px;
 margin: 0px;
 text-align:center;
 color: #F47D31;
}
h3 {
 font-size: 18px;
 margin: 0px;
 text-align:center;
 color: #F47D31;
}
h4 {
 color: #F47D31;
 background-color: #fff;
 -webkit-box-shadow: 2px 2px 20px #888;
 -webkit-transform: rotate(-45deg);
 -moz-box-shadow: 2px 2px 20px #888;
 -moz-transform: rotate(-45deg);
 position: absolute;
 padding: 0px 150px;
 top: 50px;
 left: -120px;
 text-align:center;
}
nav {
 display:block;
 width:25%;
 float:left;
}
nav a:link, nav a:visited {
 display: block;
 border-bottom: 3px solid #fff;
 padding: 10px;
 text-decoration: none;
 font-weight: bold;
 margin: 5px;
}
nav a:hover {
 color: white;
 background-color: #F47D31;
}
nav h3 {
 margin: 15px;
 color: white;
}
#container {
 background-color: #888;
}
section {
 display:block;
 width:50%;
 float:left;
}
article {
 background-color: #eee;
 display:block;
 margin: 10px;
 padding: 10px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 -webkit-box-shadow: 2px 2px 20px #888;
 -webkit-transform: rotate(-10deg);
 -moz-box-shadow: 2px 2px 20px #888;
 -moz-transform: rotate(-10deg);
}
article header {
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 padding: 5px;
}
article footer {
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 padding: 5px;
}
article h1 {
 font-size: 18px;
}
aside {
 display:block;
 width:25%;
 float:left;
}
aside h3 {
 margin: 15px;
 color: white;
}
aside p {
 margin: 15px;
 color: white;
 font-weight: bold;
 font-style: italic;
}
footer {
 clear: both;
 display: block;
 background-color: #F47D31;
 color:#FFFFFF;
 text-align:center;
 padding: 15px;
}
footer h2 {
 font-size: 14px;
 color: white;
}
/* links */
a {
 color: #F47D31;
}
a:hover {
 text-decoration: underline;
}

 


圖 1-2 是代碼清單 1-1 中的頁面應用了 CSS（包括部分 CSS3）以後的顯示效果。其實並不能把這個頁面當成所謂的典型 HTML5 頁面。由於計劃趕不上變化，這個示例使用了不少新標籤只是爲了演示而已。
1最後須要說明的是，看起來好像瀏覽器是由於識別了新的元素，因此顯示出了對應的內容。其實否則，事實上這些元素極可能是先被重命名爲了 foo 或者 bar，而後再應用樣式，最後才顯示出來的（固然，對於搜索引擎優化來講沒有任何好處）。IE 是個特例，由於 IE 須要將這些元素都做爲 DOM 的一部分，因此要想在 IE 中看到這些元素，必須用編程的方式把它們插入 DOM中，而後再以塊元素（block element）的形式顯示出來。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程