HTML5從入門到精通

本文全部來自《HTML5從入門到精通》Faithe Wempen，清華大學出版社。文章內容全為各章要點，純粹是為方便自己查閱。：

• 第一章 編輯和查看HTML文件
• 第二章 設置文檔結構
• 第三章 用標記符來格式化文本
• 第四章 使用列表和背景
• 第五章 創建超文本鏈接和錨
• 第六章 樣式表基礎
• 第七章 使用樣式表改變文本格式
• 第八章 使用樣式表改變段落格式
• 第九章 顯示圖像
• 第十章 創建導航機制
• 第十一章 創建區域分布
• 第十二章 創建表格
• 第十三章 設置表格格式
• 第十四章 創建用戶表單
• 第十五章 嵌入音頻和視頻
• 第十六章 加入Javascript和外部內容
• 第十七章 HTML和Microsoft Expression Web

---

• HTML5從入門到精通
  • 第一章 編輯和查看HTML文件
  • 第二章 設置文檔結構
  • 第三章 用標記符來格式化文本
  • 第四章 使用列表和背景
  • 第五章 創建超文本鏈接和錨
  • 第六章 樣式表基礎
  • 第七章 使用樣式表改變文本格式
  • 第八章 使用樣式表改變段落格式
  • 第九章 圖像顯示
  • 第十章 創建導航機制
  • 第十一章 創建分區式板式
  • 第十二章 創建表格
  • 第十三章 設置表格格式
  • 第十四章 創建用戶表單
  • 第十五章 嵌入音頻和視頻
  • 第十六章 加入javascript和外部內容
  • 第十七章 HTML和Expression Web

---

第一章 編輯和查看HTML文件

要點

包括記事本在內，任何文本編輯器都可以成為HTML編輯器

大多數網頁文件都有.htm和.html的文件擴展名。你可以用記事本打開它們。但首先要把“打開文件”對話框中的“文件類型”改成“所有文件”。每次用“打開文件”對話框，都要改這個設置。

另一種用記事本打開網頁的方法是，在windows資源管理器中右擊該文件，在上下文菜單中選擇“使用記事本打開”。

要想用Web瀏覽器預覽網頁，可在瀏覽器的菜單中選擇“文件”|“打開”命令。

可以在windows資源管理器中，雙擊.htm或.html文件，默認的Web瀏覽器會自動運行并打開該網頁。

要想用Web瀏覽器查看在記事本中所做的更改，請在記事本中保存更改，然后再瀏覽器窗口單擊“刷新”按鈕。

第二章 設置文檔結構

要點

如果想指定文件類型為HTML5，則在文件開始處添加標記符。

所有HTML代碼（除了DOCTYPE）都包含在雙標記符中。

head和body部分包含在成對出現的html和html標記符中。

head部分包括網頁標題title和meta標記符。body部分包括所有顯示在網頁中的文字。

每一段文字都包含在雙標記符P中.大多數瀏覽器會顯示時在段落之間加一個空行。

如果只想換行而不開始一個新的段落，則使用單標記符br。

如果是XHTML代碼，單標記符要以一個空格和一個斜杠/結尾。空格是HTML要求的，斜杠是XHTML要求的。

在head部分中用meta標記符來指定關鍵詞和文檔編碼語言。

在head部分中用title和/title標記符來封裝顯示在瀏覽器標題欄的文字。

如果想將網頁發布到服務器上，可以使用FTP工具或windows內置的FTP功能，也可以（通過一些工具）直接將文件保存到服務器上。但是，記事本軟件不提供這個功能。

第三章 用標記符來格式化文本

要點

大多數標記符用來定義功能，而不是定義格式的。他們指定文字的某種功能，例如該文字是標題還是引用，但是并不指定他們如何顯示。

標記符所包含文字的實際顯示格式（顯示的樣式）是有幾個因素控制的：瀏覽器的默認設置、每個用戶自己的設置以及樣式表。

