3網(wǎng)頁設(shè)計(jì)與制作_第1頁
3網(wǎng)頁設(shè)計(jì)與制作_第2頁
3網(wǎng)頁設(shè)計(jì)與制作_第3頁
3網(wǎng)頁設(shè)計(jì)與制作_第4頁
3網(wǎng)頁設(shè)計(jì)與制作_第5頁
已閱讀5頁，還剩330頁未讀， 繼續(xù)免費(fèi)閱讀

付費(fèi)閱讀全文

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

文前.indd12022/8/169:37:43

內(nèi)容簡(jiǎn)介

本書用通俗易懂的語言詳細(xì)介紹了HTML5網(wǎng)頁設(shè)計(jì)和應(yīng)用CSS3樣式美化網(wǎng)頁，涵蓋教育部

“1+X”《Web前端開發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)》證書和工信部“藍(lán)橋杯”全國軟件和信息技術(shù)專業(yè)人

才“Web應(yīng)用開發(fā)”大賽的相關(guān)網(wǎng)頁設(shè)計(jì)與制作知識(shí)點(diǎn)，以真實(shí)崗位生產(chǎn)項(xiàng)目、典型工作任務(wù)、案

例等為載體組織教學(xué)內(nèi)容并進(jìn)行教學(xué)設(shè)計(jì)，重點(diǎn)突出“教、學(xué)、做”一體化，注重培養(yǎng)學(xué)生的應(yīng)用

能力和解決問題的實(shí)際工作能力，培養(yǎng)高素質(zhì)高技能應(yīng)用型人才。

全書共分為9章，包括HTML5基本標(biāo)簽及開發(fā)工具介紹、CSS樣式表基礎(chǔ)、表格的應(yīng)用、表

單的應(yīng)用、應(yīng)用CSS設(shè)置鏈接和導(dǎo)航菜單、應(yīng)用CSS3樣式美化網(wǎng)頁、基于DIV+CSS的網(wǎng)頁、應(yīng)用

CSS3布局網(wǎng)頁與實(shí)例、網(wǎng)上書城網(wǎng)頁設(shè)計(jì)與制作。

本書適合作為高等職業(yè)院校各專業(yè)“網(wǎng)頁設(shè)計(jì)與制作”課程的教材，也可作為前端開發(fā)的培訓(xùn)

教材，還可作為Web開發(fā)愛好者的自學(xué)用書。

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

HTML5&CSS3網(wǎng)頁設(shè)計(jì)與制作/向文娟主編.—北京：中國鐵道出版社

有限公司，2022.7

“十四五”高等職業(yè)教育計(jì)算機(jī)類專業(yè)新形態(tài)一體化系列教材

ISBN978-7-113-29279-9

Ⅰ.①H…Ⅱ.①向…Ⅲ.①超文本標(biāo)記語言-程序設(shè)計(jì)-高等職業(yè)教育-

教材②網(wǎng)頁制作工具-高等職業(yè)教育-教材Ⅳ.①TP312②TP393.092

中國版本圖書館CIP數(shù)據(jù)核字（2022）第107224號(hào)

書名：HTML5&CSS3網(wǎng)頁設(shè)計(jì)與制作

作者：向文娟

策劃：徐海英王春霞編輯部電話：（010）63551006

責(zé)任編輯：王春霞包寧

封面制作：尚明龍

責(zé)任校對(duì)：苗丹

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

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

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

印刷：三河市國英印務(wù)有限公司

版次：2022年7月第1版2022年7月第1次印刷

開本：850mm×1168mm?1/16?印張：20.75字?jǐn)?shù)：533千

書號(hào)：ISBN978-7-113-29279-9

定價(jià)：69.00元

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

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

打擊盜版舉報(bào)電話：（010）63549461

文前.indd22022/8/1616:42:45

前?言

目前正值高職教育創(chuàng)新時(shí)期，高職教育的發(fā)展離不開優(yōu)秀的教材，而電子信息大類專

業(yè)群課程的教材也需要進(jìn)行改革，以適應(yīng)當(dāng)前高職的教育發(fā)展形勢(shì)。

為什么要學(xué)習(xí)本書？

本書用通俗易懂的語言詳細(xì)介紹了HTML5網(wǎng)頁設(shè)計(jì)和應(yīng)用CSS3樣式美化網(wǎng)頁。書

