HTML5+CSS3網(wǎng)頁布局任務(wù)教程

高職高?！笆濉币?guī)劃教材

HTML5+CSS3網(wǎng)頁布局

任務(wù)教程

主編◎斯琴高娃

副主編◎孟清譚海中雷琳

內(nèi)容簡介

本書根據(jù)HTML5和CSS3標(biāo)準(zhǔn)詳細(xì)講解了網(wǎng)頁的布局和制作方法。全書共分12個單元，內(nèi)

容包括：準(zhǔn)備工作、HTML5常見元素、網(wǎng)頁整體布局的搭建、網(wǎng)頁主體內(nèi)容的構(gòu)建、網(wǎng)頁頁眉

的構(gòu)建、網(wǎng)頁主導(dǎo)航的構(gòu)建、網(wǎng)頁橫幅廣告的構(gòu)建、網(wǎng)頁頁腳的構(gòu)建，以及混合布局的綜合網(wǎng)頁

的構(gòu)建。每個單元包含若干個任務(wù)，各任務(wù)之間有連貫性，強化和覆蓋相關(guān)知識點。

本書與Web前端開發(fā)工作崗位接軌，強調(diào)三方面的技能：一是針對只會寫局部不會寫整體的

問題，培養(yǎng)基于網(wǎng)頁設(shè)計稿（或效果圖）來規(guī)劃網(wǎng)頁，從網(wǎng)頁整體入手，先搭建結(jié)構(gòu)，再填充內(nèi)

容的技能；二是歸納和強化常用的方法，使讀者熟練掌握方法，而不僅是知識點；三是學(xué)會寫代

碼，而不是用Dreamweaver的可視化操作來生成代碼。

本書適合作為高職高專院校HTML5+CSS3集中實訓(xùn)課程或理實一體化課程的教材，也可作

為網(wǎng)頁設(shè)計與制作愛好者的自學(xué)讀物。

圖書在版編目（CIP）數(shù)據(jù)

HTML5+CSS3網(wǎng)頁布局任務(wù)教程/斯琴高娃主編.—北京:

中國鐵道出版社有限公司,2020.9

高職高?！笆濉币?guī)劃教材

ISBN978-7-113-27180-0

Ⅰ.①H…Ⅱ.①斯…Ⅲ.①超文本標(biāo)記語言-程序設(shè)計-

高等職業(yè)教育-教材②網(wǎng)頁制作工具-高等職業(yè)教育-教材

Ⅳ.①TP393.092.2②TP312.8

中國版本圖書館CIP數(shù)據(jù)核字(2020)第153112號

書名：HTML5+CSS3網(wǎng)頁布局任務(wù)教程

作者：斯琴高娃

策劃：唐旭編輯部電話：（010）63549508

責(zé)任編輯：陸慧萍

封面設(shè)計：高博越

責(zé)任校對：張玉華

責(zé)任印制：樊啟鵬

出版發(fā)行：中國鐵道出版社有限公司（100054，北京市西城區(qū)右安門西街8號）

網(wǎng)址：/51eds/

印刷：三河市宏盛印務(wù)有限公司

版次：2020年9月第1版2020年9月第1次印刷

開本：787mm×1092mm1/16印張：13.75字?jǐn)?shù)：327千

書號：ISBN978-7-113-27180-0

定價：39.00元

版權(quán)所有侵權(quán)必究

凡購買鐵道版圖書，如有印制質(zhì)量問題，請與本社教材圖書營銷部聯(lián)系調(diào)換。電話：（010）63550836

打擊盜版舉報電話：（010）51873659

前言

HTML5和CSS3是HTML和CSS的較新標(biāo)準(zhǔn)。HTML和CSS是Web前端開發(fā)基礎(chǔ)技術(shù)，分別

用于實現(xiàn)網(wǎng)頁的結(jié)構(gòu)和表現(xiàn)，是學(xué)習(xí)后續(xù)前端腳本語言JavaScript和前端開發(fā)框架（Bootstrap、

jQuery等）的重要基礎(chǔ)。

作者將長期的高職教學(xué)實踐所得精心提煉到了本書中，充分考慮了高職學(xué)生的學(xué)情，按照初

學(xué)者的認(rèn)知規(guī)律循循善誘，按照開發(fā)者的思考路線分步講解，在精心編排的50多個網(wǎng)頁制作任

務(wù)中滲透了實際網(wǎng)站開發(fā)中常用的方法、經(jīng)驗，覆蓋了從無到有地制作一個完整的網(wǎng)頁所需的知

