Web前端開發(fā)課件 項(xiàng)目一 HTML文檔結(jié)構(gòu)_第1頁(yè)
Web前端開發(fā)課件 項(xiàng)目一 HTML文檔結(jié)構(gòu)_第2頁(yè)
Web前端開發(fā)課件 項(xiàng)目一 HTML文檔結(jié)構(gòu)_第3頁(yè)
Web前端開發(fā)課件 項(xiàng)目一 HTML文檔結(jié)構(gòu)_第4頁(yè)
Web前端開發(fā)課件 項(xiàng)目一 HTML文檔結(jié)構(gòu)_第5頁(yè)
已閱讀5頁(yè)，還剩63頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

HTML文檔結(jié)構(gòu)項(xiàng)目一授課教師：姓名WEB前端開發(fā)Contents一項(xiàng)目描述本項(xiàng)目學(xué)習(xí)要點(diǎn)HTML5文件的基本結(jié)構(gòu)；HTML5基本標(biāo)簽；Sublime編輯器的使用；HTML5語(yǔ)法的變化；Chrome瀏覽器中的開發(fā)者工具。二知識(shí)準(zhǔn)備網(wǎng)頁(yè)文件是使用標(biāo)記語(yǔ)言書寫的，這種語(yǔ)言稱為超文本標(biāo)記語(yǔ)言（HyperTextMarkupLanguage，HTML），它是制作頁(yè)面的標(biāo)準(zhǔn)語(yǔ)言。HTML是一種描述語(yǔ)言，而不是一種編程語(yǔ)言，主要用于描述超文本中的內(nèi)容和結(jié)構(gòu)。標(biāo)記語(yǔ)言從誕生至今，經(jīng)歷了20多年，發(fā)展過程中也有很多曲折，經(jīng)歷的版本從1.0到5.0有10個(gè)版本。<標(biāo)簽符>內(nèi)容</標(biāo)簽符>標(biāo)簽符一般都是成對(duì)出現(xiàn)，有一個(gè)開始符號(hào)和一個(gè)結(jié)束符號(hào)，結(jié)束符號(hào)只是在開頭符號(hào)的前面加一個(gè)斜杠“/”。“<>”和“/”必須在英文狀態(tài)下輸入。例如：<p></p>、<strong></strong>二知識(shí)準(zhǔn)備HTML5文件的基本結(jié)構(gòu)；HTML5基本標(biāo)簽；Sublime編輯器的使用；HTML5語(yǔ)法的變化；Chrome瀏覽器中的開發(fā)者工具。HTML5文件的基本結(jié)構(gòu)HTML5基本語(yǔ)法完整的HTML文件包括標(biāo)題、段落、列表、表格、回執(zhí)的圖形以及各種嵌入的對(duì)象，這些對(duì)象統(tǒng)稱為HTML元素。一個(gè)HTML5文檔中，必須包含<html></html>標(biāo)簽，并且放在一個(gè)HTML5文檔中的開始和結(jié)束位置。<html></html>之間通常包含兩個(gè)部分，分別為<head></head>和<body></body>，head標(biāo)簽包含html頭部信息，例如文檔標(biāo)題、樣式定義等。body包含文檔主體部分，即網(wǎng)頁(yè)內(nèi)容。注意：html標(biāo)簽不區(qū)分大小寫HTML5文件的基本結(jié)構(gòu)HTML5基本結(jié)構(gòu)<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>網(wǎng)頁(yè)標(biāo)題</title></head><body>