標記符h1到h6用來定義標題（由大到小）。

當一個標題下面緊跟著一個子標題，應該用hgroup標記符來將他們集合在一起，這樣當顯示在屏幕上時，他們會被顯示為一個單元。

用b標記符將字體設置為粗體；用i標記符將字體設置為斜體。

上標的標記符是sup；下標的標記符是sub；

固定寬度文字的字體在水平方向上，無論什么字符，所占的空間是一樣大的。這與比例字體正好相反。

默認情況下，大多數網絡文字都是比例字體。要指定固定寬度字體，需要使用kbd,code,samp標記符。HTML5不再支持過時的tt標記符來指定固定寬度字體。

默認情況下，Web瀏覽器會去除多余的空格并忽略段落間的空行（用p標記符生成的段落除外）。如果要強制瀏覽器顯示這些多余的空格和空行，則需要用pre標記符來封裝這些文字。

要設置一段引用，則使用blockquote標記符。該標記符具有cite=”URL”屬性，但是大多數瀏覽器并不用它。

IE中，可以在“查看”菜單中設置默認字體的大小。這個設置只影響到你的IE的顯示，而不影響網頁本身。

IE中，你可以通過打開“Internet選項”對話框，針對不同的目的來選擇默認字體。

第四章 使用列表和背景

要點

要創建一個編號（順序）列表，使用ol標記符，而項目符號（無序）列表則使用ul標記符。

在ol或ul標記符中，用li來定義每一個列表項。這些標記符都是雙標記符。HTML并不要求結束符/li，但是XHTML要求要有結束標記符。

順序列表和無序列表是可以嵌套的，第二層的ul或ol列表要放在主列表的li /li標記符中。

要使用不同的項目符號或數字符號，則在ul或ol起始標記符中使用style=”list-style-type:type”屬性。

在創建列表定義時，使用dl,/dl標記符。在dl標記符中，將每一個詞語放入dt,/dt標記符中，它的定義則放在dd,/dd標記符中。

參考使用HTML字符實體，你可以在網頁中顯示特殊的字符。

要插入一個水平線，使用hr標記符。這是一個單標記符。在該標記符內可以設置線的格式，比如，顏色、高度和寬度。

可以用基本顏色名、擴展顏色名、RGB值和16進制數值來指定顏色。

如果要給網頁分配一個背景顏色，則在body的起始標記符中插入style=“background-color:red;color:white”。

如果要分貝一個背景圖片給網頁，則在body的起始標記符中插入style=“backgroun-image:image”屬性。

第五章 創建超文本鏈接和錨

要點

要創建超文本鏈接，可以使用帶有href=屬性的a標記符。a標記符是雙向標記符，所以在用于超文本鏈接的文字后面要加上/a。

在引用你的網站以外的內容時，要使用絕對路徑（即含有文件位置的完整路徑）。在引用與當前網頁所在的同一文件夾或上層文件夾或子文件夾時，可以使用相對路徑。

要用新的窗口打開超文本鏈接指定的頁面時，在a標記符中加入target=“_blank”屬性。

要創建一個可以打開已設好地址的e-mail消息的超文本鏈接時，在地址前面要加mailto：,例如：mailto:support@microsoft.com。

要創建一個錨點，使用a標記符中的name屬性，例如a name=”equipment”。

要引用一個錨點時，可使用該錨點的名字，但要記住在href=屬性中的錨點名字前加上一個井號（#），例如a href=”#equipment”。

你可以創建除網頁以外的其他類型的超文本鏈接，但如果擔心有些內容不能被所有瀏覽器正確顯示，可以把超本文鏈接的內容顯示出來，或者可以提供HTML或普通文字作為替代方案。

要提供能夠觀看某種內容的查看器，創建一個超文本鏈接指向可下載該查看器的網站，或者把這個查看器存在你的網站上，然后提供指向它的超文本鏈接。

第六章 樣式表基礎

要點

