編輯推薦

（1）由淺入深、循序漸進地介紹了HTML5、CSS3、JavaScript等前端網頁設計技術。（2）圖文並茂、通俗易懂，可作為高等學校計算機科學與技術、軟件工程、信息管理與信息繫統、網絡工程、物聯網工程、信息科學技術、數字媒體技術及其他文、理科相關專業或計算機公共基礎的“網頁開發與設計”、“網頁制作”、“Web編程技術”、“Web前端開發技術”等課程教學的教材，也可作為網頁設計初學者快速入門的自學讀物。

內容簡介

本書依據互聯網行業對Web前端開發工程師崗位技術與能力的要求，結合作者長期在網頁設計教學中積累的經驗，由淺入深、循序漸進地介紹了HTML5、CSS3、JavaScript等前端網頁設計技術。
全書共分為13章，全面講述HTML5、CSS3和JavaScript技術。第1～8章重點介紹網頁設計的相關概念、HTML5語言基礎和網頁設計開發工具Sublime Text的使用；第9、10章講解CSS3樣式表與網頁布局的相關知識；第11、12章講述JavaScript語言的相關內容和前臺動態頁面的制作；第13章講解HTML5高級應用技術。
本書圖文並茂、通俗易懂，可作為高等學校計算機科學與技術、軟件工程、信息管理與信息繫統、網絡工程、物聯網工程、信息科學技術、數字媒體技術及其他文、理科相關專業或計算機公共基礎的“網頁開發與設計”、“網頁制作”、“Web編程技術”、“Web前端開發技術”等課程教學的教材，也可作為網頁設計初學者快速入門的自學讀物。

目錄
第1章Internet與Web基礎/1
1.1Internet與萬維網1
1.1.1Internet的誕生與發展2
1.1.2萬維網的誕生2
1.2統一資源標識符和域名3
1.2.1統一資源定位符3
1.2.2域名4
1.3瀏覽器與服務器5
1.3.1B/S模型5
1.4HTML語言與HTML55
1.4.1HTML語言6
1.4.2HTML的版本——HTML56
1.5Web前端開發相關技術9

第1章Internet與Web基礎/1

1.1Internet與萬維網1

1.1.1Internet的誕生與發展2

1.1.2萬維網的誕生2

1.2統一資源標識符和域名3

1.2.1統一資源定位符3

1.2.2域名4

1.3瀏覽器與服務器5

1.3.1B/S模型5

1.4HTML語言與HTML55

1.4.1HTML語言6

1.4.2HTML的版本——HTML56

1.5Web前端開發相關技術9

1.5.1CSS9

1.5.2JavaScript9

1.6Sublime Text簡介10

1.6.1Sublime Text的安裝10

1.6.2Sublime Text的使用12

1.7本章小結17

第2章HTML5結構與基礎語法/18

2.1HTML5文檔結構18

2.1.1文檔類型定義19

2.1.2頭部內容19

2.1.3主體內容20

2.2HTML5基本語法21

2.2.1標記語法21

2.2.2屬性語法22

2.3注釋23

2.4編寫與命名規範23

2.4.1編寫規範23

2.4.2命名規範24

2.5上機練習24

2.6本章小結25

〖1〗HTML5網頁設計教程目錄[3]〖3〗第3章文字與段落/27

3.1文字內容27

3.1.1標題字27

3.1.2添加空格28

3.1.3添加特殊符號29

3.1.4注釋標記30

3.2文字修飾30

3.2.1粗體、斜體、下畫線30

3.2.2刪除線31

3.2.3上標和下標31

3.2.4設置地址文字32

3.3段落33

3.3.1段落標記33

3.3.2換行標記34

3.3.3居中標記34

3.3.4水平分隔線34

3.3.5預格式化標記35

3.4上機練習36

3.5本章小結37

第4章超鏈接/39

4.1超鏈接簡介39

4.2創建超鏈接39

4.2.1相對路徑和路徑39

4.2.2內部鏈接41

4.2.3外部鏈接41

4.3鏈接對像41

4.3.1文字鏈接41

4.3.2圖片鏈接42

4.3.3書簽鏈接43

4.3.4電子郵件鏈接46

4.3.5FTP鏈接47

4.3.6下載文件鏈接47

4.4上機練習47

4.5本章小結49

第5章列表/50

5.1列表簡介50

5.2無序列表50

5.3有序列表51

5.3.1有序列表及編號樣式51

5.3.2編號起始值52

5.3.3列表項編號52

