《HTML5+CSS3網(wǎng)頁(yè)制作教程》課件-第2章_第1頁(yè)
《HTML5+CSS3網(wǎng)頁(yè)制作教程》課件-第2章_第2頁(yè)
《HTML5+CSS3網(wǎng)頁(yè)制作教程》課件-第2章_第3頁(yè)
《HTML5+CSS3網(wǎng)頁(yè)制作教程》課件-第2章_第4頁(yè)
《HTML5+CSS3網(wǎng)頁(yè)制作教程》課件-第2章_第5頁(yè)
已閱讀5頁(yè)，還剩26頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

模塊2編寫第一個(gè)HTML頁(yè)面2.1HTML基本語(yǔ)法2.2HTML基本結(jié)構(gòu)2.3案例：用記事本編寫第一個(gè)HTML頁(yè)面思考與練習(xí)題

2.1HTML基本語(yǔ)法

2.1.1標(biāo)簽HTML標(biāo)簽是HTML中最基本的單位，在HTML文檔中，用一對(duì)“<>”括起來(lái)的標(biāo)識(shí)符就是一個(gè)標(biāo)簽。如模塊1中圖1-3所示，<head>、<title>、<body>等都是HTML標(biāo)簽。HTML標(biāo)簽不區(qū)分大小寫，例如<body>與<BODY>表達(dá)的意思是相同的，一般推薦使用小寫。

2.1.2?元素

HTML文檔是由HTML元素定義的。HTML元素定義了HTML文檔通過(guò)瀏覽器所要呈現(xiàn)的內(nèi)容。一般的HTML元素是指從開(kāi)始標(biāo)簽到結(jié)束標(biāo)簽的所有代碼。

HTML元素語(yǔ)法如下：

(1)HTML元素以開(kāi)始標(biāo)簽起始，以結(jié)束標(biāo)簽終止；

(2)元素的內(nèi)容是開(kāi)始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容，如圖2-1所示；

(3)某些HTML元素具有空內(nèi)容；

(4)空元素在開(kāi)始標(biāo)簽中進(jìn)行關(guān)閉，如換行標(biāo)簽<br>、分割線標(biāo)簽<hr>；

(5)大多數(shù)HTML元素可擁有屬性。

2-1HTML元素

【例2-1】定義一個(gè)元素。

<!doctypehtml>

<html>

<head>

<metacharset="utf-8">

<title>例2-1</title>

</head>

<body>

<p>這是一個(gè)段落。</p>

</body>

</html>

這里的p元素定義了HTML文檔中的一個(gè)段落。這個(gè)元素從開(kāi)始標(biāo)簽<p>開(kāi)始，至結(jié)束標(biāo)簽</p>結(jié)束，元素的內(nèi)容是“這是一個(gè)段落。”。

2.1.3?屬性

HTML的元素屬性用于為其提供附加信息。例如，希望段落文本居中對(duì)齊時(shí)，就可以添加align屬性，并設(shè)置值為center。

屬性總是以名稱/值對(duì)的形式出現(xiàn)，例如：name="value"。另外，屬性總是在HTML元素的開(kāi)始標(biāo)簽中定義。

在HTML元素中定義一個(gè)屬性的格式如下：

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

【例2-2】為元素定義一個(gè)屬性。

這里為標(biāo)題標(biāo)簽<h1>添加了對(duì)齊屬性align，并設(shè)置屬性值為center，標(biāo)題內(nèi)的文本“標(biāo)題一”在瀏覽器中顯示為居中對(duì)齊。

一個(gè)HTML元素可以定義多個(gè)屬性，例如：

<h1id="id1"class="class1"align="center">

其中，每個(gè)名稱/值對(duì)用空格隔開(kāi)就可以。

2.1.4?注釋

在編寫HTML代碼時(shí)，為了方便自己和他人閱讀和理解關(guān)鍵代碼，有時(shí)需要為代碼添加一些說(shuō)明文字，但是這些說(shuō)明文字不需要顯示在瀏覽器頁(yè)面中，這時(shí)就需要添加注釋。

在HTML文件中定義注釋的格式如下：

<!--注釋的內(nèi)容-->

其中，標(biāo)簽“<!--”與“-->”用于在HTML插入注釋。

【例2-3】注釋的使用。

注意：注釋的內(nèi)容是不顯示在瀏覽器中的。我們可以利用注釋在HTML中放置通知和提醒信息，也為了代碼的可讀、易懂，大家要養(yǎng)成良好的代碼注釋習(xí)慣。

2.2HTML基本結(jié)構(gòu)

2.2.1?基本結(jié)構(gòu)HTML的基本結(jié)構(gòu)如圖2-2所示。圖2-2HTML基本結(jié)構(gòu)

【例2-4】HTML文檔基本結(jié)構(gòu)。

一個(gè)完整的HTML文檔至少由以下四部分組成。

(1)文檔聲明：<!DOCTYPEhtml>；

(2)html標(biāo)簽對(duì)：<html></html>；

(3)head標(biāo)簽對(duì)：<head></head>；

(4)body標(biāo)簽對(duì)：<body></body>。

2.2.2?文檔聲明

