不朽情缘有哪些技巧

書名： HTML5+CSS3移動Web開發實戰（第2版）
作者名：陳承歡編著
本章字數： 4873字
更新時間： 2023-11-15 19:05:09

【知識梳理】

1. HTML5印象

HTML5是萬維網的核心語言，它的第一份正式草案公布于2008年1月22日。2012年12月17日，萬維網聯盟（World Wide Web Consortium，W3C）宣布凝結了大量網絡工作者心血的HTML5規范正式定稿。W3C的發言稿稱：“HTML5是開放的Web網絡平臺的奠基石。”

2013年5月6日，HTML 5.1正式草案公布。該規范定義了第五次重大版本，第一次要修訂萬維網的核心語言：超文本標記語言（Hyper Text Markup Language，HTML）。在這個版本中，新功能不斷推出，以幫助Web應用程序的開發者努力提高新元素的交互操作性。

支持HTML5的瀏覽器包括Chrome（谷歌瀏覽器）、Firefox（火狐瀏覽器）、IE9及其更高版本、Safari、Opera等。傲游瀏覽器（Maxthon）以及基于IE或Chromium（Chrome的工程版或稱實驗版）推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹瀏覽器等國產瀏覽器同樣具備支持HTML5的能力。

2. CSS3印象

CSS（Cascading Style Sheet）可譯為層疊樣式表或級聯樣式表，是一組格式設置規則，用于控制Web頁面的外觀。

在制作網頁時采用層疊樣式表技術，可以有效地對頁面的布局、字體、顏色、背景和其他效果實現精確控制。這時，只要對相應的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者不同網頁的外觀和格式。CSS3是CSS技術的升級版本。CSS3語言開發是朝著模塊化方向發展的。CSS3將完全向后兼容，網絡瀏覽器也將繼續支持CSS2。CSS3可以使用新的可用的選擇器和屬性，可實現新的設計效果（例如漸變、交互和分欄）。

3. HTML5的主要特性

（1）語義特性（Class ：Semantic）

HTML5賦予網頁更好的意義和結構，更加豐富的標簽將隨著對RDFa、微數據與微格式等方面的支持，構建對程序、用戶都更有價值的數據驅動的Web。

（2）本地存儲特性（Class ：Offline & Storage）

基于HTML5開發的網頁App擁有更短的啟動時間和更快的聯網速度。這得益于HTML5的App Cache及本地存儲功能。

（3）設備兼容特性（Class ：Device Access）

自帶有Geolocation（地理定位）功能的API（Application Programming Interface，應用程序編程接口）文檔公開以來，HTML5為網頁應用開發者們提供了更多功能上的優化選擇。HTML5提供了前所未有的數據與應用接入開放接口，使外部應用可以直接與瀏覽器內部的數據相連，如視頻影音可直接與麥克風及攝像頭相連。

（4）連接特性（Class ：Connectivity）

更有效的連接使得基于頁面的實時聊天、更快速的網頁游戲體驗、更優化的在線交流得到了實現。HTML5擁有更有效的服務器推送技術，Server-Sent Event和WebSockets就是其中的兩個特性。這兩個特性能夠幫助我們實現從服務器將數據“推送”到客戶端的功能。

（5）多媒體特性（Class ：Multimedia）

支持網頁端的Audio、Video等多媒體功能，與各種APPS（Application Service，應用服務）相得益彰。

（6）三維、圖形及特效特性（Class ：3D, Graphics & Effects）

基于SVG、Canvas、WebGL及CSS3的3D功能，讓用戶驚嘆于HTML5在瀏覽器中所能呈現的驚人視覺效果。

（7）性能與集成特性（Class ：Performance & Integration）

沒有用戶會永遠等待你的Loading（加載）——HTML5會通過XMLHttpRequest2等技術，解決以前的跨域等問題，幫助你的Web應用和網站在多樣化的環境中更快速地工作。

（8）CSS3特性（Class ：CSS3）

在不犧牲性能和語義結構的前提下，CSS3中提供了更多的風格和更強的效果。此外，較之以前的Web排版，Web的開放字體格式（Web Open Font Format，WOFF）也提供了更高的靈活性和控制性。

4. HTML5的主要變化

HTML5提供了一些新的元素和屬性，如<nav>（網站導航塊）和<footer>。這種標簽將有利于搜索引擎的索引整理，同時更好地幫助小屏幕裝置和視障人士使用。除此之外，HTML5還為其他瀏覽要素提供了新的功能，如<audio>和<video>標簽。