5.4嵌套列表55

5.5定義列表56

5.6上機練習57

5.7本章小結59

第6章多媒體應用/60

6.1圖片60

6.1.1圖片標記60

6.1.2指定圖像的高與寬61

6.1.3指定圖像的對齊方式62

6.2音頻和視頻64

6.2.1視頻文件格式64

6.2.2video標簽的屬性64

6.2.3為視頻添加控件和自動播放65

6.2.4為視頻指定循環播放和海報圖像66

6.2.5阻止視頻預加載68

6.2.6音頻文件格式68

6.2.7audio標簽的屬性70

6.2.8自動播放、循環和載入音頻70

6.2.9使用多種來源的視頻和備用文本72

6.3本章小結74

第7章表格/75

7.1表格標記75

7.1.1表格標題76

7.1.2表格表頭78

7.2表格屬性79

7.2.1設置表格的邊框屬性79

7.2.2設置表格的寬度和高度80

7.2.3設置表格的背景顏色80

7.2.4設置表格的背景圖像80

7.2.5設置格間距82

7.2.6設置格邊距83

7.2.7設置表格的水平對齊屬性84

7.3設置行的屬性86

7.3.1行內容水平對齊86

7.3.2行內容垂直對齊86

7.4格的屬性88

7.4.1格跨行88

7.4.2格跨列89

7.5表格嵌套91

7.6上機練習93

第8章表單/95

8.1表單概述95

8.1.1表單的結構95

8.1.2表單的處理96

8.1.3HTML5表單的特性96

8.2表單類型98

8.2.1創建文本框98

8.2.2創建密碼框98

8.2.3創建單選按鈕100

8.2.4創建復選框101

8.2.5創建提交按鈕和重置按鈕102

8.2.6創建隱藏字段103

8.2.7創建電子郵件框104

8.2.8搜索框105

8.2.9電話框106

8.2.10網址框107

8.2.11數字框108

8.2.12日歷框109

8.3創建文本區域110

8.4創建選擇框111

8.5讓訪問者上傳文件112

8.6上機練習113

8.7本章小結114

第9章CSS3基礎/115

9.1CSS115

9.1.1CSS簡介115

9.1.2從CSS到CSS3115

9.1.3CSS3新特性115

9.2樣式表的定義與使用116

9.2.1定義內聯樣式表116

9.2.2定義內部樣式表116

9.2.3鏈接外部樣式表117

9.3定義選擇器117

9.3.1按照類素117

9.3.2按照素118

9.3.3按照I素119

9.3.素的一部分121

9.3.5偽類選擇器121

9.4文本與排版樣式的使用126

9.4.1長度、百分比單位126

9.4.2文本樣式屬性127

9.5背景和顏色的使用138

9.5.1設置顏色的方法138

9.5.2設置背景顏色140

9.5.3設置背景圖片141

9.6設置超鏈接樣式143

9.7盒子概念與使用145

9.7.1盒子的概念145

9.7.素外邊界145

9.7.素邊框147

9.7.素內邊界149

9.8列表150

9.9上機練習151

9.10本章小結154

第10章CSS3高級應用/155

10.1素155

10.2導航欄設計158

10.3動畫設計159

10.3.1@keyframes規則159

10.3.22D變形160

10.3.2平滑過渡165

10.3.33D動畫167

10.3.4漸變效果171

10.4用戶界面177

10.4.1CSS3調整尺寸177

10.4.2CSS3方框大小調整177

10.4.3CSS3外形修飾178

10.5頁面布局178

10.5.1多欄布局178

10.5.2盒布局179

10.6上機練習181

10.7本章小結183

第11章JavaScript基礎語法/184

11.1JavaScript簡介184

11.2JavaScript的使用184

11.2.1將JavaScript插入網頁的方法184

11.2.2JavaScript的位置186

11.3JavaScript變量187

11.3.1變量的類型及聲明187

11.4JavaScript數據類型188

11.4.1數據類型的相關內容188

11.4.2數據類型189

11.5JavaScript運算符和表達式191

11.5.1表達式191

11.5.2運算符192

11.6JavaScript控制語句196

11.7JavaScript對像和函數201

11.7.1JavaScript對像201

11.7.2JavaScript函數201

11.8JavaScript注釋201

11.9上機練習——JavaScript綜合實例202

11.10本章小結204

第12章JavaScript面向對像編程/205

12.1內置對像205

12.1.1字符串對像205

12.1.2數學對像207

12.1.3日期對像207

