網(wǎng)站規(guī)劃建設(shè)與管理維護(hù)（第三版） 課件 單元3 使用HTML5編寫網(wǎng)頁(yè)_第1頁(yè)
網(wǎng)站規(guī)劃建設(shè)與管理維護(hù)（第三版） 課件 單元3 使用HTML5編寫網(wǎng)頁(yè)_第2頁(yè)
網(wǎng)站規(guī)劃建設(shè)與管理維護(hù)（第三版） 課件 單元3 使用HTML5編寫網(wǎng)頁(yè)_第3頁(yè)
網(wǎng)站規(guī)劃建設(shè)與管理維護(hù)（第三版） 課件 單元3 使用HTML5編寫網(wǎng)頁(yè)_第4頁(yè)
網(wǎng)站規(guī)劃建設(shè)與管理維護(hù)（第三版） 課件 單元3 使用HTML5編寫網(wǎng)頁(yè)_第5頁(yè)
已閱讀5頁(yè)，還剩35頁(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)介

單元3使用HTML5編寫網(wǎng)頁(yè)網(wǎng)站規(guī)劃建設(shè)與管理維護(hù)（第三版）單元3使用HTML5編寫網(wǎng)頁(yè)學(xué)習(xí)目標(biāo)1了解HTML5的基本語(yǔ)法與格式掌握HTML5各種標(biāo)簽的應(yīng)用會(huì)編寫HTML5網(wǎng)頁(yè)培養(yǎng)學(xué)生精益求精的工作態(tài)度單元內(nèi)容及任務(wù)說(shuō)明

任務(wù)1體驗(yàn)使用HTML5編寫網(wǎng)頁(yè)HTML是HypertextMarkupLanguage（超文本標(biāo)記語(yǔ)言）的縮寫，是一種基于SGML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言）的標(biāo)記語(yǔ)言，是Web用于編輯網(wǎng)頁(yè)的主要工具?，F(xiàn)在我們常常習(xí)慣于用數(shù)字來(lái)描述HTML的版本（如：HTML5）。XML是Web上表示結(jié)構(gòu)化信息的一種標(biāo)準(zhǔn)文本格式，它沒(méi)有復(fù)雜的語(yǔ)法和包羅萬(wàn)象的數(shù)據(jù)定義。本任務(wù)圍繞體驗(yàn)H5編寫網(wǎng)頁(yè)展開。任務(wù)2創(chuàng)建HTML5標(biāo)簽任務(wù)3使用XHML設(shè)置格式HTML5作為一種標(biāo)識(shí)性的語(yǔ)言，是由一些特定符號(hào)和語(yǔ)法組成的，所以理解和掌握都十分容易。

本任務(wù)圍繞學(xué)習(xí)創(chuàng)建HTML5標(biāo)簽展開。在由HTML過(guò)渡到XHTML的過(guò)程中，添加了一些新的元素和屬性，并刪除了一些陳舊的標(biāo)簽和屬性，樣式和內(nèi)容的分離及CSS的引入是其改變的主要原因。應(yīng)當(dāng)注意到，目前Web頁(yè)面上很多都是逐漸淘汰的標(biāo)簽，而且代碼沒(méi)有嚴(yán)格按照標(biāo)準(zhǔn)編寫，例如標(biāo)簽名以大寫形式書寫、屬性值遺漏引號(hào)、頁(yè)面沒(méi)有DOCTYPE聲明等，但這些代碼能被瀏覽器正常顯示。當(dāng)然我們不提倡學(xué)習(xí)其他人的不良編程習(xí)慣，但是有必要在新舊技術(shù)共存的時(shí)期了解各種標(biāo)簽。本任務(wù)圍繞設(shè)置格式任務(wù)展開。單元內(nèi)容及任務(wù)說(shuō)明

任務(wù)4使用HTML5制作表格

