網頁製作基礎任務教程（HTML5+CSS3）（慕課版）

內容提要

本教材選用新版主流開發工具HBuilderX和新Web技術標準HTML5、CSS3設計與製作網頁，重點講解最基礎的、常見的HTML5標簽和CSS3樣式應用。

全書共8個單元，採用任務驅動模式編寫，將一個PC端的小型企業門戶網站和一個傳統文化網站的作過程分解為若乾個循序漸進的學習任務，讓學生在完成任務過程中學到相關知識點。教材介紹知識點的同時，將職業規範、文化素養等思政元素有機融入教材內容中，通過思政小貼士的形式給出思政角度，幫助教師進行課程思政教育，從而讓學生在學習過程中提升文化素養、道德修養等。

教材內容組織合理、通俗易懂，面向Web前端開發、網頁設計等崗位，可作為高職院校軟件技術、網絡技術、通信技術、電腦應用技術等相關專業的教材，也可以作為零基礎的Web應用程序開發愛好者的自學參考書籍。

殷兆燕在常州信息职业技术学院从事多年Web前端相关教学和科研工作；主持建设省级在线开放课程《静态网页设计技术》；获得江苏省教学能力大赛二等奖一次，江苏省微课教学大赛二等奖两次；参与编写《信息技基础》、《计算机应用基础》等新形态一体化教程。

目錄

單元1　HTML5基礎　1

任務1　製作第 一個簡單的網頁　1

任務描述　1

前導知識　1

1.1　網頁的相關概念　1

1.1.1　網站、網頁與主頁　1

1.1.2　靜態網頁與動態網頁　1

1.1.3　Web技術簡介　2

1.1.4　網站開發的流程　4

1.1.5　HTML5簡介　4

1.2　網頁的編輯與運行　5

1.2.1　前端開發工具　5

1.2.2　使用HBuilderX新建HTML頁面　5

1.2.3　HbuilderX常用組合鍵　7

1.2.4　HbuilderX智能選中操作　7

1.3　HTML5文檔的基本結構　9

1.4　HTML5標簽的語法　9

1.4.1　單標簽和雙標簽　9

1.4.2　標簽的屬性　10

1.4.3　標簽之間的嵌套　10

1.4.4　標簽不區分大小寫　10

1.4.5　HTML5註釋　10

任務實現　11

單元小結　13

思考練習　13

單元2　HTML5基本標簽　14

任務1　製作圖文網頁　14

任務描述　14

前導知識　15

2.1　文本控制標簽　15

2.1.1　標題標簽　15

2.1.2　段落標簽　15

2.1.3　換行標簽　16

2.1.4　文本格式化標簽　17

2.1.5　轉義字符　18

2.2　圖像標簽　19

2.2.1　圖像格式　19

2.2.2　創建圖像　19

2.2.3　圖像路徑　19

任務實現　20

任務2　製作新聞列表　21

任務描述　21

前導知識　22

2.3　超鏈接標簽　22

2.3.1　超鏈接標簽的屬性　22

2.3.2　錨點鏈接　22

2.4　列表標簽　24

2.4.1　有序列表　24

2.4.2　無序列表　25

2.4.3　自定義列表　25

任務實現　26

任務3　製作註冊表單　27

任務描述　27

前導知識　28

2.5　表格標簽　28

2.5.1　基本結構　28

2.5.2　復雜結構　28

2.5.3　合並行　31

2.5.4　合並列　32

2.6　表單標簽　32

2.6.1