識和技術(shù)。

本書共分12個單元，單元內(nèi)的任務(wù)之間互補強化，單元之間銜接連貫。

第1單元準(zhǔn)備工作，介紹HTML5和CSS3是什么，如何搭建網(wǎng)頁制作環(huán)境，如何使用網(wǎng)頁

編輯器的編輯和調(diào)試功能。

第2單元HTML5常見元素，介紹制作一個完整的網(wǎng)頁一般需要哪些HTML5元素，如何使

用這些元素。

第3單元網(wǎng)頁整體布局的搭建，介紹典型的網(wǎng)頁布局有哪些，搭建網(wǎng)頁結(jié)構(gòu)用到哪些“盒

子”，實現(xiàn)這些布局設(shè)置哪些樣式。

第4單元網(wǎng)頁主體內(nèi)容的構(gòu)建1——文本的制作，介紹典型的網(wǎng)頁布局中主體內(nèi)容區(qū)的文本

內(nèi)容的制作方法。

第5單元網(wǎng)頁主體內(nèi)容的構(gòu)建2——圖片的制作，介紹典型的網(wǎng)頁布局中主體內(nèi)容區(qū)的圖片

內(nèi)容的制作方法。

第6單元網(wǎng)頁主體內(nèi)容的構(gòu)建3——表格的制作，介紹典型的網(wǎng)頁布局中主體內(nèi)容區(qū)的表格

內(nèi)容的制作方法。

第7單元網(wǎng)頁主體內(nèi)容的構(gòu)建4——表單的制作，介紹典型的網(wǎng)頁布局中主體內(nèi)容區(qū)的表單

內(nèi)容的制作方法。

第8單元網(wǎng)頁頁眉的構(gòu)建，介紹典型的網(wǎng)頁布局中頁眉的制作方法。

第9單元網(wǎng)頁主導(dǎo)航的構(gòu)建，介紹典型的網(wǎng)頁布局中主導(dǎo)航的制作方法。

第10單元網(wǎng)頁橫幅廣告的構(gòu)建，介紹典型的網(wǎng)頁布局中橫幅廣告的制作方法。

第11單元網(wǎng)頁頁腳的構(gòu)建，介紹典型的網(wǎng)頁布局中頁腳的制作方法。

第12單元混合布局的綜合網(wǎng)頁的構(gòu)建，介紹復(fù)雜網(wǎng)頁的制作方法。

本書主要特色：

①與Web前端開發(fā)工作崗位接軌，教學(xué)生直接寫HTML5和CSS3代碼，而不是教可視化

操作。

②教學(xué)生基于網(wǎng)頁設(shè)計稿（或效果圖）制作完整的網(wǎng)頁，而不是僅僅會做網(wǎng)頁一角。

③歸納和強化常用的方法，讓學(xué)生熟練掌握方法，而不僅僅是知識點。

④每個實訓(xùn)任務(wù)都有詳盡的步驟和邏輯，而不是直接粘貼成片的代碼。

課時數(shù)及選用建議（僅供參考）：

單元任務(wù)課時數(shù)建議選用建議

任務(wù)1.1~1.22

第1單元

任務(wù)1.3~1.42

任務(wù)2.1~2.22
理實一體化課程：

任務(wù)2.3~2.42選用所有任務(wù)。

任務(wù)2.5~2.62
集中實訓(xùn)課程：

第2單元

任務(wù)2.7~2.82省略

任務(wù)2.9~2.102

任務(wù)2.112

任務(wù)3.14
理實一體化課程：

選用所有任務(wù)。

第3單元任務(wù)3.24

集中實訓(xùn)課程：

任務(wù)3.32選用所有任務(wù)

任務(wù)4.12

任務(wù)4.22
理實一體化課程：

任務(wù)4.32任務(wù)4.2、4.5、4.6或全部。

第4單元

任務(wù)4.42
集中實訓(xùn)課程：

任務(wù)4.54任選

任務(wù)4.64

任務(wù)5.1~5.22

任務(wù)5.32
理實一體化課程：

任務(wù)5.42任務(wù)5.2、5.3、5.4、5.5、5.7或全部。

第5單元

任務(wù)5.5~5.62
集中實訓(xùn)課程：

任務(wù)5.72任選

任務(wù)5.8~5.92

任務(wù)6.12

第6單元

任務(wù)6.2~6.32

任務(wù)7.12

第7單元任務(wù)7.22

任務(wù)7.32

理實一體化課程：

任務(wù)8.12

