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

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