HTML基礎(chǔ)知識整合

1、1整理pptHTML簡介簡介mHTML：Hyper Text Markup Language1993-6超文本標(biāo)記語言1995-11HTML2.0HTML3.21996-1-14HTML4.01997-12-18HTML4.011999-12-24XHTML1.02000-1-26XHTML1.12001-5-31XHTML2.0HTML52013-5-6目前網(wǎng)頁中常用目前網(wǎng)頁中常用2整理pptHTML基本結(jié)構(gòu)基本結(jié)構(gòu)mHTML網(wǎng)頁基本結(jié)構(gòu) 我的第一個網(wǎng)頁我的第一個網(wǎng)頁 我的第一個網(wǎng)頁我的第一個網(wǎng)頁網(wǎng)頁頭部網(wǎng)頁頭部主體部分主體部分標(biāo)簽標(biāo)記著標(biāo)簽標(biāo)記著 HTML 文檔的開始和結(jié)束文檔的開始和結(jié)束

2、3整理ppt網(wǎng)頁基本信息網(wǎng)頁基本信息3-1mDOCTYPE聲明無標(biāo)題文檔無標(biāo)題文檔Strict（嚴(yán)格類型）（嚴(yán)格類型）Transitional（過渡類型）（過渡類型）Frameset（框架類型）（框架類型）4整理ppt網(wǎng)頁基本信息網(wǎng)頁基本信息3-2m標(biāo)簽家用電器排行榜家用電器排行榜5整理ppt網(wǎng)頁基本信息網(wǎng)頁基本信息3-3m標(biāo)簽meta http-equiv=Content-Type content=text/html; charset=gb2312”搜索關(guān)鍵字搜索關(guān)鍵字內(nèi)容描述內(nèi)容描述網(wǎng)頁字符編碼網(wǎng)頁字符編碼6整理pptW3C標(biāo)準(zhǔn)結(jié)構(gòu)標(biāo)準(zhǔn)01表現(xiàn)標(biāo)準(zhǔn)02行為標(biāo)準(zhǔn)037整理ppt網(wǎng)頁的基本標(biāo)簽

3、網(wǎng)頁的基本標(biāo)簽6-1m標(biāo)題標(biāo)簽mmmmmm一級標(biāo)題一級標(biāo)題二級標(biāo)題二級標(biāo)題三級標(biāo)題三級標(biāo)題四級標(biāo)題四級標(biāo)題五級標(biāo)題五級標(biāo)題六級標(biāo)題六級標(biāo)題演示示例演示示例2：標(biāo)題標(biāo)簽：標(biāo)題標(biāo)簽8整理ppt網(wǎng)頁的基本標(biāo)簽網(wǎng)頁的基本標(biāo)簽6-2m段落標(biāo)簽m標(biāo)題標(biāo)題1段落段落1段落段落2。演示示例演示示例3：段落標(biāo)簽：段落標(biāo)簽9整理ppt網(wǎng)頁的基本標(biāo)簽網(wǎng)頁的基本標(biāo)簽6-3m換行標(biāo)簽m北京歡迎你北京歡迎你 北京歡迎你，有夢想誰都了不起！北京歡迎你，有夢想誰都了不起！ 有勇氣就會有奇跡。有勇氣就會有奇跡。 北京歡迎你，為你開天辟地北京歡迎你，為你開天辟地 演示示例演示示例4：換行標(biāo)簽：換行標(biāo)簽10整理ppt網(wǎng)頁的基本標(biāo)簽

4、網(wǎng)頁的基本標(biāo)簽6-4m水平線標(biāo)簽m北京歡迎你北京歡迎你 北京歡迎你，有夢想誰都了不起！北京歡迎你，有夢想誰都了不起！ 有勇氣就會有奇跡。有勇氣就會有奇跡。 北京歡迎你，為你開天辟地北京歡迎你，為你開天辟地 演示示例演示示例5：水平線標(biāo)簽：水平線標(biāo)簽11整理ppt網(wǎng)頁的基本標(biāo)簽網(wǎng)頁的基本標(biāo)簽6-5m字體樣式標(biāo)簽m加粗：m斜體：徐志摩人物簡介徐志摩人物簡介 1910年入杭州學(xué)堂年入杭州學(xué)堂 1918年赴美國克拉大學(xué)學(xué)習(xí)銀行學(xué)年赴美國克拉大學(xué)學(xué)習(xí)銀行學(xué) 演示示例演示示例6：字體樣式標(biāo)簽：字體樣式標(biāo)簽12整理ppt網(wǎng)頁的基本標(biāo)簽網(wǎng)頁的基本標(biāo)簽6-6m注釋和特殊符號特殊符號特殊符號字符實(shí)體字符實(shí)體示例示