表格通常用于顯示各種樣式的數(shù)據(jù)，例如課程表、財(cái)務(wù)報(bào)告和比賽得分表等。有些網(wǎng)頁(yè)設(shè)計(jì)人員也經(jīng)常利用表格來(lái)控制頁(yè)面布局。本任務(wù)圍繞制作表格-班委民意測(cè)評(píng)表任務(wù)展開。任務(wù)5使用HTML5設(shè)計(jì)表單任務(wù)6使用HTML定義框架集表單使網(wǎng)頁(yè)具有交互的功能，使用戶不再單純地接收和閱讀來(lái)自Web服務(wù)器的信息，也可以把自己的要求發(fā)送給服務(wù)器，經(jīng)過(guò)服務(wù)器上的ASP、PHP或JSP等腳本程序的處理后，再將用戶所需信息傳送回客戶端的瀏覽器上，這樣網(wǎng)頁(yè)就具有了交互性。本節(jié)只介紹怎樣使用HTML的標(biāo)簽設(shè)計(jì)表單，至于收集表單數(shù)據(jù)的服務(wù)器處理程序的編制請(qǐng)參看相關(guān)書籍。本任務(wù)圍繞使用HTML5設(shè)計(jì)表單展開。框架集的主要優(yōu)點(diǎn)之一是用戶利用它能夠加載或重新加載單個(gè)框架，而不需要重新加載整個(gè)瀏覽器窗口的全部?jī)?nèi)容。本任務(wù)圍繞使用XHTML定義框架集展開。任務(wù)1體驗(yàn)使用HTML5編寫網(wǎng)頁(yè)任務(wù)實(shí)施-編寫網(wǎng)頁(yè)體驗(yàn)

相關(guān)知識(shí)任務(wù)2創(chuàng)建HTML5標(biāo)簽確定網(wǎng)站建設(shè)的目的01任務(wù)實(shí)施-班級(jí)聚會(huì)網(wǎng)頁(yè)中標(biāo)簽的使用標(biāo)簽的使用任務(wù)實(shí)施-班級(jí)聚會(huì)網(wǎng)頁(yè)中標(biāo)簽的使用

相關(guān)知識(shí)<html>、<head>和<title>標(biāo)簽<meta>標(biāo)簽<link>、<base>和<script>標(biāo)簽<style>標(biāo)簽、<!--注釋內(nèi)容-->和<body>標(biāo)簽<p>、<pre>、<br/>和<hr>標(biāo)簽010203060405HTML5新增結(jié)構(gòu)元素

相關(guān)知識(shí)

相關(guān)知識(shí)任務(wù)3使用XHML設(shè)置格式確定網(wǎng)站建設(shè)的目的8888888888888確定網(wǎng)站建設(shè)的目的網(wǎng)站結(jié)構(gòu)總體策劃010205任務(wù)實(shí)施-標(biāo)簽的使用<hn>標(biāo)簽的使用<div>和<span>標(biāo)簽的使用列表的使用確定網(wǎng)站建設(shè)的目的03<span>標(biāo)簽的使用確定網(wǎng)站建設(shè)的目的04<marquee>標(biāo)簽創(chuàng)建滾動(dòng)效果任務(wù)實(shí)施-編寫網(wǎng)頁(yè)體驗(yàn)任務(wù)實(shí)施-編寫網(wǎng)頁(yè)體驗(yàn)任務(wù)實(shí)施-編寫網(wǎng)頁(yè)體驗(yàn)任務(wù)實(shí)施-編寫網(wǎng)頁(yè)體驗(yàn)任務(wù)實(shí)施-編寫網(wǎng)頁(yè)體驗(yàn)

