《網(wǎng)頁(yè)設(shè)計(jì)與制作（活頁(yè)式）》 教案 項(xiàng)目2HTML5簡(jiǎn)介_(kāi)第1頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作（活頁(yè)式）》 教案 項(xiàng)目2HTML5簡(jiǎn)介_(kāi)第2頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作（活頁(yè)式）》 教案 項(xiàng)目2HTML5簡(jiǎn)介_(kāi)第3頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作（活頁(yè)式）》 教案 項(xiàng)目2HTML5簡(jiǎn)介_(kāi)第4頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作（活頁(yè)式）》 教案 項(xiàng)目2HTML5簡(jiǎn)介_(kāi)第5頁(yè)
已閱讀5頁(yè)，還剩23頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

《網(wǎng)頁(yè)設(shè)計(jì)與制作》教學(xué)設(shè)計(jì)課程名稱(chēng)：網(wǎng)頁(yè)設(shè)計(jì)與制作授課年級(jí)：20年級(jí)授課學(xué)期：20學(xué)年第一學(xué)期教師姓名：老師

20年月日課題名稱(chēng)項(xiàng)目二HTML5簡(jiǎn)介計(jì)劃課時(shí)課時(shí)內(nèi)容分析用戶(hù)對(duì)網(wǎng)頁(yè)的直觀(guān)感受，決定了整個(gè)網(wǎng)頁(yè)達(dá)到的效果。網(wǎng)頁(yè)信息閱讀的舒適感、顏色配色要在第一時(shí)間直接地傳遞給用戶(hù)，因此網(wǎng)頁(yè)設(shè)計(jì)的設(shè)計(jì)細(xì)節(jié)有三方面：用戶(hù)的閱讀效率、視覺(jué)舒適度和網(wǎng)頁(yè)的品質(zhì)感。熟練掌握網(wǎng)頁(yè)設(shè)計(jì)技巧，培養(yǎng)動(dòng)手操作能力，才能設(shè)計(jì)出優(yōu)秀的網(wǎng)頁(yè)。教學(xué)目標(biāo)了解HTML5的優(yōu)勢(shì)。掌握標(biāo)簽的使用。掌握文本控制標(biāo)簽和圖像標(biāo)簽的使用方法。重點(diǎn)及措施教學(xué)重點(diǎn)：正確使用頭部相關(guān)標(biāo)簽；正確使用標(biāo)題標(biāo)簽；正確使用圖像標(biāo)簽措施：通過(guò)上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。難點(diǎn)及措施教學(xué)難點(diǎn)：標(biāo)簽，文本控制標(biāo)簽，圖像標(biāo)簽措施：通過(guò)上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。教學(xué)方式教學(xué)采用教師課堂講授為主，使用教學(xué)PPT講解。教學(xué)過(guò)程任務(wù)2.1HTML5的優(yōu)勢(shì)內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：HTML5相較于以前的版本有什么優(yōu)勢(shì)？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋?zhuān)捍鸢福篐TML5是HTML的傳遞和延續(xù)。從HTML4.0、XHTML再到HTML5，從某種意義上講，這是HTML的更新與規(guī)范過(guò)程。HTML5并沒(méi)有給用戶(hù)帶來(lái)多大的沖擊，其他版本的大部分標(biāo)簽在HTML5版本中依然適用。相比于其他版本的HTML，HTML5的優(yōu)勢(shì)主要體現(xiàn)在兼容、合理、易用和新增標(biāo)簽。知識(shí)點(diǎn)講解講解HTML5的優(yōu)勢(shì)（1）教師展示PPT，對(duì)靜態(tài)網(wǎng)頁(yè)進(jìn)行具體講解。1.兼容HTML5并不是對(duì)之前HTML語(yǔ)言的顛覆性革新，它的核心理念是保持與過(guò)去技術(shù)完美銜接，因此HTML5有很好的兼容性。例如，實(shí)例1的代碼中缺少結(jié)束標(biāo)簽</p>，在HTML5中并沒(méi)有把這種情況作為錯(cuò)誤來(lái)處理，而是在允許這種寫(xiě)法的同時(shí)，定義了一些可以省略結(jié)束標(biāo)簽</p>的標(biāo)簽。2.合理HTML5中新增的很多標(biāo)簽、屬性都是根據(jù)實(shí)際開(kāi)發(fā)中已經(jīng)存在的各類(lèi)網(wǎng)頁(yè)標(biāo)簽進(jìn)行提煉和歸納，通過(guò)這樣的方式讓HTML5的標(biāo)簽結(jié)構(gòu)更加合理。例如，W3C（WorldWideWebConsortium,萬(wàn)維網(wǎng)聯(lián)盟）分析了上百萬(wàn)的頁(yè)面，發(fā)現(xiàn)很多網(wǎng)頁(yè)制作人員使用<divid="header">來(lái)定義網(wǎng)頁(yè)的頭部區(qū)域，于是在HTML5中添加了一個(gè)<header>標(biāo)簽。3.易用HTML5作為當(dāng)下流行的標(biāo)簽語(yǔ)言，嚴(yán)格遵循“簡(jiǎn)單至上”的原則，主要體現(xiàn)在簡(jiǎn)化的字符集聲明、簡(jiǎn)化的DOCTYPE、簡(jiǎn)單而強(qiáng)大的API和以瀏覽器原生能力替代復(fù)雜的JavaScript代碼。為了易于使用，HTML5的規(guī)范比以前更加細(xì)致、精確。4.新增標(biāo)簽HTML5新增了許多特性，比如新的語(yǔ)義標(biāo)簽、新的表單控件、強(qiáng)大的圖像支持等。新增內(nèi)容豐富了HTML5實(shí)現(xiàn)的功能，比如在游戲開(kāi)發(fā)中可以實(shí)現(xiàn)更多的互動(dòng)。實(shí)例1缺少</p>標(biāo)簽（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。任務(wù)2.2HTML5的結(jié)構(gòu)內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：XHTML文檔和HTML5的結(jié)構(gòu)有什么不同？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋?zhuān)捍鸢福涸谄渌姹镜腍TML中，各瀏覽器對(duì)HTML的支持不統(tǒng)一，這就造成同一個(gè)頁(yè)面在不同瀏覽器中可能顯示不同的樣式。HTML5通過(guò)詳細(xì)分析各個(gè)瀏覽器所具有的功能，制定了一個(gè)通用的標(biāo)準(zhǔn)，并要求瀏覽器支持這個(gè)標(biāo)準(zhǔn)。知識(shí)點(diǎn)講解講解實(shí)例2新建XHTML文檔和實(shí)例3新建HTML5文檔格式（1）教師展示PPT，對(duì)實(shí)例2新建XHTML文檔和實(shí)例3新建HTML5文檔格式進(jìn)行具體講解。實(shí)例2新建XHTML文檔實(shí)例3新建HTML5文檔通過(guò)對(duì)比可以看出，HTML5的結(jié)構(gòu)相較于XHTML的結(jié)構(gòu)簡(jiǎn)潔明了。除上述的文檔結(jié)構(gòu)標(biāo)簽外，HTML5還簡(jiǎn)化了<meta>標(biāo)簽，讓定義字符編碼的格式變得更加簡(jiǎn)單。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。任務(wù)2.3標(biāo)簽概述2.3.1標(biāo)簽的分類(lèi)內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：什么是標(biāo)簽？是商場(chǎng)衣服上那個(gè)標(biāo)簽嗎？是超市貨架上的標(biāo)簽嗎？HTML中的標(biāo)簽是怎樣的？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋?zhuān)捍鸢福涸贖TML5頁(yè)面中，帶有“<>”符號(hào)的元素被稱(chēng)為HTML標(biāo)簽，如上面提到的<html><head><body>都是HTML標(biāo)簽。HTML標(biāo)簽是放在“<>”符號(hào)中表示某個(gè)功能的編碼命令，也稱(chēng)為HTML元素。知識(shí)點(diǎn)講解講解標(biāo)簽的分類(lèi)（1）教師展示PPT，對(duì)標(biāo)簽的分類(lèi)進(jìn)行具體講解。根據(jù)標(biāo)簽的組成特點(diǎn)，通常將HTML標(biāo)簽分為兩大類(lèi)，分別是雙標(biāo)簽和單標(biāo)簽。1.雙標(biāo)簽雙標(biāo)簽也被稱(chēng)為體標(biāo)簽，是指由開(kāi)始和結(jié)束兩個(gè)標(biāo)簽符號(hào)組成的標(biāo)簽。雙標(biāo)簽的基本語(yǔ)法格式如下：<標(biāo)簽名>內(nèi)容<標(biāo)簽名>2.單標(biāo)簽單標(biāo)簽也被稱(chēng)為空標(biāo)簽，是指用一個(gè)標(biāo)簽符號(hào)即可完整地描述某個(gè)功能的標(biāo)簽，其基本語(yǔ)法格式如下：<標(biāo)簽名/> 3.注釋標(biāo)簽在HTML5中還有一種特殊的標(biāo)簽——注釋標(biāo)簽，該標(biāo)簽就是一種特殊功能的單標(biāo)簽。如果需要在HTML5文檔中添加一些便于閱讀和理解，但又不需要顯示在頁(yè)面中的注釋文字，就需要使用注釋標(biāo)簽。注釋標(biāo)簽的語(yǔ)法格式如下：<!--注釋語(yǔ)句-->需要注意的是，注釋內(nèi)容不會(huì)顯示在瀏覽器窗口中，但是作為HTML5文檔內(nèi)容的一部分，注釋標(biāo)簽可以被用戶(hù)上傳到計(jì)算機(jī)上，用戶(hù)查看源代碼時(shí)也可以看到注釋標(biāo)簽。提示查看網(wǎng)頁(yè)源文件的方式打開(kāi)網(wǎng)頁(yè)后，右擊網(wǎng)頁(yè)空白處，彈出快捷菜單，選擇“查看源文件”命令，搜狗瀏覽器如下：谷歌瀏覽器如下Edge瀏覽器如下火狐瀏覽器如下（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。2.3.2標(biāo)簽的關(guān)系內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：標(biāo)簽之前都有什么關(guān)系？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋?zhuān)捍鸢福簶?biāo)簽的關(guān)系主要有嵌套關(guān)系和并列關(guān)系兩種。知識(shí)點(diǎn)講解講解標(biāo)簽的關(guān)系（1）教師展示PPT，對(duì)標(biāo)簽的關(guān)系進(jìn)行具體講解。1.嵌套關(guān)系嵌套關(guān)系也稱(chēng)為包含關(guān)系，可以簡(jiǎn)單地理解為一個(gè)雙標(biāo)簽里面包含其他的標(biāo)簽。例如，在HTML5的結(jié)構(gòu)代碼中，<html>標(biāo)簽和<head>標(biāo)簽（或<body>標(biāo)簽）就是嵌套關(guān)系。需要注意的是，在標(biāo)簽的嵌套過(guò)程中，必須先結(jié)束最靠近內(nèi)容的標(biāo)簽，再按照由內(nèi)到外的順序依次關(guān)閉標(biāo)簽。在嵌套關(guān)系的標(biāo)簽中，通常把最外層的標(biāo)簽稱(chēng)為父級(jí)標(biāo)簽，里面的標(biāo)簽稱(chēng)為子級(jí)標(biāo)簽。只有雙標(biāo)簽才能作為父級(jí)標(biāo)簽。2.并列關(guān)系并列關(guān)系也稱(chēng)為兄弟關(guān)系，是指兩個(gè)標(biāo)簽處于同一級(jí)別，并且沒(méi)有包含關(guān)系，例如，在HTML5的結(jié)構(gòu)代碼中，<head>標(biāo)簽和<body>標(biāo)簽就是并列關(guān)系。在HTML標(biāo)簽中，無(wú)論是單標(biāo)簽還是雙標(biāo)簽，都可以擁有并列關(guān)系。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。2.3.3標(biāo)簽屬性?xún)?nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：如何讓HTML標(biāo)簽提供更多的信息？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋?zhuān)捍鸢福篐TML5制作網(wǎng)頁(yè)時(shí)，如果想讓HTML標(biāo)簽提供更多的信息。例如，希望標(biāo)題文本的字體為“微軟雅黑”并且居中顯示，段落文本中的某些名詞顯示為其他顏色加以突出，用戶(hù)僅僅依靠HTML標(biāo)簽的默認(rèn)顯示樣式是不夠的，這時(shí)可以通過(guò)為HTML標(biāo)簽設(shè)置屬性的方式來(lái)增加更多的樣式。。知識(shí)點(diǎn)講解講解標(biāo)簽屬性（1）教師展示PPT，對(duì)標(biāo)簽屬性進(jìn)行具體講解。HTML標(biāo)簽設(shè)置屬性的基本語(yǔ)法格式如下：<標(biāo)簽名屬性1=“屬性值1”屬性2=“屬性值2”…>內(nèi)容</標(biāo)簽名> 在上面的語(yǔ)法中，標(biāo)簽可以擁有多個(gè)屬性，屬性必須寫(xiě)在開(kāi)始標(biāo)簽中，位于標(biāo)簽名后面。屬性之間不分先后順序，標(biāo)簽名與屬性、屬性與屬性之間均以空格分開(kāi)。其中<p></p>標(biāo)簽用于定義段落文本，align為屬性名，center為屬性值，表示文本居中對(duì)齊，對(duì)于<p>標(biāo)簽還可以設(shè)置文本左對(duì)齊或右對(duì)齊，對(duì)應(yīng)的屬性值分別為left和right。需要注意的是，大多數(shù)屬性都有默認(rèn)值。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。2.3.4頭部相關(guān)標(biāo)簽內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：頭部相關(guān)標(biāo)簽有什么用？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋?zhuān)捍鸢福壕W(wǎng)頁(yè)制作時(shí)，經(jīng)常需要設(shè)置頁(yè)面的基本信息，如頁(yè)面的標(biāo)題、作者、與其他文檔的關(guān)系等。為此HTML5提供了一系列的標(biāo)簽，這些標(biāo)簽通常都寫(xiě)在<head>標(biāo)簽中，被稱(chēng)為頭部相關(guān)標(biāo)簽。知識(shí)點(diǎn)講解講解頭部相關(guān)標(biāo)簽（1）教師展示PPT，對(duì)頭部相關(guān)標(biāo)簽進(jìn)行具體講解。1.設(shè)置頁(yè)面標(biāo)題標(biāo)簽<title><title>標(biāo)簽用于定義HTML5頁(yè)面的標(biāo)題，即給網(wǎng)頁(yè)取一個(gè)名字，該標(biāo)簽必須位于<head>標(biāo)簽之中。一個(gè)HTML5文檔只能包含一對(duì)<title></title>標(biāo)簽，<title></title>之間的內(nèi)容將顯示在瀏覽器窗口的標(biāo)題欄中，如“蘇軾全集”。2.定義頁(yè)面元信息標(biāo)簽<meta/><meta/>標(biāo)簽用于定義頁(yè)面的元信息（元信息不會(huì)顯示在頁(yè)面中），可重復(fù)出現(xiàn)在<head>頭部標(biāo)簽中。在HTML5中，<meta/>標(biāo)簽是一個(gè)單標(biāo)簽，本身不包含任何內(nèi)容，僅僅表示網(wǎng)頁(yè)的相關(guān)信息。通過(guò)<meta/>標(biāo)簽的兩組屬性，可以定義頁(yè)面的相關(guān)參數(shù)。例如，為搜索引擎提供網(wǎng)頁(yè)的關(guān)鍵字、作者姓名、內(nèi)容描述，以及定義網(wǎng)頁(yè)的刷新時(shí)間等。<meta/>標(biāo)簽的基本語(yǔ)法格式如下：<metaname="名稱(chēng)"content="值"/><metahttp-equiv="名稱(chēng)"content="值"/>在<meta/>標(biāo)簽中使用name和content屬性可以為搜索引擎提供信息，其中name屬性用于提供搜索內(nèi)容的名稱(chēng)，content屬性提供對(duì)應(yīng)的搜索內(nèi)容值。在<meta/>標(biāo)簽中使用http-equiv和content屬性可以設(shè)置服務(wù)器發(fā)送給瀏覽器的HTTP頭部信息，為瀏覽器顯示該頁(yè)面提供相關(guān)的參數(shù)標(biāo)準(zhǔn)。其中，http-equiv屬性提供參數(shù)類(lèi)型，content屬性提供對(duì)應(yīng)的參數(shù)值。默認(rèn)會(huì)發(fā)送<metahttp-equiv="Content-Type"content="text/html"/>，通知瀏覽器發(fā)送的文件類(lèi)型是HTML。具體應(yīng)用如下。①設(shè)置網(wǎng)頁(yè)關(guān)鍵字，name屬性的值為keywords，用于定義搜索內(nèi)容名稱(chēng)為網(wǎng)頁(yè)關(guān)鍵字，content屬性的值用于定義關(guān)鍵字的具體內(nèi)容，多個(gè)關(guān)鍵字內(nèi)容之間可以用逗號(hào)分隔，如“蘇軾,蘇東坡,蘇軾全集,蘇東坡全集,蘇軾詞,宋詞,水調(diào)歌頭,東坡居士”。②設(shè)置網(wǎng)頁(yè)描述，name屬性的值為description，用于定義搜索內(nèi)容名稱(chēng)為網(wǎng)頁(yè)描述，content屬性的值用于定義描述的具體內(nèi)容，如“蘇軾（1037年1月8日—1101年8月24日）,字子瞻,又字和仲,號(hào)東坡居士，世稱(chēng)蘇東坡,漢族,眉州眉山（今屬四川省眉山市）人,祖籍河北欒城,北宋文學(xué)家,書(shū)法家,畫(huà)家?！雹墼O(shè)置網(wǎng)頁(yè)作者，name屬性的值為author，用于定義搜索內(nèi)容名稱(chēng)為網(wǎng)頁(yè)作者，content屬性的值用于定義具體的作者信息，如“蘇軾”。④設(shè)置字符集，http-equiv屬性的值為Content-Type，content屬性的值為text/html和charset=gbk，兩個(gè)屬性值中間用分號(hào)隔開(kāi)，用于說(shuō)明當(dāng)前文檔類(lèi)型為HTML，字符集為gbk（中文編碼）。常用的國(guó)際化字符集編碼格式是utf-8，常用的國(guó)內(nèi)中文字符集編碼格式是gbk和gb2312。當(dāng)用戶(hù)使用的字符集編碼與當(dāng)前瀏覽器不匹配時(shí)，網(wǎng)頁(yè)內(nèi)容就會(huì)出現(xiàn)亂碼。⑤設(shè)置頁(yè)面自動(dòng)刷新與跳轉(zhuǎn)，http-equiv屬性的值為refresh，content屬性的值為數(shù)值和url，用分號(hào)隔開(kāi)，用于指定在特定的時(shí)間后跳轉(zhuǎn)至目標(biāo)頁(yè)面，該時(shí)間默認(rèn)以秒為單位。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。任務(wù)2.4文本控制標(biāo)簽2.4.1頁(yè)面格式化標(biāo)簽內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：怎么對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行排版？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋?zhuān)捍鸢福阂黄Y(jié)構(gòu)清晰的文章通常會(huì)通過(guò)標(biāo)題、段落、分隔線(xiàn)等進(jìn)行結(jié)構(gòu)排列，HTML5網(wǎng)頁(yè)也不例外，為了使網(wǎng)頁(yè)中的文字有條理地顯示出來(lái)，HTML5提供了相應(yīng)的頁(yè)面格式化標(biāo)簽，如標(biāo)題標(biāo)簽、段落標(biāo)簽、水平線(xiàn)標(biāo)簽和換行標(biāo)簽。知識(shí)點(diǎn)講解講解標(biāo)題標(biāo)簽（1）教師展示PPT，對(duì)標(biāo)題標(biāo)簽進(jìn)行具體講解。標(biāo)題標(biāo)簽的基本語(yǔ)法格式如下：<hnalign="對(duì)齊方式">標(biāo)題文本</hn>為了使網(wǎng)頁(yè)更具有語(yǔ)義化（語(yǔ)義化是指賦予普通網(wǎng)頁(yè)文本特殊的含義），我們經(jīng)常會(huì)在頁(yè)面中用到標(biāo)題標(biāo)簽，HTML5提供了6個(gè)等級(jí)的標(biāo)題，即<hl>、<h2>、<h3>、<h4>、<h5>和<h6>。默認(rèn)情況下標(biāo)題文字是加粗左對(duì)齊顯示的，并且從<h1>到<h6>標(biāo)題字號(hào)依次遞減。如果想讓標(biāo)題文字右對(duì)齊或居中對(duì)齊，就需要使用align屬性設(shè)置對(duì)齊方式。align屬性的使用注意：1）一個(gè)頁(yè)面中只能使用一個(gè)<h1>標(biāo)簽，常常被用在網(wǎng)站的logo部分。2）由于<h>標(biāo)簽擁有特殊的語(yǔ)義，要選擇恰當(dāng)?shù)臉?biāo)簽來(lái)構(gòu)建文檔結(jié)構(gòu)。3）HTML5中不建議使用<h>標(biāo)簽的align對(duì)齊屬性，一般使用CSS樣式設(shè)置。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。講解段落標(biāo)簽（1）教師展示PPT，對(duì)段落標(biāo)簽進(jìn)行具體講解。在網(wǎng)頁(yè)中要把文字有條理地顯示出來(lái)，離不開(kāi)段落標(biāo)簽。在網(wǎng)頁(yè)中使用<p>標(biāo)簽來(lái)定義段落。<p>標(biāo)簽是HTML5文檔中常見(jiàn)的標(biāo)簽，默認(rèn)情況下，文本在一個(gè)段落中會(huì)根據(jù)瀏覽器窗口的大小自動(dòng)換行。<p>標(biāo)簽的基本語(yǔ)法格式如下：<palign="對(duì)齊方式">段落文本</p>在上面的語(yǔ)法中，align屬性為<p>標(biāo)簽的可選屬性，和標(biāo)題標(biāo)簽<h>一樣，同樣可以使用align屬性設(shè)置段落文本的對(duì)齊方式。通過(guò)實(shí)例9來(lái)演示段落標(biāo)簽<p>的用法。第8行、第9行代碼分別為<h2>標(biāo)簽和<p>標(biāo)簽添加align的“center”屬性值，設(shè)置居中對(duì)齊。第10行代碼中的<p>標(biāo)簽為段落標(biāo)簽的默認(rèn)對(duì)齊方式。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。講解水平線(xiàn)標(biāo)簽（1）教師展示PPT，對(duì)水平線(xiàn)標(biāo)簽進(jìn)行具體講解。在網(wǎng)頁(yè)中我們常常會(huì)看到一些水平線(xiàn)將段落與段落之間隔開(kāi)，使文檔結(jié)構(gòu)清晰，層次分明。水平線(xiàn)可以通過(guò)<hr/>標(biāo)簽來(lái)定義，基本語(yǔ)法格式如下：<hr屬性="屬性值"/><hr/>是單標(biāo)簽，在網(wǎng)頁(yè)中輸入一個(gè)<hr/>，即添加了一條默認(rèn)樣式的水平線(xiàn)。此外通過(guò)為<hr/>標(biāo)簽設(shè)置屬性和屬性值，可以更改水平線(xiàn)樣式。第9行代碼將<hr/>標(biāo)簽設(shè)置了不同的顏色、對(duì)齊方式、粗細(xì)和寬度值。第14行代碼修改了<hr/>標(biāo)簽的顏色。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。講解換行標(biāo)簽（1）教師展示PPT，對(duì)換行標(biāo)簽進(jìn)行具體講解。在Word軟件中，按Enter鍵可以將一段文字換行顯示，但在網(wǎng)頁(yè)中，如果想要將某段文本強(qiáng)制換行顯示，就需要使用換行標(biāo)簽<br/>。第8行代碼在文本里面顯示是在同一行，但是使用了<br/>標(biāo)簽，而第9行、第10行代碼在文本中是換行顯示的，采用了按Enter鍵的方式換行。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。2.4.2文本樣式標(biāo)簽內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：如何對(duì)文本進(jìn)行排版？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋?zhuān)捍鸢福何谋緲邮綐?biāo)簽可以設(shè)置一些文字效果（如字體、加粗、顏色），讓網(wǎng)頁(yè)中的文字樣式變得更加豐富。知識(shí)點(diǎn)講解講解文本樣式標(biāo)簽（1）教師展示PPT，對(duì)文本樣式標(biāo)簽進(jìn)行具體講解。文本樣式標(biāo)簽可以設(shè)置一些文字效果（如字體、加粗、顏色），讓網(wǎng)頁(yè)中的文字樣式變得更加豐富，其基本語(yǔ)法格式如下：<font屬性="屬性值">文本內(nèi)容</font>第1個(gè)段落中的文本設(shè)置為默認(rèn)段落樣式，第2~4個(gè)段落文本分別使用<font>標(biāo)簽設(shè)置了不同的文本樣式。其效果如圖2-19所示。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。2.4.3文本格式化標(biāo)簽內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：什么是文本格式標(biāo)簽？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋?zhuān)捍鸢福涸诰W(wǎng)頁(yè)中，有時(shí)需要為文字設(shè)置粗體、斜體或下畫(huà)線(xiàn)等一些特殊顯示的文本效果，為此HTML5提供了專(zhuān)門(mén)的文本格式化標(biāo)簽，使文字以特殊的方式顯示。。知識(shí)點(diǎn)講解講解動(dòng)態(tài)網(wǎng)頁(yè)（1）教師展示PPT，對(duì)文本格式化標(biāo)簽進(jìn)行具體講解。第8行代碼設(shè)置段落文本正常顯示，第9~13行代碼分別給段落文本應(yīng)用不同的文本格式化標(biāo)簽，使文字產(chǎn)生特殊的顯示效果。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。2.4.4文本語(yǔ)義標(biāo)簽內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：什么是文本語(yǔ)義標(biāo)簽？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋?zhuān)捍鸢福何谋菊Z(yǔ)義標(biāo)簽主要用于向?yàn)g覽器和開(kāi)發(fā)者描述標(biāo)簽的意義，它是供機(jī)器識(shí)別的標(biāo)簽，瀏覽者只能看到顯示樣式的差異。有些文本語(yǔ)義標(biāo)簽可以突出文本內(nèi)容的層次關(guān)系，方便搜索引擎查找，提高瀏覽器的解析速度。在HTML5中，文本語(yǔ)義標(biāo)簽有很多。知識(shí)點(diǎn)講解講解<time>標(biāo)簽（1）教師展示PPT，對(duì)<time>標(biāo)簽進(jìn)行具體講解。<time>標(biāo)簽用于定義時(shí)間或日期，可以代表24小時(shí)中的某一時(shí)間。<time>標(biāo)簽不會(huì)在瀏覽器中呈現(xiàn)任何特殊效果，但是該元素能夠以機(jī)器可讀的方式對(duì)日期和時(shí)間進(jìn)行編碼，用戶(hù)能夠?qū)⑸仗嵝鸦蚱渌录砑拥饺粘瘫碇校阉饕嬉材軌蛏筛悄艿乃阉鹘Y(jié)果。<time>標(biāo)簽有以下兩個(gè)屬性。datetime屬性，用于定義相應(yīng)的時(shí)間或日期。取值為具體時(shí)間（如9:00）或具體日期（如2020-09-01），不定義該屬性時(shí)，由文本的內(nèi)容給定日期或時(shí)間。pubdate屬性，用于定義<time>標(biāo)簽中的文檔（或article元素）發(fā)布日期。取值一般為“pubdate”。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。講解<mark>標(biāo)簽（1）教師展示PPT，對(duì)<mark>標(biāo)簽進(jìn)行具體講解。<mark>標(biāo)簽的主要功能是在文本中高亮顯示某些字符，該標(biāo)簽的用法與<em>標(biāo)簽和<strong>標(biāo)簽有相似之處，但是使用<mark>標(biāo)簽在突出顯示樣式時(shí)更隨意靈活。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。講解<cite>標(biāo)簽（1）教師展示PPT，對(duì)<cite>標(biāo)簽進(jìn)行具體講解。<cite>標(biāo)簽可以創(chuàng)建一個(gè)引用，用于對(duì)文檔引用參考文獻(xiàn)的說(shuō)明，一旦在文檔中使用了該標(biāo)簽，被標(biāo)注的文檔內(nèi)容將以斜體的樣式展示在頁(yè)面中，以區(qū)別于段落中的其他字符。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。2.4.5特殊字符標(biāo)簽內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：特殊字符標(biāo)簽有什么用？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋?zhuān)捍鸢福涸跒g覽網(wǎng)頁(yè)時(shí)常常會(huì)看到一些包含特殊字符的文本，如數(shù)學(xué)公式、版權(quán)信息等。在網(wǎng)頁(yè)上顯示這些包含特殊字符的文本時(shí)，需要特殊字符標(biāo)簽。知識(shí)點(diǎn)講解講解常用的特殊字符標(biāo)簽（1）教師展示PPT，對(duì)常用的特殊字符標(biāo)簽進(jìn)行具體講解。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。任務(wù)2.5圖像標(biāo)簽2.5.1常見(jiàn)的圖像格式內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：常見(jiàn)的圖像格式有哪些？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋?zhuān)捍鸢福篏IF格式、PNG格式、JPG格式。知識(shí)點(diǎn)講解講解常見(jiàn)的圖像格式（1）教師展示PPT，對(duì)常見(jiàn)的圖像格式進(jìn)行具體講解。1.GIF格式GIF格式突出的特點(diǎn)是支持動(dòng)畫(huà)，同時(shí)GIF也是一種無(wú)損的圖像格式，也就是說(shuō)修改圖片之后，圖片質(zhì)量沒(méi)有損失。再加上GIF支持透明，因此很適合在瀏覽器上使用，但GIF只能處理256種顏色，因此在網(wǎng)頁(yè)制作中GIF格式常常用于Logo、小圖標(biāo)及其他色彩相對(duì)單一的圖像。2.PNG格式PNG包括PNG-8和真色彩PNG（PNG-24和PNG-32）。它的優(yōu)勢(shì)是體積小，支持透明（全透明、半透明、全不透明），并且顏色過(guò)渡更平滑，但PNG不支持動(dòng)畫(huà)。其中PNG-8和GIF類(lèi)似，只能支持256種顏色。3.JPG格式JPG所能顯示的顏色比GIF和PNG-8豐富，可以用于保存超過(guò)256種顏色的圖像，但是JPG是一種有損壓縮的圖像格式，這就意味著每修改一次圖片都會(huì)造成一些圖像數(shù)據(jù)的丟失。JPG是特別為照片圖像設(shè)計(jì)的文件格式，網(wǎng)頁(yè)制作過(guò)程中類(lèi)似于照片的圖像，比如橫幅廣告（banner）、商品圖片、較大的插圖等都可以保存為JPG格式。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。2.5.2圖像標(biāo)簽及常用屬性?xún)?nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：網(wǎng)頁(yè)中如何插入圖像？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋?zhuān)捍鸢福涸诰W(wǎng)頁(yè)中顯示圖像就需要使用圖像標(biāo)簽。知識(shí)點(diǎn)講解講解圖像標(biāo)簽及常用屬性（1）教師展示PPT，對(duì)圖像標(biāo)簽及常用屬性進(jìn)行具體講解。在網(wǎng)頁(yè)中顯示圖像就需要使用圖像標(biāo)簽，接下來(lái)將詳細(xì)介紹圖像標(biāo)簽<img/>和與它相關(guān)的屬性。圖像標(biāo)簽的基本語(yǔ)法格式如下：<imgsrc="圖像url"/>在上面的語(yǔ)法中，src屬性指定圖像文件的路徑和文件名，是<img/>標(biāo)簽的必需屬性。要想在網(wǎng)頁(yè)中靈活地使用圖像，除src屬性外，HTML還為<img/>標(biāo)簽提供了常用屬性。1.alt屬性有時(shí)頁(yè)面中的圖像可能無(wú)法正常顯示，如圖片加載錯(cuò)誤，瀏覽器版本過(guò)低等。因此，為頁(yè)面上的圖像添加替換文本是個(gè)很好的方式，在圖像無(wú)法顯示時(shí)告訴用戶(hù)該圖片的信息，這就需要使用圖像的alt屬性。2.width和height屬性通常情況下，如果不為<img/>標(biāo)簽設(shè)置寬度和高度屬性，圖片會(huì)按照它的原始尺寸顯示。通過(guò)width和height屬性可以自定義圖片的寬度和高度。通常我們只設(shè)置其中的一個(gè)屬性，另一個(gè)屬性則會(huì)依據(jù)前一個(gè)屬性將原圖等比例縮放顯示。如果同時(shí)設(shè)置兩個(gè)屬性，且其比例和原圖大小的比例不一致，顯示的圖像就會(huì)變形或失真。3.border屬性網(wǎng)頁(yè)默認(rèn)情況下圖像是沒(méi)有邊框的，通過(guò)border屬性可以為圖像添加邊框，設(shè)置邊框的寬度。通過(guò)實(shí)例18來(lái)演示使用border、width和height屬性同時(shí)對(duì)圖像進(jìn)行修飾。4.vspace和hspace屬性在網(wǎng)頁(yè)中，由于排版需要，有時(shí)候還需要調(diào)整圖像的邊距。HTML5中通過(guò)vspace和hspace屬性可以分別調(diào)整圖像的垂直邊距和水平邊距。5.align屬性圖文混排是網(wǎng)頁(yè)中很常見(jiàn)的排版方式，默認(rèn)情況下圖像的底部會(huì)與文本的第一行文字對(duì)齊。注意：（1）網(wǎng)頁(yè)制作中并不建議圖像標(biāo)簽<img/>直接使用border、vspace、hspace及align屬性，而是用CSS樣式替代。（2）網(wǎng)頁(yè)制作中裝飾性的圖像不直接插入<img/>標(biāo)簽，一般通過(guò)CSS設(shè)置背景圖像來(lái)實(shí)現(xiàn)。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。2.5.3相對(duì)路徑和絕對(duì)路徑內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：計(jì)算機(jī)中文件的位置怎么表示？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋?zhuān)捍鸢福何募谟?jì)算機(jī)中的位置是通過(guò)路徑來(lái)表示的，網(wǎng)頁(yè)中的路徑通常分為絕對(duì)路徑和相對(duì)路徑兩種。知識(shí)點(diǎn)講解講解相對(duì)路徑和絕對(duì)路徑（1）教師展示PPT，對(duì)相對(duì)路徑和絕對(duì)路徑進(jìn)行具體講解。1.絕對(duì)路徑絕對(duì)路徑就是網(wǎng)頁(yè)上的文件或目錄在硬盤(pán)上的真正路徑，如實(shí)例20所示的圖片路徑即為絕對(duì)路徑。實(shí)例20絕對(duì)路徑C:＼Users＼Administrator＼Desktop＼網(wǎng)頁(yè)設(shè)計(jì)與制作＼項(xiàng)目二案例＼實(shí)例19使用align屬性2.相對(duì)路徑相對(duì)路徑就是相對(duì)于當(dāng)前文件的路徑。相對(duì)路徑?jīng)]有盤(pán)符，通常是以網(wǎng)頁(yè)文件為起點(diǎn)，通過(guò)層級(jí)關(guān)系描述目標(biāo)圖像的位置。相對(duì)路徑的設(shè)置分為以下3種。（1）圖像文件和網(wǎng)頁(yè)文件位于同一個(gè)文件夾中，只需輸入圖像文件的名稱(chēng)即可，如<imgsrc="logo.gif"/>。（2）圖像文件位于HTML文件的下一級(jí)文件夾，上下級(jí)文件之間用“/”隔開(kāi)，如<imgsrc="img/img01/logo.gif"/>。（

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 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ì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論