一個(gè)HTML文檔的開(kāi)始是對(duì)文檔進(jìn)行聲明，使用<!DOCTYPEhtml>聲明文檔為HTML文檔。

HTML文檔是用瀏覽器解釋的，聲明有助于瀏覽器正確顯示網(wǎng)頁(yè)。網(wǎng)絡(luò)上有很多不同的文件，正確聲明HTML的版本，瀏覽器能正確顯示網(wǎng)頁(yè)內(nèi)容。

聲明是不區(qū)分大小寫的。

2.2.3?<html>標(biāo)簽

<html>標(biāo)簽位于文檔聲明<!DOCTYPEhtml>之后，也稱為根標(biāo)簽。<html>與</html>標(biāo)簽限定了文檔的開(kāi)始點(diǎn)和結(jié)束點(diǎn)，在它們之間是文檔的頁(yè)頭和頁(yè)身。一個(gè)HTML頁(yè)面的基本結(jié)構(gòu)定義如下：

2.2.4?<head>標(biāo)簽

<head>標(biāo)簽定義了頁(yè)面的頭部，即頁(yè)頭。在<head></head>標(biāo)簽對(duì)內(nèi)部只能定義一些特殊的內(nèi)容，這些內(nèi)容在瀏覽器頁(yè)面中是不顯示的。

1.<title>標(biāo)簽

在HTML中，<title>標(biāo)簽只是用來(lái)定義網(wǎng)頁(yè)標(biāo)題的。這個(gè)標(biāo)題是在瀏覽器工具欄中的標(biāo)題，如圖2-3所示，在每個(gè)圖標(biāo)后面的標(biāo)題，如“百度一下，你就知道”“愛(ài)淘寶PC新版”等就是每個(gè)網(wǎng)頁(yè)對(duì)應(yīng)的標(biāo)題，<title>標(biāo)簽除了定義網(wǎng)頁(yè)標(biāo)題外，還可以提供頁(yè)面被添加到收藏夾時(shí)顯示的標(biāo)題，以及在搜索引擎結(jié)果中顯示的頁(yè)面標(biāo)題。

圖2-3網(wǎng)頁(yè)的標(biāo)題

定義標(biāo)題的語(yǔ)法如下：

<head>

<title>……</title>

</head>

網(wǎng)頁(yè)的標(biāo)題內(nèi)容，都是在<title></title>標(biāo)簽內(nèi)定義的。

2.<meta>標(biāo)簽

<meta>標(biāo)簽提供關(guān)于HTML文檔的元數(shù)據(jù)。元數(shù)據(jù)是關(guān)于數(shù)據(jù)的信息。元數(shù)據(jù)不會(huì)示頁(yè)面上，但是對(duì)于機(jī)器是可讀的。一般情況下，meta元素用于定義頁(yè)面的描述、關(guān)鍵字、文檔的作者、最后修改時(shí)間及其他的元數(shù)據(jù)，如用于瀏覽器如何顯示內(nèi)容或重新加載頁(yè)面等。

2.2.5?<body>標(biāo)簽

<body>標(biāo)簽定義了頁(yè)面的主體部分，也即頁(yè)身。<body>標(biāo)簽中的內(nèi)容才是最終展示在瀏覽器中給用戶看的。頁(yè)面中絕大多數(shù)的元素都是定義在<body></body>標(biāo)簽對(duì)中的，所以本書后面章節(jié)中學(xué)習(xí)的HTML標(biāo)簽也基本都是定義在<body>標(biāo)簽內(nèi)的。

一個(gè)HTML文檔只能含有一對(duì)<body>標(biāo)簽，且<body>標(biāo)簽位于<head>標(biāo)簽之后，與<head>標(biāo)簽是并列關(guān)系。

2.3案例：用記事本編寫第一個(gè)HTML頁(yè)面

【案例描述】根據(jù)本章所學(xué)知識(shí)，用記事本編寫一個(gè)HTML頁(yè)面?！究己酥R(shí)點(diǎn)】HTML基本結(jié)構(gòu)?！揪毩?xí)目標(biāo)】(1)熟悉HTML基本語(yǔ)法。(2)掌握HTML基本結(jié)構(gòu)。(3)熟悉記事本編輯網(wǎng)頁(yè)的方法。

【案例步驟】

(1)新建文本文檔，把下面這段代碼復(fù)制到記事本中去，然后保存，并將記事本名字改為“我的第一個(gè)網(wǎng)頁(yè)”。

(2)將記事本后綴名“.txt”改為“.html”。

(3)雙擊“我的第一個(gè)網(wǎng)頁(yè)”html文件，就可以在瀏覽器中打開(kāi)了。打開(kāi)的頁(yè)面如圖2-4所示。

圖2-4在瀏覽器中打開(kāi)“我的第一個(gè)網(wǎng)頁(yè)”

思考與練習(xí)題

一、選擇題1.設(shè)置網(wǎng)頁(yè)名稱的標(biāo)簽是()。A.<title>和</title>B.<head>和</head>C.<titles>和</titles>

D.<name>和</name>

2.HTML文檔結(jié)構(gòu)由()組成。

3.在HTML中，()標(biāo)記不可出現(xiàn)在<body>和</body>標(biāo)記符之間。

二、填空題

1.一個(gè)完

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(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)論