第8單元任選。

任務(wù)8.22

集中實訓(xùn)課程：

任務(wù)9.12

第9單元任選

任務(wù)9.22

任務(wù)10.12

第10單元

任務(wù)10.22

任務(wù)11.12

第11單元

任務(wù)11.22

理實一體化課程：

任務(wù)12.18

省略。

第12單元

集中實訓(xùn)課程：

任務(wù)12.212

任選

合計100

本書由斯琴高娃任主編，孟清、譚海中、雷琳任副主編。其中，斯琴高娃編寫第3~5單元、

第12單元，孟清編寫第6~8單元，譚海中編寫第1、2單元，雷琳編寫第9~11單元。

由于時間倉促，編者水平有限，書中難免存在疏漏和不足之處，敬請廣大讀者批評指正，聯(lián)

系方式：378083015@。

編者

2020年6月

目錄

第1單元準(zhǔn)備工作..........................................................................................1

任務(wù)1.1認(rèn)識HTML5和CSS3................................................................................................1

任務(wù)1.2搭建軟件環(huán)境...........................................................................................................2

任務(wù)1.2.1安裝HBuilderX.............................................................................................3

任務(wù)1.2.2安裝SublimeText3........................................................................................5

任務(wù)1.3分析第一個網(wǎng)頁........................................................................................................6

任務(wù)1.4了解網(wǎng)頁編輯和調(diào)試技巧........................................................................................9

單元小結(jié).................................................................................................................................10

習(xí)題.........................................................................................................................................10

第2單元HTML5常見元素............................................................................12

任務(wù)2.1認(rèn)識標(biāo)題元素.........................................................................................................12

任務(wù)2.2認(rèn)識段落元素.........................................................................................................14

任務(wù)2.3認(rèn)識水平線元素、換行元素..................................................................................15

任務(wù)2.4認(rèn)識圖像元素.........................................................................................................16

任務(wù)2.5認(rèn)識超鏈接.............................................................................................................17

任務(wù)2.6認(rèn)識無序列表.........................................................................................................18

任務(wù)2.7認(rèn)識有序列表.........................................................................................................19

任務(wù)2.8認(rèn)識自定義列表......................................................................................................20

任務(wù)2.9認(rèn)識表格元素.........................................................................................................21

任務(wù)2.10認(rèn)識表單元素.......................................................................................................23

任務(wù)2.11認(rèn)識音頻、視頻元素............................................................................................24

單元小結(jié).................................................................................................................................26

習(xí)題.........................................................................................................................................26

第3單元網(wǎng)頁整體布局的搭建......................................................................27

任務(wù)3.1單列布局的搭建......................................................................................................27

任務(wù)3.1.1網(wǎng)頁結(jié)構(gòu)的實現(xiàn)...........................................................................................28

任務(wù)3.1.2網(wǎng)頁樣式的實現(xiàn)...........................................................................................29

任務(wù)3.2左寬右窄兩列布局（F式布局）的搭建................................................................35

任務(wù)3.2.1網(wǎng)頁結(jié)構(gòu)的實現(xiàn)...........................................................................................35

任務(wù)3.2.2網(wǎng)頁樣式的實現(xiàn)...........................................................................................36

任務(wù)3.3三列布局的搭建......................................................................................................44

2HTML5+CSS3網(wǎng)頁布局任務(wù)教程

任務(wù)3.3.1網(wǎng)頁結(jié)構(gòu)的實現(xiàn)...........................................................................................44

任務(wù)3.3.2網(wǎng)頁樣式的實現(xiàn)...........................................................................................45

單元小結(jié).................................................................................................................................51

習(xí)題.........................................................................................................................................51

第4單元網(wǎng)頁主體內(nèi)容的構(gòu)建1——文本的制作...........................................53

任務(wù)4.1“海南島簡介”頁的制作（標(biāo)題+段落）................................................................53

任務(wù)4.1.1網(wǎng)頁結(jié)構(gòu)的實現(xiàn)...........................................................................................54

任務(wù)4.1.2網(wǎng)頁基本樣式的實現(xiàn)...................................................................................56

任務(wù)4.1.3簡介標(biāo)題樣式和段落樣式的實現(xiàn).................................................................58

任務(wù)4.2“學(xué)院簡介”頁的制作（頭部+段落）...................................................................63

任務(wù)4.2.1網(wǎng)頁結(jié)構(gòu)的實現(xiàn)...........................................................................................64

任務(wù)4.2.2網(wǎng)頁基本樣式的實現(xiàn)...................................................................................65

