《web前端技術(shù)》課件-第二章_第1頁
《web前端技術(shù)》課件-第二章_第2頁
《web前端技術(shù)》課件-第二章_第3頁
《web前端技術(shù)》課件-第二章_第4頁
《web前端技術(shù)》課件-第二章_第5頁
已閱讀5頁，還剩38頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

Web前端技術(shù)簽到掃碼下載文旌課堂APP掃碼簽到簽到方式教師通過“文旌課堂APP”生成簽到二維碼，并設(shè)置簽到時(shí)間，學(xué)生通過“文旌課堂APP”掃描“簽到二維碼”進(jìn)行簽到。

HTML5基礎(chǔ)第二章在HTML技術(shù)發(fā)展之初，因?yàn)楦鳛g覽器沒有統(tǒng)一的標(biāo)準(zhǔn)，導(dǎo)致它們解析網(wǎng)頁的方式各不相同，這無形中增加了網(wǎng)站開發(fā)人員的工作量。直到2014年，萬維網(wǎng)聯(lián)盟發(fā)布了通用的標(biāo)準(zhǔn)——HTML5。它具有跨平臺(tái)使用的特性，為如今發(fā)達(dá)的網(wǎng)站前端開發(fā)技術(shù)奠定了堅(jiān)實(shí)的基礎(chǔ)。本章將介紹HTML5的基礎(chǔ)知識(shí)。章節(jié)導(dǎo)讀掌握HTML5的基本語法。熟悉HTML5的文檔結(jié)構(gòu)。熟悉HTML5的結(jié)構(gòu)標(biāo)簽。學(xué)習(xí)目標(biāo)掌握HTML5的基礎(chǔ)知識(shí)，培養(yǎng)代碼規(guī)范意識(shí)。實(shí)戰(zhàn)演練加持，提升實(shí)踐動(dòng)手能力。素質(zhì)目標(biāo)2.1

HTML5的文檔結(jié)構(gòu)

HTML5的結(jié)構(gòu)標(biāo)簽第二章Web前端技術(shù)概述/章節(jié)導(dǎo)航/2.22.3

HTML5的基本語法實(shí)戰(zhàn)演練——?jiǎng)?chuàng)建“金企鵝教育”網(wǎng)站主頁HTML5的基本語法2.1HTML5使用標(biāo)簽來描述網(wǎng)頁，HTML5文檔中實(shí)質(zhì)上只包含標(biāo)簽和純文本。

思考：標(biāo)簽是什么？2.1HTML5的基本語法

在HTML5文檔中，標(biāo)簽是由一對(duì)尖括號(hào)（“<”和“>”）括起來的關(guān)鍵詞。大部分標(biāo)簽都是成對(duì)出現(xiàn)的，稱為雙標(biāo)簽；也有少數(shù)標(biāo)簽是單獨(dú)出現(xiàn)的，稱為單標(biāo)簽。

2.1.1標(biāo)簽2.1HTML5的基本語法

（1）雙標(biāo)簽的基本語法格式為：

第一個(gè)標(biāo)簽“<標(biāo)簽名>”是開始標(biāo)簽，又稱開放標(biāo)簽；第二個(gè)標(biāo)簽“</標(biāo)簽名>”是結(jié)束標(biāo)簽，又稱閉合標(biāo)簽；兩個(gè)標(biāo)簽中間的內(nèi)容稱為標(biāo)簽內(nèi)容。

<標(biāo)簽名>標(biāo)簽內(nèi)容</

標(biāo)簽名>

2.1.1標(biāo)簽<html>…</html>

<head>…</head>

<body>…</body>

<title>…</title>

常見的雙標(biāo)簽有：2.1HTML5的基本語法超鏈接在HTML5文檔中，標(biāo)簽不區(qū)分大小寫。例如，“<P>標(biāo)簽的大小寫</p>”在HTML5中是合法的。但是，一般不建議這樣寫，而是統(tǒng)一小寫。

TISHI提示2.1HTML5的基本語法（2）單標(biāo)簽也稱空標(biāo)簽，基本語法格式為：2.1.1標(biāo)簽<br/>常見的單標(biāo)簽有：<img/><hr/>2.1HTML5的基本語法<標(biāo)簽名/>

單標(biāo)簽中的“/”可以省略。但是從長遠(yuǎn)來看，應(yīng)該養(yǎng)成正確關(guān)閉單標(biāo)簽的習(xí)慣，因此建議使用單標(biāo)簽時(shí)加上“/”。

