html總結(jié)復(fù)習(xí).ppt

第一講html總結(jié)復(fù)習(xí) HTML文件的基本結(jié)構(gòu) HTML文檔的結(jié)構(gòu) 我的第一個(gè)網(wǎng)頁HelloWorld HTML網(wǎng)頁 頭部部分 主體部分 標(biāo)簽標(biāo)記HTML文檔的開始和結(jié)束 網(wǎng)頁標(biāo)題 網(wǎng)頁內(nèi)容 可以是文本 圖像等 這部分包含文本 圖像和鏈接 它包括在 標(biāo)簽內(nèi) 這部分包括標(biāo)題和其他說明信息 包括在 標(biāo)簽內(nèi) 頁面背景色或背景圖像 HelloWorld 為了使頁面美麗大方 網(wǎng)頁背景要盡量地淺 HelloWorld 查看源代碼 網(wǎng)頁背景色彩 網(wǎng)頁背景圖像 文本相關(guān)標(biāo)簽 字體 字號(hào)標(biāo)題標(biāo)簽 標(biāo)簽特殊符號(hào)行的控制段落標(biāo)簽換行標(biāo)簽 使用了 換段了 設(shè)置了字體的大小和顏色 換行了 特殊符號(hào) 字體 字號(hào)相關(guān)標(biāo)簽 標(biāo)題標(biāo)簽 1 2 3 4 5 6說明 到字體大小依次遞減 一級(jí)標(biāo)題二級(jí)標(biāo)題三級(jí)標(biāo)題四級(jí)標(biāo)題五級(jí)標(biāo)題六級(jí)標(biāo)題 H1到H6標(biāo)簽用于指定不同級(jí)別的標(biāo)題 查看源代碼 字體 字號(hào)相關(guān)標(biāo)簽 標(biāo)簽特殊符號(hào) 字體的大小值 字體的顏色 字體的類型 字體 字號(hào)相關(guān)標(biāo)簽 查看源代碼 手機(jī)充值 IP卡 電話卡移動(dòng)Allrights 空格效果 淘寶集市歡迎您 淘寶網(wǎng)首屆翠友會(huì) 行的控制相關(guān)標(biāo)簽 段落標(biāo)簽段 Paragraph 可以看作是空行 Align標(biāo)記可以設(shè)置對(duì)齊 left right center換行標(biāo)簽換行 換段了 換行了 文字布局 內(nèi)容分隔標(biāo)簽項(xiàng)目列表和編號(hào)有序列表無序列表預(yù)格式文本標(biāo)簽 水平分隔線 有序列表 無序列表 用了預(yù)先定義好的格式 如何使用內(nèi)容分隔標(biāo)簽 線的厚度值 線的寬度 查看源代碼 標(biāo)簽用于在頁面上繪制水平線 線的顏色 如何使用列表 無序列表語法列表項(xiàng)內(nèi)容 有序列表語法列表項(xiàng)內(nèi)容 查看源代碼 注冊(cè)步驟 填寫信息收電子郵件注冊(cè)成功新人上路指南如何激活會(huì)員名 如何注冊(cè)淘寶會(huì)員 注冊(cè)時(shí)密碼設(shè)置有什么要求 支付寶認(rèn)證 預(yù)格式文本標(biāo)簽 如何實(shí)現(xiàn)如下圖所示的頁面中的文字效果 使用標(biāo)簽可以實(shí)現(xiàn) 如何使用預(yù)格式文本標(biāo)簽 騰訊 QQ幣 QQ幻想 30元卡一口價(jià) 26 45元運(yùn)費(fèi) 賣家承擔(dān)運(yùn)費(fèi)剩余時(shí)間 5天寶貝類型 全新賣主聲明 貨到付款 可試用10天 查看源代碼 HTML中代碼格式與瀏覽器中顯示效果一樣 圖片和多媒體 圖片滾動(dòng)文字多媒體文件背景音樂 圖像標(biāo)簽 常見的圖片格式介紹 圖像標(biāo)簽 圖像的基本語法 查看源代碼 鼠標(biāo)移到圖像上 出現(xiàn)的提示性文字 圖像的位置 圖像的寬度 圖像的高度 為圖像添加的提示性文字 圖像標(biāo)簽 圖像與文本的對(duì)齊方式 圖像與文本居中對(duì)齊 還可以取top bottom值 請(qǐng)點(diǎn)擊廣告進(jìn)入明星專區(qū) 查看源代碼 圖像和文本居中對(duì)齊 聯(lián)系 字號(hào)大小為3 練習(xí)答案 練習(xí)代碼 編寫如下圖所示效果對(duì)應(yīng)的html代碼 滾動(dòng)標(biāo)簽 滾動(dòng)文字或圖像 滾動(dòng)延遲時(shí)間 滾動(dòng)對(duì)象的方向 說明 scrolldelay 表示滾動(dòng)延遲時(shí)間 默認(rèn)值為90 direction 表示滾動(dòng)的方向 默認(rèn)為從右向左 查看源代碼 滾動(dòng)標(biāo)簽 水平滾動(dòng)垂直滾動(dòng)Avon化妝品雅詩蘭黛 水平向左移動(dòng) 垂直向上移動(dòng) 圖片和文字同時(shí)垂直向上移動(dòng) 聲明滾動(dòng)文字結(jié)束 聲明滾動(dòng)文字 水平滾動(dòng) 開始 并且將會(huì)以默認(rèn)方式從右向左滾動(dòng) 插入多媒體 插入多媒體文件插入背景音樂 頁面鏈接標(biāo)簽 鏈接到其他頁面 免費(fèi)注冊(cè) 鏈接內(nèi)容 鏈接的地址 鏈接到其他頁面 免費(fèi)注冊(cè) 登錄 單擊 免費(fèi)注冊(cè) 之后鏈接到的頁面 頁面鏈接標(biāo)簽 鏈接到其他頁面相對(duì)路徑指定從根目錄到文件的完整路徑 絕對(duì)路徑指定相對(duì)于當(dāng)前文件的文件位置 在同一個(gè)文件夾下有兩個(gè)html文件 從一個(gè)文件超鏈接到另一個(gè)文件的路徑有幾種方式 兩種方式 相對(duì)路徑和絕對(duì)路徑 頁面鏈接標(biāo)簽 要鏈接到同一目錄 C HTML 下的頁面 可編寫或 相對(duì)路徑名 絕對(duì)路徑名 頁面鏈接標(biāo)簽 要實(shí)現(xiàn)如下圖所示的超鏈接效果 怎么辦 演示示例3 演示錨鏈接的例子 使用錨記標(biāo)簽 頁面鏈接標(biāo)簽 鏈接到本頁面錨記標(biāo)簽用于使用戶 跳 到文檔的某個(gè)部分HTML的NAME屬性用于創(chuàng)建錨標(biāo)記主題名稱為達(dá)到這種跳轉(zhuǎn)效果 請(qǐng)?jiān)贖REF參數(shù)中使用該標(biāo)記主題名稱 演示示例4 演示錨鏈接的例子 鏈接到其他頁面 新人上路 新人上路指南 1 定義錨標(biāo)記 2 鏈接到錨標(biāo)記所在位置 頁面鏈接標(biāo)簽 電子郵件鏈接要鏈接電子郵件 可在鏈接標(biāo)簽中插入 mailto 郵箱地址 站長(zhǎng)信箱 演示示例5 演示電子郵件鏈接 電子郵件鏈接 站長(zhǎng)信箱 單擊 站長(zhǎng)信箱 鏈接后的輸出結(jié)果 任何正確的電子郵箱地址均可 為什么使用表格 表格應(yīng)用場(chǎng)合論壇門戶網(wǎng)站購(gòu)物網(wǎng)站 論壇中應(yīng)用表格 門戶網(wǎng)站應(yīng)用表格 購(gòu)物網(wǎng)站應(yīng)用表格 表格的基本結(jié)構(gòu) 行 列 單元格 在HTML文檔中 廣泛使用表格來存放網(wǎng)頁上的文本和圖像 表格的基本語法 單元格內(nèi)容 border用來設(shè)置表格邊框尺寸大小 如何創(chuàng)建表格 移動(dòng)聯(lián)通鐵通IBM惠普華碩 查看源代碼 什么是跨行跨列的表格 跨3列 跨3行 下圖中的表格哪里用了跨行 哪里用了跨列 跨了幾行幾列 跨多列的表格 學(xué)生成績(jī)表英語數(shù)學(xué)語文959889 COLSPAN n 屬性表示跨多少列 查看源代碼 跨多行的表格 早上菜譜食物雞蛋飲料牛奶甜點(diǎn)開心粉 rowspan n 屬性表示跨多少行 查看源代碼 手機(jī)充值 IP卡辦公設(shè)備 文具各種卡的總匯鉛筆彩筆打印刻錄 如何創(chuàng)建跨行跨列的表格 查看源代碼 小結(jié)1 編寫如下圖所示效果對(duì)應(yīng)的html代碼 第一行第一個(gè)格子跨了2行 此格子跨了3列 練習(xí)答案 練習(xí)代碼 什么是表格的美化修飾 根據(jù)理解 下面表格應(yīng)該從哪些方面進(jìn)行美化修飾 如何設(shè)置表格的尺寸和邊框 品牌商城筆記本電腦辦公設(shè)備 文具 耗材惠普華碩打印機(jī)刻錄盤 width用來設(shè)置表格的寬度height用來設(shè)置表格的高度 border用來設(shè)置表格邊框尺寸大小 bordercolor用來設(shè)置表格邊框顏色 查看源代碼 如何設(shè)置背景 筆記本電腦辦公設(shè)備 文具 耗材 background屬性用來設(shè)置表格的背景圖片 bgcolor屬性用來設(shè)置表格 行 列的背景色 EBEFFF 是用RGB表示的一種顏色值 RGB指的是紅綠藍(lán) 下圖就是RGB顏色對(duì)照表 查看源代碼 如何設(shè)置對(duì)其方式 筆記本電腦辦公設(shè)備 文具 耗材惠普華碩打印機(jī)刻錄盤 align屬性用來設(shè)置表格 行 列的對(duì)齊方式 查看源代碼 為什么要使用填充屬性 單元格里的內(nèi)容太靠近邊線 怎么辦 未填充的效果 字與單元格邊框之間的距離靠得太近 什么是填充屬性和間距屬性 border 邊框的厚度 cellpadding 單元格填充 cellspacing 單元格間距 如何使用填充 間距屬性 border 邊框的厚度 cellpadding 單元格填充 cellspacing 單元格間距 查看源代碼 如何設(shè)置表格的填充屬性 筆記本電腦辦公設(shè)備 文具 耗材 cellspacing屬性用來設(shè)置表格內(nèi)框?qū)挾萩ellpadding屬性用來設(shè)置表格內(nèi)填充距離 查看源代碼 填充之后的效果 小結(jié)2 表格的高度 寬度 背景圖像 邊框和填充屬性 行的背景色 單元格居中對(duì)齊 練習(xí)答案 練習(xí)代碼 編寫如下圖所示效果對(duì)應(yīng)的HTML代碼 如何實(shí)現(xiàn)圖文內(nèi)容的布局 達(dá)到如右圖所示頁面的效果 分析上圖所示頁面 應(yīng)該用什么進(jìn)行布局 什么是表格布局 使用表格進(jìn)行布局 用表格對(duì)網(wǎng)頁的內(nèi)容進(jìn)行整體控制 如何使用表格進(jìn)行布局 使用表格布局下圖 需要幾行幾列 需要7行2列 如何使用表格進(jìn)行布局 超值變形金鋼2 5折 人們?yōu)樯秾?duì)電視吼叫 查看源代碼 編寫如下圖所示效果對(duì)應(yīng)的html代碼 小結(jié)3 跨2行 并放了一副圖片 此單元格放了一副圖片 此單元格跨了3列 練習(xí)答案 練習(xí)代碼 總結(jié) 創(chuàng)建表格最少需要那三個(gè)標(biāo)簽 簡(jiǎn)述表格的基本結(jié)構(gòu) 跨行跨列的表格 主要在什么情況下使用 給你一個(gè)表格 你會(huì)從哪些方面進(jìn)行美化 框架 標(biāo)題 框架 廣告欄頂部框架 top htm 導(dǎo)航欄左側(cè)框架 left htm 詳細(xì)內(nèi)容頁面右側(cè)框架 main htm 框架的邊框 框架集頁面 FrameSet htm 框架使用場(chǎng)合 頁面的一個(gè)固定部分顯示徽標(biāo)或靜態(tài)信息 在另一個(gè)固定部分顯示導(dǎo)航部分詳細(xì)內(nèi)容 在此處顯示詳細(xì)內(nèi)容 頁面中此部分是變化的 框架的基本結(jié)構(gòu) 框架頁面的基本語法 邊框尺寸大小 將窗口分割成左中右3個(gè)部分 可選 將窗口分割成上下2個(gè)部分 可選 第一個(gè)窗口要顯示的網(wǎng)頁 框架的基本結(jié)構(gòu) rows cols框架 將窗口分割成上中下3部分 窗口邊框的寬度 如果要在瀏覽器中創(chuàng)建左中右三個(gè)窗口 該如何實(shí)現(xiàn) 查看源代碼 每個(gè)窗口對(duì)應(yīng)一個(gè)頁面 以及一個(gè)框架集頁面 總共需要幾個(gè)HTML頁面文件 如何創(chuàng)建多個(gè)復(fù)雜的窗口 要實(shí)現(xiàn)如下圖所示的窗口 該如何制作 1 分成上下兩個(gè)窗口2 把下面的窗口分成左右兩個(gè)窗口 top窗口 left窗口 right窗口 如何創(chuàng)建多個(gè)復(fù)雜的窗口 創(chuàng)建多個(gè)復(fù)雜的窗口實(shí)現(xiàn)步驟如下 1 創(chuàng)建一個(gè)HTML頁面 top html 2 創(chuàng)建一個(gè)HTML頁面 left html 3 創(chuàng)建一個(gè)HTML頁面 right html top html效果圖 left html效果圖 right html效果 如何創(chuàng)建多個(gè)復(fù)雜的窗口 4 新建多框架HTML頁面 Frame Sets html 查看源代碼 設(shè)置無框架邊框 不顯示滾動(dòng)條 禁止調(diào)整框架大小 框架名稱 便于超文本鏈接錨標(biāo)簽target屬性所引用 如何設(shè)置窗口鏈接的顯示位置 如果在同一個(gè)頁面中 要實(shí)現(xiàn)在一個(gè)框架窗口中的超鏈接頁面出現(xiàn)在另一個(gè)框架窗口中 如何實(shí)現(xiàn) 演示示例2 不同框架之間超鏈接效果 使用target目標(biāo)窗口屬性 如何設(shè)置窗口鏈接的顯示位置 target目標(biāo)窗口屬性name 顯示的窗口名 target屬性指定了所鏈接的文件出現(xiàn)在名稱為 窗口名 的框架窗口里 target屬性指定了所鏈接的文件出現(xiàn)在名稱為 rightframe 的框架窗口里 演示示例3 使用target 窗口名 查看源代碼 如何設(shè)置窗口鏈接的顯示位置 target目標(biāo)窗口屬性四個(gè)特殊的窗口顯示在新窗口顯示在本窗口顯示在父窗口顯示在整個(gè)瀏覽器窗口 新啟一個(gè)窗口打開文件 right html 演示示例4 使用四個(gè)特殊的窗口 小結(jié)2 top html left html right1 html或right2 html frame sets html 練習(xí)答案 練習(xí)代碼 編寫如下圖所示效果對(duì)應(yīng)的html代碼 表單 表單 本章任務(wù) 制作 注冊(cè) 頁面制作 客戶中心 頁面 會(huì)使用表單的基本結(jié)構(gòu)制作表單頁面會(huì)使用各種表單元素實(shí)現(xiàn)注冊(cè)頁面能理解post和get兩種提交方式的區(qū)別會(huì)使用框架結(jié)構(gòu)實(shí)現(xiàn)多窗口展示頁面 本章目標(biāo) 表單 表單的典型應(yīng)用注冊(cè)用戶收集信息反饋信息為網(wǎng)站提供搜索工具 注冊(cè)用戶 收集信息 反饋信息 提供搜索工具 表單包含的控件 單行文本輸入框 TEXT 單選按鈕 RADIO 復(fù)選框 CHECKBOX 下拉列表 SELECT 重置按鈕 RESET 提交按鈕 SUBMIT 多行文本框 TEXTAREA 密碼框 PASSWORD 表單頁面的基本結(jié)構(gòu) METHOD post或get ACTION METHOD 指定提交后 由服務(wù)器上那個(gè)處理程序處理 指定向服務(wù)器提交的方法 一般為post或get方法 post方法比較安全 ACTION URL 演示示例1 使用post提交方式和get提交方式 表單元素的統(tǒng)一格式 指定元素的類型 可為TEXT RADIO SUBMIT等 控件的名稱 控件的初始值 控件的初始寬度 控件中輸入的最多字符個(gè)數(shù) 控件是否被選中 表單元素的逐一介紹 文本框基本語法 名字 查看源代碼 單行文本輸入框 字符寬度為20 文本區(qū)的寬度 輸入元素的默認(rèn)值 文本輸入框 表單元素的逐一介紹 密碼框基本語法 密碼區(qū)寬度 初始密碼 密碼框 密碼 查看源代碼 密碼框 22個(gè)字符寬度 表單元素的逐一介紹 單選按鈕基本語法 初始值 單選按鈕 默認(rèn)選中 性別 男 查看源代碼 設(shè)置此單選按鈕被選中 表單元素的逐一介紹 復(fù)選框基本語法 復(fù)選框 復(fù)選框名 復(fù)選框值 聊天 查看源代碼 設(shè)置此復(fù)選框被選中 列表框基本語法 說明 size確定列表中可同時(shí)看到的行數(shù) selected默認(rèn)被選中的可選項(xiàng) 表單元素的逐一介紹 查看源代碼 出生日期 日 設(shè)置此輸入框最多只能輸入四個(gè)符號(hào) 設(shè)置 選擇月份 選項(xiàng)默認(rèn)被選中 表單元素的逐一介紹 按鈕基本語法 按鈕名稱 按鈕類型可為button submit 按鈕上的標(biāo)簽 查看源代碼 單擊按鈕 控件的值被重置為value屬性中指定的初始值