任務(wù)4.2.3簡介頭部的樣式和正文樣式的實現(xiàn).............................................................66

任務(wù)4.3“美麗的草原”頁的制作（頭部+章節(jié)）................................................................69

任務(wù)4.3.1網(wǎng)頁結(jié)構(gòu)和基本樣式的實現(xiàn)........................................................................70

任務(wù)4.3.2文章頭部樣式和章節(jié)樣式的實現(xiàn).................................................................72

任務(wù)4.4“學(xué)院首頁”兩行對稱欄目的制作.........................................................................73

任務(wù)4.4.1網(wǎng)頁結(jié)構(gòu)和基本樣式的實現(xiàn)........................................................................74

任務(wù)4.4.2兩列對稱欄目樣式的實現(xiàn)............................................................................78

任務(wù)4.5“學(xué)院首頁”三列非對稱欄目的制作......................................................................81

任務(wù)4.5.1網(wǎng)頁結(jié)構(gòu)和基本樣式的實現(xiàn)........................................................................82

任務(wù)4.5.2三列非對稱欄目樣式的實現(xiàn)........................................................................85

任務(wù)4.6“專業(yè)介紹”頁的制作（左窄右寬的兩列布局）...................................................88

任務(wù)4.6.1網(wǎng)頁結(jié)構(gòu)和基本樣式的實現(xiàn)........................................................................89

任務(wù)4.6.2左窄右寬的兩列布局的實現(xiàn)........................................................................91

單元小結(jié).................................................................................................................................96

習(xí)題.........................................................................................................................................96

第5單元網(wǎng)頁主體內(nèi)容的構(gòu)建2——圖片的制作...........................................98

任務(wù)5.1“學(xué)院首頁”兩行對稱欄目插圖.............................................................................98

任務(wù)5.2“學(xué)院首頁”三列非對稱欄目插圖.......................................................................101

任務(wù)5.3F式布局、左圖右文.............................................................................................106

任務(wù)5.4兩列布局、上圖下文............................................................................................109

任務(wù)5.5文字環(huán)繞圖片1....................................................................................................113

任務(wù)5.6文字環(huán)繞圖片2....................................................................................................116

任務(wù)5.7多張圖片緊湊排列................................................................................................117

任務(wù)5.8設(shè)置背景圖像1....................................................................................................121

任務(wù)5.9設(shè)置背景圖像2....................................................................................................123

目錄3

單元小結(jié)...............................................................................................................................125

習(xí)題.......................................................................................................................................125

第6單元網(wǎng)頁主體內(nèi)容的構(gòu)建3——表格的制作.........................................127

任務(wù)6.1典型的表格...........................................................................................................127

任務(wù)6.2單元格合并...........................................................................................................131

任務(wù)6.3隔行換色表格.......................................................................................................132

單元小結(jié)...............................................................................................................................134

習(xí)題.......................................................................................................................................134

第7單元網(wǎng)頁主體內(nèi)容的構(gòu)建4——表單的制作.........................................135

任務(wù)7.1制作網(wǎng)頁一角的表單............................................................................................135

任務(wù)7.2制作網(wǎng)頁任意位置的表單....................................................................................140

任務(wù)7.3制作遮罩層上的表單............................................................................................147

單元小結(jié)...............................................................................................................................151

習(xí)題.......................................................................................................................................151

第8單元網(wǎng)頁頁眉的構(gòu)建...........................................................................153

任務(wù)8.1制作典型頁眉1....................................................................................................153

任務(wù)8.2制作典型頁眉2....................................................................................................156

單元小結(jié)...............................................................................................................................160

習(xí)題.......................................................................................................................................160

第9單元網(wǎng)頁主導(dǎo)航的構(gòu)建.......................................................................161

任務(wù)9.1制作不帶下拉菜單的導(dǎo)航....................................................................................161

任務(wù)9.2制作帶下拉菜單的導(dǎo)航........................................................................................163

單元小結(jié)...............................................................................................................................167

習(xí)題.......................................................................................................................................167

第10單元網(wǎng)頁橫幅廣告的構(gòu)建..................................................................168

任務(wù)10.1制作窄幅橫幅廣告..............................................................................................168

任務(wù)10.2制作寬幅橫幅廣告..............................................................................................169

單元小結(jié)...............................................................................................................................171

習(xí)題.......................................................................................................................................171

第11單元網(wǎng)頁頁腳的構(gòu)建.........................................................................172