樣式定義的格式范圍可以是某個標記符的特定實例、整個文檔中的某個標記符或是一組文檔中使用的某種標記符。

CSS是一套樣式規則表，用于一個HTML文檔中的標記符。這個表對該文檔而言，可以是內部的（嵌套），也可以是外部的（鏈接文件）。

當樣式規則產生沖突時，他們遵從以下規則（按優先級從高到低）1.應用于單獨標記符的樣式；2.在內部樣式表中使用的樣式（最靠近樣式表底部的優先級最高）；3.在外部樣式表中使到樣式（同樣，最靠近樣式表底部的優先級最高）。

應用樣式有三種方法。可以在單獨的標記符中使用style=屬性，也可以創建一個嵌套樣式表或創建一個外部樣式表。

在head部分中放置嵌套樣式表，然后再用style標記符將他們包括起來。一個外部的樣式表是一個單獨的純文本文件，以.css作為擴展名。

樣式表里有一個或多個樣式規則。一個樣式規則有標記符、類或標識，然后以花括號結尾。它里面包含所有的規范。

每一個規范按名字：值的格式定義。例如list-style-type：square。

一條規則中的多個規范用分號隔開。如果要用相同的方式定義兩個或是多個標記符，就將這兩個標記符都包含到（用逗號分開）花括號中，比如說：h1,h2{color:black}。如果你都掉了分號，那么同一行的兩個標記符就會被看作是嵌套樣式。例如ol ul{color:green}，意思是一個無需表嵌套在一個有序表里。

一個類可以被賦予多個元素。可以定義一個基于某個類的樣式。一個樣式表中的類以句號開頭，例如.new{color：red}。

標識的賦值在一個文檔中必須獨一無二。你可以基于某個標識定義樣式。樣式表中的標識以井號（#）開頭。例如：#special{color:red}.

通過在一個標記符里包含class=和ID=屬性來應用類或是標識。例如ol class=”new”。

通過使用超文本鏈接類型的偽類來應用樣式到該鏈接上，可以通過這樣的方式（a:visited{color:red}）來應用鏈接、訪問過、懸停、聚焦等偽類。

要創建一個外部的樣式表，就用記事本新建一個文檔，然后將所有樣式規則放進去。要在文檔中采用該樣式，就通過添加標記符link rel=”stylesheet” type=”text/css” href=”default.css”，在head部分中引用它，標記符里的default.css指樣式表的文件名。

第七章 使用樣式表改變文本格式

要點

字體系列是一套按照優先級排序的字體。由于沒有任何一種字體能夠被安裝在所有的計算機里，所有要使用屬性font-family來確保網站按照期望的格式來顯示。

字體尺寸一般采用屏幕顯示像素來衡量。使用屬性font-size來指定字體尺寸。

字體顏色的設定可以使用任何顏色描述方法，包括RGB，十六進制和顏色名稱。使用屬性color來定義字體顏色。

使用屬性background-color設定字符的背景顏色。如果要設定段落的背景色，就在p標記符中插入style=屬性。

雖然依舊可以使用標記符b將字體格式化為粗體，標記符i格式化為斜體，但是也可以在樣式表中使用屬性font-weight：bold格式化為粗體，使用屬性font-style:italic格式化斜體。

使用標記符del為某個實例添加刪除線，就使用屬性font-decoration:line-through和font-decoration:underline。

內聯跨度創建用來包容屬性的標記符。使用span標記符來包容任意文本，使它們能夠按照某種方式格式化。

使用屬性word-spacing定義詞語間距的大小。使用letter-spacing定義字符之間的間距。間距的默認值為0，正數表示增加間距，負數表示減少。

第八章 使用樣式表改變段落格式

要點

text-indent屬性用于縮進段落首行。

padding屬性設定元素與邊框之間的間距；margin屬性設定元素外部的間距。