中涵蓋教育部“1+X”《Web前端開發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)》證書和工信部“藍(lán)橋杯”全國

軟件和信息技術(shù)專業(yè)人才“Web應(yīng)用開發(fā)”大賽的相關(guān)網(wǎng)頁設(shè)計(jì)與制作知識(shí)點(diǎn)，以真實(shí)的

崗位生產(chǎn)項(xiàng)目、典型工作任務(wù)、案例等為載體組織教學(xué)內(nèi)容并進(jìn)行教學(xué)設(shè)計(jì)，重點(diǎn)突出“教、

學(xué)、做”一體化，注重培養(yǎng)學(xué)生的應(yīng)用能力和解決問題的實(shí)際工作能力，培養(yǎng)高素質(zhì)高技

能應(yīng)用型人才。

如何使用本書？

本書根據(jù)用人企業(yè)的崗位需求，通過企業(yè)真實(shí)案例開展教學(xué)，在教學(xué)中大量采取“案

例教學(xué)、任務(wù)驅(qū)動(dòng)、項(xiàng)目引領(lǐng)”的教學(xué)方法，各個(gè)相對(duì)完整的教學(xué)任務(wù)突出了課程內(nèi)容的

綜合應(yīng)用性、實(shí)用性，在“行動(dòng)導(dǎo)向”的教學(xué)模式中形成技能與能力。

全書共分為9章，系統(tǒng)地講解了HTML5網(wǎng)頁設(shè)計(jì)和應(yīng)用CSS3樣式美化網(wǎng)頁的相關(guān)

知識(shí)，主要內(nèi)容如下：

第1章主要講解HTML5基本標(biāo)簽及開發(fā)工具介紹。

第2章主要講解CSS3樣式表基礎(chǔ)。

第3章主要講解網(wǎng)頁中表格的應(yīng)用。

第4章主要講解網(wǎng)頁中表單的應(yīng)用。

第5章主要講解如何設(shè)置鏈接和制作導(dǎo)航菜單。

第6章主要講解如何應(yīng)用CSS3樣式美化網(wǎng)頁中的元素。

第7章主要講解基于DIV+CSS的網(wǎng)頁的盒模型、浮動(dòng)和定位。

第8章主要講解如何應(yīng)用CSS3合理布局網(wǎng)頁。

第9章主要講解應(yīng)用DIV+CSS設(shè)計(jì)商業(yè)網(wǎng)站，漸進(jìn)式完成項(xiàng)目開發(fā)全過程。

I

文前.indd12022/8/1517:27:27

HTML5&CSS3網(wǎng)頁設(shè)計(jì)與制作

本書在內(nèi)容組織形式上強(qiáng)調(diào)學(xué)生的主體性學(xué)習(xí)，每章先提出學(xué)習(xí)目標(biāo)，再進(jìn)行任務(wù)分

析，使學(xué)生在開始實(shí)施每個(gè)項(xiàng)目前就知道學(xué)習(xí)的任務(wù)和要求，引起學(xué)生的注意與興趣，然

后針對(duì)本項(xiàng)目相關(guān)理論知識(shí)進(jìn)行介紹，最后給出技能目標(biāo)、內(nèi)容，讓學(xué)生目標(biāo)明確地去進(jìn)

行學(xué)習(xí)、實(shí)踐和自我評(píng)價(jià)。

本書由長期從事“HTML5&CSS3網(wǎng)頁設(shè)計(jì)與制作”課程教學(xué)的一線教師、IT企業(yè)工

程師聯(lián)合編寫，內(nèi)容滿足國家信息化發(fā)展戰(zhàn)略對(duì)人才培養(yǎng)的要求，深入淺出、圖文并茂、

有趣好學(xué)。

本書由向文娟主編，李穎、管偉、柴芳老師和高軍、楊欣等多位企業(yè)工程師參與編寫。

在一年的編寫過程中，編者付出了大量辛勤的勞動(dòng)，同時(shí)也得到了許多高職院校、企業(yè)和

出版社領(lǐng)導(dǎo)的支持與幫助，在此一并表示衷心的感謝。

由于編者水平有限，書中難免存在疏漏與不妥之處，敬請(qǐng)各位讀者批評(píng)指正。感謝您

使用本書，期待本書能成為您的良師益友。

編者

2022年4月

II

文前.indd22022/8/1517:27:28