12.1.4數組對像208

12.1.5Boolean對像209

12.2宿主對像209

12.2.1DOM對像的屬性和方法209

12.2.2DOM對像的操作212

12.2.3window對像214

12.3常用其他對像215

12.3.1表單對像215

12.3.2Image對像215

12.4事件編程216

12.4.1事件處理216

12.4.2事件驅動217

12.5上機練習——JavaScript綜合實例219

12.6本章小結222

第13章HTML5高級應用/223

13.1使用HTML5繪制圖形223

13.1.1繪制基本圖形224

13.1.2使用moveTo與lineTo繪制直線227

13.1.3使用bezierCurveTo繪制貝塞爾曲線229

13.1.4繪制漸變圖形231

13.1.5繪制平移效果的圖形234

13.1.6繪制縮放效果的圖形235

13.1.7繪制旋轉效果的圖形236

13.1.8繪制組合效果的圖形237

13.1.9繪制帶陰影的圖形240

13.1.10使用圖像241

13.2本地存儲243

13.2.1Web存儲243

13.2.2使用本地數據庫進行本地存儲245

13.3離線緩存248

13.3.1建立一個應用緩存248

13.3.2配置manifest文件249

13.3.3更新緩存250

13.4地理位置250

13.4.1地素的基礎知識250

13.5本章小結253

前言

