網(wǎng)站規(guī)劃建設(shè)與管理維護(hù)（第三版） 課件 單元3 使用HTML5編寫網(wǎng)頁_第1頁
網(wǎng)站規(guī)劃建設(shè)與管理維護(hù)（第三版） 課件 單元3 使用HTML5編寫網(wǎng)頁_第2頁
網(wǎng)站規(guī)劃建設(shè)與管理維護(hù)（第三版） 課件 單元3 使用HTML5編寫網(wǎng)頁_第3頁
網(wǎng)站規(guī)劃建設(shè)與管理維護(hù)（第三版） 課件 單元3 使用HTML5編寫網(wǎng)頁_第4頁
網(wǎng)站規(guī)劃建設(shè)與管理維護(hù)（第三版） 課件 單元3 使用HTML5編寫網(wǎng)頁_第5頁
已閱讀5頁，還剩35頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

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

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

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

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

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

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

相關(guān)知識<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)知識

相關(guān)知識任務(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)建滾動效果任務(wù)實(shí)施-編寫網(wǎng)頁體驗任務(wù)實(shí)施-編寫網(wǎng)頁體驗任務(wù)實(shí)施-編寫網(wǎng)頁體驗任務(wù)實(shí)施-編寫網(wǎng)頁體驗任務(wù)實(shí)施-編寫網(wǎng)頁體驗

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

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

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

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

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

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

性用

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

性用

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

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

性用

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

性用

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

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論