生活随笔
收集整理的這篇文章主要介紹了
HTML5从入门到精通
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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从入门到精通的全部內容,希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。