序言前言隨著HTML5、CSS3和JavaScript技術的廣泛應用， Web前端開發者的工作量大大減輕，開發成本不斷降低，三者是Web項目開發中非常重要的開發技術。HTML5跨平臺的優勢使其在未來的技術市場中逐漸發展成為主流開發技術，占據越來越重要的地位。本書以HTML5為主體，搭配CSS3和JavaScript，並且立足於當前網絡行業，成為您充實自己實力或踏入網頁設計領域的好幫手。1. 本書內容全書共分為13章，各章節主要內容如下: 第1章主要對Internet與Web技術進行概述。包括Internet與萬維網、域名、URL等概念，以及開發工具sublime text的安裝和使用。第2章介紹HTML5的網頁文檔結構。包括HTML5文檔的基本框架、標記和標記屬性等語法，為編寫Web程序打下基礎。第3章介紹HTML5文檔文字與段落的處理，包括文字內容、文字修飾、段落等常用標記。第4章介紹用HTML5建立超鏈接。包括文字、圖片、郵箱的超鏈接，錨點的使用和相對路徑與路徑的概念等。第5章介紹用HTML5創建列表。包括無序列表、有序列表、嵌套列表和自定義列表。第6章介紹多媒體的應用。包括圖片、音頻和視頻的應用。第7章介紹用HTML5創建表格。包括表格的常用屬性、樣式設計、表格嵌套等。第8章介紹使用表單。包括表單概述、表素的使用和表單的驗證方法和屬性等。第9章介紹HTML5的高級應用。包括畫布、地理位置、Web存儲、應用緩存等高級應用技術。第10章介紹CSS3基礎。包括CSS3基礎語法、選擇器、媒體查詢等。第11章介紹CSS3的高級應用。包括素、導航欄設計、動畫設計等。第12章介紹JavaScript基本語法和內置對像。包括JavaScript簡介、數據類型與變量、運算符與表達式、流程控制語句和函數、字符串對像、數學對像、日期對像和數組對像等。第13章介紹JavaScript的對像編程。包括常用對像、DOM操作和事件編程。2. 本書特色 (1) 知識全面，內容豐富。內容由淺入深，涵蓋了所有HTML5、CSS3和JavaScript知識點，便於讀者全面掌握網頁設計技術。(2) 循序漸進，難度適中。知識結構安排合理，把知識點融彙於案例實訓中，並且結合經典案例進行講解和拓展，幫助讀者快速入門。(3) 理論與實際緊密結合。書中穿插大量綜合案例，幫助讀者學習理論知識的同時，更好地結合開發實踐，掌握網頁設計工作中解決實際問題的方法。(4) 結合工具，高效開發。本書采用Web開發中廣泛應用的Sublime Text3開發工具進行講述，使讀者在學習知識的同時，能夠熟練高效地使用工具。(5) 配套資源完善。為幫助讀者更好地使用本教材進行學習，教材配套相關教學資源，提供免費的圖片、代碼等相關素材，還特別為教師提供PowerPoint教案，方便教師授課使用。〖1〗HTML5網頁設計教程前言[3]〖3〗3. 讀者對像本書適合作為高等學校計算機科學與技術、軟件工程、信息管理與信息繫統、網絡工程、物聯網工程、信息科學技術、數字媒體技術及其他文、理科相關專業或計算機公共基礎的“網頁開發與設計”、“網頁制作”、“Web編程技術”、“Web前端開發技術”等課程教學的教材，也可作為網頁設計初學者快速入門的自學讀物。書中大量的示例模擬了真實的網頁設計案例，對讀者的學習有現實的借鋻意義。 4. 作者團隊本書作者孫甲霞、呂瑩瑩、李學勇等長期從事網頁設計課程教學工作。孫甲霞編寫第1～3章，呂瑩瑩編寫第4～7章，金松林編寫第8～10章，李學勇編寫第11～13章，另外，在本書的編寫過程中，牛燕尾在素材的整理等工作中也付出了辛勤的勞動，纔能使此書和讀者見面。在本書的編寫過程中，我們力求精益求精，但由於水平有限，書中難免有不足之處，懇請讀者諒解。讀者如果遇到問題或有意見和建議，敬請與我們聯繫，我們將全力提供幫助。序言前言隨著HTML5、CSS3和JavaScript技術的廣泛應用， Web前端開發者的工作量大大減輕，開發成本不斷降低，三者是Web項目開發中非常重要的開發技術。HTML5跨平臺的優勢使其在未來的技術市場中逐漸發展成為主流開發技術，占據越來越重要的地位。本書以HTML5為主體，搭配CSS3和JavaScript，並且立足於當前網絡行業，成為您充實自己實力或踏入網頁設計領域的好幫手。1. 本書內容全書共分為13章，各章節主要內容如下: 第1章主要對Internet與Web技術進行概述。包括Internet與萬維網、域名、URL等概念，以及開發工具sublime text的安裝和使用。第2章介紹HTML5的網頁文檔結構。包括HTML5文檔的基本框架、標記和標記屬性等語法，為編寫Web程序打下基礎。第3章介紹HTML5文檔文字與段落的處理，包括文字內容、文字修飾、段落等常用標記。第4章介紹用HTML5建立超鏈接。包括文字、圖片、郵箱的超鏈接，錨點的使用和相對路徑與路徑的概念等。第5章介紹用HTML5創建列表。包括無序列表、有序列表、嵌套列表和自定義列表。第6章介紹多媒體的應用。包括圖片、音頻和視頻的應用。第7章介紹用HTML5創建表格。包括表格的常用屬性、樣式設計、表格嵌套等。第8章介紹使用表單。包括表單概述、表素的使用和表單的驗證方法和屬性等。第9章介紹HTML5的高級應用。包括畫布、地理位置、Web存儲、應用緩存等高級應用技術。第10章介紹CSS3基礎。包括CSS3基礎語法、選擇器、媒體查詢等。第11章介紹CSS3的高級應用。包括素、導航欄設計、動畫設計等。第12章介紹JavaScript基本語法和內置對像。包括JavaScript簡介、數據類型與變量、運算符與表達式、流程控制語句和函數、字符串對像、數學對像、日期對像和數組對像等。第13章介紹JavaScript的對像編程。包括常用對像、DOM操作和事件編程。2. 本書特色 (1) 知識全面，內容豐富。內容由淺入深，涵蓋了所有HTML5、CSS3和JavaScript知識點，便於讀者全面掌握網頁設計技術。(2) 循序漸進，難度適中。知識結構安排合理，把知識點融彙於案例實訓中，並且結合經典案例進行講解和拓展，幫助讀者快速入門。(3) 理論與實際緊密結合。書中穿插大量綜合案例，幫助讀者學習理論知識的同時，更好地結合開發實踐，掌握網頁設計工作中解決實際問題的方法。(4) 結合工具，高效開發。本書采用Web開發中廣泛應用的Sublime Text3開發工具進行講述，使讀者在學習知識的同時，能夠熟練高效地使用工具。(5) 配套資源完善。為幫助讀者更好地使用本教材進行學習，教材配套相關教學資源，提供免費的圖片、代碼等相關素材，還特別為教師提供PowerPoint教案，方便教師授課使用。〖1〗HTML5網頁設計教程前言[3]〖3〗3. 讀者對像本書適合作為高等學校計算機科學與技術、軟件工程、信息管理與信息繫統、網絡工程、物聯網工程、信息科學技術、數字媒體技術及其他文、理科相關專業或計算機公共基礎的“網頁開發與設計”、“網頁制作”、“Web編程技術”、“Web前端開發技術”等課程教學的教材，也可作為網頁設計初學者快速入門的自學讀物。書中大量的示例模擬了真實的網頁設計案例，對讀者的學習有現實的借鋻意義。 4. 作者團隊本書作者孫甲霞、呂瑩瑩、李學勇等長期從事網頁設計課程教學工作。孫甲霞編寫第1～3章，呂瑩瑩編寫第4～7章，金松林編寫第8～10章，李學勇編寫第11～13章，另外，在本書的編寫過程中，牛燕尾在素材的整理等工作中也付出了辛勤的勞動，纔能使此書和讀者見面。在本書的編寫過程中，我們力求精益求精，但由於水平有限，書中難免有不足之處，懇請讀者諒解。讀者如果遇到問題或有意見和建議，敬請與我們聯繫，我們將全力提供幫助。
編者2017年1月