任務(wù)11.1制作典型頁腳1...................................................................................................172

任務(wù)11.2制作典型頁腳2...................................................................................................174

單元小結(jié)...............................................................................................................................178

習(xí)題.......................................................................................................................................178

4HTML5+CSS3網(wǎng)頁布局任務(wù)教程

第12單元混合布局的綜合網(wǎng)頁的構(gòu)建........................................................179

任務(wù)12.1“旅游美食網(wǎng)”首頁的構(gòu)建.................................................................................179

任務(wù)12.2仿“中國知網(wǎng)”首頁的構(gòu)建...............................................................................187

單元小結(jié)...............................................................................................................................204

習(xí)題.......................................................................................................................................205

知識解讀索引................................................................................................206

第1單元準(zhǔn)備工作

準(zhǔn)確理解基本概念，做好上機實踐準(zhǔn)備，以及了解必要的調(diào)試技巧是學(xué)習(xí)網(wǎng)頁制作必需

的準(zhǔn)備工作。

通過本單元的學(xué)習(xí)，應(yīng)該達(dá)到以下目標(biāo)：

認(rèn)識HTML5和CSS3。

能夠安裝和配置軟件環(huán)境。

學(xué)會編輯、瀏覽和調(diào)試網(wǎng)頁的方法。

掌握HTML元素、開始標(biāo)簽、結(jié)束標(biāo)簽等概念。

任務(wù)1.1認(rèn)識HTML5和CSS3

任務(wù)要求

請描述HTML、HTML5、CSS、CSS3這4個概念。

任務(wù)分析

可從這4個縮寫單詞的字面意義出發(fā)，結(jié)合Web開發(fā)語言的發(fā)展歷史給出全面的描述。

知識概括

HTML是制作Web頁面的標(biāo)準(zhǔn)語言，CSS是實現(xiàn)網(wǎng)頁外觀的語言，它們都是Web瀏覽器

能解析的語言，都經(jīng)過了多年的發(fā)展，經(jīng)歷了多個不同的標(biāo)準(zhǔn)（版本）。

任務(wù)實現(xiàn)

1．認(rèn)識HTML

HTML（HyperTextMarkupLanguage，超文本標(biāo)記語言）是構(gòu)成網(wǎng)頁的基本通用語言。超

文本是指頁面內(nèi)可以包含圖片、鏈接、音樂、視頻、程序等非文本元素。使用HTML編寫的

文檔稱為HTML文檔，它被瀏覽器解析后呈現(xiàn)為網(wǎng)頁。HTML自1993年被公開發(fā)布以來，經(jīng)

歷了HTML2.0、HTML3.2、HTML4.0、HTML4.01、XHTML1.0、HTML5等多個版本。

2．認(rèn)識HTML5

HTML5是HTML的新版本，HTML5的主要新特性有標(biāo)簽更語義化、表單更好用、直接

2HTML5+CSS3網(wǎng)頁布局任務(wù)教程

支持音視頻、矢量繪圖、用戶可以編輯網(wǎng)頁的內(nèi)容等。

有的瀏覽器，尤其瀏覽器的低版本，還不完全支持HTML5中新增的標(biāo)簽或?qū)傩?，也?/p>

是說無法正確解析HTML5的網(wǎng)頁。但主流瀏覽器都在逐漸實現(xiàn)對HTML5的全面支持。

3．認(rèn)識CSS

CSS（CascadingStyleSheets，層疊樣式表）是用于實現(xiàn)網(wǎng)頁的排版和修飾的一種計算機

語言，可以嵌入到HTML標(biāo)簽中，也可以編寫到獨立的文件中。

HTML負(fù)責(zé)網(wǎng)頁的結(jié)構(gòu)，CSS負(fù)責(zé)網(wǎng)頁的表現(xiàn)，換句話說，HTML表達(dá)網(wǎng)頁的內(nèi)容，CSS

表達(dá)網(wǎng)頁的樣式。

跟HTML一樣，CSS也經(jīng)歷了不同的版本，主要有CSS1.0、CSS2.0、CSS3.0。

CSS3是CSS的較新版本，增加了更多的CSS選擇器，可以實現(xiàn)更簡單、更強大的功能。

任務(wù)1.2搭建軟件環(huán)境

任務(wù)要求

請搭建學(xué)習(xí)HTML5+CSS3所需的軟件環(huán)境。微課

任務(wù)分析

學(xué)習(xí)HTML5+CSS3需要搭建的軟件環(huán)境很簡單，只需要安裝一個網(wǎng)頁

