使用HTML制作網(wǎng)頁(yè)_第1頁(yè)
使用HTML制作網(wǎng)頁(yè)_第2頁(yè)
使用HTML制作網(wǎng)頁(yè)_第3頁(yè)
使用HTML制作網(wǎng)頁(yè)_第4頁(yè)
使用HTML制作網(wǎng)頁(yè)_第5頁(yè)
已閱讀5頁(yè)，還剩46頁(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)介

使用HTML制作網(wǎng)頁(yè)

第二單元《靜態(tài)網(wǎng)頁(yè)制作》本門(mén)課程目標(biāo)學(xué)完本門(mén)課程后，你能夠：使用HTML進(jìn)行網(wǎng)頁(yè)布局使用CSS美化網(wǎng)頁(yè)使用JavaScript制作網(wǎng)頁(yè)特效課程項(xiàng)目展示當(dāng)當(dāng)網(wǎng)上書(shū)城演示示例：當(dāng)當(dāng)網(wǎng)上書(shū)城本課任務(wù)制作圖文并茂的簡(jiǎn)單網(wǎng)頁(yè)李清照簡(jiǎn)介頁(yè)面家用電器排行榜頁(yè)面4/37本課目標(biāo)學(xué)完本次課程后，你能夠：熟練掌握HTML基本結(jié)構(gòu)創(chuàng)建網(wǎng)頁(yè)熟練掌握HTML的基本標(biāo)簽掌握超鏈接標(biāo)簽制作頁(yè)面導(dǎo)航熟練掌握表格標(biāo)簽制作網(wǎng)頁(yè)表格會(huì)使用表單標(biāo)簽制作提交頁(yè)面了解XHTML框架結(jié)構(gòu)

什么是HTMLHTMLHyperTextMarkupLanguage（超文本標(biāo)記語(yǔ)言）超文本包括：文字、圖片、音頻、視頻、動(dòng)畫(huà)等HTML的發(fā)展史HTML的發(fā)展史1993-6超文本標(biāo)記語(yǔ)言1995-11HTML2.0HTML3.21996-1-14HTML4.01997-12-18HTML4.011999-12-24XHTML1.02000-1-26XHTML1.12001-5-31XHTML2.0HTML52014-10-28W3C標(biāo)準(zhǔn)W3C：WorldWideWebConsortium（萬(wàn)維網(wǎng)聯(lián)盟）成立于1994年，Web技術(shù)領(lǐng)域最權(quán)威和具影響力的國(guó)際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)//W3C標(biāo)準(zhǔn)包括:結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言（XHTML、XML）表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言（CSS）行為標(biāo)準(zhǔn)（DOM、ECMAScript）網(wǎng)頁(yè)開(kāi)發(fā)軟件TXT記事本EditPlusDreamWeaver演示示例：

使用軟件演示新建網(wǎng)頁(yè)HTML基本結(jié)構(gòu)HTML網(wǎng)頁(yè)基本結(jié)構(gòu)<html><head><title>網(wǎng)頁(yè)標(biāo)題</title>

</head>

<body>

網(wǎng)頁(yè)內(nèi)容<hr/>

</body></html>網(wǎng)頁(yè)頭部（用于設(shè)置網(wǎng)頁(yè)的一些屬性）主體部分（網(wǎng)頁(yè)內(nèi)容編輯區(qū)）1、<body>、</body>等成對(duì)的標(biāo)簽，分別叫開(kāi)放標(biāo)簽和閉合標(biāo)簽;2、單獨(dú)呈現(xiàn)的標(biāo)簽（空元素），如<hr/>；意為用/來(lái)關(guān)閉空元素;注意頁(yè)面規(guī)范聲明DOCTYPE聲明（告訴瀏覽器使用什么規(guī)范）<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>標(biāo)題</title></head><body>

網(wǎng)頁(yè)內(nèi)容</body></html>XHTML1.0版本網(wǎng)頁(yè)編碼設(shè)置<meta>標(biāo)簽-用于定義文件信息<meta

http-equiv="Content-Type"content="text/html;

charset=utf-8"/>推薦utf-8，還可設(shè)置為gb23121、