相關(guān)知識(shí)相關(guān)知識(shí)-<marquee>標(biāo)簽屬性用途direction表示滾動(dòng)的方向，值可以是left、right、up、down、默認(rèn)值為leftbehavior表示滾動(dòng)的方式，值可以是scroll（連續(xù)滾動(dòng)）、slide（滑動(dòng)一次）、alternate（來(lái)回滾動(dòng)）loop表示循環(huán)的次數(shù)，值是正整數(shù)，默認(rèn)為無(wú)限循環(huán)scrollamount表示移動(dòng)速度，值是正整數(shù)，默認(rèn)值為6scrolldelay表示停頓時(shí)間，值是正整數(shù)，默認(rèn)值為0，單位是msvalign表示元素的垂直對(duì)齊方式，值可以是top、middle、bottom，默認(rèn)值為middlealign表示元素的水平對(duì)齊方式，值可以是left、center、right，默認(rèn)值為leftbgcolor表示運(yùn)動(dòng)區(qū)域的背景色，值是十六進(jìn)制的RGB顏色，默認(rèn)值為白色height、width表示運(yùn)動(dòng)區(qū)域的高度和寬度，值是正整數(shù)（單位是像素）或百分?jǐn)?shù)，默認(rèn)width=100%，height為標(biāo)簽內(nèi)元素的高度hspace、vspace表示元素到區(qū)域邊界的水平距離和垂直距離，值是正整數(shù)，單位是像素onmouseover=this.stop()表示當(dāng)鼠標(biāo)移來(lái)時(shí)滾動(dòng)停止onmouseout=this.start()當(dāng)鼠標(biāo)移開時(shí)繼續(xù)滾動(dòng)相關(guān)知識(shí)-<img>標(biāo)簽要將圖像放到網(wǎng)頁(yè)中，通常使用<img>標(biāo)簽，其格式為：<imgsrc="filename">src屬性在<img>標(biāo)簽中是必須賦值的，這個(gè)值可以是圖像文件的路徑及文件名，也可以是網(wǎng)址。屬性用途alt設(shè)置當(dāng)鼠標(biāo)移動(dòng)到圖像上時(shí)顯示的文本align（逐漸淘汰）圖像相對(duì)于網(wǎng)頁(yè)的水平對(duì)齊方式，取值為left、center、right；圖像相對(duì)于周圍文字的對(duì)齊方式，取值為top、middle、bottom?？捎肅SS中的float屬性替代border（逐漸淘汰）設(shè)置圖像的邊框，可以取大于或者等于0的整數(shù)，默認(rèn)單位是像素?？捎肅SS中的border屬性替代width設(shè)置圖像的寬，默認(rèn)單位是像素height設(shè)置圖像的高，默認(rèn)單位是像素hspace（逐漸淘汰）設(shè)置圖像的左右邊距，默認(rèn)單位是像素?？捎肅SS中的padding-left和padding-right屬性替代vspace（逐漸淘汰）設(shè)置圖像的上下邊距，默認(rèn)單位是像素?？捎肅SS中的padding-top和padding-bottom屬性替代相關(guān)知識(shí)-<bgsound>標(biāo)簽<bgsound>標(biāo)簽用以插入背景音樂(lè)，但只適用于IE瀏覽器，在Netscape瀏覽器和Firefox瀏覽器中并不適用，其使用方法如下：

<bgsoundsrc="mysong.mp3"autostart=trueloop=infinite>

該行代碼表示自動(dòng)循環(huán)播放mysong.mp3音樂(lè)文件。使用bgsound設(shè)置背景音樂(lè)，當(dāng)窗口最小化時(shí)就自動(dòng)暫停播放，窗口恢復(fù)時(shí)繼續(xù)播放。屬性用途src設(shè)定背景音樂(lè)文件及路徑，可以是相對(duì)路徑或絕對(duì)路徑（不能播放播放列表文件）autostart是否在音樂(lè)傳完后自動(dòng)播放音樂(lè)。true是，false否（默認(rèn)值）loop是否自動(dòng)重復(fù)播放，loop=2表示重復(fù)兩次，Infinite表示重復(fù)無(wú)限次，也可以用-1表示無(wú)限重復(fù)相關(guān)知識(shí)-<object>和<param>標(biāo)簽<object>標(biāo)簽主要用于定義一個(gè)嵌入的多媒體對(duì)象，比如圖像、音頻、視頻、JavaApplet、ActiveX、PDF以及Flash等。它允許設(shè)定插入HTML文檔中的對(duì)象的數(shù)據(jù)和參數(shù)，以及可用來(lái)顯示和操作數(shù)據(jù)的代碼。<object>標(biāo)簽中一般會(huì)包含<param>標(biāo)簽，<param>標(biāo)簽可用來(lái)定義播放參數(shù)。任務(wù)4使用HTML5制作表格任務(wù)實(shí)施-制作班委民意測(cè)評(píng)表