目錄

插入圖片

第1章

HTML5基本標(biāo)簽及

1.5.823

插入特殊符號(hào)

開發(fā)工具介紹??????????????11.5.924

1.5.10插入橫線25

1.1HTML概述2

1.6HTML5新增標(biāo)簽26

1.1.1HTML5發(fā)展歷史2

1.6.1<article>標(biāo)簽26

1.1.2HTML5新特性2

1.6.2聲音內(nèi)容的<audio>標(biāo)簽27

1.1.3HTML5組織3

1.6.3圖形的<canvas>標(biāo)簽27

1.1.4HTML5構(gòu)成3

1.6.4調(diào)用命令的<command>

1.2第一個(gè)入門網(wǎng)頁4

標(biāo)簽29

1.2.1頭部標(biāo)簽<head>…</head>5

1.6.5定義時(shí)間或日期的<time>

1.2.2標(biāo)題標(biāo)簽<title>…</title>5

標(biāo)簽29

1.2.3元標(biāo)簽<meta>5

1.6.6定義視頻的<video>標(biāo)簽30

1.2.4入門網(wǎng)頁6

本章小結(jié)30

1.3開發(fā)工具簡(jiǎn)介7

課后自測(cè)31

1.3.1使用記事本編輯器7

上機(jī)實(shí)戰(zhàn)34

1.3.2使用EditPlus編輯器8

拓展練習(xí)36

1.3.3使用SublimeText編輯器8

使用編輯器

1.3.4Dreamweaver9第2章

CSS樣式表基礎(chǔ)????????37

1.4HBuilderX界面介紹9

2.1初步認(rèn)識(shí)CSS338

1.4.1“文件”菜單10

2.1.1什么是CSS338

1.4.2界面功能介紹11

2.1.2CSS3發(fā)展簡(jiǎn)史38

1.4.3使用HBuilderX新建一個(gè)

2.1.3CSS3基本語法39

網(wǎng)頁11

2.2CSS語法結(jié)構(gòu)分析39

1.5在頁面中添加HTML13

2.2.1CSS3屬性選擇器39

1.5.1標(biāo)題標(biāo)簽<h>13

2.2.2元素選擇器40

1.5.2段落標(biāo)簽<p>14

2.2.3群組選擇器40

1.5.3換行標(biāo)簽<br>15

2.2.4包含選擇器41

1.5.4預(yù)排版標(biāo)簽<pre>15

2.2.5CLASS及ID選擇器42

1.5.5文本格式化標(biāo)簽16

2.2.6子元素選擇器45

1.5.6列表17

2.2.7相鄰兄弟選擇器45

1.5.7設(shè)置文本字體22

2.2.8偽類及偽對(duì)象46

I

文前.indd12022/8/1517:27:28

HTML5&CSS3網(wǎng)頁設(shè)計(jì)與制作

2.2.9通配選擇器484.2.5提交按鈕82

2.3將CSS應(yīng)用于網(wǎng)頁494.2.6重置按鈕83

2.3.1行內(nèi)樣式表494.2.7隱藏域84

2.3.2內(nèi)部樣式表504.2.8文件域85

2.3.3外部樣式表514.2.9菜單列表類表單元素86

本章小結(jié)534.2.10文本域87

課后自測(cè)534.3HTML5新增表單輸入類型88

上機(jī)實(shí)戰(zhàn)564.3.1email類型89

拓展練習(xí)584.3.2number類型90

4.3.3range類型91

第3章

表格的應(yīng)用???????????????604.3.4url類型93

本章小結(jié)

3.1表格的定義6194

課后自測(cè)

3.2表格的基礎(chǔ)用法6194

上機(jī)實(shí)戰(zhàn)

3.2.1行代碼6196

拓展練習(xí)

3.2.2單元格6199

3.2.3列的合并63

應(yīng)用CSS設(shè)置鏈接

3.2.4行的合并64第5章

和導(dǎo)航菜單????????????100

3.2.5表格大小65

3.2.6表格內(nèi)文字位置665.1超鏈接偽類的應(yīng)用101

3.2.7單元格、邊框的背景5.1.1超鏈接的4種樣式101

顏色675.1.2將鏈接轉(zhuǎn)換為塊級(jí)元素103

3.2.8單元格間距685.1.3錨點(diǎn)107