媒體評論

評論

在線試讀

第3章文字與段落文字和段落是網頁中重要、素。學習本章的目的是掌握HTML5文檔文字與段落的處理,包括文字內容、文字修飾、段落常用標記。本章重點 掌握HTML5文檔中文字內容的處理和修飾 掌握段落格式的設置3.1文字內容網頁的內容主要是通過文字來體現的,HTML5中提供了許多與文字相關的標記。3.1.1標題字標題文字標記用來標示頁面中的標題文字,被標示的文字將以粗體形式顯示。HTML5中對標題文字的大小定義了六級…。

定義的標題。

定義小的標題。它們需要與尾標記一起使用。語法: 標題文字其中align屬性用來控制標題文字的對齊方式: left為左對齊(默認方式);center為居中;right為右對齊。…的應用如例31所示。

This is header 1

This is header 2

This is header 3

This is header 4

This is header 5

This is header 6

代碼運行結果如圖31所示。圖31標題字實例演示3.1.2添加空格HTML中的常用字符實體是不間斷空格( )。瀏覽器總是會截短 HTML頁面中的空格。如果在文本中寫10個空格,在顯示該頁面之前,瀏覽器會刪除它們中的9個。如需在頁面中增加空格的數量,需要使用字符實體。[1]HTML5網頁設計教程第3章文字與段落[3][3]添加空格的應用如例32所示。HTML使用空格符號( )

使用空格縮進兩個漢字的位置:

兩個空格符號表示一個漢字的位置。兩個空格符號表示一個漢字的位置。兩個空格符號表示一個漢字的位置。兩個空格符號表示一個漢字的位置。

使用空格縮進四個漢字的位置:

兩個空格符號表示一個漢字的位置。兩個空格符號表示一個漢字的位置。兩個空格符號表示一個漢字的位置。兩個空格符號表示一個漢字的位置。

代碼運行結果如圖32所示。圖32空格實例演示3.1.3添加特殊符號在HTML中,某些字符是預留的。在HTML中不能使用小於號(<)和大於號(>),這是因為瀏覽器會誤認為它們是標簽。如果希望正確地顯示預留字符,必須在HTML源代碼中使用字符實體。字符實體類似這樣: &entity_name或者&#entity_number如需顯示小於號,必須寫為<或<。HTML中有許多有用的字符實體,如表31所示。續表表31HTML中常用的字符實體顯示結果描述實體名稱實體編號<小於號<<>大於號>>&和號&&"引號""'撇號 '(IE不支持)'￠分¢¢￡鎊££yen;¥§節§§版權©©注冊商標®®×乘號××÷除號÷÷提示: 實體名稱對大小寫敏感! 3.1.4注釋標記注釋標簽用於在源代碼中插入注釋。注釋不會顯示在瀏覽器中。可使用注釋對代碼進行解釋,這樣做有助於以後對代碼的編輯。當編寫了大量代碼時尤其有用。使用注釋標簽來隱藏瀏覽器不支持的腳本也是一個好習慣(這樣就不會把腳本顯示為純文本),如下面代碼所示。This text is a comment

This is a regular paragraph