相關(guān)知識(shí)相關(guān)知識(shí)-<table>標(biāo)簽表格主要由表、格行和單元格三部分組成。<table>…</table>標(biāo)簽對(duì)可用來(lái)創(chuàng)建一個(gè)表格。屬性用途align設(shè)置表格相對(duì)周圍元素的對(duì)齊方式aria增強(qiáng)網(wǎng)頁(yè)在殘障輔助閱讀設(shè)備上的識(shí)別讀取border設(shè)置邊框的寬度，若不設(shè)置此屬性，則邊框?qū)挾饶J(rèn)為0bgcolor設(shè)置表格的背景顏色border-spacing（逐漸淘汰）設(shè)置單元格之間的間距border-collapse（逐漸淘汰）定義折疊單元格邊框的屬性bordercolor（逐漸淘汰）設(shè)置邊框的顏色bordercolorlight（逐漸淘汰）設(shè)置邊框明亮部分的顏色（當(dāng)border的值大于等于1時(shí)才有用）bordercolordark（逐漸淘汰）設(shè)置邊框昏暗部分的顏色（當(dāng)border的值大于等于1時(shí)才有用）cellspacing（逐漸淘汰）設(shè)置表格格子之間空間的大小cellpadding（逐漸淘汰）設(shè)置表格格子邊框與其內(nèi)部?jī)?nèi)容之間空間的大小colspan使單元格跨越多個(gè)列padding添加到單元格中的填充rowspan使單元格跨越多行id唯一表示一個(gè)表格width設(shè)置表格的寬度，單位用絕對(duì)像素值或總寬度的百分比height設(shè)置表格的高度rules設(shè)置表格中的表格線顯示方式，默認(rèn)是allframe設(shè)置表格外部邊框的顯示方式任務(wù)5使用HTML5設(shè)計(jì)表單任務(wù)實(shí)施-使用<label>標(biāo)簽設(shè)計(jì)表單

相關(guān)知識(shí)相關(guān)知識(shí)-<form>標(biāo)簽一個(gè)網(wǎng)頁(yè)可以包含任意數(shù)量的表單，例如一個(gè)頁(yè)面可同時(shí)存在登錄表單、搜索表單、調(diào)查表單等，但是用戶一次只能向服務(wù)器發(fā)送一個(gè)表單的數(shù)據(jù)。表單由<form>標(biāo)簽和<input>等標(biāo)簽組合而成。屬性用

途actionaction的值是數(shù)據(jù)處理程序的程序名，如<formaction="/sendme.asp">，當(dāng)用戶提交表單時(shí)，服務(wù)器將執(zhí)行名為sendme.asp的ASP程序method指定數(shù)據(jù)傳送到服務(wù)器的方式。有兩種主要的方式，當(dāng)method=get時(shí)，將輸入數(shù)據(jù)作為URL的一部分進(jìn)行發(fā)送；當(dāng)method=post時(shí)，將輸入數(shù)據(jù)隱藏在HTTP頭中，用電子郵件接收用戶信息采用這種方式，用該方式傳送的數(shù)據(jù)量要比使用get方式的大得多id用于設(shè)定表單的名稱（替代以前的name屬性）target用來(lái)指定目標(biāo)窗口或目標(biāo)幀，如<formtarget="window">onsubmit單擊表單中的提交按鈕發(fā)送數(shù)據(jù)前觸發(fā)的事件，如<formonsubmit="check_form()">onreset單擊表單中的重設(shè)按鈕發(fā)送數(shù)據(jù)前觸發(fā)的事件相關(guān)知識(shí)-<input>標(biāo)簽1）<input>標(biāo)簽<input>標(biāo)簽用來(lái)定義一個(gè)用戶輸入?yún)^(qū)，用戶可在其中輸入信息，此標(biāo)簽必須放在<form>…</form>標(biāo)簽對(duì)之間。屬

性用

途id定義當(dāng)前input元素的標(biāo)識(shí)號(hào)name定義當(dāng)前input元素的控件名稱，用于發(fā)送給服務(wù)器的“名/值”對(duì)中type決定了輸入數(shù)據(jù)的類型value用于設(shè)置輸入默認(rèn)值，即如果用戶不輸入的話，就采用此默認(rèn)值src是針對(duì)type=image的情況來(lái)說(shuō)的，定義以提交按鈕形式顯示圖像的URLchecked表示復(fù)選框中此項(xiàng)被默認(rèn)選中maxlength表示在輸入單行文本的時(shí)候，輸入字符的最大個(gè)數(shù)size用于設(shè)定在輸入多行文本時(shí)的最大輸入字符數(shù)，采用width、height方式onclick表示在單擊時(shí)調(diào)用指定的子程序onselect表示當(dāng)前項(xiàng)被選擇時(shí)調(diào)用指定的子程序相關(guān)知識(shí)-<textarea>標(biāo)簽2）<textarea>標(biāo)簽<textarea>…</textarea>標(biāo)簽對(duì)用來(lái)創(chuàng)建一個(gè)可以輸入多行的文本框。<textarea>標(biāo)簽具有name、cols、rows等屬性，cols和rows屬性分別用來(lái)設(shè)置文本框的列數(shù)和行數(shù)，這里列與行是以字符數(shù)為單位的。不過(guò)更好的辦法是使用CSS的height和width屬性規(guī)定textarea的尺寸。<textarea>…</textarea>標(biāo)簽對(duì)之間可設(shè)定文本框中默認(rèn)文字。相關(guān)知識(shí)-<select>和<option>標(biāo)簽<select>標(biāo)簽可用于創(chuàng)建單選或多選菜單，供用戶從列表的各數(shù)據(jù)項(xiàng)中選擇一項(xiàng)或多項(xiàng)數(shù)據(jù)輸入。屬