3.2.9表格表頭695.1.4用CSS制作按鈕110

3.2.10表格標(biāo)題705.1.5首字下沉117

本章小結(jié)715.2應(yīng)用CSS美化表單元素122

課后自測(cè)715.2.1改變文本框和文本域

上機(jī)實(shí)戰(zhàn)72樣式122

拓展練習(xí)755.2.2用圖片美化按鈕133

5.2.3改變下拉列表樣式134

第4章

表單的應(yīng)用???????????????775.2.4用label標(biāo)簽提升用戶

體驗(yàn)138

4.1表單的屬性78

5.3設(shè)置導(dǎo)航菜單141

4.2在表單中添加元素78

5.3.1橫向列表菜單141

4.2.1文本字段和密碼域79

5.3.2用圖片美化的橫向?qū)Ш?43

4.2.2單選按鈕80

5.3.3CSSSprites技術(shù)145

4.2.3復(fù)選框81

5.3.4二級(jí)菜單列表147

4.2.4普通按鈕81

II

文前.indd22022/8/1517:27:28

目錄

本章小結(jié)1507.2.5使用適合的對(duì)象來布局

課后自測(cè)150網(wǎng)頁207

上機(jī)實(shí)戰(zhàn)1577.3盒模型詳解208

拓展練習(xí)1627.3.1盒模型的概念208

7.3.2盒模型的細(xì)節(jié)209

第6章

應(yīng)用CSS3樣式美化

7.3.3盒模型的寬、高、邊框、

網(wǎng)頁?????????????????????163內(nèi)邊距、外邊距定義212

6.1使用CSS美化網(wǎng)頁1647.3.4上下margin疊加問題222

6.1.1美化網(wǎng)頁文字1647.3.5左右margin加倍問題225

6.1.2美化網(wǎng)頁圖片1677.4使用CSS完善盒模型228

6.1.3美化網(wǎng)頁背景1687.4.1顯示方式定義228

6.1.4美化網(wǎng)頁邊框1697.4.2溢出處理230

6.1.5美化網(wǎng)頁表格1707.4.3輪廓樣式定義232

6.1.6美化網(wǎng)頁表單1717.5認(rèn)識(shí)浮動(dòng)與定位240

6.1.7美化網(wǎng)頁導(dǎo)航1727.5.1文檔流241

6.1.8美化網(wǎng)頁菜單1737.5.2浮動(dòng)定位244

6.2CSS美化網(wǎng)頁案例——制作百度7.5.3浮動(dòng)的清理264

熱搜1757.5.4何時(shí)選用浮動(dòng)定位270

本章小結(jié)180本章小結(jié)270

課后自測(cè)180課后自測(cè)271

上機(jī)實(shí)戰(zhàn)181上機(jī)實(shí)戰(zhàn)275

拓展練習(xí)185拓展練習(xí)282

第7章

基于DIV+CSS的

第8章

應(yīng)用CSS3布局網(wǎng)頁

網(wǎng)頁?????????????????????186與實(shí)例??????????????????283

7.1理解表現(xiàn)和結(jié)構(gòu)分離1878.1應(yīng)用CSS布局網(wǎng)頁284

7.1.1內(nèi)容、結(jié)構(gòu)和表現(xiàn)的8.1.1一列固定寬度及高度284

概念1878.1.2一列自適應(yīng)寬度285

7.1.2DIV與CSS結(jié)合的優(yōu)勢(shì)1888.1.3一列固定寬度居中285

7.1.3改善現(xiàn)有網(wǎng)站的方法1898.2應(yīng)用CSS布局網(wǎng)頁實(shí)例286

7.2認(rèn)識(shí)DIV1918.2.1使用色塊進(jìn)行布局頁面287

7.2.1DIV的概念1918.2.2完成布局及內(nèi)容289

7.2.2使用DIV191本章小結(jié)292

7.2.3理解DIV194課后自測(cè)292

7.2.4并列與嵌套DIV結(jié)構(gòu)200上機(jī)實(shí)戰(zhàn)293

拓展練習(xí)296

III

文前.indd32022/8/1517:27:28

HTML5&CSS3網(wǎng)頁設(shè)計(jì)與制作

第9章

網(wǎng)上書城網(wǎng)頁設(shè)計(jì)

9.7底部及快捷操作315

