HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)技術(shù)模塊2 HTML5基礎(chǔ)_第1頁(yè)
HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)技術(shù)模塊2 HTML5基礎(chǔ)_第2頁(yè)
HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)技術(shù)模塊2 HTML5基礎(chǔ)_第3頁(yè)
HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)技術(shù)模塊2 HTML5基礎(chǔ)_第4頁(yè)
HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)技術(shù)模塊2 HTML5基礎(chǔ)_第5頁(yè)
已閱讀5頁(yè)，還剩2頁(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)介

《HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)技術(shù)》授課教案授課教案學(xué)校******大學(xué)（學(xué)院）任課教師***授課題目模塊二HTML5基礎(chǔ)授課時(shí)間長(zhǎng)度6學(xué)時(shí)所用教材HTM5+CSS3網(wǎng)頁(yè)設(shè)計(jì)技術(shù)，黃玉春主編；中國(guó)科學(xué)技術(shù)出版社教學(xué)目標(biāo)｜知識(shí)目標(biāo)｜（1）了解HTML的發(fā)展歷史。（2）了解HTML5的優(yōu)勢(shì)。（3）掌握HTML5文檔結(jié)構(gòu)和基本語(yǔ)法。（4）掌握HTML5文本標(biāo)簽。｜能力目標(biāo)｜（1）能夠?qū)懗鯤TML5文檔結(jié)構(gòu)。（2）能夠用文本標(biāo)簽對(duì)頁(yè)面元素進(jìn)行標(biāo)識(shí)。｜素質(zhì)目標(biāo)｜（1）通過(guò)學(xué)習(xí)HTML5基礎(chǔ)知識(shí)，培養(yǎng)實(shí)踐能力和解決問(wèn)題的能力。（2）通過(guò)學(xué)習(xí)HTML文檔結(jié)構(gòu)，體會(huì)縮進(jìn)格式對(duì)代碼邏輯分析的重要性，在代碼編寫的過(guò)程中養(yǎng)成良好的習(xí)慣，提高學(xué)習(xí)效率。教學(xué)重點(diǎn)（1）HTML5文檔結(jié)構(gòu)和基本語(yǔ)法。（2）掌握HTML5文本標(biāo)簽。教學(xué)難點(diǎn)HTML5文檔頭部相關(guān)標(biāo)簽。教學(xué)方法任務(wù)引入法、課堂討論、理論講解、實(shí)操訓(xùn)練教學(xué)用具多媒體教學(xué)設(shè)備、教材、課件、實(shí)訓(xùn)素材教學(xué)過(guò)程主要教學(xué)內(nèi)容及步驟考勤教師使用App或者點(diǎn)名等方式進(jìn)行簽到；學(xué)生按照老師要求簽到任務(wù)導(dǎo)入打開一個(gè)網(wǎng)頁(yè)，查看網(wǎng)頁(yè)源碼，引出本任務(wù)教學(xué)內(nèi)容。教學(xué)內(nèi)容任務(wù)一認(rèn)識(shí)HTML打開一個(gè)網(wǎng)頁(yè)，查看它的源代碼，會(huì)看到一些有規(guī)律的英文代碼。這些代碼就是超文本標(biāo)記語(yǔ)言?！俺谋尽本褪侵疙?yè)面內(nèi)可以包含圖片、鏈接甚至音樂(lè)、程序等非文字的元素，“標(biāo)記”就是說(shuō)它不是程序語(yǔ)言，只是由文字及標(biāo)記符號(hào)組合而成。網(wǎng)頁(yè)其實(shí)最本質(zhì)的東西，就是由這些看著十分單調(diào)的HTML元素組成的，瀏覽器或者其他可以瀏覽網(wǎng)頁(yè)的設(shè)備將這些HTML元素“翻譯”過(guò)來(lái)，并按照定義的格式顯示出來(lái)，轉(zhuǎn)化成最終看到的網(wǎng)頁(yè)。一、HTML的發(fā)展歷史現(xiàn)在常常習(xí)慣于用數(shù)字來(lái)描述HTML的版本（如：HTML5），但是最初并沒有HTML1，而是1993年IETF團(tuán)隊(duì)的一個(gè)草案，并不是成型的標(biāo)準(zhǔn)。二、HTML5的優(yōu)勢(shì)1.解決了跨平臺(tái)問(wèn)題HTML5最顯著的優(yōu)勢(shì)在于跨平臺(tái)性，用HTML5搭建的站點(diǎn)與應(yīng)用可以兼容PC端與移動(dòng)端、Windows與Linux、安卓與IOS。2.本地存儲(chǔ)特性HTML5的本地存儲(chǔ)特性也給使用者帶來(lái)了更多便利?；贖TML5開發(fā)的輕應(yīng)用比本地App擁有更短的啟動(dòng)時(shí)間，更快的聯(lián)網(wǎng)速度，而且無(wú)需下載占用存儲(chǔ)空間，特別適合手機(jī)等移動(dòng)媒體。3.更多的多媒體元素HTML5讓開發(fā)者無(wú)需依賴第三方瀏覽器插件即可創(chuàng)建高級(jí)圖形、版式、動(dòng)畫以及過(guò)渡效果，這也使得用戶用較少的流量就可以欣賞到炫酷的視覺聽覺效果。4.代碼更安全使用HTML5，代碼更安全。5.化繁為簡(jiǎn)的優(yōu)勢(shì)作為當(dāng)下流行的通用標(biāo)記語(yǔ)言，HTML5盡可能地簡(jiǎn)化，嚴(yán)格遵循了“簡(jiǎn)單至上”的原則，主要體現(xiàn)在這幾個(gè)方面。（1）新的簡(jiǎn)化的字符集聲明。（2）新的簡(jiǎn)化的DOCTYPE。（3）簡(jiǎn)單而強(qiáng)大的HTML5API（應(yīng)用程序接口）。（4）以瀏覽器原生能力替代復(fù)雜的JavaScript代碼。任務(wù)二理解HTML文檔結(jié)構(gòu)和基本語(yǔ)法一、HTML5文檔基本結(jié)構(gòu)在使用VSCode編輯HTML5文檔時(shí)，在代碼編輯器中輸入“！”（半角），接著按下Tab鍵，VSCode編輯器會(huì)自動(dòng)生成了HTML5的文檔結(jié)構(gòu)，如圖2-1所示。圖2-1HTML5的文檔結(jié)構(gòu)二、HTML5基本語(yǔ)法HTML文檔是由按照一定規(guī)則組合起來(lái)的各種標(biāo)記組成。<html>、<head>和<body>標(biāo)簽都是HTML文檔的基本標(biāo)簽。1.什么是標(biāo)簽用尖括號(hào)“<”和“>”括起來(lái)的部分稱為標(biāo)記（也稱標(biāo)簽），每個(gè)標(biāo)記都必須有一個(gè)標(biāo)記名稱來(lái)作為該標(biāo)記的唯一標(biāo)識(shí)，如<html>中的html。2.標(biāo)簽的分類根據(jù)標(biāo)簽的組成特點(diǎn)，通常將標(biāo)簽分為兩大類，分別是雙標(biāo)簽和單標(biāo)簽。（1）雙標(biāo)簽是指由開始和結(jié)束兩個(gè)標(biāo)簽符號(hào)組成的標(biāo)簽。一般格式如下：<標(biāo)簽名>內(nèi)容</標(biāo)簽名>例如，前面介紹的<html>和</html>、<body>和</body>等都是雙標(biāo)簽。（2）單標(biāo)簽是指用一個(gè)標(biāo)簽符號(hào)即可完整地描述某個(gè)功能的標(biāo)簽，一般格式如下：<標(biāo)簽名/>在上面的語(yǔ)法格式中，標(biāo)簽名和“/”之間有一個(gè)空格，該空格在HTML語(yǔ)法中可以省略。3.標(biāo)簽的嵌套與并列在HTML文檔中會(huì)存在很多標(biāo)簽，各標(biāo)簽之間都具有一定的關(guān)系。標(biāo)簽的關(guān)系主要有嵌套關(guān)系和并列關(guān)系兩種。例如在HTML5結(jié)構(gòu)代碼中，<html>標(biāo)簽和<head>標(biāo)簽與<body>標(biāo)簽就是嵌套關(guān)系。<html><head></head><body></body></html>4.標(biāo)簽的屬性很多標(biāo)記還有自己的屬性，利用這些屬性，可以作進(jìn)一步的詳細(xì)設(shè)置。其語(yǔ)法格式為：<標(biāo)簽名name1="value1"name2="value2"…>…</標(biāo)簽名>例如，下面代碼設(shè)置寬度200px，居中對(duì)齊的一條線。<hrwidth="200px"align="center">三、HTML5文檔頭部相關(guān)標(biāo)簽文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標(biāo)題、在Web中的位置以及和其他文檔的關(guān)系等。文檔頭部包含的數(shù)據(jù)都不會(huì)顯示在瀏覽器中。1.設(shè)置頁(yè)面標(biāo)題標(biāo)簽<title>標(biāo)簽是用來(lái)描述網(wǎng)頁(yè)標(biāo)題的，在瀏覽器中顯示的位置是在瀏覽器窗口的標(biāo)題欄上的網(wǎng)頁(yè)標(biāo)題。例如，將頁(yè)面標(biāo)題設(shè)置為“中國(guó)青年網(wǎng)”，具體代碼如下：<title>中國(guó)青年網(wǎng)</title><title>的增加有利于SEO優(yōu)化。2.定義頁(yè)面元信息標(biāo)簽<meta>標(biāo)簽用來(lái)描述一個(gè)HTML網(wǎng)頁(yè)文檔的元信息，可重復(fù)出現(xiàn)在<head>頭部標(biāo)簽中。1）<metacharset="值"/>該組屬性用來(lái)定義文檔的字符編碼。例如，將字符集設(shè)置為UTF-8的代碼如下：<metacharset="UTF-8">2）<metahttp-equiv="名稱"content="值"><metahttp-equiv="Refresh"content="n;url=http://yourlink">定時(shí)讓網(wǎng)頁(yè)在指定的時(shí)間n內(nèi)，跳轉(zhuǎn)到指定的頁(yè)面。例如，下面的代碼可以實(shí)現(xiàn)頁(yè)面停留30秒后跳轉(zhuǎn)到新浪網(wǎng)。<metahttp-equiv="Refresh"content="30;url=">3）<metaname="名稱"content="值">在meta標(biāo)簽中使用name和content屬性可以為搜索引擎提供信息。（1）設(shè)置網(wǎng)頁(yè)關(guān)鍵字Keywords（關(guān)鍵字）。用法：<metaname="Keywords"content="關(guān)鍵詞1,關(guān)鍵詞2，關(guān)鍵詞3,關(guān)鍵詞4,…">（2）設(shè)置網(wǎng)頁(yè)描述Description（簡(jiǎn)介）。用法：<metaname="Description"content="網(wǎng)頁(yè)的簡(jiǎn)述">（3）設(shè)置網(wǎng)頁(yè)作者author（作者）。用法：<metaname="Author"Content="張三，abc@">（4）設(shè)置視圖模式viewport（視圖模式）。例如，下面的代碼設(shè)置視圖模式為：<metaname="viewport"content="width=device-width,initial-scale=1.0">任務(wù)三學(xué)習(xí)文本標(biāo)簽一、頁(yè)面格式化標(biāo)簽1．標(biāo)題標(biāo)簽標(biāo)題（heading）標(biāo)簽有6個(gè)級(jí)別，從<h1>到<h6>。<h1>為最大的標(biāo)題，<h6>為最小的標(biāo)題。語(yǔ)法格式為：<hnalign="對(duì)齊方式">標(biāo)題文本</hn>2．段落標(biāo)簽段落（paragraphs）標(biāo)簽<p>是處理文字時(shí)經(jīng)常用到的標(biāo)簽。語(yǔ)法格式為：<palign="對(duì)齊方式">這是一個(gè)段落</p>3．換行標(biāo)簽換行標(biāo)記<br/>是一個(gè)單標(biāo)記。當(dāng)需要結(jié)束一行，并且不想開始新段落時(shí)，使用<br/>標(biāo)記。<br/>標(biāo)記不管放在什么位置，都能夠強(qiáng)制換行。4.水平線標(biāo)簽水平線可以通過(guò)<hr/>標(biāo)簽來(lái)定義。語(yǔ)法格式如下：<hr屬性=”屬性值”/>二、文本格式化標(biāo)簽常用的格式化標(biāo)簽如表2-1所示。三、文本語(yǔ)義標(biāo)簽文本語(yǔ)義標(biāo)簽主要用于向?yàn)g覽器和開發(fā)者描述標(biāo)簽的意義，訪問(wèn)者只能看到顯示樣式的差異。在HTML5中，文本語(yǔ)義標(biāo)簽有很多，常用的有time標(biāo)簽、<mark

溫馨提示

  • 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ù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 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)論