TISHI提示超鏈接在HTML5文檔中，還有一個(gè)人們常常提到的概念——元素，它是指從開始標(biāo)簽到結(jié)束標(biāo)簽的所有內(nèi)容。通常情況下，“標(biāo)簽”和“元素”所指的內(nèi)容是一樣的。例如，<p>標(biāo)簽和p元素都是指內(nèi)容“<p>段落</p>”。因此，一般不對(duì)這兩個(gè)概念做具體區(qū)分。超鏈接ZHIDIAANMIJIN指點(diǎn)迷津2.1HTML5的基本語法2.1.2標(biāo)簽的屬性一個(gè)標(biāo)簽可以擁有多個(gè)屬性，且這些屬性必須寫在開始標(biāo)簽中，位于標(biāo)簽名之后。屬性之間不分先后順序，標(biāo)簽名與屬性名、屬性與屬性之間均用空格隔開。任何標(biāo)簽的屬性省略時(shí)都使用標(biāo)簽的默認(rèn)屬性。2.1HTML5的基本語法

在HTML5中，可以根據(jù)需要為標(biāo)簽設(shè)置屬性。例如，為段落標(biāo)簽設(shè)置字體顏色、字體大小等。

設(shè)置雙標(biāo)簽屬性的語法格式為：

<標(biāo)簽名

屬性名1＝"屬性值1"屬性名2＝"屬性值2"…>標(biāo)簽內(nèi)容</標(biāo)簽名>

設(shè)置單標(biāo)簽屬性的語法格式為：<標(biāo)簽名屬性名1＝"屬性值1"屬性名2＝"屬性值2"…/>超鏈接在HTML5中，標(biāo)簽的屬性值可以用雙引號(hào)或單引號(hào)括起來，當(dāng)屬性值不包含特殊字符的時(shí)候，引號(hào)也可以省略。例如，以下3行代碼在HTML5中都是合法的，且代碼含義相同。<metacharset="utf-8"/><metacharset='utf-8'/><metacharset=utf-8/>此外，在HTML5中使用具有布爾類型值（即表示true或false）的屬性時(shí)，可以省略其屬性值。例如，當(dāng)使用具有布爾類型值的屬性checked時(shí)，若希望該屬性表示true的意思時(shí)，直接在元素開始標(biāo)簽中添加該屬性即可，代碼如下：<inputcheckedtype="checkbox"/>常見的具有布爾類型值的屬性有disabled、readonly、defer、ismap等。

TUOZHANYUEDU拓展閱讀2.1HTML5的基本語法2.1.3標(biāo)簽的分類2.1HTML5的基本語法

根據(jù)是否獨(dú)占一行，可以將HTML標(biāo)簽分為塊級(jí)標(biāo)簽和行內(nèi)標(biāo)簽。塊級(jí)標(biāo)簽：其內(nèi)容在瀏覽器中顯示時(shí)獨(dú)占一行，標(biāo)簽的寬度和高度屬性可以設(shè)置。塊級(jí)標(biāo)簽在頁面中按照從上到下的順序排列。常見的塊級(jí)標(biāo)簽有：

<p>、<div>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<form>等。行內(nèi)標(biāo)簽：也稱內(nèi)聯(lián)標(biāo)簽，其內(nèi)容在瀏覽器中顯示時(shí)不能獨(dú)自占據(jù)一行，標(biāo)簽的寬度和高度屬性不可以設(shè)置，而是由內(nèi)容決定，只有在內(nèi)容超過頁面的寬度時(shí)，才會(huì)換行。行內(nèi)標(biāo)簽在頁面中按照從左到右的順序排列。常見的行內(nèi)標(biāo)簽有：<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>等。超鏈接行內(nèi)標(biāo)簽不可以包含塊級(jí)標(biāo)簽，它只能位于塊級(jí)標(biāo)簽之內(nèi)。塊級(jí)標(biāo)簽既可以包含其他塊級(jí)標(biāo)簽，也可以包含行內(nèi)標(biāo)簽。超鏈接ZHIDIAANMIJIN指點(diǎn)迷津2.1HTML5的基本語法在HTML5文檔中，使用注釋解釋代碼的含義。注釋內(nèi)容不會(huì)顯示在頁面上，但是會(huì)保存在頁面的源代碼文件中。注釋由“<!--”開始，由“-->”結(jié)束，基本語法格式為：

2.1.4注釋在實(shí)際開發(fā)中，開發(fā)者常在網(wǎng)頁各功能模塊代碼的起始和結(jié)尾處添加注釋，這樣可以增強(qiáng)代碼的可讀性，還有利于其他開發(fā)人員修改和理解代碼，更便于企業(yè)對(duì)網(wǎng)頁進(jìn)行后期維護(hù)。2.1HTML5的基本語法