（1）取消了一些過時的標簽

取消的標簽包括純粹顯示效果的標簽，如<font>和<center>，它們已經被CSS取代。HTML5吸取了XHTML2的一些建議，包括一些用來改善文檔結構的功能，例如，新的HTML標簽<header>、<footer>、<dialog>、<aside>、<figure>等的使用使內容創作者能更加簡便地創建文檔，而之前的開發者在實現這些功能時一般都是使用<div>。

（2）將內容和展示分離

<b>和<i>標簽依然保留，但它們的意義已經和之前有所不同。這些標簽的意義只是為了將一段文字標識出來，而不是為了為它們設置粗體或斜體式樣。<u>、<font>、<center>、<strike>這些標簽則被完全去掉了。

（3）一些全新的表單輸入對象

其他的對象包括日期、URL、E-mail地址，增加了對非拉丁字符的支持。HTML5還引入了微數據。這種使用機器可以識別的標簽標注內容的方法，使語義Web的處理更為簡單。總體來說，這些與結構有關的改進使內容創建者可以創建更干凈、更容易管理的網頁，而這樣的網頁對搜索引擎、讀屏軟件等更為友好。

（4）全新的、更合理的標簽

多媒體對象將不再全部綁定在object或embed標簽中，而是視頻有視頻的標簽，音頻有音頻的標簽。

（5）本地數據庫

這個功能將內嵌一個本地的SQL數據庫，以優化交互式搜索、緩存及索引功能。同時，那些離線Web程序也將因此獲益匪淺。

（6）Canvas對象

Canvas對象將給瀏覽器帶來直接繪制矢量圖的能力。這意味著用戶可以脫離Flash和Silverlight，直接在瀏覽器中顯示圖形或動畫。

（7）瀏覽器中的真正程序

此功能將提供API實現瀏覽器內的編輯與拖放，以及各種圖形用戶界面的能力。內容修飾標簽將被剔除，而使用CSS。

另外，HTML5取代Flash在移動設備中的地位，強化了Web頁的表現性，增加了本地數據庫。

5. HTML5新增的標簽和廢除的標簽

HTML5中，新增加了多個標簽元素，同時也廢除了多個標簽元素。

（1）HTML5新增的標簽

HTML5新增的標簽及其功能說明如表1-9所示。

表1-9　HTML5新增的標簽及其功能說明

（2）HTML5廢除的標簽

HTML5廢除的標簽如表1-10所示。

表1-10　HTML5廢除的標簽

6. HTML5新增和廢除的標簽屬性

HTML5中，在新增和廢除很多標簽元素的同時，也增加和廢除了很多屬性。

（1）HTML5新增的屬性

HTML5新增的屬性列表如表1-11所示。

表1-11　HTML5新增的屬性列表

（2）HTML5廢除的屬性

HTML4中的一些屬性在HTML5中不再被使用，這些屬性被其他屬性或其他方式替代，如表1-12所示。

表1-12　HTML5廢除的屬性列表

7. HTML5語義和結構標簽實例代碼探析

新建example01.html網頁文件，該網頁的瀏覽效果如圖1-2所示。

圖1-2　example01.html網頁的瀏覽效果

網頁example01.html對應的HTML代碼如表1-13所示。

表1-13　網頁example01.html對應的HTML代碼

下面對表1-13中的HTML代碼的結構及組成進行解析。

（1）HTML5的文檔聲明

創建example01.html網頁文件，如果使用的網頁編寫工具支持HTML5文件類型，那么，應該生成如下的HTML5模板：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
</head>
<body>
</body>
</html>

58178-00-028-a 說明

第一行<!doctype html>是HTML5對文檔類型的簡化描述。文檔類型的作用是：為驗證器提供其采用何種規則去驗證代碼的依據；強制瀏覽器以標準模式渲染頁面。

（2）頭部

網頁example01.html的頭部代碼由<header>標簽實現，如表1-13中的18～20行所示。

<header>標簽不能和h1、h2、h3這些標題混為一談。<header>元素可以是從公司Logo到搜索框在內的各式各樣的內容。同一個頁面可以包含多個<header>元素，每個獨立的區塊或文章都可以含有自己的<header>。

（3）尾部