border-style屬性在段落周邊設定邊框。如果要設定邊框線的效果，可使用如下量：solid（實心線），dotted（虛線），dashed（短劃線），double（雙線），groove（凹線），ridge（凸線），inset（陰刻），outset（陽刻）或none（無邊線）。

border-width屬性根據像素值大小來設定邊框的寬度。

border-color屬性設定邊框顏色，標注顏色可使用顏色名稱，RGB值或十六進制值。

如果要對邊框的個邊單獨進行格式化，就從頂端開始，按順時針順序設定下列四個變量：top、right、bottom、left。例如，border-style：solid none solid none。

要用單獨的命令設定邊框的樣式、顏色和尺寸大小，就使用屬性border，并按照以下順序設定變量：size、color、style。例如，border：2px green dotted。

要進行段落對齊，就使用屬性text-align，加上以下變量之一：left、center、right或是justify。

要設定行高，就使用屬性line-height，在其后面加上像素值或是字體高度百分比。

第九章 圖像顯示

要點

互聯網可以使用的有效圖像格式包括GIF,PNG,JPG.

在有條件的情況下，根據圖像在網頁上顯示的大小，要盡量使用圖像的分辨率與圖像的尺寸相匹配。你可以使用圖像編輯器軟件來調整圖像的分辨率。

使用img標記符來嵌入圖像。屬性src指定了圖像文件名。

要引用在子文件夾中的一幅圖像，應該在該圖像的文件名前添加子文件夾名稱和一個斜線（/）。

要移動一幅圖像到字符文本的左邊或者右邊，就在img標記符中使用樣式規則style=“float：left”或style=“float：right”。

要強制性地在一幅圖像下面放置字符文本，就在字符文本的標記符頭添加樣式規則style=“clear：left”或是style=“clear：right”。

要按比例調整圖像的尺寸，就在img標記符中指定它的高度或是寬度屬性。如果必須調整圖像尺寸改變圖像的比例，那么就同時指定它的高度和寬度。

要給一幅圖像添加超文本鏈接，就在a標記符中添加該鏈接。

要使用縮略圖，就要為每幅圖片創建一個較小的、低分辨率的版本，然后再縮略圖上添加超文本鏈接，使它指向高分辨率的原始版本。

當無法瀏覽圖像的時候，作為一個備用方案，你可以通過插入一個alt屬性來指定對圖像的文字說民，這些文字被顯示在一個彈出框內。

將一幅圖像或是一組有共同標題的圖像放到一個包容性figure標記符中，有了它，你可以采用figurecaption標記符來指定圖像的標題。

第十章 創建導航機制

要點

導航欄是到達萬展主要網頁的一組鏈接，它不需要包含網站的每個網頁。最佳的鏈接數目是在4個到7個。

在HTML5中，我們可以用nav容器標記符來定義一組鏈接組成導航元素。

在創建導航欄之前首先要規劃網站的結構。畫出所有網頁的聯系結構圖，為每個網頁選擇名字。

導航欄通常放在網頁上邊或者左邊。本書后面章節將討論的布局技術可以將導航欄放在側面。

許多網頁設計者在每個網頁底部放置本文導航欄以方便用戶訪問。

文本導航欄僅僅是一組超文本鏈接。

圖形導航欄使用小圖形做超文本鏈接。可以使用圖像編輯器軟件例如Photoshop 或者專門創建網站按鈕的工具包來創建這些圖形。

要將一個網頁跳到不同的網址，需要在head區域創建一個具有http-equiv屬性的meta標記符，就像這樣：meta http-equiv=”refresh” content=“5；url=http://support.microsoft.com”。

可以使用圖像映射在一張圖片上定義不同的區域，這些具有超文本鏈接的功能。使用map標記符創建映射。在其中用area標記符定義熱點區域，在img標記符中通過屬性來引用映射。

為了給圖形創建映射區域，要記住圖像上點事通過它們和左上角的距離來定義的。例如，坐標10,15表示圖像上距離左上角10像素，下15像素的點的位置。

第十一章 創建分區式板式

要點