<!--注釋內(nèi)容-->HTML5的文檔結(jié)構(gòu)2.2超鏈接使用HBuilderX編輯器新建的HTML5文檔會(huì)自帶一些源代碼，如下：2.2HTML5的文檔結(jié)構(gòu)<!DOCTYPEhtml><html>

<head>

<metacharset="utf-8">

<title></title>

</head>

<body>

</body></html>這些源代碼構(gòu)成了HTML5文檔的基本結(jié)構(gòu)，主要包括<!DOCTYPE>聲明、<html>標(biāo)簽、<head>標(biāo)簽和<body>標(biāo)簽，下面進(jìn)行具體介紹。2.2超鏈接如果省略<!DOCTYPE>聲明，大多數(shù)瀏覽器也能夠正確顯示文檔內(nèi)容，但是編寫網(wǎng)頁代碼時(shí)不應(yīng)依賴于瀏覽器的處理，要保持良好的編寫習(xí)慣，正確聲明文檔所使用的標(biāo)準(zhǔn)規(guī)范。GAOSHOUDIANBO高手點(diǎn)撥2.2.1<!DOCTYPE><!DOCTYPE>聲明是指文檔聲明，位于文檔首行，用于向?yàn)g覽器說明當(dāng)前文檔使用的標(biāo)準(zhǔn)規(guī)范?！?lt;!DOCTYPEhtml>”表示當(dāng)前文檔使用HTML5標(biāo)準(zhǔn)。2.2HTML5的文檔結(jié)構(gòu)<head>標(biāo)簽標(biāo)記的內(nèi)容是文檔頭部，跟在<html>標(biāo)簽之后，用于封裝其他位于文檔頭部的標(biāo)簽，這些標(biāo)簽中存儲(chǔ)著網(wǎng)頁的各種基本信息，可以使瀏覽器快速解析頁面，其中的內(nèi)容一般不會(huì)顯示在頁面中。文檔頭部一般包括以下幾個(gè)元素。2.2.2<head>標(biāo)簽

（1）網(wǎng)頁標(biāo)題。使用<title>…</title>標(biāo)簽可以標(biāo)記網(wǎng)頁的標(biāo)題，瀏覽器會(huì)將標(biāo)簽中的內(nèi)容顯示在瀏覽器標(biāo)題欄或狀態(tài)欄中，如圖所示。

網(wǎng)頁標(biāo)題2.2HTML5的文檔結(jié)構(gòu)超鏈接每一個(gè)頁面都需要含有<title>…</title>標(biāo)簽，且該標(biāo)簽的內(nèi)容不具有任何格式。網(wǎng)頁標(biāo)題是搜索引擎識(shí)別網(wǎng)頁內(nèi)容的標(biāo)識(shí)，它可以影響網(wǎng)頁在搜索引擎中的排名，一個(gè)表達(dá)明確的網(wǎng)頁標(biāo)題可以為網(wǎng)站帶來巨大的流量。TISHI提示超鏈接2.2HTML5的文檔結(jié)構(gòu)（2）網(wǎng)頁元信息。使用<meta/>標(biāo)簽可以標(biāo)記網(wǎng)頁元信息，一般網(wǎng)站都會(huì)在其中設(shè)置描述和關(guān)鍵詞等屬性，以便搜索引擎檢索。它還可以標(biāo)記文檔的字符編碼。例如，“<metacharset="utf-8">”表示將網(wǎng)頁文檔的字符編碼設(shè)置為“utf-8”。

（3）網(wǎng)頁視口。網(wǎng)頁視口就是瀏覽器中顯示網(wǎng)頁頁面的那部分區(qū)域，通過設(shè)置視口的寬度、縮放比例等屬性可以使網(wǎng)頁適配移動(dòng)端。設(shè)置視口使用“<metaname="viewport">”，具體內(nèi)容見7.4.1節(jié)。2.2HTML5的文檔結(jié)構(gòu)超鏈接html、head

和body這3種元素在一個(gè)HTML5文檔中只能出現(xiàn)一次，且<head>和<body>標(biāo)簽必須在<html>標(biāo)簽之內(nèi)，<body>標(biāo)簽位于<head>標(biāo)簽之后，與<head>標(biāo)簽并列。ZHISHIKU知識(shí)庫超鏈接2.2HTML5的文檔結(jié)構(gòu)HTML5的結(jié)構(gòu)標(biāo)簽2.3除了前面介紹的主體結(jié)構(gòu)標(biāo)簽<html>、<head>和<body>外，HTML5還提供了多個(gè)其他結(jié)構(gòu)標(biāo)簽（又稱語義化標(biāo)簽），以便于用戶創(chuàng)建更加友好的頁面主體框架，下面詳細(xì)介紹每個(gè)結(jié)構(gòu)標(biāo)簽。2.3HTML5的結(jié)構(gòu)標(biāo)簽