網頁example01.html的尾部由<footer>標簽實現，如表1-13中的39～41行所示。

<footer>元素位于頁面或者區塊的尾部，用法和<header>基本一樣，也會包含其他元素。

（4）導航

網頁example01.html的導航由<nav>標簽實現，如表1-13中的22～29行所示。

網頁導航對于一個網頁來說至關重要。快速、方便的導航是留住訪客所必需的。導航可以被包含在<header>、<footer>或者其他區塊中，一個頁面可以有多個導航。

（5）區塊和文章

網頁example01.html的區塊和文章由<section>和<article>標簽實現，如表1-13中的21～38行所示。

<section>元素將頁面的內容合理歸類與布局，可以看到<article>元素還可以包含很多元素。

（6）旁白和側邊欄

網頁example01.html的側邊欄由<aside>實現，如表1-13中的34～36行所示。

<aside>標簽可實現旁白，一般加在<article>中使用。<aside>元素是主內容的附加信息，通常顯示成側邊欄或一些補充內容。側邊欄不一定是旁白，可以看作是右面的一個區域，包含鏈接，可用<section>和<nav>實現。

8. HTML5中典型的標記方法

（1）內容類型

HTML5文件的擴展名仍然為“.html”或者“.htm”，內容類型（ContentType）仍然為“text/html”。

（2）doctype聲明

在HTML5中，使用<!doctype html>聲明。該聲明方式適用于所有版本的HTML。HTML5中不可以使用版本聲明。

（3）指定字符編碼

HTML5中的字符編碼推薦使用UTF-8。HTML5中可以使用<meta>元素直接追加charset屬性的方式來指定字符編碼：<meta charset="utf-8">。

在HTML4中使用的<meta http-equiv="Content-Type" content="text/html;charset=utf-8">繼續有效，但不能同時混合使用兩種方式。

（4）具有boolean值的屬性

當只寫屬性而不指定屬性值時表示屬性為true，也可以將其他的屬性名設定為屬性值或將空字符串設定為屬性值。如果想要將屬性值設置為false，則可以不使用該屬性。

（5）引號

指定屬性時屬性值兩邊既可以用雙引號，也可以用單引號。當屬性值不包括空字符串、小于號、大于號、等號、單引號、雙引號等字符時，屬性兩邊的引號可以省略。例如<input type="text">、<input type='text'>、<input type=text>。

9. HTML5主要的語義和結構標簽說明

HTML5提供新的元素來創建更好的頁面結構。

（1）<header>標簽

<header>標簽用于定義文檔的頭部區域，表示頁面中一個內容區塊或整個頁面的標題。

（2）<section>標簽

<section>標簽用于定義文檔中的節（section、區段），表示頁面中的一個內容區塊，如章節、頁眉、頁腳或頁面的其他部分，可以和<h1>、<h2>等元素結合起來使用，表示文檔結構。

（3）<footer>標簽

<footer>標簽用于定義文檔或節的頁腳部分，表示整個頁面或頁面中一個內容區塊的腳注，通常包含文檔的作者、版權信息、使用條款鏈接、聯系信息等。可以在一個文檔中使用多個<footer>元素，<footer>元素內的聯系信息應該位于<address>標簽中。

（4）<article>標簽

<article>標簽用于定義頁面中一塊與上下文不相關的獨立內容，如一篇文章。<article>元素的潛在來源可能有論壇帖子、報紙文章、博客條目、用戶評論等。

（5）<aside>標簽

<aside>標簽用于定義頁面內容之外的內容，表示article元素內容之外的與article元素內容相關的輔助信息。

（6）<hgroup>標簽

<hgroup>標簽用于對整個頁面或頁面中的一個內容區塊的標題進行組合。

10. <!doctype>聲明的用法

<!doctype>聲明必須是HTML文檔的第一行，位于<html>標簽之前。<!doctype>聲明不是HTML標簽，它是指示Web瀏覽器關于頁面應使用哪個HTML版本進行編寫的指令。

在HTML 4.01中，<!doctype>聲明引用DTD（Document Type Definition，文檔類型定義），因為HTML 4.01基于SGML。DTD規定了標簽語言的規則，這樣瀏覽器才能正確地呈現內容。HTML5不基于SGML，所以不需要引用DTD。在HTML 4.01中有3種<!doctype>聲明。在HTML5中只有一種——<!doctype html>。

