《HTML5+CSS3任務(wù)驅(qū)動(dòng)教程(第2版)（微課版）》課件 模塊2 HTML5開(kāi)發(fā)基礎(chǔ)_第1頁(yè)
《HTML5+CSS3任務(wù)驅(qū)動(dòng)教程(第2版)（微課版）》課件 模塊2 HTML5開(kāi)發(fā)基礎(chǔ)_第2頁(yè)
《HTML5+CSS3任務(wù)驅(qū)動(dòng)教程(第2版)（微課版）》課件 模塊2 HTML5開(kāi)發(fā)基礎(chǔ)_第3頁(yè)
《HTML5+CSS3任務(wù)驅(qū)動(dòng)教程(第2版)（微課版）》課件 模塊2 HTML5開(kāi)發(fā)基礎(chǔ)_第4頁(yè)
《HTML5+CSS3任務(wù)驅(qū)動(dòng)教程(第2版)（微課版）》課件 模塊2 HTML5開(kāi)發(fā)基礎(chǔ)_第5頁(yè)
已閱讀5頁(yè)，還剩20頁(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開(kāi)發(fā)基礎(chǔ)目錄任務(wù)一任務(wù)二任務(wù)三寫一個(gè)簡(jiǎn)單的HTML5頁(yè)面設(shè)置“在線學(xué)習(xí)網(wǎng)”的首頁(yè)文件頭部信息引入知識(shí)點(diǎn)2.1HTML簡(jiǎn)介2.2HTML文件的基本結(jié)構(gòu)任務(wù)1編寫一個(gè)簡(jiǎn)單的HTML5頁(yè)面2.1HTML簡(jiǎn)介HTML是一切網(wǎng)頁(yè)實(shí)現(xiàn)的基礎(chǔ)，在網(wǎng)絡(luò)中瀏覽的網(wǎng)頁(yè)都是一個(gè)個(gè)由HTML標(biāo)記構(gòu)成的文件。瀏覽器只要看到HTML源代碼，就能解析成網(wǎng)頁(yè)。HTML文件本身是一種純文本文件，我們可以使用任意一種文本編輯工具進(jìn)行編寫。比如，使用最簡(jiǎn)單的記事本工具，或Editplus、HBuilder、Sublime、InterlliJIDEA等文本編輯工具，或Dreamweaver可視化編輯工具編寫。目前，最新的HTML文件是HTML5。任務(wù)1編寫一個(gè)簡(jiǎn)單的HTML5頁(yè)面2.1HTML簡(jiǎn)介2.1.1HTML的定義HTML（HyperTextMarkupLanguage，超文本標(biāo)記語(yǔ)言）是由W3C（WorldWideWebConsortium，萬(wàn)維網(wǎng)聯(lián)盟）所提出的，是用于描述網(wǎng)頁(yè)文檔的一種標(biāo)記語(yǔ)言，其主要用途是制作網(wǎng)頁(yè)。用HTML編寫的超文本文檔稱為HTML文檔，也叫網(wǎng)頁(yè)。它能獨(dú)立于各種操作系統(tǒng)平臺(tái)。任務(wù)1編寫一個(gè)簡(jiǎn)單的HTML5頁(yè)面2.1HTML簡(jiǎn)介2.1.2HTML的發(fā)展歷史HTML（第一版）：在1993年6月作為互聯(lián)網(wǎng)工程工作小組（IETF）工作草案發(fā)布，并非標(biāo)準(zhǔn)。

HTML2.0：1995年11月作為RFC1866發(fā)布，在RFC2854于2000年6月發(fā)布之后被宣布已經(jīng)過(guò)時(shí)。

HTML3.2：1996年1月14日，W3C推薦標(biāo)準(zhǔn)。

HTML4.0：1997年12月18日，W3C推薦標(biāo)準(zhǔn)。

HTML4.01（微小改進(jìn)）：1999年12月24日，W3C推薦標(biāo)準(zhǔn)。HTML5：2014年10月29日，W3C宣布，經(jīng)過(guò)接近8年的艱苦努力，HTML5標(biāo)準(zhǔn)規(guī)范終于制定完成。任務(wù)1編寫一個(gè)簡(jiǎn)單的HTML5頁(yè)面2.2HTML文件的基本結(jié)構(gòu)HTML文檔包含標(biāo)記和純文本，它被Web瀏覽器讀取并解析后以網(wǎng)頁(yè)的形式顯示出來(lái)。每個(gè)網(wǎng)頁(yè)都有其基本的結(jié)構(gòu)，包括HTML文檔的結(jié)構(gòu)，標(biāo)記的語(yǔ)法格式，語(yǔ)法規(guī)范等。2.2.1HTML的語(yǔ)法格式HTML的語(yǔ)法結(jié)構(gòu)主要有標(biāo)記、屬性和元素組成，其基本語(yǔ)法格式如下：<標(biāo)記名屬性1=“屬性值1”屬性2=“屬性值2”…>內(nèi)容</標(biāo)記名>任務(wù)1編寫一個(gè)簡(jiǎn)單的HTML5頁(yè)面2.2HTML文件的基本結(jié)構(gòu)1.標(biāo)記HTML標(biāo)記組成HTML文檔的元素，每一個(gè)標(biāo)記描述了一個(gè)功能。標(biāo)記分為單標(biāo)記，雙標(biāo)記兩種。（1）單標(biāo)記：只需單獨(dú)使用就能完整地表達(dá)意思，這類標(biāo)記的基本語(yǔ)法格式如下：<標(biāo)記名>（2）雙標(biāo)記：這類標(biāo)記的基本語(yǔ)法格式如下：<標(biāo)記名>內(nèi)容</標(biāo)記名>任務(wù)1編寫一個(gè)簡(jiǎn)單的HTML5頁(yè)面2.2HTML文件的基本結(jié)構(gòu)2.標(biāo)記的屬性使用HTML制作網(wǎng)頁(yè)時(shí)，如果想讓HTML標(biāo)記提供更多的信息，可以使用HTML標(biāo)記的屬性來(lái)實(shí)現(xiàn)，許多單標(biāo)記和雙標(biāo)記的始標(biāo)記內(nèi)可以包含一些屬性。在HTML中，屬性要在開(kāi)始標(biāo)記中指定，用來(lái)表示該標(biāo)記的性質(zhì)和特性。基本語(yǔ)法格式如下：<標(biāo)記名屬性1=“屬性值1”屬性2=“屬性值2”…>任務(wù)1編寫一個(gè)簡(jiǎn)單的HTML5頁(yè)面2.2HTML文件的基本結(jié)構(gòu)3.元素HTML（element）元素是由“標(biāo)記（tag）”和“屬性（attribute）”所組成，指的是從開(kāi)始標(biāo)記到結(jié)束標(biāo)記的所有代碼。沒(méi)有內(nèi)容的HTML元素被稱為空元素，空元素是在開(kāi)始標(biāo)記中關(guān)閉的。例如，以下代碼片段所示：<p>歡迎來(lái)到廣東創(chuàng)新科技職業(yè)學(xué)院信息工程學(xué)院</p><!--該p元素為有內(nèi)容的元素-->任務(wù)1編寫一個(gè)簡(jiǎn)單的HTML5頁(yè)面2.2HTML文件的基本結(jié)構(gòu)2.2.2HTML的文檔結(jié)構(gòu)HTML5文件的基本結(jié)構(gòu)如下：<!doctypehtml><!--文檔類型的聲明--><html><!--文檔的開(kāi)始--><head><!--文檔頭部的開(kāi)始--><title>此處是網(wǎng)頁(yè)標(biāo)題</title><!--文檔標(biāo)題信息的開(kāi)始和結(jié)束--></head><!--文檔頭部的結(jié)束--><body><!--文檔主體的開(kāi)始-->此處是網(wǎng)頁(yè)文件內(nèi)容</body><!--文檔主體的結(jié)束--></html><!--文檔的結(jié)束-->任務(wù)1編寫一個(gè)簡(jiǎn)單的HTML5頁(yè)面2.2HTML文件的基本結(jié)構(gòu)2.2.3HTML的常用標(biāo)記HTML5文檔核心是HTML5標(biāo)記，標(biāo)記是用來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)元素的最小單位。學(xué)習(xí)HTML語(yǔ)言時(shí)，除要知道HTML語(yǔ)言結(jié)構(gòu)外，更多是學(xué)習(xí)掌握這些標(biāo)記的使用方法。HTML語(yǔ)言的常用標(biāo)記包含文件結(jié)構(gòu)標(biāo)記、文本段落標(biāo)記、鏈接標(biāo)記、表格標(biāo)記、列表標(biāo)記等等任務(wù)1編寫一個(gè)簡(jiǎn)單的HTML5頁(yè)面任務(wù)1編寫一個(gè)簡(jiǎn)單的HTML5頁(yè)面任務(wù)實(shí)現(xiàn)（1）創(chuàng)建一個(gè)HTML5頁(yè)面。（3）該網(wǎng)頁(yè)頁(yè)面顯示的內(nèi)容為“讓我們開(kāi)始HTML語(yǔ)言的新旅程！”。（2）該網(wǎng)頁(yè)頁(yè)面標(biāo)題為“第一個(gè)HTML頁(yè)面”。引入知識(shí)點(diǎn)任務(wù)2設(shè)置“在線學(xué)習(xí)網(wǎng)”的首頁(yè)文件頭部信息2.3頁(yè)面的頭部摘要信息2.3頁(yè)面的頭部摘要信息在網(wǎng)頁(yè)的頭部<head>和</head>標(biāo)記所包含的部分中，通常存放一些介紹頁(yè)面內(nèi)容的信息，例如頁(yè)面標(biāo)題、關(guān)鍵字、描述、頁(yè)面大小，更新日期和網(wǎng)頁(yè)快照等。其中，網(wǎng)頁(yè)標(biāo)題及頁(yè)面描述稱為網(wǎng)頁(yè)的摘要信息。如果希望自己發(fā)布的網(wǎng)頁(yè)能被百度、谷歌等搜索引擎搜索到，在制作網(wǎng)頁(yè)時(shí)就需要注意編寫網(wǎng)頁(yè)的摘要信息。接下來(lái)就介紹一下網(wǎng)頁(yè)的摘要信息，<meta>標(biāo)記如何去使用。任務(wù)2設(shè)置“在線學(xué)習(xí)網(wǎng)”的首頁(yè)文件頭部信息2.3頁(yè)面的頭部摘要信息2.3.1<meta>標(biāo)記元數(shù)據(jù)（metadata）是關(guān)于數(shù)據(jù)的信息。<meta>標(biāo)記是頁(yè)面頭部部分中的一個(gè)輔助性標(biāo)記，提供關(guān)于HTML文檔的元數(shù)據(jù)。元數(shù)據(jù)不會(huì)顯示在頁(yè)面上，但是對(duì)于機(jī)器是可讀的。meta元素被用于規(guī)定頁(yè)面的描述、關(guān)鍵詞、文檔的作者、最后修改時(shí)間以及其他元數(shù)據(jù)。任務(wù)2設(shè)置“在線學(xué)習(xí)網(wǎng)”的首頁(yè)文件頭部信息2.3頁(yè)面的頭部摘要信息2.3.2<meta>標(biāo)記屬性<meta>設(shè)置的內(nèi)容包括字符集、網(wǎng)頁(yè)關(guān)鍵字、網(wǎng)頁(yè)描述信息、頁(yè)面的刷新及跳轉(zhuǎn)等，這些內(nèi)容都是通過(guò)設(shè)置meta標(biāo)記的相應(yīng)屬性來(lái)實(shí)現(xiàn)。任務(wù)2設(shè)置“在線學(xué)習(xí)網(wǎng)”的首頁(yè)文件頭部信息2.3頁(yè)面的頭部摘要信息2.3.3使用<meta>設(shè)置頁(yè)面字符集在HTML5中，有一個(gè)新的charset屬性，它使字符集的設(shè)置更加簡(jiǎn)化。基本語(yǔ)法格式如下：<metacharset="字符集">例如，下列代碼告訴瀏覽器，網(wǎng)頁(yè)使用字符集為utf-8，代碼如下：<metacharset="utf-8">任務(wù)2設(shè)置“在線學(xué)習(xí)網(wǎng)”的首頁(yè)文件頭部信息2.3頁(yè)面的頭部摘要信息2.3.4使用<meta>設(shè)置作者信息基本語(yǔ)法格式如下：<metaname="author"content="作者的姓名">例如，將作者的姓名“李小茗”添加到網(wǎng)頁(yè)的源代碼中，代碼如下：<metaname="author"content="李小茗">任務(wù)2設(shè)置“在線學(xué)習(xí)網(wǎng)”的首頁(yè)文件頭部信息2.3頁(yè)面的頭部摘要信息2.3.5使用<meta>設(shè)置網(wǎng)頁(yè)搜索關(guān)鍵字基本語(yǔ)法格式如下：<metaname="keywords"content="關(guān)鍵字1,關(guān)鍵字2,關(guān)鍵字3,…">例如，定義針對(duì)搜索引擎的關(guān)鍵字，代碼如下：<metaname="keywords"content="網(wǎng)頁(yè)制作,HTML,Dreamweaver">任務(wù)2設(shè)置“在線學(xué)習(xí)網(wǎng)”的首頁(yè)文件頭部信息2.3頁(yè)面的頭部摘要信息2.3.6使用<meta>設(shè)置網(wǎng)頁(yè)描述信息基本語(yǔ)法格式如下：<metaname="discription"content="描述內(nèi)容">例如，在網(wǎng)頁(yè)中設(shè)置為網(wǎng)站設(shè)計(jì)者提供網(wǎng)頁(yè)制作的說(shuō)明信息，代碼如下：<metaname="discription"content="這是一個(gè)網(wǎng)頁(yè)制作等在線學(xué)習(xí)平臺(tái)，擁有系統(tǒng)的前端和移動(dòng)開(kāi)發(fā)等課程。">任務(wù)2設(shè)置“在線學(xué)習(xí)網(wǎng)”的首頁(yè)文件頭部信息2.3頁(yè)面的頭部摘要信息2.3.7使用<meta>設(shè)置網(wǎng)頁(yè)刷新時(shí)間基本語(yǔ)法格式如下：<metahttp-equiv="refresh"content="刷新間隔時(shí)間">例如，將網(wǎng)頁(yè)設(shè)置為每隔10秒自動(dòng)刷新，代碼如下：<metahttp-equiv="refresh"content="10">任務(wù)2設(shè)置“在線學(xué)習(xí)網(wǎng)”的首頁(yè)文件頭部信息2.3頁(yè)面的頭部摘要信息2.3.8使用<meta>設(shè)置網(wǎng)頁(yè)自動(dòng)跳轉(zhuǎn)基本語(yǔ)法格式如下：<metahttp-equiv="refresh"content="刷新間隔時(shí)間";url="頁(yè)面地址">例如，將網(wǎng)頁(yè)設(shè)置10秒之后，網(wǎng)頁(yè)自動(dòng)跳轉(zhuǎn)到中國(guó)大學(xué)慕課網(wǎng)站首頁(yè)，代碼如下：<metahttp-equiv="refresh"content="10";url="">任務(wù)2設(shè)置“在線學(xué)習(xí)網(wǎng)”的首頁(yè)文件頭部信息任務(wù)實(shí)現(xiàn)

溫馨提示

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