gb2312包含全部中文字符;utf-8則包含全世界所有國(guó)家需要用到的字符2、頁(yè)面編碼應(yīng)與頁(yè)面文件保存時(shí)的編碼一致注意給標(biāo)簽設(shè)置不同屬性，具體不同的功能案例分析案例分析HTML網(wǎng)頁(yè)分析標(biāo)題標(biāo)簽<h1>斜體標(biāo)簽<em>粗體標(biāo)簽<strong>特殊符號(hào) (空格)換行標(biāo)簽<br/>水平線標(biāo)簽<hr/>段落標(biāo)簽<p>課堂演示需求說(shuō)明：制作清平樂(lè)詩(shī)詞網(wǎng)頁(yè)要求：使用HTML標(biāo)簽實(shí)現(xiàn)演示示例：制作清平樂(lè)詩(shī)詞網(wǎng)頁(yè)小結(jié)2-1網(wǎng)頁(yè)基本標(biāo)簽元素標(biāo)簽說(shuō)明例子<h1>~<h6>標(biāo)題標(biāo)簽(head)<h1>清平樂(lè)·年年雪里</h1><p>段落標(biāo)簽（paragraph）<p>年年雪里，常插梅花醉..</p><br/>換行標(biāo)簽（breakrow）原文：<br/><hr/>水平線標(biāo)簽（horizontalrow）<hr/>原文：

<em>斜體標(biāo)簽<em>朝代:宋代</em><strong>加粗標(biāo)簽<strong>李清照</strong>小結(jié)小結(jié)2-2注釋和特殊符號(hào)特殊符號(hào)字符實(shí)體示例空格