如果要創建區域，需要將網頁的一部分用div標記符封裝起來。

HTML5使用語義標記符為網頁定義區域。一些最常見的標記符有header、footer、nav、artical、aside和section。目前還不是所有的瀏覽器都支持這些標記符。IE9.0以及更高的版本支持它們，Google Chrome和 Firefox當前版本也支持。

每個區域標記符有一個id屬性，在本當中應該是唯一的。多個文檔可以含有同樣的區域名稱，實際上我們鼓勵這樣做，因為這樣可以使用一個外部樣式表來為多個文檔定義樣式。

為區域定位的一個方法是使用懸浮（float）屬性。有效值包括absolute、relative和fixed。當使用定位屬性時，你必須同時使用top、bottom、left或者right屬性為位置定義數字值。a、對于絕對定位，元素位于相對于父元素的絕對位置。父元素通常是指body標記符，因此元素定位在網頁的絕對位置上。b、對于相對定位，元素位于其默認位置的相對位置。c、對于固定定位，元素位于相對瀏覽器窗口的固定位置。

區域可以使用字符、段落以及本書中學到的網頁布局方法（包括背景顏色和背景圖片等）來定義格式。

第十二章 創建表格

要點

要創建表格，需要使用table標記符。將每行用tr標記符封裝起來，每行中的各個單元用td標記符封裝起來。

你可以用像素或者相對頁面寬度的百分比來指定表格寬度。使用類似這樣的寬度屬性：table width=“400”。

也可以使用類似這樣的樣式規則來設置表格寬度：table style“width：400”。

也可以用百分比或者像素來指定每個單元格的寬度，像這樣：td width=”100” 或td style=”width:100”。

要合并（融合）多個單元格，在最上面或者最左邊的單元格中設置colspan或者rowspan屬性，想這樣來合并單元：td colspan=“2”。

可以使用表格作為容器來進行頁面布局。可以將網頁的全部或者部分主體內容放在表格中。

第十三章 設置表格格式

要點

要為表格設置簡單的默認邊框，可以在表格的起始標記符中包含屬性border=“1”。大于1的值會讓表格的邊框變粗，但是不會讓單元格邊框變粗。

frame屬性定義了表格框架的哪一邊會顯示邊框；rules屬性定義了單元格的哪一邊會顯示邊框。

為了獲得最大限度的靈活性，可以使用樣式表來設置邊框。表格的邊框樣式屬性和段落一樣：border-width，border-color和border-style。

要單獨設置某個邊框，可以在屬性中指定相應的邊：border-top-width，border-bottom-style，等等。

我們可以使用style=“background-color:color”來對整個表格、單獨的行或者單元格來設置背景顏色。如果要設置文本（前景）顏色，可以使用color屬性。

填充時指元素內容和邊框之間的空間。通過table標記符的cellpadding屬性來設置。對于單獨的單元格，使用樣式來設置填充，比如td style=”padding:4px”。

間距是指一個元素外部的空間和相鄰元素的距離。通過table標記符的cellpadding屬性來設置。

對齊是指內容在單元格中的放置方式。垂直對齊使用valign屬性，水平對齊使用align屬性。如果要使用樣式來對齊，水平對齊使用text-align，垂直對齊使用vertical-align。

第十四章 創建用戶表單

要點

要創建表單，使用雙面form標記符。在兩個標記符內部，放上一個或多個input標記符來定義表單的域。

在起始的form標記符里，放上method=”post”屬性和一個action屬性來描述表單的處理。最常見的屬性是action=”mailto:address”，這里的address是一個有效的電子郵件地址。如果通過電子郵件收集表單結果，則需要加上enctype=”text/plain”屬性。

要創建一般文本框，可以使用input type=”text” name=”fieldname”，這里的filedname是分配給文本框的唯一名字。其他可選的附加屬性有size和maxlength。

對于網站和電子郵件信息收集，你可以分別使用URL和email輸入類型。這些只適用于HTML5兼容的瀏覽器。