5、例空格空格 百度百度 | 新浪新浪大于號大于號()>如果時間如果時間>晚上晚上6點(diǎn)，就坐車回家點(diǎn)，就坐車回家小于號小于號()<如果時間如果時間<早上早上7點(diǎn)，就走路去上學(xué)點(diǎn)，就走路去上學(xué)引號引號()"W3C規(guī)范中，規(guī)范中，HTML的屬性值必須用成對的的屬性值必須用成對的"引起來引起來版權(quán)符號版權(quán)符號 ©© 版權(quán)所有版權(quán)所有13整理ppt圖像標(biāo)簽圖像標(biāo)簽14整理ppt圖像標(biāo)簽圖像標(biāo)簽圖像地址圖像地址圖像的替代文字圖像的替代文字語法語法鼠標(biāo)懸停提示文字鼠標(biāo)懸停提示文字圖像寬度圖像寬度圖像高度圖像高度15整

6、理ppt鏈接標(biāo)簽鏈接標(biāo)簽鏈接文本或圖像鏈接文本或圖像鏈接路徑鏈接路徑鏈接在哪個窗口打開鏈接在哪個窗口打開語法語法無漂白薄皮核桃無漂白薄皮核桃常用值：常用值：_self、_blank文本超鏈接文本超鏈接圖像超鏈接圖像超鏈接示例示例16整理ppttarget 的取值的取值17整理ppt常用的超鏈接常用的超鏈接3-1m頁面間鏈接m從一個頁面鏈接到另外一個頁面m錨鏈接m功能性鏈接18整理ppt常用的超鏈接常用的超鏈接3-2m錨鏈接m從A頁面的甲位置跳轉(zhuǎn)到本頁中的乙位置m從A頁面的甲位置跳轉(zhuǎn)到B頁面中的乙位置m創(chuàng)建步驟m創(chuàng)建跳轉(zhuǎn)標(biāo)記m創(chuàng)建跳轉(zhuǎn)鏈接乙位置乙位置甲位置甲位置m錨鏈接m從A頁面的甲位置跳轉(zhuǎn)到本

7、頁中的乙位置m從A頁面的甲位置跳轉(zhuǎn)到B頁面中的乙位置m創(chuàng)建步驟m創(chuàng)建跳轉(zhuǎn)標(biāo)記m創(chuàng)建跳轉(zhuǎn)鏈接乙位置乙位置19整理ppt常用的超鏈接常用的超鏈接3-3m功能性鏈接m電子郵件mQQmMSN 聯(lián)系我們聯(lián)系我們示例示例聯(lián)系客聯(lián)系客20整理ppt列表列表 表格和表格和Html框架的使用框架的使用21整理pptHtml 列表列表mHTML有三種列表形式：排序列表(Ordered List)；無序序列表(Unordered List)；定義列表(Definition List)。m排序列表排序列表(Ordered List) 排序列表中，每個列表項(xiàng)前標(biāo)有數(shù)字，表示順序。由開始，每個列表項(xiàng)由開始。22整理ppt

8、Html 列表列表m無序列表無序列表(Unordered List) 無序列表不用數(shù)字標(biāo)記每個列表項(xiàng)，而采用一個符號標(biāo)志每個列表項(xiàng)，比如圓黑點(diǎn)。由開始，每個列表項(xiàng)由開始。23整理pptHtml 列表列表m定義列表定義列表 定義列表由開始。術(shù)語由開始，英文意為Definition Term。術(shù)語的解釋說明，由開始，里的文字縮進(jìn)顯示。24整理pptHtml 列表列表 不同類型不同類型(Type)的排序列表的排序列表 如何用Type屬性設(shè)置排序列表項(xiàng)前的符號 25整理pptHtml 列表列表m不同類型不同類型(Type)的不排序列表的不排序列表 如何用Type屬性設(shè)置不排序列表項(xiàng)前的符號。26整理p

9、ptHtml 列表列表 嵌套的列表嵌套的列表 列表里可以含有子列表。通常用這種嵌套的列表，反映層次較多的內(nèi)容27整理ppt表格基礎(chǔ)與布局表格基礎(chǔ)與布局28整理ppt基本語法基本語法 單元格內(nèi)容表格表格中的一行. - 定義表格 - 定義表行 - 定義表頭 - 定義表元(表格的具體數(shù)據(jù))帶著求知好學(xué)的態(tài)度，超越自己，完善自己。29整理ppt表格的邊框及尺寸表格的邊框及尺寸m設(shè)置邊框m設(shè)置表格的寬和高m單元格之間間隙m#=value內(nèi)容與單元格邊框距離帶著求知好學(xué)的態(tài)度，超越自己，完善自己。30整理ppt表格相關(guān)顏色設(shè)置表格相關(guān)顏色設(shè)置m表格邊框顏色設(shè)置m 背景顏色設(shè)置m背景圖片設(shè)置m亮邊框的顏色m

