使用HTML制作網頁

上傳人：0*** IP屬地：湖北上傳時間：2023-02-02 格式：PPT 頁數：51 大?。?.58MB 積分：28 舉報 版權申訴

已閱讀5頁，還剩46頁未讀，繼續(xù)免費閱讀

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

文檔簡介

使用HTML制作網頁

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

什么是HTMLHTMLHyperTextMarkupLanguage（超文本標記語言）超文本包括：文字、圖片、音頻、視頻、動畫等HTML的發(fā)展史HTML的發(fā)展史1993-6超文本標記語言1995-11HTML2.0HTML3.21996-1-14HTML4.01997-12-18HTML4.011999-12-24XHTML1.02000-1-26XHTML1.12001-5-31XHTML2.0HTML52014-10-28W3C標準W3C：WorldWideWebConsortium（萬維網聯盟）成立于1994年，Web技術領域最權威和具影響力的國際中立性技術標準機構//W3C標準包括:結構化標準語言（XHTML、XML）表現標準語言（CSS）行為標準（DOM、ECMAScript）網頁開發(fā)軟件TXT記事本EditPlusDreamWeaver演示示例：

使用軟件演示新建網頁HTML基本結構HTML網頁基本結構<html><head><title>網頁標題</title>

</head>

<body>

網頁內容<hr/>

</body></html>網頁頭部（用于設置網頁的一些屬性）主體部分（網頁內容編輯區(qū)）1、<body>、</body>等成對的標簽，分別叫開放標簽和閉合標簽;2、單獨呈現的標簽（空元素），如<hr/>；意為用/來關閉空元素;注意頁面規(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>標題</title></head><body>

網頁內容</body></html>XHTML1.0版本網頁編碼設置<meta>標簽-用于定義文件信息<meta

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

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

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

<em>斜體標簽<em>朝代:宋代</em><strong>加粗標簽<strong>李清照</strong>小結小結2-2注釋和特殊符號特殊符號字符實體示例空格

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

標簽規(guī)范（

XHTML標簽規(guī)范）：標簽名應小寫HTML標簽應閉合標簽應正確嵌套應添加文檔類型聲明<!DOCTYPE>

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

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

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

<ul

><li>列表項內容一</li> <li>列表項內容x</li>

<li>列表項內容最后一項</li></ul>有序列表語法說明有順序，每個<li>標簽獨占一行默認<li>標簽項前有順序標記可通過修改<ol>標簽的type屬性值(a,A等)更改一般用于排序類型的列表，如試卷，問卷選項等<ol><li>列表項內容一</li> <li>列表項內容x</li>

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

…文本框、按鈕等表單元素…</form>表單基本結構--<form>標簽

語法action屬性：如果為空則代表向當前頁面提交method屬性：可選值post|get

get方法提交參數在地址欄可見

post方法一般用于多數據、保密數據提交

注意<inputname="表單元素名稱"type="類型"value="值"size="顯示寬度"maxlength=“最大長度"checked="是否選中"/>表單基本元素-<input>標簽語法type屬性：可選值text（默認）、password、button、checkbox、radio等checked屬性：

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

注意課堂演示需求說明使用表單元素制作注冊頁面要求：制作注冊頁面內容使用HTML基本標簽完成演示示例：商城注冊頁面2-1小結各類表單元素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="書"/>書<inputtype="checkbox"name="hobby"value="畫"/>畫reset重置表單數據<inputtype="reset"value="重置"/>file文件上傳<inputtype="file"name="files"/>submit提交表單數據<inputtype="submit"value="提交"/>hidden隱藏域<inputtype="hidden"name="name"value="1"/>button普通按鈕<inputtype="button"value="播放音樂"/>小結課堂練習需求說明：完成網站登錄頁面完成時間：10分鐘共性問題集中講解1、提交地址：login.html2、提交方法：post其他表單元素<select

name="指定列表名稱"size="顯示的行數">

<option

value="選項值"selected="selected">…</option>……</select><textarea

name="..."

cols="列寬"

rows="行寬">文本內容</textarea>列表框文本域

關聯表單元素

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

<tr><tdalign="center">第1個單元格的內容</td>

<td>第2個單元格的內容</td>

......

</tr>

<tr>

<td>第1個單元格的內容</td>

<td>第2個單元格的內容</td>

......

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

0（無邊框），可設置為數值cellspacing控制單元格之間的間距，可設

人人文庫> 全部分類> 教育資料 > 輔導培訓

溫馨提示

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

使用HTML制作網頁

文檔簡介

溫馨提示

最新文檔

評論

使用HTML制作網頁

文檔簡介

溫馨提示

最新文檔

評論

相關文檔