<ahref="#">百度</a> | <ahref="#">新浪</a>大于號(hào)(>)>如果時(shí)間>晚上6點(diǎn)，就坐車(chē)回家小于號(hào)(<)<如果時(shí)間<早上7點(diǎn)，就走路去上學(xué)引號(hào)(")"W3C規(guī)范中，HTML的屬性值必須用成對(duì)的"引起來(lái)版權(quán)符號(hào)@©©2003-2015眾軟小結(jié)<!--HTML注釋內(nèi)容

-->注釋標(biāo)簽規(guī)范

標(biāo)簽規(guī)范（

XHTML標(biāo)簽規(guī)范）：標(biāo)簽名應(yīng)小寫(xiě)HTML標(biāo)簽應(yīng)閉合標(biāo)簽應(yīng)正確嵌套應(yīng)添加文檔類(lèi)型聲明<!DOCTYPE>

書(shū)寫(xiě)HTML頁(yè)面時(shí)，請(qǐng)遵循XHTML標(biāo)簽規(guī)范注意課堂練習(xí)需求說(shuō)明標(biāo)題用標(biāo)題標(biāo)簽，人名加粗顯示，時(shí)間斜體顯示，并制作頁(yè)面版權(quán)部分完成時(shí)間：10分鐘共性問(wèn)題集中講解圖像標(biāo)簽2-1常見(jiàn)的圖像格式圖像類(lèi)型優(yōu)點(diǎn)缺點(diǎn)*.jpg體積小，較清晰.適合色彩豐富的圖像有損壓縮，畫(huà)面失真*.gif體積小、支持動(dòng)畫(huà)圖片，較為常用的網(wǎng)頁(yè)圖片類(lèi)型支持有限的透明度,效果不如其他PNG圖片*.bmp支持24位顏色深度，兼容性好不支持壓縮，容量大*.png最新的圖片格式，兼有GIF和JPG的優(yōu)勢(shì)部分瀏覽器（IE.6）不支持透明圖像標(biāo)簽2-2<imgsrc="path"alt="text"title="text"width="x"height="y"/>圖像路徑（絕對(duì)路徑&相對(duì)路徑）圖像的替代文字語(yǔ)法鼠標(biāo)懸停提示文字圖像寬度圖像高度<imgsrc="image/hetao.jpg"width="160"height="160"alt="無(wú)漂白薄皮核桃"title="無(wú)漂白薄皮核桃"/>示例演示示例：圖像標(biāo)簽超鏈接標(biāo)簽<ahref="path"target="目標(biāo)窗口位置">

鏈接文本或圖像</a>鏈接路徑鏈接在哪個(gè)窗口打開(kāi),常用值：_self、_blank語(yǔ)法示例演示示例：超鏈接錨鏈接錨鏈接從A頁(yè)面的甲位置跳轉(zhuǎn)到本頁(yè)中的乙位置(同一頁(yè)面)從A頁(yè)面的甲位置跳轉(zhuǎn)到B頁(yè)面中的乙位置(兩個(gè)頁(yè)面)創(chuàng)建步驟創(chuàng)建跳轉(zhuǎn)標(biāo)記

創(chuàng)建跳轉(zhuǎn)鏈接<aname="marker">乙位置</a><ahref="#marker">甲位置</a>演示示例：錨鏈接課堂練習(xí)需求說(shuō)明制作家用電器排行榜頁(yè)面標(biāo)題使用標(biāo)題標(biāo)簽家電名稱(chēng)加上超鏈接商品之間使用水平線分隔教員講需求實(shí)現(xiàn)思路家用電器排行榜放在標(biāo)題<h1>標(biāo)簽中圖像使用<img>標(biāo)簽商品名稱(chēng)使用超鏈接<a>標(biāo)簽商品之間使用<hr>標(biāo)簽實(shí)現(xiàn)分隔完成時(shí)間：10分鐘共性問(wèn)題集中講解HTML列表無(wú)序列表有序列表定義列表無(wú)序列表語(yǔ)法說(shuō)明沒(méi)有順序，每個(gè)<li>標(biāo)簽獨(dú)占一行默認(rèn)<li>標(biāo)簽項(xiàng)前有實(shí)心小圓點(diǎn)一般用于無(wú)序類(lèi)型的列表，如導(dǎo)航，側(cè)邊欄新聞列表等

<ul

><li>列表項(xiàng)內(nèi)容一</li> <li>列表項(xiàng)內(nèi)容x</li>

<li>列表項(xiàng)內(nèi)容最后一項(xiàng)</li></ul>有序列表語(yǔ)法說(shuō)明有順序，每個(gè)<li>標(biāo)簽獨(dú)占一行默認(rèn)<li>標(biāo)簽項(xiàng)前有順序標(biāo)記可通過(guò)修改<ol>標(biāo)簽的type屬性值(a,A等)更改一般用于排序類(lèi)型的列表，如試卷，問(wèn)卷選項(xiàng)等<ol><li>列表項(xiàng)內(nèi)容一</li> <li>列表項(xiàng)內(nèi)容x</li>

<li>列表項(xiàng)內(nèi)容最后一項(xiàng)</li></ol>定義列表語(yǔ)法說(shuō)明沒(méi)有順序,每個(gè)<dt>、<dd>標(biāo)簽獨(dú)占一行默認(rèn)沒(méi)有標(biāo)記<dl><dt>咖啡</dt> <dd>黑色的熱飲料</dd> <dt>Milk</dt> <dd>白色的冷飲料</dd></dl>表單—學(xué)習(xí)目標(biāo)了解什么是表單知道表單的作用掌握如何制作表單為什么使用表單用戶登錄/注冊(cè)收集用戶反饋信息提供搜索工具表單的典型應(yīng)用表單的執(zhí)行原理Internet12客戶端：請(qǐng)求登錄，通過(guò)表單填寫(xiě)賬戶信息服務(wù)器端：驗(yàn)證發(fā)來(lái)的賬號(hào)信息，然后給出反饋客戶端和服務(wù)器類(lèi)似兩人溝通一樣，從而建立交互活動(dòng)表單的典型應(yīng)用：假定登錄126郵箱單行文本框(text)單選按鈕(radio)復(fù)選框(checkbox)下拉列表(select)重置按鈕(reset)提交按鈕(submit)密碼框(password)常見(jiàn)的表單元素文本域(textarea)文件選擇框(file)<formaction="表單提交地址"method="提交方法">

…文本框、按鈕等表單元素…</form>表單基本結(jié)構(gòu)--<form>標(biāo)簽

語(yǔ)法action屬性：如果為空則代表向當(dāng)前頁(yè)面提交method屬性：可選值post|get

get方法提交參數(shù)在地址欄可見(jiàn)

post方法一般用于多數(shù)據(jù)、保密數(shù)據(jù)提交

注意<inputname="表單元素名稱(chēng)"type="類(lèi)型"value="值"size="顯示寬度"maxlength=“最大長(zhǎng)度"checked="是否選中"/>表單基本元素-<input>標(biāo)簽語(yǔ)法type屬性：可選值text（默認(rèn)）、password、button、checkbox、radio等checked屬性：

僅與<inputtype="checkbox">或<inputtype="radio">配合使用，選中值為checked

注意課堂演示需求說(shuō)明使用表單元素制作注冊(cè)頁(yè)面要求：制作注冊(cè)頁(yè)面內(nèi)容使用HTML基本標(biāo)簽完成演示示例：商城注冊(cè)頁(yè)面2-1小結(jié)各類(lèi)表單元素type功能例子text單行文本輸入<inputtype="text"name="username"/>password密碼<inputtype="password"name="password"/>radio單選<inputtype="radio"name="sex"value="男"/>男<inputtype="radio"name="sex"value="女"/>女checkbox多選<inputtype="checkbox"name="hobby"value="書(shū)"/>書(shū)<inputtype="checkbox"name="hobby"value="畫(huà)"/>畫(huà)reset重置表單數(shù)據(jù)<inputtype="reset"value="重置"/>file文件上傳<inputtype="file"name="files"/>submit提交表單數(shù)據(jù)<inputtype="submit"value="提交"/>hidden隱藏域<inputtype="hidden"name="name"value="1"/>button普通按鈕<inputtype="button"value="播放音樂(lè)"/>小結(jié)課堂練習(xí)需求說(shuō)明：完成網(wǎng)站登錄頁(yè)面完成時(shí)間：10分鐘共性問(wèn)題集中講解1、提交地址：login.html2、提交方法：post其他表單元素<select

name="指定列表名稱(chēng)"size="顯示的行數(shù)">

<option

value="選項(xiàng)值"selected="selected">…</option>……</select><textarea

name="..."

cols="列寬"

rows="行寬">文本內(nèi)容</textarea>列表框文本域

關(guān)聯(lián)表單元素

<labelfor="username">姓名:</label><inputname="name"id="username"size="20"/>或<label>姓名:<inputname="name"size="20"/></label>表單的高級(jí)用法2-1點(diǎn)擊label標(biāo)簽鼠標(biāo)聚焦文本框中<labelfor="關(guān)聯(lián)元素ID"></label>語(yǔ)法示例只讀屬性readonly：希望某個(gè)框內(nèi)的內(nèi)容只允許用戶看，不能修改禁用屬性disabled：因沒(méi)達(dá)到使用的條件，限制用戶使用示例表單的高級(jí)用法2-2<inputtype="text"name=""value="123"readonly="readonly"/><inputtype="button"name=""value="點(diǎn)擊"disabled="disabled"/>課堂演示需求說(shuō)明使用表單元素制作注冊(cè)頁(yè)面要求繼續(xù)完善注冊(cè)頁(yè)面完成“出生日期”項(xiàng)完成“注冊(cè)條款”項(xiàng)給輸入框加上關(guān)聯(lián)元素標(biāo)簽演示示例：商城注冊(cè)頁(yè)面2-2課堂練習(xí)需求說(shuō)明：使用表單相關(guān)標(biāo)簽制作簡(jiǎn)易求職表表單完成時(shí)間：10分鐘“協(xié)議”只讀，“提交”按鈕禁用用隱藏域提交求職者姓名“zhangsan”共性問(wèn)題集中講解表格—學(xué)習(xí)目標(biāo)掌握表格的基本結(jié)構(gòu)掌握表格跨行、跨列的實(shí)現(xiàn)方式表格應(yīng)用場(chǎng)景哪里用到表格？論壇中應(yīng)用表格系統(tǒng)中應(yīng)用表格<tablewidth="100%"border="1"cellspacing="0"cellpadding="0"bgcolor="gray">

<tr><tdalign="center">第1個(gè)單元格的內(nèi)容</td>

<td>第2個(gè)單元格的內(nèi)容</td>

......

</tr>

<tr>

<td>第1個(gè)單元格的內(nèi)容</td>

<td>第2個(gè)單元格的內(nèi)容</td>

......

</tr></table>表格基本語(yǔ)法語(yǔ)法演示示例：表格基本組成<tr>標(biāo)簽定義列<table>標(biāo)簽定義表格表格的屬性表格常用屬性屬性名功能width/height表格的寬/高，單位可以為像素（px）或百分比（%）border默認(rèn)為表格邊框?yàn)?/p>

0（無(wú)邊框），可設(shè)置為數(shù)值cellspacing控制單元格之間的間距，可設(shè)

溫馨提示

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