性用

途<selectname="">表示此列表框的名稱<selectsize="">用來(lái)設(shè)置列表的高度，默認(rèn)值為1<selectmultiple="">加入了multiple屬性值后列表框就成了可多選的了；若沒(méi)有加入multiple屬性，顯示的將是一個(gè)彈出式的列表框<optionselected="">值為selected時(shí)表示該項(xiàng)默認(rèn)已選中<optionvalue="">value屬性用來(lái)給<option>指定的那一個(gè)選項(xiàng)賦值，該值是要傳送到服務(wù)器上的，服務(wù)器正是通過(guò)調(diào)用<select>區(qū)域的名字的value屬性來(lái)獲得該區(qū)域選中數(shù)據(jù)項(xiàng)的任務(wù)6使用HTML定義框架集確定網(wǎng)站建設(shè)的目的確定網(wǎng)站建設(shè)的目的0102任務(wù)實(shí)施-使用標(biāo)簽定義框架集使用<frameset>標(biāo)簽定義框架集定義一個(gè)內(nèi)框架任務(wù)實(shí)施-使用<label>標(biāo)簽設(shè)計(jì)表單任務(wù)實(shí)施-使用<label>標(biāo)簽設(shè)計(jì)表單

相關(guān)知識(shí)<frameset>標(biāo)簽<frame>標(biāo)簽010302<iframe>標(biāo)簽相關(guān)知識(shí)-<frameset>標(biāo)簽<frameset>標(biāo)簽定義一個(gè)框架集。其作用是指定一個(gè)框架集，用于組織多個(gè)框架（窗口）和嵌套框架集。每個(gè)框架存有獨(dú)立的文檔(HTML文件)?？蚣芡ǔ５氖褂梅椒ㄊ窃谝粋€(gè)框架中放置目錄（即加入一系列鏈接），當(dāng)點(diǎn)擊鏈接以后在另一個(gè)框架中顯示被鏈接的HTML文件。在其最簡(jiǎn)單的應(yīng)用中，frameset元素僅僅會(huì)規(guī)定在框架集中存在多少列或多少行。必須使用cols或rows屬性。屬

性用

途cols設(shè)置或返回框架集中列的數(shù)目。id設(shè)置或返回框架集的id。rows設(shè)置或返回框架集中行的數(shù)目。className設(shè)置或返回元素的class屬性。dir設(shè)置或返回文本的方向。lang設(shè)置或返回元素的語(yǔ)言代碼。title設(shè)置或返回元素的title屬性。src規(guī)定在框架中顯示的文檔的URL相關(guān)知識(shí)-<frame>標(biāo)簽<frame>標(biāo)簽用于指定框架集中每一個(gè)框架頁(yè)的內(nèi)容，必須附帶一個(gè)src屬性，指示默認(rèn)超鏈接到哪一個(gè)網(wǎng)頁(yè)。屬

性用

途frameborder是否顯示框架周圍的邊框longdesc規(guī)定一個(gè)包含有關(guān)框架內(nèi)容的描述的頁(yè)面marginheight定義框架的上方和下方的邊距marginwidth定義框架的左側(cè)和右側(cè)的邊距name規(guī)定框架的名稱noresize規(guī)定無(wú)法調(diào)整框架的大小scrolling規(guī)定是否在框架中顯示滾動(dòng)條，有三種選擇：yes、no和autosrc規(guī)定在框架中顯示的文檔的URL框架集常用做法是在其中一個(gè)框架中放置導(dǎo)航欄，然后指定鏈接網(wǎng)頁(yè)在另一個(gè)框架中打開。這就需要在鏈

溫馨提示

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