3.2文字修飾[4/5]3.2.1粗體、斜體、下畫線1. 粗體標簽規定粗體文本。 2. 斜體標簽顯示斜體文本效果。標簽和基於內容的樣式標簽類似。它告訴瀏覽器將包含其中的文本以斜體字(italic)或者傾斜(oblique)字體顯示。如果這種斜體字對該瀏覽器不可用的話,可以使用高亮、反白或加下畫線等樣式。3. 下畫線標簽定義文檔的其餘部分之外的插入文本。綜合應用如例33所示。
粗體斜體
一打有二十十二件。
代碼運行結果如圖33所示。圖33粗體、斜體、下畫線效果演示注意: 標簽一定要和結束標簽結合起來使用。3.2.2刪除線標簽定義文檔中已刪除的文本。3.2.3上標和下標^{標簽可定義上標文本。包含在^{標簽和其結束標簽}中的內容將會以當前文本流中字符高度的一半來顯示,但與當前文本流中文字的字體和字號都是一樣的。_{標簽可定義下標文本。包含在 _{標簽和其結束標簽} 中的內容將會以當前文本流中字符高度的一半來顯示,但與當前文本流中文字的字體和字號都是一樣的。上標和下標的應用如例34所示。<address> 標簽這段文本包含 _下標這段文本包含 ^上標X1 Y2²=15代碼運行結果如圖34所示。圖34上標和下標效果演示提示: 無論是_{標簽還是與它對應的^{標簽,在數學等式、科學符號和化學公式中都非常有用。3.2.4設置地址文字標簽定義文檔或文章的作者、擁有者的聯繫信息。如果<address> 標簽Written by HTML5

Address: Box 564, Disneyland
Phone: 12 34 56 78
代碼運行結果如圖35所示。圖35設置地址文字效果演示提示: 標簽不應該用於描述通信地址,除非它是聯繫信息的一部分。3.3段落[4/5]3.3.1段落標記…
定義了一個段,是一種塊級標記,其結尾標簽可以省略。不過在使用瀏覽器的樣式表單時為了避免出現差錯,還是建議使用結尾標簽。提示: 塊級標記是相對於行內標記來講的,可以換行,而行內標記中的內容默認排列方式是同行排列,直到寬度超出包含它容器寬度時纔自動換行。段落標記的應用如例36所示。網頁標題這是我的個段落
我是段落內容
第二個段落
3.3.2換行標記使用標記分段時,在段落之間有一空行。如果不希望出現空行,可以使用
換行標記。當瀏覽器遇到
標記時會另起一行,中間不插入空行。3.3.3居中標記居中標記
用於對其所包括的文本進行水平居中。居中標記的應用如例37所示。段落居中這段文字是居中的代碼運行結果如圖36所示。圖36居中標記效果演示3.3.4水平分隔線水平線標記
語法為:
瀏覽器遇到水平線標記,會在頁面上畫出一條水平線。水平線可以把頁面分成幾部分,使頁面內容更加清晰醒目。
標記的屬性用來控制水平線的樣式,常用的屬性如表32所示。表32
標記的屬性屬性功能示例size水平線的粗細,以像素為單位,默認值是1
width水平線的寬度,可以以像素為單位,也可以用對屏幕的百分比表示,默認值為100%
align水平線對齊方式,可取值為: left、center或right,默認值是center
color水平線的顏色
3.3.5預格式化標記標簽)放到塊中時,就像放在HTML/XHTML文檔的其他部分中一樣即可。預格式化標記的應用如例38所示。這是預格式文本。它保留了空格和換行。
用pre實現的漂亮文字圖案:
代碼運行結果如圖37所示。圖37預格式化標記效果演示3.4上機練習本節給出一個唐詩欣賞的頁面,在這個實例中,綜合運用本章所介紹的標記對普通文字和段落進行格式化。步驟1: 打開Sublime Text,新建一個HTML文件,輸入以下代碼: 文字段落網頁唐詩欣賞
靜夜思
李白
床前明月光,
疑是地上霜。
舉頭望明月,
低頭思故鄉。

【簡析】
這是寫遠客思鄉之情的詩,詩以明白如話的語言雕琢出明靜醉人的秋夜的意境。它不追求想像的新穎奇特,也摒棄了辭藻的精工華美;
它以清新樸素的筆觸,抒寫了豐富深曲的內容。境是境,情是情,那麼逼真,那麼動人,百讀不厭,耐人尋味。無怪乎有人贊它是“妙絕古今”。
版權©:版權所有,違者必究E-mail:limingwei@gmail.com
步驟2: 在瀏覽器中預覽,效果如圖38所示。圖38綜合實例演示效果3.5本章小結文字與段落是頁面排版的重點,也是網頁的基礎部分,可以通過HTML標記實現對文字和段落的格式化。本章主要講解了HTML文字與段落的格式設置,主要內容包括文字內容標記、文字修飾標記、段落修飾標記的使用。(1) 在瀏覽器顯示的文字內容編寫在和標記之間,內容包括普通的文字、空格符號和特殊符號以及頁面的注釋語句,標題字標記在HTML中,定義了六級標題。(2) 文字修飾標記可實現網頁文字的斜體、加粗、上標、下標、大小字號、下畫線、刪除線、等寬、地址等設置。(3) 段落格式設置可實現段落對齊方式、換行、預格式化、水平線設置、換行等設置。[1]第4章超鏈接HTML文件中重要的應用之一就是超鏈接。超鏈接就是當鼠標單擊一些文字、圖片或其素時,瀏覽器會根據其指示載入一個新的頁面或跳轉到頁面的其他位置。超鏈接除了可鏈接文本外,還可鏈接各種媒體文件,如聲音、圖像、動畫,通過這些進入豐富多彩的多媒體世界。本章重點 理解相對路徑和路徑 掌握文字鏈接 掌握圖片鏈接 理解錨點的使用 了解郵箱地址鏈接4.1超鏈接簡介超鏈接是指從一個網頁指向另一個目標的連接關繫,這個目標可以是另一個網頁,也可以是相同網頁上的不同位置,還可以是一張圖片、一封電子郵件、一個文件,甚至是一個應用程序。超鏈接在本質上屬於網頁的一部分,它為Web站點提供了重要的交互措施,使網絡不限於特定的地理位置,隻要鼠標一點,就可以到達全球任意一個站點。4.2創建超鏈接在HTML5中建立超鏈接所使用的標記為。超鏈接有兩個素,設置為超鏈接素和超鏈接指向的目標地址。超鏈接的基本結構如下: 4.2.1相對路徑和路徑一個站點中通常有以下兩種類型的文件路徑。1. 路徑路徑就是你的主頁上的文件或目錄在硬盤上真正的路徑,例如,你的程序是存放在C:/HTML5/index.html下的,那麼C:/HTML5/index.html就是index.html的路徑。在網絡中,以http開頭的鏈接都是路徑,例如,http://www.march.com/support/contents.html就是一個路徑。當然不是任何時候都需要使用路徑,對於本地鏈接來講,使用路徑就不是好的方式,因為一旦將此站點移動到其他域,則所有本地路徑都將斷開。其次,當插入圖像時,如果使用圖像的路徑,而圖像又駐留在遠程服務器而不在本地硬盤驅動器,則將無法在文檔窗口中查看該圖像。此時,就必須在瀏覽器中預覽該文檔纔能看到它。路徑一般在程序的路徑配置中經常用到,而在實際制作網頁中很少使用。[1]HTML5網頁設計教程第4章超鏈接[3][3]2. 相對路徑相對路徑又稱文檔相對路徑,是指省略掉當前文檔和所鏈接的文檔都相同的URL部分,而隻提供不同的路徑部分。如support/contents.html就是一個相對路徑。相對路徑對於大多數Web站點的本地鏈接來說,是適用的路徑。在當前文檔與所鏈接的文檔處於同一文件內,且可能繼續保持這種狀態的情況下,文檔相對路徑就顯得特別有用。文檔相對路徑還可用來鏈接到其他文件夾中的文檔,方法是利用文件夾的層次結構,指定從當前文檔到所鏈接的文檔的路徑。路徑和相對路徑的區別說明如下。假設所建立的Web站點目錄路徑如圖41所示。圖41Web站點目錄路徑用表41來說明圖41的情況下,某文件引用另一文件時,所應使用的相對路徑與路徑的區別。表41路徑與相對路徑的對比引用者被引用者路徑相對路徑Ref1.htmlBeRef1.gifDir1/SubDir2/BeRef1.gif../SubDir2/BeRef1.gifRef2.htmlBeRef1.gifDir1/SubDir2/BeRef1.gif../../Dir1/SubDir2/BeRef1.gifRef1.htmlBeRef2.htmlDir2//BeRef2.html../../Dir2/BeRef2.htmlRef2.htmlBeRef2.htmlDir2//BeRef2.html../BeRef2.html注意: ".."代表上一層目錄,而"../../"所代表的是上一層目錄的上一層目錄。所以,從表41中可以看出,如果引用的文件存在於目前目錄的子目錄中,或者存在於上一層目錄的另一個子目錄中,運用相對路徑是比較方便的。如果不是時,則干脆利用路徑,還比較省事。另外,當被引用的是同一個文件時,引用文件所使用的路徑是一樣的。4.2.2內部鏈接內部鏈接是指超鏈接的鏈接對像是在同一個網站中的資源。與自身網站頁面有關的鏈接稱為內部鏈接。假設想要在網頁1中點擊超鏈接就跳轉到網頁2或者網頁3,這就是“內部鏈接”,因為這3個網頁都是在同一個網站內的。內部鏈接的鏈接對像是在同一個網站的。語法形式如下。4.2.3外部鏈接外部鏈接是指本站以外的鏈接,表達的是網站之間的鏈接關繫,是針對搜索引擎友情鏈接。高質量的外部鏈接指與自身網站建立鏈接的網站知名度高,訪問量大,同時相對的外部鏈接較少,有助於快速提升自身的網站知名度和排名的網站。語法形式如下: 4.3鏈接對像[4/5]4.3.1文字鏈接設置超鏈接素通常使用文本。文本超鏈接是通過標記來實現的,將文本放在開始標記和結束標記之間,即可建立超鏈接,語法形式如下。應用實例如例41所示。文字的超鏈接
在瀏覽器中預覽網頁效果如圖42所示。圖42文字鏈接演示效果4.3.2圖片鏈接圖片鏈接,顧名思義就是對圖片設置的超鏈接。圖片鏈接的建立和文字超鏈接的建立基本類似,都是通過＜a＞＜/a＞鏈接標記來實現的。隻需要把原來的鏈接文字換成相應的圖片。語法形式如下: 應用實例如例42所示。圖片的超鏈接
點擊該圖片放大在瀏覽器中預覽網頁效果如圖43所示。圖43圖片鏈接演示效果4.3.3書簽鏈接書簽鏈接又稱為錨點鏈接,屬於內部鏈接的一種,它的鏈接對像是當前頁面的某一個部分。有些網頁由於內容比較多,導致頁面過長,訪問者需要不停地拖動瀏覽器上的滾動條來查看文檔中的內容,為了方便用戶查看文檔中的內容,可以在文檔中建立書簽鏈接。id屬性常被用於創建到當前頁面(文檔)內部的鏈接,其作用類似於書簽鏈接(anchor)。因此,HTML5中將用於制作錨點的的屬性name取消了。書簽鏈接要設置兩部分: 一是目標錨點的id名稱;二是超鏈接部分。例如,在下面的位置創建一個內部鏈接錨點位置的鏈接形式如下: 在同一個文檔的其他位置創建一個到“內部鏈接錨點位置”的鏈接形式如下: 顯示出來的結果如下: 訪問“內部鏈接錨點位置”如果在其他文檔中,還需要在 #tips 前面加上到目標文檔的鏈接地址: 顯示結果如下所示: 訪問“HTML鏈接”頁面上的“內部鏈接錨點位置”提示: (1) 所有支持id屬性的HTML標簽都可以作為錨點,直接創建到該錨點的鏈接就可以了。標題一
(2) 如果創建了一個指向頁面內部位置的超鏈接,但是卻沒有寫錨點文本,如: 注意: 同一個頁面內部不能有重復的id屬性值。應用實例如例43所示。書簽鏈接
章
本章講解文字相關知識
第二章
本章講解圖片相關知識
第三章
本章講解音樂相關知識
本章講解美術相關知識
第五章
本章講解繪畫相關知識
第六章
本章講解鋼琴相關知識
第七章
本章講解漢字相關知識
第八章
本章講解吉祥物相關知識
第九章
本章講解玉器相關知識
第十章
本章講解陶瓷相關知識
在瀏覽器中預覽網頁效果如圖44所示。圖44書簽鏈接演示效果單擊頁面中的鏈接,即可將“第四章”的內容跳轉到頁面頂部,如圖45所示。圖45書簽鏈接跳轉演示效果4.3.4電子郵件鏈接好的站點總在不斷地自我完善和提高,所以從瀏覽器那裡及時獲得需要的意見和建議是非常有必要的。很多情況下,需要將網站管理員的Email地址保留在網頁上,以便及時獲取外界的反饋信息,這時就需要在網頁中使用電子郵件鏈接。電子郵件鏈接是一種特殊的鏈接,單擊它不是跳轉到相應的網頁上,也不是下載相應的文件,而是啟動計算機中相應的Email程序,允許書寫電子郵件,然後發往指定地址。語法形式如下: 應用實例如例44所示。鏈接到電子郵箱
在瀏覽器中預覽網頁效果如圖46所示。圖46電子郵件鏈接演示效果}}}}

書摘插畫

商品搜索

商品分类

【醫學】

【各大出版社】