2.3HTML5的結(jié)構(gòu)標(biāo)簽

標(biāo)簽名稱標(biāo)簽功能標(biāo)簽用法頁眉標(biāo)簽<header>用于標(biāo)記整個(gè)頁面的標(biāo)題欄或一個(gè)內(nèi)容塊的標(biāo)題區(qū)域一個(gè)頁面可以包含多個(gè)<header>標(biāo)簽，它們的具體含義會(huì)因其上下文不同而有所不同。例如，位于頁面頂部的<header>標(biāo)簽表示整個(gè)頁面的頁頭，位于某個(gè)欄目區(qū)域的<header>標(biāo)簽表示該欄目的標(biāo)題。頁眉中通常包含網(wǎng)站Logo、主導(dǎo)航和搜索框等。導(dǎo)航標(biāo)簽<nav>用于標(biāo)記頁面導(dǎo)航的鏈接組一個(gè)頁面可以包含多個(gè)<nav>標(biāo)簽，分別表示頁面整體或不同部分的導(dǎo)航，如主菜單導(dǎo)航、側(cè)邊欄導(dǎo)航或頁內(nèi)導(dǎo)航等。2.3HTML5的結(jié)構(gòu)標(biāo)簽

標(biāo)簽名稱標(biāo)簽功能標(biāo)簽用法主要區(qū)域標(biāo)簽<main>用于標(biāo)記頁面的主要內(nèi)容一個(gè)頁面中只能包含一個(gè)<main>標(biāo)簽，<main>標(biāo)簽不能放在<header>、<nav>、<article>、<aside>或<footer>標(biāo)簽中。文章塊標(biāo)簽<article>用來標(biāo)記頁面中一塊完整的、獨(dú)立的內(nèi)容，如報(bào)紙文章、博客條目、用戶評(píng)論等。一個(gè)頁面可以包含多個(gè)<article>標(biāo)簽，在<article>標(biāo)簽中也可以嵌套一個(gè)或多個(gè)<article>標(biāo)簽。2.3HTML5的結(jié)構(gòu)標(biāo)簽

標(biāo)簽名稱標(biāo)簽功能標(biāo)簽用法區(qū)塊標(biāo)簽<section>用于標(biāo)記文檔中的節(jié)，從而對(duì)內(nèi)容進(jìn)行分區(qū)，如文檔中的章節(jié)、頁眉、頁腳等<section>標(biāo)簽可以嵌套在<section>標(biāo)簽中。<section>標(biāo)簽標(biāo)記的是頁面中的特定區(qū)域，可對(duì)其中的內(nèi)容進(jìn)行操作。例如，<section>標(biāo)簽包含的內(nèi)容可以單獨(dú)存儲(chǔ)到數(shù)據(jù)庫中或輸出到Word文檔中。附欄標(biāo)簽<aside>用于標(biāo)記一個(gè)與其余頁面內(nèi)容幾乎無關(guān)的部分，將它單獨(dú)拆分出來后不會(huì)影響整體內(nèi)容例如，它可以包含與當(dāng)前頁面或主要內(nèi)容相關(guān)的引用、側(cè)邊廣告等。2.3HTML5的結(jié)構(gòu)標(biāo)簽

標(biāo)簽名稱標(biāo)簽功能標(biāo)簽用法頁腳標(biāo)簽<footer>用于標(biāo)記文檔或節(jié)的頁腳<footer>標(biāo)簽通常包含關(guān)于它所在區(qū)塊的信息，如指向相關(guān)文檔的鏈接、版權(quán)信息、作者信息等。當(dāng)<footer>標(biāo)簽作為整個(gè)文檔即<body>標(biāo)簽的頁腳時(shí)，一般位于頁面底部。HTML5還有其他標(biāo)簽么？除了上述結(jié)構(gòu)標(biāo)簽外，HTML5中還有兩個(gè)無語義容器，分別是<div>標(biāo)簽和<span>標(biāo)簽。<div>標(biāo)簽是塊級(jí)的無語義容器，<span>標(biāo)簽是行內(nèi)的無語義容器，靈活使用它們可以制作出更具結(jié)構(gòu)化的頁面樣式。超鏈接——?jiǎng)?chuàng)建“金企鵝教育”網(wǎng)站主頁實(shí)戰(zhàn)演練WEB掃一掃上一章中已經(jīng)帶領(lǐng)大家使用HBuilderX創(chuàng)建了“金企鵝教育”項(xiàng)目，本節(jié)帶領(lǐng)大家在該項(xiàng)目文件目錄下創(chuàng)建“金企鵝教育”網(wǎng)站的主頁HTML5文檔，并使用HTML5結(jié)構(gòu)標(biāo)簽標(biāo)記該網(wǎng)站主頁的主體框架。超鏈接步驟1