與制作??????????????????2979.8相對(duì)路徑和相對(duì)于根目錄路徑318

本章小結(jié)318

9.1站點(diǎn)建立298

課后自測(cè)318

9.2結(jié)構(gòu)分析299

上機(jī)實(shí)戰(zhàn)319

9.3框架搭建300

拓展練習(xí)323

9.4商業(yè)網(wǎng)站頁面布局303

9.5頭部及其導(dǎo)航303參考文獻(xiàn)?????????????????????????324

9.6網(wǎng)站主體308

IV

文前.indd42022/8/1517:27:28

第1章

HTML5基本標(biāo)簽及開發(fā)?

工具介紹

學(xué)習(xí)目標(biāo)

●理解網(wǎng)頁的基本結(jié)構(gòu)；

●熟悉網(wǎng)頁的開發(fā)工具；

●理解HTML的常用標(biāo)簽；

●了解HTML5中的新增標(biāo)簽；

●掌握HBuilderX的應(yīng)用，能夠熟練新建頁面；

●掌握HTML的常用標(biāo)簽，能夠熟練使用各種基本標(biāo)簽。

知識(shí)結(jié)構(gòu)

ā??ā??

??????HBuilderX????

?HBuilderX??а??亥?

?仈??

<h>HTML5????

????<p>

HTML5???

????HTML??

<br>HTML5??

亴????

<pre>HTML5??

???????

?亥????

??HTML??<head>?</head>

???????仈<title>?</title>

HTML5????????????а????亥

<?????<meta??

?????????亥

????????????

article>???????>

??????EditPlus

?丣?????

audio>??SublimeText???>

?????

canvas>??Dreamweaver???>

HTML5????

?????<command>??

????????<time>??

???仁?<video>??

1

01.indd12022/8/1517:26:20

HTML5&CSS3網(wǎng)頁設(shè)計(jì)與制作

HTML（HyperTextMarkupLanguage,超文本標(biāo)記語言）是一種編寫網(wǎng)頁文件的標(biāo)記語言。本

章主要介紹HTML5的發(fā)展歷程以及HTML的特點(diǎn)，講解制作網(wǎng)頁的各種開發(fā)工具，并詳細(xì)介紹

HBuilderX的使用。通過實(shí)例講解了HTML的各種基本標(biāo)簽，并補(bǔ)充講解了一些新增的標(biāo)簽。

1.1HTML概述

1.1.1?HTML5發(fā)展歷史

HTML從1.0至5.0經(jīng)歷了巨大的變化，從單一的文本顯示功能到圖文并茂的多媒體顯示功能，

許多特性經(jīng)過多年的完善，已經(jīng)成為一種非常好的標(biāo)記語言。HTML5已經(jīng)取代了HTML4，掀起

了Web時(shí)代的新浪潮，各大瀏覽器也都紛紛支持HTML5。HTML5可以使頁面內(nèi)容更加豐富，不

僅可以顯示三維圖形，還可以在不使用Flash插件的基礎(chǔ)上實(shí)現(xiàn)音頻、視頻播放等。HTML5還擁

有新的HTML文檔結(jié)構(gòu)、新的CSS標(biāo)準(zhǔn)、API等。

如今，不管是在手機(jī)上還是在平板電腦上，隨處可以見到HTML5網(wǎng)站、HTML5應(yīng)用軟件以

及HTML5游戲，HTML5作為移動(dòng)端開發(fā)的主流語言，它的發(fā)展前景光明。

1.1.2?HTML5新特性

HTML5現(xiàn)在仍處于發(fā)展階段，絕大部分瀏覽器已經(jīng)支持某些HTML5技術(shù)。HTML5具有以下

特點(diǎn)：

1．語義特性

HTML5賦予網(wǎng)頁更好的意義和結(jié)構(gòu)。更加豐富的標(biāo)簽將隨著對(duì)微數(shù)據(jù)與微格式等方面的支持，

構(gòu)建對(duì)程序、對(duì)用戶都更有價(jià)值的數(shù)據(jù)驅(qū)動(dòng)的Web。

2．本地存儲(chǔ)特性

基于HTML5開發(fā)的網(wǎng)頁App擁有更短的啟動(dòng)時(shí)間，更快的聯(lián)網(wǎng)速度，這些全得益于HTML5

AppCache，以及本地存儲(chǔ)功能和API說明文檔。

