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

下載本文檔

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

文檔簡介

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

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

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

任務4使用HTML5制作表格

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

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

相關知識<html>、<head>和<title>標簽<meta>標簽<link>、<base>和<script>標簽<style>標簽、<!--注釋內(nèi)容-->和<body>標簽<p>、<pre>、<br/>和<hr>標簽010203060405HTML5新增結構元素

相關知識

相關知識任務3使用XHML設置格式確定網(wǎng)站建設的目的8888888888888確定網(wǎng)站建設的目的網(wǎng)站結構總體策劃010205任務實施-標簽的使用<hn>標簽的使用<div>和<span>標簽的使用列表的使用確定網(wǎng)站建設的目的03<span>標簽的使用確定網(wǎng)站建設的目的04<marquee>標簽創(chuàng)建滾動效果任務實施-編寫網(wǎng)頁體驗任務實施-編寫網(wǎng)頁體驗任務實施-編寫網(wǎng)頁體驗任務實施-編寫網(wǎng)頁體驗任務實施-編寫網(wǎng)頁體驗

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

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

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

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

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

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

性用

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

性用

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

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

性用

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

性用

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

溫馨提示

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

評論

0/150

提交評論