<!doctype>聲明沒有結束標記，并且對大小寫不敏感。應始終向HTML文檔添加<!doctype>聲明，這樣瀏覽器才能獲知文檔類型。

11. HTML的注釋標簽的用法

網頁中HTML的注釋標簽使用實例如下：

<!--這是一段注釋，注釋不會在瀏覽器中顯示-->

所有瀏覽器都支持注釋標簽，注釋標簽用于在源代碼中插入注釋，注釋不會顯示在瀏覽器中。使用注釋對代碼進行解釋有助于以后對代碼的編輯。這在編寫了大量代碼時尤其有用。

使用注釋標簽來隱藏瀏覽器不支持的腳本也是一個好習慣，這樣就不會把腳本顯示為純文本。觀察以下JavaScript代碼：

<script type="text/javascript">
<!--    function displayMsg()
    {
      alert("Hello World!")
    }
//-->
</script>

注釋行結尾處的兩條斜杠（//）是JavaScript注釋符號，這樣可以避免JavaScript執行“-->”標簽。

12. 如何插入樣式表

瀏覽網頁時，當瀏覽器讀到一個樣式表時，瀏覽器會根據它來格式化HTML文檔。插入樣式表的方法有以下3種。

（1）外部樣式表

當樣式需要應用于很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，可以通過改變一個文件來改變整個站點的外觀。每個頁面使用<link>標簽鏈接到樣式表。

<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

瀏覽器會從文件外部樣式表mystyle.css中讀到樣式聲明，并根據它來格式文檔。外部樣式表可以在任何文本編輯器中進行編輯，樣式表應該以.css擴展名進行保存。外部樣式表文件不能包含任何的HTML標簽，下面是一個樣式表文件的實例：

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

58178-00-030-a 注意

不要在屬性值與單位之間留有空格。假如使用“margin-left: 20 px”而不是“margin-left: 20px”，則它僅在IE6中有效，但是在Mozilla/Firefox或Netscape中卻無法正常工作。

（2）內部樣式表

當單個文檔需要特殊的樣式時，就應該使用內部樣式表。可以使用<style>標簽在文檔頭部定義內部樣式表，示例代碼如下所示：

<head>
  <style type="text/css">
       hr {color: sienna;}
       p {margin-left: 20px;}
       body {background-image: url("images/back40.gif");}
  </style>
</head>

（3）內聯樣式

由于內聯樣式要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢，所以應慎用這種方法，當樣式僅需要在一個元素上應用一次時可以使用內聯樣式。

要使用內聯樣式，需要在相關的標簽內使用樣式（style）屬性。style屬性可以包含任何CSS屬性。以下代碼展示了如何改變段落的顏色和左外邊距：

<p style="color: sienna; margin-left:20px">
    This is a paragraph
</p>

13. 網頁中的多重樣式

如果網頁中的某些屬性在不同的樣式表中被同樣的選擇器定義，那么屬性值將被繼承過來。

例如，外部樣式表擁有針對h3選擇器的3個屬性，代碼如下：

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

而內部樣式表擁有針對h3選擇器的兩個屬性，代碼如下：

h3 {
  text-align: right;
  font-size: 20pt;
  }

假如擁有內部樣式表的這個頁面同時與外部樣式表鏈接，那么h3得到的樣式是：

color: red; text-align: right; font-size: 20pt;

即顏色屬性將被繼承于外部樣式表，而文字排列（text-alignment）和字體尺寸（font-size）會被內部樣式表中的規則取代。

14. 標記-moz-、-webkit-、-o-和-ms-的解釋

（1）-moz- ：以-moz-開頭的樣式代表Firefox瀏覽器特有的屬性，只有WebKit瀏覽器可以解析。moz是Mozilla的縮寫。

（2）-webkit- ：以-webkit-開頭的樣式代表WebKit瀏覽器特有的屬性，只有WebKit瀏覽器可以解析。WebKit是一個開源的瀏覽器引擎，Chrome、Safari瀏覽器即采用WebKit內核。

（3）-o- ：以-o-開頭的樣式代表Opera瀏覽器特有的屬性，只有Opera瀏覽器可以解析。

（4）-ms- ：以-ms-開頭的樣式代表IE瀏覽器特有的屬性，只有IE瀏覽器可以解析。

官术网_书友最值得收藏!

HTML5+CSS3移動Web開發實戰（第2版）

【知識梳理】