3．設(shè)備兼容特性

HTML5為網(wǎng)頁應(yīng)用開發(fā)者提供了更多功能上的優(yōu)化選擇，提供了前所未有的數(shù)據(jù)與應(yīng)用接入

開放接口。使外部應(yīng)用可以與瀏覽器內(nèi)部的數(shù)據(jù)直接相連，例如視頻影音可直接與microphones及

攝像頭相連。

4．連接特性

HTML5擁有更有效的服務(wù)器推送技術(shù)，Server-SentEvent和WebSockets就是其中的兩個(gè)特性，

這兩個(gè)特性能夠幫助用戶實(shí)現(xiàn)服務(wù)器將數(shù)據(jù)“推送”到客戶端的功能。

5．網(wǎng)頁多媒體特性

HTML5支持網(wǎng)頁端的Audio、Video等多媒體功能，與網(wǎng)站自帶的APPS、攝像頭、影音功能

相得益彰。

6．三維、圖形及特效特性

基于SVG、Canvas、WebGL及CSS3的3D功能，用戶會(huì)驚嘆于在瀏覽器中所呈現(xiàn)的視覺效果。

2

01.indd22022/8/1517:26:20

第1章HTML5基本標(biāo)簽及開發(fā)工具介紹

7．性能與集成特性

HTML5通過XMLHttpRequest2等技術(shù)，幫助Web應(yīng)用和網(wǎng)站在多樣化的環(huán)境中更快速地工作。

1.1.3?HTML5組織

HTML5的開發(fā)主要由下面三個(gè)組織負(fù)責(zé)和實(shí)施：

1．WHATWG

HTML標(biāo)準(zhǔn)自1999年12月發(fā)布HTML4.01版本后，后繼的HTML5及其他版本被束之高閣。

為了推動(dòng)Web標(biāo)準(zhǔn)化的形成，由來自Apple、Mozilla、Google和Opera等瀏覽器廠商的人員成立

了一個(gè)稱為WebHypertextApplicationTechnologyWorkingGroup（Web超文本應(yīng)用技術(shù)工作組，

WHATWG）的組織，該組織致力于Web表單和App的開發(fā)，同時(shí)為各瀏覽器廠商以及其他有意向

的組織提供開放式合作。

2．W3C

W3C（WorldWideWebConsortium，萬維網(wǎng)聯(lián)盟）下轄的HTML工作組，該機(jī)構(gòu)于1994年

10月在麻省理工學(xué)院計(jì)算機(jī)科學(xué)實(shí)驗(yàn)室成立，是Web技術(shù)領(lǐng)域最具有權(quán)威和影響力的國際中立性

技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)，對(duì)互聯(lián)網(wǎng)技術(shù)的發(fā)展和應(yīng)用起到了基礎(chǔ)性和根本性的支撐作用，目前主要負(fù)責(zé)發(fā)布

HTML5規(guī)范。

3．IETF

IETF（因特網(wǎng)工程任務(wù)組)下轄的HTTP等，是負(fù)責(zé)開發(fā)Internet協(xié)議的團(tuán)隊(duì)，HTML5定義

的一種新API（WebSocketAPI）所依賴的WebSocket協(xié)議，就是由該組織負(fù)責(zé)開發(fā)的。

1.1.4?HTML5構(gòu)成

隨著互聯(lián)網(wǎng)的快速發(fā)展，HTML也在迅速更新?lián)Q代，HTML5更是越來越讓人們?cè)赪eb端的體

驗(yàn)達(dá)到了一個(gè)新的高度。HTML5主要包括以下功能：

（1）HTML5中出現(xiàn)新的<canvas>標(biāo)簽，不僅提供Flash相關(guān)的功能，而且加載網(wǎng)站視頻的速

度大幅上升，用戶等待時(shí)間大大降低。

（2）HTML5中出現(xiàn)新的<header>和<footer>標(biāo)簽，更加明晰了網(wǎng)站的結(jié)構(gòu)，可以更快速地定

位到這些位置，加大訪問力度。

（3）HTML5中出現(xiàn)本地?cái)?shù)據(jù)這項(xiàng)功能，本功能加速了交互搜索、緩存以及索引功能。

（4）HTML5中加入全新的表單元素，更方便用戶管理網(wǎng)頁等。