打開HBuilderX，右擊主界面左側(cè)欄中的“JinqieProject”文件夾，彈出快捷菜單，選擇“新建(N)”→“7.html文件”，如圖所示。——?jiǎng)?chuàng)建“金企鵝教育”網(wǎng)站主頁實(shí)戰(zhàn)演練WEB新建html文件超鏈接步驟2

彈出“新建html文件”對(duì)話框，輸入html文件名稱“index”；根據(jù)需要選擇模板，如“default”；單擊“創(chuàng)建(N)”按鈕，如圖所示?！?jiǎng)?chuàng)建“金企鵝教育”網(wǎng)站主頁實(shí)戰(zhàn)演練WEB“新建html文件”對(duì)話框步驟3

“金企鵝教育”網(wǎng)站主頁創(chuàng)建成功，文檔內(nèi)容顯示在編輯窗口中，如圖所示。其中，“index.html”文檔位于“JinqieProject”項(xiàng)目文件夾下?！?jiǎng)?chuàng)建“金企鵝教育”網(wǎng)站主頁實(shí)戰(zhàn)演練WEB“index.html”文檔顯示在編輯窗口中超鏈接步驟4

規(guī)劃“金企鵝教育”網(wǎng)站主頁的主體框架，包括頁眉、導(dǎo)航欄、頁面主要區(qū)域、頁腳。其中，頁面主要區(qū)域中還包括輪播圖、企業(yè)宣傳、教育資訊、精品圖書模塊。利用HTML5結(jié)構(gòu)標(biāo)簽構(gòu)建該網(wǎng)頁的主體框架和模塊，即在<body>標(biāo)簽內(nèi)添加標(biāo)簽<header>、<nav>、<main>、<footer>和<section>，如圖所示?！?jiǎng)?chuàng)建“金企鵝教育”網(wǎng)站主頁實(shí)戰(zhàn)演練WEB構(gòu)建“金企鵝教育”網(wǎng)站主頁結(jié)構(gòu)本章主要介紹了HTML5的基礎(chǔ)知識(shí)。通過本章的學(xué)習(xí)，讀者應(yīng)重點(diǎn)掌握以下內(nèi)容。（1）標(biāo)簽是由一對(duì)尖括號(hào)（“<”和“>”）括起來的關(guān)鍵詞。大部分標(biāo)簽都是成對(duì)出現(xiàn)的，稱為雙標(biāo)簽；也有少數(shù)標(biāo)簽是單獨(dú)出現(xiàn)的，稱為單標(biāo)簽。（2）HTML5文檔的基本結(jié)構(gòu)由<!DOCTYPE>聲明、<html>標(biāo)簽、<head>標(biāo)簽和<body>標(biāo)簽構(gòu)成。（3）HTML5提供了多個(gè)結(jié)構(gòu)標(biāo)簽，包括頁眉標(biāo)簽<header>、導(dǎo)航標(biāo)簽<nav>、主要區(qū)域標(biāo)簽<main>、文章塊標(biāo)簽<article>、區(qū)塊標(biāo)簽<section>、附欄標(biāo)簽<aside>、頁腳標(biāo)簽<footer>。本章小結(jié)超鏈接課堂練習(xí)WEB（1）用于標(biāo)記整個(gè)頁面的標(biāo)題欄或一個(gè)內(nèi)容塊標(biāo)題區(qū)域的結(jié)構(gòu)標(biāo)簽是（

）。

A．頁眉標(biāo)簽<header>

B．主要區(qū)域標(biāo)簽<main>

C．文章塊標(biāo)簽<article>

D．區(qū)塊標(biāo)簽<section>（2）用來標(biāo)記頁面中一塊完整的、獨(dú)立的內(nèi)容（如報(bào)紙文章、博客條目、用戶評(píng)論等）的結(jié)構(gòu)標(biāo)簽是（）。

A．頁眉標(biāo)簽<header>

B．主要區(qū)域標(biāo)簽<main>

C．文章塊標(biāo)簽<article>

D．區(qū)塊標(biāo)簽<sec

溫馨提示

  • 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)論