網(wǎng)頁(yè)內(nèi)容</body></html><!DOCTYPEHTML>文檔聲明HTML文檔的開始標(biāo)簽HTML的頭部信息開始標(biāo)簽HTML的頭部信息結(jié)束標(biāo)簽HTML的文檔主體開始標(biāo)簽HTML的文檔主體結(jié)束標(biāo)簽HTML文檔的結(jié)束標(biāo)簽HTML5文件的基本結(jié)構(gòu)HTML5基本結(jié)構(gòu)該聲明告知瀏覽器文檔所使用的HTML規(guī)范。此聲明不屬于HTML標(biāo)簽，它是一條指令，告訴瀏覽器編寫頁(yè)面所用的標(biāo)簽的版本。<!DOCTYPEHTML>文檔聲明HTML文檔的開始標(biāo)簽HTML的頭部信息開始標(biāo)簽HTML的頭部信息結(jié)束標(biāo)簽HTML的文檔主體開始標(biāo)簽HTML的文檔主體結(jié)束標(biāo)簽HTML文檔的結(jié)束標(biāo)簽說明本頁(yè)面是用HTML語(yǔ)言編寫的，讓瀏覽器能夠準(zhǔn)確無(wú)誤地解釋和顯示頭部信息不顯示在網(wǎng)頁(yè)中，此標(biāo)簽內(nèi)可以包含一些其他標(biāo)簽，用于說明文件標(biāo)題和整個(gè)文件的一些公用屬性。可以通過<style>標(biāo)簽定義CSS樣式表，通過<script>標(biāo)簽定義Javascript腳本文件包含HTML頁(yè)面的實(shí)際內(nèi)容，顯示在瀏覽器窗口的客戶區(qū)中。例如，在頁(yè)面中，文字、圖像、動(dòng)畫、超鏈接以及其他HTML相關(guān)的內(nèi)容都是定義在body標(biāo)簽里面的HTML5基本標(biāo)簽1.文檔類型說明<!DOCTYPEhtml>HTML5中Web頁(yè)面的文檔類型說明（DOCTYPE）被極大地簡(jiǎn)化了，簡(jiǎn)單到15個(gè)字符就可以了，代碼如下：HTML5基本標(biāo)簽2.HTML標(biāo)簽<html> …</html>HTML標(biāo)簽以<html>開頭，以</html>結(jié)尾，文檔的所有內(nèi)容寫在開頭和結(jié)尾的中間部分。<html>標(biāo)簽的作用相當(dāng)于設(shè)計(jì)者在告訴瀏覽器，整個(gè)網(wǎng)頁(yè)是從<html>這里開始的，然后到</html>結(jié)束。語(yǔ)法格式如下：HTML5基本標(biāo)簽3.head標(biāo)簽<head> …</head>head標(biāo)簽用于說明文檔頭部的相關(guān)信息，一般包括標(biāo)題信息、元信息、定義CSS樣式和腳本代碼等。HTML的頭部信息以<head>開始，以</head>結(jié)束。語(yǔ)法格式如下：<head>元素的作用范圍是整篇文檔，定義在HTML語(yǔ)言頭部的內(nèi)容往往不會(huì)在網(wǎng)頁(yè)上直接顯示。HTML5基本標(biāo)簽3.head標(biāo)簽在頭標(biāo)簽<head>與</head>之間還可以插入標(biāo)題標(biāo)簽title、元信息標(biāo)簽meta、link標(biāo)簽、style標(biāo)簽、script標(biāo)簽、base標(biāo)簽。（1）<head>標(biāo)簽中的<title>標(biāo)簽HTML頁(yè)面的標(biāo)題一般是用來(lái)說明頁(yè)面用途的，它顯示在瀏覽器的標(biāo)題欄中，在HTML文檔中，標(biāo)題信息設(shè)置在<head>與</head>之間。標(biāo)題標(biāo)簽以<title>開始，以</title>結(jié)束。語(yǔ)法格式如下：<title> …</title>HTML5基本標(biāo)簽3.head標(biāo)簽（2）<head>標(biāo)簽中的<meta>標(biāo)簽<meta>標(biāo)簽是<head>標(biāo)簽內(nèi)的一個(gè)輔助性標(biāo)簽。<meta>標(biāo)簽提供的信息不顯示在頁(yè)面中，一般用來(lái)定義頁(yè)面的關(guān)鍵字、頁(yè)面的描述等，以方便搜索引擎來(lái)搜索到頁(yè)面的信息。①字符集charset屬性在HTML5中，有一個(gè)新的charset屬性，它使字符集的定義更加容易。例如： <metacharset="UTF-8">HTML5基本標(biāo)簽3.head標(biāo)簽（2）<head>標(biāo)簽中的<meta>標(biāo)簽②頁(yè)面描述metadescription元標(biāo)簽是一種HTML元標(biāo)簽，用來(lái)簡(jiǎn)略描述網(wǎng)頁(yè)的主要內(nèi)容，是通常被搜索引擎用在搜索結(jié)果頁(yè)上展示給最終用戶看的一段文字。頁(yè)面描述在網(wǎng)頁(yè)中并不顯示出來(lái)，頁(yè)面描述的使用格式如下：<metaname="description"content="Web前端設(shè)計(jì)"/>HTML5基本標(biāo)簽3.head標(biāo)簽（2）<head>標(biāo)簽中的<meta>標(biāo)簽③頁(yè)面跳轉(zhuǎn)使用<meta>標(biāo)簽可以使網(wǎng)頁(yè)在經(jīng)過一定時(shí)間后自動(dòng)刷新，這可通過將http-equiv屬性值設(shè)置為refresh來(lái)實(shí)現(xiàn)。content屬性值可以設(shè)置為更新時(shí)間。<metahttp-equiv="refresh"content="秒;[url=網(wǎng)址]">在瀏覽頁(yè)面時(shí)經(jīng)常會(huì)看到一些歡迎信息的頁(yè)面，在經(jīng)過一段時(shí)間后，這些頁(yè)面會(huì)自動(dòng)轉(zhuǎn)到其他頁(yè)面，這就是網(wǎng)頁(yè)的跳轉(zhuǎn)。頁(yè)面定時(shí)跳轉(zhuǎn)的語(yǔ)法格式如下：例如：<metahttp-equiv="refresh"content="5;url="/>HTML5基本標(biāo)簽3.head標(biāo)簽（2）<head>標(biāo)簽中的<meta>標(biāo)簽④搜素引擎的關(guān)鍵詞Keywords關(guān)鍵詞對(duì)搜素引擎的排名算法起到一定的作用，也是進(jìn)行網(wǎng)頁(yè)優(yōu)化的基礎(chǔ)。使用格式如下：<metaname="keywords"content="關(guān)鍵詞1,關(guān)鍵詞2"/>不同的關(guān)鍵詞之間使用英文輸入狀態(tài)下的逗號(hào)隔開。例如，定義針對(duì)搜素引擎的關(guān)鍵詞，代碼如下：<metaname="keywords"content="html5,css3,javascript,html,css"/>HTML5基本標(biāo)簽3.head標(biāo)簽（3）<head>標(biāo)簽中的<link>標(biāo)簽<link>標(biāo)簽用于外部文件的鏈接，一般用于鏈接外部CSS樣式表文件和JS文件。語(yǔ)法格式：<linkrel="stylesheet"type="text/css"href="theme.css"/>其中，rel指定鏈接到樣式表，其值為stylesheet；type表示樣式表類型為CSS樣式表；href指定CSS樣式表所在的位置，此處表示當(dāng)前路徑下名稱為theme.css的文件。這里使用的是相對(duì)路徑，如果HTML文檔與CSS樣式表沒有在同一路徑下，則需要指定樣式表的絕對(duì)路徑或引用位置。HTML5基本標(biāo)簽3.head標(biāo)簽【例1-1】創(chuàng)建一個(gè)link鏈接外部CSS文件的實(shí)例，代碼如下所示（示例文件1-1.html）<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>鏈接外部CSS文件</title> <linkrel="stylesheet"href="css/style.css"></head><body> <imgsrc="images/writing.png"alt=""></body></html>img標(biāo)簽在網(wǎng)頁(yè)中插入一個(gè)圖片（此圖片文件在與1-1.html文件同級(jí)的images文件夾中）img{ width:200px; height:200px; border:5pxsolid#f00;}新建CSS文件夾（此文件夾與1-1.html文件在同一目錄中），在CSS文件夾中創(chuàng)建style.css文件，代碼如下：HTML5基本標(biāo)簽3.head標(biāo)簽【例1-1】創(chuàng)建一個(gè)link鏈接外部CSS文件的實(shí)例，（示例文件1-1.html）<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>鏈接外部CSS文件</title> <linkrel="stylesheet"href="css/style.css"></head><body> <imgsrc="images/writing.png"alt=""></body></html>在chrome瀏覽器中預(yù)覽HTML5基本標(biāo)簽3.head標(biāo)簽（4）<head>標(biāo)簽中的<script>標(biāo)簽<script>標(biāo)簽用于定義客戶端頁(yè)面腳本。常用的腳本有JavaScript，常見的應(yīng)用有時(shí)圖像操作、表單驗(yàn)證以及動(dòng)態(tài)內(nèi)容更新。語(yǔ)法如下：<head> <scripttype="text/javascript"> alert("Web前端設(shè)計(jì)"); </script></head>HTML5基本標(biāo)簽3.head標(biāo)簽（5）<head>標(biāo)簽中的<style>標(biāo)簽<style>標(biāo)簽用于定義元素的CSS樣式。在HTML中插入CSS樣式表的另外一種方法是內(nèi)嵌樣式，內(nèi)嵌樣式就是將CSS代碼添加到<head>與</head>之間的<style>和</style>標(biāo)簽之間。這種寫法雖然沒有完全實(shí)現(xiàn)頁(yè)面內(nèi)容和樣式控制代碼的完全分離，但可以設(shè)置一些比較簡(jiǎn)單的樣式，并統(tǒng)一頁(yè)面樣式。其格式如下：<head> <style> … </style></head>HTML5基本標(biāo)簽3.head標(biāo)簽【例1-2】將例1-1用內(nèi)嵌樣式表示，代碼如右（示例文件1-2.html）<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>內(nèi)嵌樣式的CSS代碼示例</title> <style> img{ width:200px; height:200px; border:5pxsolid#f00; } </style></head><body> <imgsrc="images/writing.png"alt=""></body></html>HTML5基本標(biāo)簽4.body標(biāo)簽網(wǎng)頁(yè)所要顯示的內(nèi)容都要放在body標(biāo)簽內(nèi)，他是HTML文件的重點(diǎn)，<body>標(biāo)簽的作用就是定義了網(wǎng)頁(yè)主題內(nèi)容的開始和結(jié)束。然而它并不僅僅是一個(gè)形式上的標(biāo)簽，它本身也可以控制網(wǎng)頁(yè)的背景顏色或背景圖片。HTML5基本標(biāo)簽5.頁(yè)面注釋標(biāo)簽<!----><!--注釋的內(nèi)容-->注釋是在HTML代碼中插入描述性的文本，用來(lái)解釋該代碼或提示其他信息。注釋也只出現(xiàn)在代碼中，瀏覽器對(duì)注釋代碼不進(jìn)行解釋，在瀏覽器頁(yè)面中不顯示。在編寫HTML代碼時(shí)，我們經(jīng)常要在一些關(guān)鍵代碼旁做一下注釋，這樣做方便理解、方便查找或方便其他程序員了解你的代碼，而且可以方便以后編寫者對(duì)自己的代碼進(jìn)行修改。語(yǔ)法格式如下：Sublime編輯器的使用1.SublimeText編輯器的安裝用戶可以自己從網(wǎng)站（/）上下載SublimeText3的中文版安裝程序。雙擊SublimeText3的安裝程序，單擊“立即安裝”按鈕，打開如圖所示對(duì)話框。修改安裝路徑，然后單擊“下一步”按鈕Sublime編輯器的使用2.SublimeText3下Emmet的使用技巧（1）初始化文檔HTML文檔需要包含一些固定的標(biāo)簽，比如<html>、<head>、<body>等，在好多的編輯器中需要一個(gè)個(gè)輸入，而使用Emmet插件只需要1秒鐘就可以輸入這些標(biāo)簽。輸入“!”或“html:5”，然后按Tab鍵或Ctrl+E快捷鍵，即可出現(xiàn)如圖所示的代碼。Sublime編輯器的使用2.SublimeText3下Emmet的使用技巧（2）添加ID在元素名稱和ID之間輸入“#”，Emmet會(huì)自動(dòng)補(bǔ)全代碼。如輸入“p#ok”后按Tab鍵，結(jié)果如圖所示。Sublime編輯器的使用2.SublimeText3下Emmet的使用技巧（3）添加類在輸入時(shí)類名稱之前加“.”，Emmet會(huì)自動(dòng)補(bǔ)全代碼。如輸入“p.text#ok”后按Tab鍵，結(jié)果如圖所示。Sublime編輯器的使用2.SublimeText3下Emmet的使用技巧（4）添加文本和屬性在輸入HTML元素的內(nèi)容時(shí)，將內(nèi)容用“{}”括起來(lái)。如輸入“h1{北京理工大學(xué)出版社}”后按Tab鍵，結(jié)果如圖所示。Sublime編輯器的使用2.SublimeText3下Emmet的使用技巧（4）添加文本和屬性對(duì)于HTML元素的屬性則用“[]”括起來(lái)。如輸入“a[href=#]”后按Tab鍵，結(jié)果如圖所示。Sublime編輯器的使用2.SublimeText3下Emmet的使用技巧（5）標(biāo)簽的嵌套① +：同級(jí)標(biāo)簽符號(hào)，如輸入“h1+h2”后按Tab鍵，結(jié)果如圖所示。② >：子元素符號(hào)，表示嵌套的元素，如輸入“p>span”后按Tab鍵，結(jié)果如圖所示。Sublime編輯器的使用2.SublimeText3下Emmet的使用技巧（5）標(biāo)簽的嵌套③ ^：可以使該符號(hào)前的標(biāo)簽提升一行，如輸入“p>span^p”后按Tab鍵，結(jié)果如圖所示。Sublime編輯器的使用2.SublimeText3下Emmet的使用技巧（6）代碼組合Emmet使用標(biāo)簽的嵌套和括號(hào)可以快速生成代碼組合。如輸入“（.text>h1）+（.map>h2）”后按Tab鍵，結(jié)果如圖所示。Sublime編輯器的使用2.SublimeText3下Emmet的使用技巧（7）隱式標(biāo)簽使用Emmet進(jìn)行快速輸入時(shí)，如只輸入“.text”，Emmet會(huì)根據(jù)父標(biāo)簽進(jìn)行判定從而得到不同的代碼。下面是所有的隱式標(biāo)簽名稱。①li：用于ul和ol中。②tr：用于table、tbody、thead和tfoot中。③td：用于tr中。④ option：用于select和optgroup中。如圖所示，在不同的標(biāo)簽下，同樣輸入“.text”卻得到不同的結(jié)果。Sublime編輯器的使用2.SublimeText3下Emmet的使用技巧（7）隱式標(biāo)簽Sublime編輯器的使用2.SublimeText3下Emmet的使用技巧（8）定義多個(gè)元素Emmet可以使用“*”符號(hào)來(lái)定義多個(gè)元素，如輸入“ul>li*3”后按Tab鍵，結(jié)果如圖所示。Sublime編輯器的使用2.SublimeText3下Emmet的使用技巧（9）定義多個(gè)帶屬性的元素Emmet使用“$”符號(hào)來(lái)指定編號(hào)，如輸入“ul>li.text$*3”后按Tab鍵，將會(huì)生成如圖所示的代碼。Sublime編輯器的使用2.SublimeText3下Emmet的使用技巧（9）定義多個(gè)帶屬性的元素Emmet可以使用“$@-”符號(hào)來(lái)指定反向編號(hào)，如輸入“ul>li.text$@-*3”后按Tab鍵，將會(huì)生成如圖所示的代碼。HTML5語(yǔ)法的變化2.SublimeText3下Emmet的使用技巧為了兼容各個(gè)不統(tǒng)一的頁(yè)面代碼，HTML5的設(shè)計(jì)在語(yǔ)法上做了以下變化。1.標(biāo)簽不再區(qū)分大小寫。2.允許屬性值不使用引號(hào)。3.允許部分屬性值的屬性省略。Chrome瀏覽器的開發(fā)者工具1.如何打開開發(fā)者工具（1）直接在頁(yè)面上點(diǎn)擊右鍵，然后選擇審查元素或者檢查。（2）單擊瀏覽器“自定義及控制”按鈕，彈出下拉菜單，選擇“更多工具”下的“開發(fā)者工具”。（3）直接按F12鍵。（4）使用快捷鍵（Ctrl+Shift+I）。Chrome瀏覽器的開發(fā)者工具2.開發(fā)者工具簡(jiǎn)介Chrome開發(fā)者工具中，調(diào)試時(shí)使用最多的三個(gè)功能頁(yè)面是：元素（ELements）、控制臺(tái)（Console）、源代碼（Sources），此外還有網(wǎng)絡(luò)（Network）等，下面主要介紹元素功能頁(yè)面。元素（Elements）：用于查看或修改HTML元素的屬性、CSS屬性、監(jiān)聽事件、斷點(diǎn)等。Chrome瀏覽器的開發(fā)者工具（1）查看元素的代碼和屬性點(diǎn)擊左上角的箭頭圖標(biāo)（或按Ctrl+Shift+C組合鍵）進(jìn)入選擇元素模式，然后從頁(yè)面中選擇需要查看的元素，然后可以在開發(fā)者工具元素（Elements）一欄中定位到該元素源代碼的具體位置。定位到元素的源代碼之后，可以從左側(cè)查看元素的HTML代碼，從右側(cè)查看元素的CSS屬性，如圖所示。2.開發(fā)者工具簡(jiǎn)介Chrome瀏覽器的開發(fā)者工具（2）修改元素的代碼和屬性單擊元素并右擊，可以看到chrome提供的可對(duì)元素進(jìn)行的操作，包括編輯元素代碼（EditasHTML）、修改屬性（Addattribute、Editattribute）等，如圖所示。選擇“EditasHTML”選項(xiàng)時(shí)，元素進(jìn)入編輯模式，可以對(duì)元素的代碼進(jìn)行任意的修改。當(dāng)然，這個(gè)修改也僅對(duì)當(dāng)前的頁(yè)面渲染生效，不會(huì)修改服務(wù)器的源代碼，所以這個(gè)功能是用來(lái)調(diào)試頁(yè)面效果的。2.開發(fā)者工具簡(jiǎn)介Chrome瀏覽器的開發(fā)者工具（2）修改元素的代碼和屬性在元素的Styles頁(yè)面，可以對(duì)元素的CSS屬性進(jìn)行修改，甚至刪除原有、添加新屬性。不過，這些修改僅對(duì)當(dāng)前瀏覽器的頁(yè)面展示生效，不會(huì)修改CSS源代碼，如圖所示，添加了圖片的透明度（opacity）、改變圖片邊框的顏色。這個(gè)功能可以進(jìn)行CSS屬性的修改，來(lái)調(diào)整和完善元素的渲染效果。2.開發(fā)者工具簡(jiǎn)介三項(xiàng)目實(shí)施標(biāo)準(zhǔn)的HTML5網(wǎng)頁(yè)；簡(jiǎn)單的HTML5網(wǎng)頁(yè)。標(biāo)準(zhǔn)的HTML5網(wǎng)頁(yè)啟動(dòng)Sublime程序，執(zhí)行“文件”菜單中的“新建”命令或使用Ctrl+N組合鍵新建一個(gè)文件，執(zhí)行“文件”菜單中的“保存”命令或使用Ctrl+S組合鍵保存文件名稱為1-3.html。第一步標(biāo)準(zhǔn)的HTML5網(wǎng)頁(yè)輸入“!”，按【TAB】鍵就會(huì)按照HTML5規(guī)范自動(dòng)創(chuàng)建如下代碼。第二步<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>Document</title></head><body>

</body></html>標(biāo)準(zhǔn)的HTML5網(wǎng)頁(yè)修改<title>網(wǎng)頁(yè)標(biāo)題、<meta>元信息和注釋內(nèi)容，并在網(wǎng)頁(yè)的主體中添加內(nèi)容，代碼如下：第三步<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <!--設(shè)置瀏覽器的閱讀編碼--> <title>Web前端設(shè)計(jì)</title> <!--設(shè)置網(wǎng)站首頁(yè)的標(biāo)題--> <metaname="keywords"content="Web前端設(shè)計(jì),前端設(shè)計(jì),Web設(shè)計(jì)"> <!--設(shè)置網(wǎng)站的關(guān)鍵字--> <metaname="description"content="Web前端設(shè)計(jì)，和有夢(mèng)想的人一起學(xué)習(xí)HTML5、CSS3和JavaScript技術(shù)。"> <!--網(wǎng)站描述--> </head> <body> <h3>Web前端設(shè)計(jì)特點(diǎn)</h3> <p> Web前端設(shè)計(jì)，緊跟時(shí)代步伐<br> Web前端設(shè)計(jì)，源自企業(yè)需求<br> Web前端設(shè)計(jì)項(xiàng)目驅(qū)動(dòng)教學(xué)，所需即所學(xué)，所學(xué)即所用。<br> </p> </body> </html>標(biāo)準(zhǔn)的HTML5網(wǎng)頁(yè)再次執(zhí)行“文件”菜單中的“保存”命令或使用快捷鍵Ctrl+S保存文件。第四步第五步在頁(yè)面中右擊，從彈出的快捷菜單中選擇“在瀏覽器中打開”命令，效果如圖所示。標(biāo)準(zhǔn)的HTML5網(wǎng)頁(yè)用Sublime編輯器創(chuàng)建一個(gè)文件，保存名稱為1-4.html。第一步第二步輸入“!”，按【TAB】鍵就會(huì)按照HTML5規(guī)范自動(dòng)創(chuàng)建代碼，修改網(wǎng)頁(yè)標(biāo)題，輸入主體內(nèi)容，代碼如下：標(biāo)準(zhǔn)的HTML5網(wǎng)頁(yè)第二步<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>簡(jiǎn)單的HTML5網(wǎng)頁(yè)</title></head><body> <h2>憫農(nóng)二首</h2> <h4>唐代：李紳</h4> <p>

春種一粒粟，秋收萬(wàn)顆子。<br>

四海無(wú)閑田，農(nóng)夫猶餓死。<br> </p> <p>

鋤禾日當(dāng)午，汗滴禾下土。<br>

誰(shuí)知盤中餐，粒粒皆辛苦？<br> </p> <imgsrc="images/minnong.jpg"alt=""></body></html>標(biāo)準(zhǔn)的HTML5網(wǎng)頁(yè)第三步保存網(wǎng)頁(yè)，在chrome瀏覽器預(yù)覽，效果如圖所示。四項(xiàng)目拓展通過項(xiàng)目實(shí)施，能夠制作出簡(jiǎn)單的HTML5網(wǎng)頁(yè)，但對(duì)于文字的大小、顏色和圖片不能控制，此項(xiàng)目利用簡(jiǎn)單CSS代碼對(duì)上例中文本和圖片進(jìn)行格式設(shè)置，制作如圖所示的網(wǎng)頁(yè)。四項(xiàng)目拓展首先要對(duì)左邊的文字進(jìn)行大小、顏色的設(shè)置，右邊圖片大小的設(shè)置，然后讓右邊的圖片和左邊的文字并排顯示在一行。第一步分析需求第二步用Sublime編輯器創(chuàng)建一個(gè)文件，保存名稱為1-5.html，輸入“！”按Tab健，修改title標(biāo)簽內(nèi)容為“簡(jiǎn)單的HTML5+CSS網(wǎng)頁(yè)”。四項(xiàng)目拓展第二步<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>簡(jiǎn)單的HTML5+CSS網(wǎng)頁(yè)</title></head><body>

</body></html>四項(xiàng)目拓展第三步<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>簡(jiǎn)單的HTML5+CSS網(wǎng)頁(yè)</title> <style> h2{color:red;} h4{font-size:9px;color:gray;} p{font-size:14px;color:green;} img{width:170px;} div,img{float:left;} </style></head>在body中創(chuàng)建內(nèi)容，在<head>標(biāo)簽之中用<style>標(biāo)簽添加內(nèi)嵌樣式的CSS代碼。內(nèi)嵌樣式的CSS代碼，其中的h2、h4、p、img和div都是CSS3常用選擇器的一種標(biāo)簽選擇器。例如p選擇器，就是聲明頁(yè)面中所有<p>標(biāo)簽的樣式風(fēng)格。四項(xiàng)目拓展第三步<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>簡(jiǎn)單的HTML5+CSS網(wǎng)頁(yè)</title> <style> h2{color:red;} h4{font-size:9px;color:gray;} p{font-size:14px;color:green;} img{width:170px;} div,img{float:left;} </style></head>h2選擇器聲明第16行“憫農(nóng)二首”的字體顏色為紅色h4選擇器聲明第17行“唐代：李紳”的字體大小為9px（px是像素單位），顏色為灰色p選擇器聲明第18-21行和21-25行里的內(nèi)容的字體大小為14px，顏色為綠色img選擇器聲明第27行中圖片的寬度為170px聲明了div和img選擇器向左浮動(dòng)四項(xiàng)目拓展第三步<body> <div> <h2>憫農(nóng)二首</h2> <h4>唐代：李紳</h4> <p>

春種一粒粟，秋收萬(wàn)顆子。<br>

四海無(wú)閑田，農(nóng)夫猶餓死。<br> </p> <p>

鋤禾日當(dāng)午，汗滴禾下土。<br>

誰(shuí)知盤中餐，粒粒皆辛苦？<br> </p> </div> <imgsrc="images/minnong.jpg"alt=""></body></html>五項(xiàng)目小結(jié)本項(xiàng)目通過項(xiàng)目實(shí)施和項(xiàng)目拓展制作了符合W3C標(biāo)準(zhǔn)的HTML5網(wǎng)頁(yè)、簡(jiǎn)單的HTML5網(wǎng)頁(yè)和利用CSS代碼對(duì)文本及圖片進(jìn)行格式設(shè)置三個(gè)案例，學(xué)習(xí)了HTML5文件的基本結(jié)構(gòu)、基本標(biāo)簽和Sublime編輯器的使用等內(nèi)容，掌握了<head>標(biāo)簽、<title>標(biāo)簽、<meta>標(biāo)簽、<link>標(biāo)簽、<style>標(biāo)簽、編輯器快速輸入以及Chrome瀏覽器開發(fā)者工具使用技巧。五項(xiàng)目小結(jié)HTML5基本結(jié)構(gòu)如圖所示。五項(xiàng)目小結(jié)本項(xiàng)目主要知識(shí)點(diǎn)總結(jié)如表所示。標(biāo)簽內(nèi)部標(biāo)簽說明<HTML>

整個(gè)網(wǎng)頁(yè)是從<html>這里開始，然后到</html>結(jié)束head標(biāo)簽代表頁(yè)面的“頭”，定義一些特殊內(nèi)容，這些內(nèi)容都是在瀏覽器不可見的<head><title>定義網(wǎng)頁(yè)的標(biāo)題<meta>定義網(wǎng)頁(yè)的基本信息（供搜索引擎）<style>定義CSS樣式<link>鏈接外部CSS文件或腳本文件<script>定義腳本語(yǔ)言<base>定義頁(yè)面所有鏈接的基礎(chǔ)定位（用得很少）<body>

代表頁(yè)面的“身”，定義網(wǎng)頁(yè)展示內(nèi)容，這些內(nèi)容都是在瀏覽器可見的<!---->

頁(yè)面注釋標(biāo)簽是為了代碼可讀易懂，注釋的內(nèi)容在瀏覽器不會(huì)顯示出來(lái)HTML5基本標(biāo)簽及說明五項(xiàng)目小結(jié)本項(xiàng)目主要知識(shí)點(diǎn)總結(jié)如表所示。Sublime編輯器的使用技巧類別方法初始化文檔輸入“!”或“html:5”，然后按Tab鍵或ctrl+e快捷鍵添加ID在元素名稱和ID之間輸入“#”添加類在輸入時(shí)類名稱之前加“.”添加文本和屬性將HTML元素的內(nèi)容用“{}”括起來(lái)，元素的屬性用“[]”括起來(lái)標(biāo)簽的嵌套>：子元素符號(hào)，表示嵌套的元素；+：同級(jí)標(biāo)簽符號(hào)；^：可以使該符號(hào)前的標(biāo)簽提升一行代碼組合使用標(biāo)簽的嵌套和括號(hào)可以快速生成代碼組合隱式標(biāo)簽進(jìn)行快速輸入時(shí)，根據(jù)父標(biāo)簽進(jìn)行判定從而得到不同的代碼。隱式標(biāo)簽名稱為：li：用于ul和ol中；tr：用于table、tbody、thead和tfoot中；td：用于tr中；option：用于select和optgroup中定義多個(gè)元素使用“*”符號(hào)來(lái)定義多個(gè)元素定義多個(gè)帶屬性的元素使用“$”符號(hào)來(lái)指定編號(hào)，使用“$@-”符號(hào)來(lái)指定反向編號(hào)六知識(shí)鞏固一、單選題1.以下關(guān)于HTML描述不正確的是（）A.HTML是描述網(wǎng)頁(yè)的語(yǔ)言B.HTML是一種編程語(yǔ)言C.HTML是由標(biāo)記標(biāo)簽組成的D.HTML是超文本標(biāo)記語(yǔ)言2.下面關(guān)于文件路徑的說法錯(cuò)誤的是（）A.“../”是返回當(dāng)前目錄的上一級(jí)目錄B.“../”是返回當(dāng)前目錄的下一級(jí)目錄C.訪問下一級(jí)目錄直接輸入相應(yīng)的目錄名即可D.文件路徑指文件存儲(chǔ)的位置3.在HTML中，下面（）不屬于HTML文檔的基本組成部分A.<STYLE></STYTLE>B.<BODY></BODY>C.<HTML></HTML>D.<HEAD></HEAD>4.HTML5的正確doctype是（）A.<!DOCTYPEhtml>B.<!DOCTYPEHTML5>C.<!DOCTYPEHTMLPUBLIC"D.、//W3C//DTDHTML5.

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說明，都需要本地電腦安裝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)論