這些功能大大提高了可用性和用戶的體驗(yàn)性，并且一些新增的標(biāo)簽有助于開發(fā)人員定義一些重

要的內(nèi)容，給站點(diǎn)也帶來了更多的多媒體元素(比如一些音頻和視頻)，使網(wǎng)頁的可移植性也更好，

最初，Web只是在網(wǎng)上看一些基礎(chǔ)的文檔，而目前，Web是一個(gè)極大豐富的平臺(tái)，已經(jīng)進(jìn)入一個(gè)穩(wěn)

定階段，每個(gè)人都可以按照標(biāo)準(zhǔn)行事，并且可用于所有瀏覽器。

3

01.indd32022/8/1517:26:20

HTML5&CSS3網(wǎng)頁設(shè)計(jì)與制作

1.2第一個(gè)入門網(wǎng)頁

HTML文檔均用于在瀏覽器上顯示，而支持HTTP的瀏覽器均為Windows式的圖形用戶接口

（GUI）界面，因此，HTML文檔的基本結(jié)構(gòu)是依據(jù)這一要求而設(shè)定的。一個(gè)GUI的視窗通常由

標(biāo)題欄和窗口體作為其最基本的構(gòu)成，而HTML文檔結(jié)構(gòu)的“頭”和“體”正符合這一要求。

對(duì)于剛剛接觸超文本的朋友，遇到的最大障礙就是一些用“<”和“>”括起來的句子，一般

稱它為標(biāo)簽，用于分隔和標(biāo)識(shí)文本的元素，以形成文本的布局、格式及五彩繽紛的畫面。標(biāo)簽通過

指定某塊信息為段落或標(biāo)題等來標(biāo)識(shí)文檔的某個(gè)部件，屬性是標(biāo)簽中參數(shù)的選項(xiàng)。HTML的標(biāo)簽分

為成對(duì)標(biāo)簽和單獨(dú)標(biāo)簽兩種：成對(duì)標(biāo)簽由首標(biāo)簽<標(biāo)簽名>和尾標(biāo)簽</標(biāo)簽名>組成，成對(duì)標(biāo)簽

的作用域只作用于這對(duì)標(biāo)簽中的文檔；單獨(dú)標(biāo)簽的格式為<標(biāo)簽名>，單獨(dú)標(biāo)簽在相應(yīng)的位置插入

元素即可。

大多數(shù)標(biāo)簽都有自己的一些屬性，屬性要寫在首標(biāo)簽內(nèi)，屬性用于進(jìn)一步改變顯示的效果，各

屬性之間無先后次序，屬性是可選的，屬性也可以省略而采用默認(rèn)值。其格式如下：

標(biāo)簽名屬性屬性值屬性屬性值……

<1=12=2>

標(biāo)簽、屬性不區(qū)分大小寫。

把HTML的各種標(biāo)記符放在“<>”內(nèi)，如<html>，表示該文檔為HTML文檔；<html>需要

一個(gè)結(jié)束標(biāo)簽，即</html>，代表該HTML文檔的結(jié)束。在<html>和</html>之間再放入各種標(biāo)簽，

如<head>標(biāo)簽、<body>標(biāo)簽等，這樣就組成了網(wǎng)頁。

下面是HTML5文件的基本結(jié)構(gòu)，通常HTML文件是由.html作為擴(kuò)展名表示。

<!DOCTYPEhtml>

<head>

<metacharset="utf-8"/>

標(biāo)題

<title></title>

</head>

<body>

內(nèi)容

<p></p>

</body>

</html>

上述結(jié)構(gòu)中的標(biāo)簽說明見表1-1。

表1-1標(biāo)簽說明

標(biāo)簽說明

<!DOCTYPEhtml>文檔聲明

<html>主標(biāo)簽

<head>頭部標(biāo)簽

<title>標(biāo)題標(biāo)簽

<meta>輔助標(biāo)簽

4

01.indd42022/8/1517:26:21

第1章HTML5基本標(biāo)簽及開發(fā)工具介紹

續(xù)表

標(biāo)簽說明

<body>主體標(biāo)簽

<p>段落標(biāo)簽

視頻

1.2.1?頭部標(biāo)簽<head>…</head>

<head>標(biāo)簽指的是HTML文檔的上半部分。<head>標(biāo)簽對(duì)中可以包含文檔的標(biāo)題、