10、 暗邊框的顏色帶著求知好學(xué)的態(tài)度，超越自己，完善自己。31整理ppt表格的合并表格的合并m1、跨多列的單元格 合并列m2、跨多行的單元格 合并行m#為合并的單元格數(shù)量帶著求知好學(xué)的態(tài)度，超越自己，完善自己。32整理ppt表格對齊表格對齊malignm #=left、rightm表格相對于網(wǎng)頁的位置m #=left, center, right m內(nèi)容相對于單元格的位置帶著求知好學(xué)的態(tài)度，超越自己，完善自己。33整理pptHTML表格補(bǔ)充表格補(bǔ)充m劃分表格結(jié)構(gòu)的三個標(biāo)簽：m（表首）,（表主體）,（表尾）m目的：對表格的各部分的屬性進(jìn)行統(tǒng)一的設(shè)置，而不用單一逐個設(shè)置m注：文字、圖片、多媒體等內(nèi)容只

11、能放或里面帶著求知好學(xué)的態(tài)度，超越自己，完善自己。34整理ppt注意事項(xiàng)注意事項(xiàng)m1、表格標(biāo)記必須要有、或者（表頭標(biāo)簽）m2、表格內(nèi)容必須寫在(或th)標(biāo)簽之內(nèi)帶著求知好學(xué)的態(tài)度，超越自己，完善自己。35整理ppt表格布局原則表格布局原則m網(wǎng)頁結(jié)構(gòu)是由一些矩形有機(jī)組成的，所有的內(nèi)容都是放在矩形內(nèi)的。這些矩形我們可以用表格來代替表格布局的最基本原則。m網(wǎng)頁在瀏覽器中寬度是一定的，若無限制的放置文字、圖片、多媒體等內(nèi)容，就不能控制好這些內(nèi)容的位置，可以將內(nèi)容放在表格的單元格里，只要把表格的形狀設(shè)置好了，內(nèi)容也定位好了表格布局的直觀原因。m表格布局的兩個技術(shù)：m表格嵌套：分清楚表格的兩種功能：結(jié)構(gòu)布

12、局(安排頁面排版)，內(nèi)容容器(組織和顯示信息) 。m口訣能獨(dú)立就獨(dú)立，能成行就不列m自適應(yīng)：口訣外像素，內(nèi)百分帶著求知好學(xué)的態(tài)度，超越自己，完善自己。36整理pptHtml框架框架m使用框架(Frame)，你可以在瀏覽器窗口同時顯示多個網(wǎng)頁。每個Frame里設(shè)定一個網(wǎng)頁，每個Frame里的網(wǎng)頁相互獨(dú)立。mFramesetm決定如何劃分Frame。有cols屬性和rows屬性。使用cols屬性，表示按列分布Frame；使用rows屬性，表示按行分布Frame。37整理pptHtml框架框架 列分frame 如何在瀏覽器里同時顯示三個網(wǎng)頁，三個網(wǎng)頁是按列分布的。38整理ppt 行分frame 如何

13、在瀏覽器里同時顯示三個網(wǎng)頁，三個網(wǎng)頁是按列分布的。39整理ppt 混合frameset 既用到了cols屬性，又用到了rows屬性，將Frame進(jìn)行靈活分布。40整理pptHtml框架框架 Frameset中的noresize屬性 使用Noresize屬性可以確保Frame的大小。如果不使用noresize屬性，你可以用鼠標(biāo)移動Frame的邊界，來改變Frame的大小，如果設(shè)置了noresize屬性，就不能移動邊界了。 41整理ppt Frame用于導(dǎo)航 如何建立一個用于導(dǎo)航的Frame。這個導(dǎo)航Frame包含一個HTML，這個HTML（代碼如下）包含了一個網(wǎng)頁列表。點(diǎn)擊網(wǎng)頁列表中的任何一項(xiàng)，就會在第二個Frame中顯示點(diǎn)擊中的網(wǎng)頁。42整理ppt Iframe的使用 如何在一個HTML文件里用iframe嵌入一個網(wǎng)頁。43整理pptHTML小結(jié)小結(jié)m標(biāo)簽:由包含起來的表示一定含義的html單元，分為雙標(biāo)簽、單標(biāo)簽。m標(biāo)簽屬性:用來表示該標(biāo)簽的具體功能或者某一具體的性質(zhì)，使用的時候必須跟隨它所屬的標(biāo)簽寫在同一對內(nèi)才會有效。m屬性值