編輯器和一個主流瀏覽器。

搭建軟件環(huán)境

知識概括

1．編輯器

任何一種文本編輯器都可以用于編寫HTML文檔，如記事本、EditPlus、NotePad++、

UltraEdit等。但是，專門的網(wǎng)頁編輯器會提供強大的代碼提示、代碼檢查、聯(lián)想查詢、代碼

折疊等功能，更方便于快速正確地編寫HTML和CSS代碼，如SublimeText、WebStorm、HBuilder

X、Dreamweaver等。

本書推薦使用HBuilderX或SublimeText3，它們使用普遍，體積小，功能強大，易于安

裝，可以合法免費獲得。

2．瀏覽器

初學(xué)者不必考慮如何讓網(wǎng)頁兼容各種瀏覽器的問題，建議選擇支持HTML5的瀏覽器。

本書推薦使用谷歌（GoogleChrome）瀏覽器和火狐瀏覽器（MozillaFirefox），它們對HTML5

的支持性好。

第1單元準(zhǔn)備工作3

任務(wù)1.2.1安裝HBuilderX

任務(wù)實現(xiàn)

步驟1：獲得軟件。

從官網(wǎng)https://www.dcloud.io/上可以免費下載新版的該軟件，下載步驟如圖1-1~圖1-3

所示。

①單擊“HBuilderX極客開發(fā)工具”選項。

②單擊DOWNLOAD選項。

③單擊“正式版”選項，“Alpha版”是還在測試中的版本。然后，可以單擊“標(biāo)準(zhǔn)版”

（區(qū)分操作系統(tǒng)）來下載“HBuilderX”的較新版本，可以單擊“上一代HBuilder下載”右邊

的鏈接（區(qū)分操作系統(tǒng)）來下載“HBuilder”的較新版本，還可以單擊“歷史版本”下載

“HBuilderX”或“HBuilder”的歷史版本。

圖1-1下載HBuilderX（一）圖1-2下載HBuilderX（二）

圖1-3下載HBuilderX（三）

步驟2：安裝軟件。

HBuilderX不需要安裝，將HBuilderX的壓縮包解壓到當(dāng)前文件夾，從解壓出來的文件

夾里找到HbuilderX.exe文件，右擊后選擇“發(fā)送到桌面快捷方式”命令。

步驟3：使用軟件。

①雙擊HBuilderX.exe文件或桌面快捷方式即可啟動HBuilderX，關(guān)閉自述文件（可在

4HTML5+CSS3網(wǎng)頁布局任務(wù)教程

幫助菜單項里單擊“自述文件”再次打開）。

②選擇“文件”菜單中的“新建”“打開”等命令，可以新建和打開網(wǎng)站文件夾或各種

文件，常用的幾個選項如圖1-4所示。

③選擇“文件”→“新建”→“html文件”命令，在打開的對話框中輸入文件名和存

放位置，選中“空白文件”復(fù)選框，單擊“創(chuàng)建”按鈕，新建一個HTML文檔，如圖1-5

所示。

圖1-4HBuilderX的“文件”菜單

圖1-5新建HTML文件

④在文檔中輸入html:5，然后按【Tab】鍵，如圖1-6所示，可看到html:5這個縮寫被

擴展成了完整的一段HTML代碼，如圖1-7所示。

圖1-6HTML5文檔結(jié)構(gòu)的縮寫和擴展鍵

第1單元準(zhǔn)備工作5

圖1-7縮寫被擴展生成的HTML代碼

任務(wù)1.2.2安裝SublimeText3

任務(wù)實現(xiàn)

步驟1：獲得軟件。

從官網(wǎng)上可以免費下載最新版的該軟件（英文安裝版，帶Emmet

插件），如圖1-8所示。也可以下載網(wǎng)上共享的漢化解壓版（注意要帶Emmet插件）。

圖1-8SublimeText官網(wǎng)下載鏈接

Emmet插件是提供縮寫擴展功能的一個軟件包，大部分網(wǎng)頁編輯器都自帶該插件或支持

Emmet插件，有了該插件后網(wǎng)頁編輯器才更方便于快速輸入HTML和CSS代碼。

步驟2：安裝軟件。

下面介紹從官網(wǎng)下載的SublimeText3英文安裝版的安裝步驟。

①雙擊安裝包（文件名如SublimeTextBuild3207x64Setup.exe），指定軟件的安裝位置，

單擊Next按鈕，如圖1-9所示。

②直接單擊Next按鈕，如圖1-10所示。