文檔使用的腳本、樣式定義和文檔名信息。瀏覽器希望從頭部找到文檔的補(bǔ)充信息。此

外，<head>標(biāo)簽對(duì)中還可以包含搜索工具和索引程序所需的其他信息的標(biāo)識(shí)。頭部位于

網(wǎng)頁的結(jié)構(gòu)

<html>和</html>之間。例如：

<html>

<head>

</head>

</html>

標(biāo)簽對(duì)是一層一層嵌套的，各個(gè)標(biāo)簽對(duì)不能交叉放置。對(duì)于標(biāo)準(zhǔn)HTML來說，最外面一層是

<html>和</html>標(biāo)簽對(duì)，其他標(biāo)簽對(duì)應(yīng)放在它們之間。

1.2.2?標(biāo)題標(biāo)簽<title>…</title>

瀏覽器窗口最上邊顯示的文本信息一般是網(wǎng)頁的“主題”,它通常會(huì)對(duì)當(dāng)前網(wǎng)頁做一個(gè)整體描

述，說明當(dāng)前網(wǎng)頁的具體內(nèi)容。眼睛是心靈的窗戶，對(duì)于一個(gè)網(wǎng)頁來說，它的眼睛就是網(wǎng)頁標(biāo)題（見

圖1-1），它顯示在網(wǎng)頁標(biāo)題欄上。

圖1-1網(wǎng)頁標(biāo)題

<title>標(biāo)簽是<head>標(biāo)簽下面的子標(biāo)簽，例如：

<html>

<head>

這是我的第一個(gè)網(wǎng)頁

<title></title>

</head>

</html>

打開記事本，寫入上面的代碼，另存為index.html，然后雙擊該網(wǎng)頁文件，即可看到標(biāo)題欄上

顯示的正是寫在<title>標(biāo)簽中的內(nèi)容，效果如圖1-2所示。

圖1-2<title>標(biāo)簽效果圖

1.2.3?元標(biāo)簽<meta>

在<head>標(biāo)簽對(duì)內(nèi)部還可以嵌套另一個(gè)重要標(biāo)簽：<meta>（即META標(biāo)簽或元標(biāo)簽）。

5

01.indd52022/8/1517:26:21

HTML5&CSS3網(wǎng)頁設(shè)計(jì)與制作

META標(biāo)簽是頁面的輔助標(biāo)簽，可用于聲明頁面的字符編碼、頁面信息，針對(duì)搜索引擎抓取頁面的

一些設(shè)置、自動(dòng)刷新、緩存控制、移動(dòng)端視窗描述等。<meta>標(biāo)簽用來描述HTML網(wǎng)頁文檔的屬性，

如作者、日期和時(shí)間、網(wǎng)頁描述、關(guān)鍵詞、頁面刷新等。例如：

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">

其作用是指定當(dāng)前文檔所使用的字符編碼為gb2312，也就是中文簡(jiǎn)體字符。根據(jù)這一行代碼，

瀏覽器就可以識(shí)別出這個(gè)網(wǎng)頁應(yīng)該用中文簡(jiǎn)體字符顯示。類似地，如果將gb2312替換為big5，那

么網(wǎng)頁就會(huì)以中文繁體的格式解釋代碼并顯示。

顧名思義，http-equiv相當(dāng)于http文件的頭，可以直接影響網(wǎng)頁的傳輸，用于向?yàn)g覽器提供一

些說明信息，瀏覽器會(huì)根據(jù)這些說明做出相應(yīng)處理。

若要表示網(wǎng)頁每60s自動(dòng)刷新一次，則為：

<metahttp-equiv="refresh"content=60">

若設(shè)置頁面在60s后跳轉(zhuǎn)到搜狐網(wǎng)，則為：

<metahttp-equiv="refresh"content="60;url=">

若要表示版權(quán)聲明，則為：

<metaname="copyright"content="JMJC.TECH">

1.2.4?入門網(wǎng)頁

通過學(xué)習(xí)頭部<head>…</head>，標(biāo)題<title>…</title>以及元標(biāo)簽<meta>，大家可以嘗試制

作一個(gè)在頁面上可以顯示“世界，您好?。。　?、標(biāo)題為“helloworld”的頁面，并且10s后跳轉(zhuǎn)

到百度主頁的一個(gè)HTML文件。

頁面內(nèi)容如下：

<html>

<head>

<m

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論