網(wǎng)頁設(shè)計與制作HTML5+CSS3任務(wù)3制作“學(xué)習(xí)資料”子頁面第2章網(wǎng)頁的基本結(jié)構(gòu)實現(xiàn)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)（1）掌握HTML基本的結(jié)構(gòu)元素。（2）掌握HTML元素的分類。（3）掌握HTML注釋標(biāo)簽與文檔類型標(biāo)簽的用法。（1）能夠正確使用基本的結(jié)構(gòu)元素。（2）能夠正確使用注釋標(biāo)簽進(jìn)行注釋。（3）能夠正確使用文檔類型標(biāo)簽對文檔進(jìn)行聲明。（1）掌握并遵循Web開發(fā)并標(biāo)準(zhǔn)。（2）培養(yǎng)勤奮學(xué)習(xí)的態(tài)度。（3）培養(yǎng)嚴(yán)謹(jǐn)?shù)木幊塘?xí)慣。HTML基本結(jié)構(gòu)元素HTML元素類型任務(wù)實現(xiàn)第2章網(wǎng)頁的基本結(jié)構(gòu)實現(xiàn)1.HTML基本結(jié)構(gòu)元素1.1html元素1.2head元素1.3body元素第2章網(wǎng)頁的基本結(jié)構(gòu)實現(xiàn)1.1html元素1.HTML基本結(jié)構(gòu)元素HTML元素是構(gòu)成HTML文檔的基本對象，是通過HTML標(biāo)簽進(jìn)行定義的，是從開始標(biāo)簽起始，以結(jié)束標(biāo)簽終止，元素的內(nèi)容是開始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容；每個HTML網(wǎng)頁文檔都包含html、head和body元素這三個元素，并且只能出現(xiàn)一次。HTML基本結(jié)構(gòu)元素包括html、head、title、body、meta、link、style、script等;1.1html元素1.HTML基本結(jié)構(gòu)元素

html元素是網(wǎng)頁文件的根元素，網(wǎng)頁文件內(nèi)容都要放置在html的起始標(biāo)簽和結(jié)束標(biāo)簽內(nèi)，它告訴瀏覽器整個文件是HTML格式，按照HTML規(guī)范解析并顯示HTML文件。1.2head元素1.HTML基本結(jié)構(gòu)元素head元素包含網(wǎng)頁的頭部信息，用于定義文檔的頭部，它是所有頭部元素的容器。主要包括網(wǎng)頁的標(biāo)題、網(wǎng)頁介紹、關(guān)鍵詞、樣式文件、腳本文件、字符編碼等內(nèi)容。head常用元素如下：1）title元素

2）link元素3）script元素 4）meta元素1.2head元素1.HTML基本結(jié)構(gòu)元素title元素：網(wǎng)頁的標(biāo)題，應(yīng)盡可能地短，并具有可描述性。例如：<title>學(xué)習(xí)資料</title>link元素：引入外部樣式文件。例如：<linkrel="stylesheet"type="text/css"href="style.css">script元素：引入外部腳本文件和內(nèi)置腳本。例如：<script>document.write("HelloWorld!");</script>meta元素：設(shè)置網(wǎng)頁關(guān)鍵詞、描述、作者等信息，與SEO優(yōu)化有關(guān)。例如：<metaname="keywords"content="江西工業(yè)工程職業(yè)技術(shù)學(xué)院"/>1.3body元素1.HTML基本結(jié)構(gòu)元素body元素包含網(wǎng)頁文檔的所有內(nèi)容，是網(wǎng)頁文檔的主體元素。具體標(biāo)簽包括：1）段落p 2）標(biāo)題h1~h63）超鏈接a 4）圖像img5）表單form 6）列表ul元素HTML基本結(jié)構(gòu)元素HTML元素類型任務(wù)實現(xiàn)第2章網(wǎng)頁的基本結(jié)構(gòu)實現(xiàn)2.HTML元素類型2.1行內(nèi)元素、塊狀元素和行內(nèi)塊狀元素2.2替換元素與不可替換元素2.3注釋標(biāo)簽和文檔類型標(biāo)簽第2章網(wǎng)頁的基本結(jié)構(gòu)實現(xiàn)2.1行內(nèi)元素、塊狀元素和行內(nèi)塊狀元素2.HTML元素類型根據(jù)元素的顯示（能不能在同一行顯示）類型，HTML元素分為行內(nèi)元素、塊狀元素和行內(nèi)塊狀元素。1.行內(nèi)元素(也稱內(nèi)聯(lián)元素)，具有以下特點：（1）和其他元素都在一行上。（2）元素的高度、寬度、行高及頂部和底部邊距不可設(shè)置，左右邊距可以設(shè)置。（3）元素的寬度就是它包含的文字或圖片的寬度，不可改變。（4）只可以容納行內(nèi)元素。常用的內(nèi)聯(lián)元素有:a、span、br、i、em、strong、label、q、textarea等。其中a、span是最典型的行內(nèi)元素。2.1行內(nèi)元素、塊狀元素和行內(nèi)塊狀元素2.HTML元素類型2.塊狀元素(也稱塊級元素)，具有以下特點：（1）總是在新行上開始，獨立占一行，兩個相鄰塊狀元素不會出現(xiàn)并列顯示的現(xiàn)象，會按順序自上而下排列。（2）高度、高度、行高以及邊距都可控制。（3）元素寬度在不設(shè)置的情況下，是它本身容器的100%。（4）它可以包含內(nèi)聯(lián)元素和部分塊元素。常見的塊狀元素有div、p、h1、h2、h3、h4、h5、h6、ul、li、ol、dl、form、table等；其中div是最典型的塊狀元素，被廣泛地應(yīng)用到了網(wǎng)頁布局中。2.1行內(nèi)元素、塊狀元素和行內(nèi)塊狀元素2.HTML元素類型3.行內(nèi)塊狀元素(也稱內(nèi)聯(lián)塊級元素)，本質(zhì)上是行內(nèi)元素，具有以下特點：（1）默認(rèn)寬度是它本身內(nèi)容的寬度，但是可以設(shè)置寬度、高度和內(nèi)外邊距。（2）可以與其他行內(nèi)元素、內(nèi)聯(lián)元素共處一行，但是之間會有空白縫隙。常見的行內(nèi)塊元素有img、input、td。2.2替換元素與不可替換元素2.HTML元素類型1.替換元素(也稱置換元素)，瀏覽器會根據(jù)元素的標(biāo)簽和屬性，來決定元素的具體顯示內(nèi)容。常見的替換元素有img、input、textarea、select、object等。例如：瀏覽器會根據(jù)img標(biāo)簽的src屬性的值來讀取圖片信息并顯示出來。<inputtype="text"/>2.不可替換元素(也稱非置換元素)，其內(nèi)容直接表現(xiàn)在瀏覽器。例如：段落P就是一個不可替換元素，文字段落的內(nèi)容全部被顯示。2.3注釋標(biāo)簽和文檔類型標(biāo)簽2.HTML元素類型1.注釋標(biāo)簽：可以在HTML文檔中添加注釋，增加代碼的可讀性，便于維護(hù)和修改。在瀏覽器中對用戶透明，只有在用代碼編輯器打開文檔源代碼時才可見。格式：<!--注釋內(nèi)容-->例如：<p>這是一段普通的段落。</p><!--這是一段注釋，不會在瀏覽器中顯示。-->2.文檔類型標(biāo)簽：正確聲明HTML的版本，使瀏覽器就能正確顯示網(wǎng)頁內(nèi)容