要創建多行的文本框（文本區域），使用具有name屬性和行列數的雙面textarea標記符。例如，textarea name=”comments” rows=”5” columns=”40” /textarea。

要創建一個Submit按鈕，使用具有type=”submit” 屬性的input標記符。如果想改變按鈕的文本，使用value屬性。例如，type=”submit” value=”Send”。使用type=”reset” 來創建可以清楚表單內容的Reset按鈕。

復選框是單面的、獨立的元素，只有一個選項可以被選中。由具有type=”radio”屬性的單面input標記符來定義它。對于每個選項，使用共同的name和一個唯一的屬性。

要創建列表，可使用雙面的select標記符，在其中為每個列表項創建雙面的option標記符。

在select標記符中使用size=“1”屬性來創建下拉列表，或者指定大一點的值來創建帶有滾動條的列表。

要在列表中創建類別標題，使用帶有顯示文本的雙面optgroup標記符。例如，optgroup label=”Inkjet”。

HTML5針對特定情況提供了一些其他輸入方法，例如旋轉框type=“number”，滑動塊type=“range”和日期選擇器type=“date”。

要在服務器上處理表單輸入，可以使用通用網關接口（CGI）腳本或者第三方程序。

第十五章 嵌入音頻和視頻

要點

集成音頻和視頻是通過提供多種格式的音頻和視頻文件來完成的，這樣可以確保網站訪問者使用任何瀏覽器都能夠觀看多媒體。

了解針對不同視頻和音頻的不同容器和編/解碼器以及用戶瀏覽器對他們的支持非常重要。

HTML5引入了audio和video標記符，使網頁可以包含多媒體。

老版本的瀏覽器不支持audio和video標記符，因此需要提供傳統格式的視頻如Flash，這樣使用老版本瀏覽器的訪問者也可以訪問這些內容。

使用embed標記符來包含某種格式的視頻和音頻內容，使得不兼容HTML5的瀏覽器也可以播放。

第十六章 加入javascript和外部內容

要點

javascript是一個重要的編程語言。它提供了網站中很多元素的行為表現。

javascript可以用于任何網頁中，并且根據特定的語法來訪問網頁中的畫布元素。

jquery是一個javascript程序庫，它讓開發人員可以快速地開發以前很難或很花時間才能開發出來的javascript任務。

畫布元素是HTML5引入的。它為高級圖像和動畫提供一定的空間，可以利用javascript對畫布元素進行編程。

還有其他幾種方法可以在網頁中加入外部的內容，其中也包括HTML5中新增的evensource標記符和embed標記符。

第十七章 HTML和Expression Web

要點

Expression Web是一個應用程序，以所見即所得的圖像方式創建網站。

Expression Web的用戶界面能夠以“設計”視圖、“代碼”視圖或“拆分”視圖（各占一半）的方式來顯示網頁。

使用菜單中的“網站”來編輯網站。你可以用它來創建一個新站點或打開已有的網站。

創建網頁時，使用“網頁編輯器選項”對話框來設定與HTML5兼容的代碼。

Expression Web自帶許多CSS模板用來創建網頁布局。選中“文件”|“新建”|“網頁”，然后單擊你想要的CSS布局。

如果要嵌入圖像，就將網頁在“設計”視圖里打開，然后從“文件夾列表”窗格中直接拖曳圖像到網頁中即可。

如果要為分區添加背景，就在CSS的“屬性”窗格中設置background屬性，指向要用到的圖形文件即可。

你可以使用Expression Web的工具欄按鈕來直接格式化字符文本。用來格式化的代碼要么位于單獨的標記符中，要么放到CSS中，取決于格式的類別。

你可以通過在“設計”視圖中拖動分區的邊界來改變它的尺寸。

利用“插入”|“超鏈接”命令嵌入超文本鏈接。

總結

以上是生活随笔為你收集整理的HTML5从入门到精通的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。