常見(jiàn)HTML元素用法

1、3.5 HTML文檔的結(jié)構(gòu) 3.5.1 文檔結(jié)構(gòu)簡(jiǎn)介 HTML一個(gè)HTML文檔實(shí)例通常由2個(gè)部分組成 一個(gè)說(shuō)明性的文檔頭由HEAD元素所界定，HTML文檔頭中包含了有關(guān)當(dāng)前文檔的信息，例如，對(duì)于搜索引擎有用的title,keywords等，以及其它一些不屬于文檔內(nèi)容的數(shù)據(jù) 一個(gè)文檔體包含了文檔真正的內(nèi)容，由BODY元素或Frameset所實(shí)現(xiàn) An simple examplehello.html13.5 HTML文檔的結(jié)構(gòu)(續(xù))3.5.2 文檔頭 TITLE元素與title屬性 TITLE元素 每個(gè)HTML文檔在文檔頭部分必須有一個(gè)TITLE元素，該元素可用于概括文檔的內(nèi)容，瀏覽器通常將TI

2、TLE元素顯示在文檔窗口的標(biāo)題中 title屬性 在HTML文檔中，有些元素具有title屬性，作者可以使用該屬性來(lái)為元素提供概括信息，瀏覽器可以采用多種方式來(lái)顯示該屬性，例如，作為tool tip (a short message that appears when the pointing device pauses over an object). 示例參見(jiàn)structure 23.5 HTML文檔的結(jié)構(gòu)(續(xù)) META元素 meta是用來(lái)在HTML文檔中模擬HTTP協(xié)議的響應(yīng)頭報(bào)文。meta 標(biāo)簽用于網(wǎng)頁(yè)的與中，meta 標(biāo)簽的用處很多。meta 的屬性有兩種：name和http-eq

3、uiv。33.5 HTML文檔的結(jié)構(gòu)(續(xù))1. 用以說(shuō)明生成工具（如Microsoft FrontPage 4.0）等 2. 向搜索引擎說(shuō)明你的網(wǎng)頁(yè)的關(guān)鍵詞3. meta name=DEscription content=“Military, weapon, missile告訴搜索引擎你的站點(diǎn)的主要內(nèi)容 43.5 HTML文檔的結(jié)構(gòu)(續(xù))4. 告訴搜索引擎你的站點(diǎn)的制作的作者5. 其中的屬性說(shuō)明如下： 設(shè)定為all：文件將被檢索，且頁(yè)面上的鏈接可以被查詢(xún)； 設(shè)定為none：文件將不被檢索，且頁(yè)面上的鏈接不可以被查詢(xún)； 設(shè)定為index：文件將被檢索； 設(shè)定為follow：頁(yè)面上的鏈接可以被查詢(xún)

4、； 設(shè)定為noindex：文件將不被檢索，但頁(yè)面上的鏈接可以被查詢(xún)； 設(shè)定為nofollow：文件將不被檢索，頁(yè)面上的鏈接可以被查詢(xún)。53.5 HTML文檔的結(jié)構(gòu)(續(xù))1. 和 用以說(shuō)明主頁(yè)制作所使用的文字以及語(yǔ)言2. 定時(shí)讓網(wǎng)頁(yè)在指定的時(shí)間n內(nèi)，跳轉(zhuǎn)到頁(yè)面；3. 可以用于設(shè)定網(wǎng)頁(yè)的到期時(shí)間，一旦過(guò)期則必須到服務(wù)器上重新調(diào)用。需要注意的是必須使用GMT時(shí)間格式；4. 是用于設(shè)定禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁(yè)面內(nèi)容，設(shè)定后一旦離開(kāi)網(wǎng)頁(yè)就無(wú)法從Cache中再調(diào)出； Meta 程序見(jiàn) structure63.5 HTML文檔的結(jié)構(gòu)(續(xù))3.5.3 文檔體 HTML文檔的主要內(nèi)容bgcolor 背景

5、色彩 text 非可鏈接文字的色彩 link 可鏈接文字的色彩 alink 正被點(diǎn)擊的可鏈接文字的色彩 vlink 已經(jīng)點(diǎn)擊(訪問(wèn))過(guò)的可鏈接文字的色彩 #=rrggbb色彩是用 16 進(jìn)制的 紅綠藍(lán)(red-green-blue, RGB) 值來(lái)表示。16 進(jìn)制的數(shù)碼有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f. 73.6 字體3.6.1標(biāo)題字體(Header) . #=1, 2, 3, 4, 5, 6今天天氣真好！ 今天天氣真好！今天天氣真好！ 今天天氣真好！今天天氣真好！ 今天天氣真好！今天天氣真好！ 今天天氣真好！今天天氣真好！ 今天天氣真好！今天天氣真好！ 今

6、天天氣真好！ 這些標(biāo)記顯示黑體字。 這些標(biāo)記自動(dòng)插入一個(gè)空行，不必用 標(biāo)記再加空行。因此在一行中無(wú)法使用不同大小的字體。83.6字體(續(xù))3.6.2字體大小 . #=1, 2, 3, 4, 5, 6, 7 今天天氣真好！ 今天天氣真好！今天天氣真好！ 今天天氣真好！今天天氣真好！ 今天天氣真好！今天天氣真好！ 今天天氣真好！今天天氣真好！ 今天天氣真好！今天天氣真好！ 今天天氣真好！今天天氣真好！ 今天天氣真好！93.6字體(續(xù))3.6.3物理字體 : black:italic:underline and so on103.6字體(續(xù))3.6.4字體顏色 . #=rrggbb色彩是用 16 進(jìn)

7、制的 紅綠藍(lán)(red-green-blue, RGB) 值來(lái)表示。16 進(jìn)制的數(shù)碼有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f. 113.7 文字布局 3.7.1行的控制-段(Paragraph) 你好嗎？很好。 你好嗎？ 很好。-換行 你好嗎？很好。 你好嗎？很好。-不換行 content 123.7 文字布局(續(xù))3.7.2文字的對(duì)齊. . #=left, center, right 133.7 文字布局(續(xù))3.7.3文字的分區(qū)(Division)顯示 . Can you feel happiness without unpleasant? Please show

8、 me your smile. 143.7 文字布局(續(xù))3.7.4 列表 無(wú)序列表 . TodayTommorow 有序列表 . TodayTommorow 定義列表(Definition lists) .TodayToday is yesterday.TomorrowTomorrow is today. 153.7 文字布局(續(xù))3.1-3.4 example samplefont_1_4.html163.7 文字布局(續(xù))3.7.5定制列表元素 定制表中的標(biāo)記 #=disk, circle, square ONETWOTHREE 定制有序列表表中的序號(hào) #=A, a, I, i, 1 O

9、NE-ONE ONE-TWO 定制有序列表表中的序號(hào)的起始值 #=number ONE-ONE ONE-TWO 173.7 文字布局(續(xù))3.7.6預(yù)格式化文本.Please use your card.VISA MasterHere is an order form.FaxAir Mail Similar tags: listing, xmp.183.7 文字布局(續(xù))3.7.7 其他塊引用 . Her Song:When I was young, I listened to the radio waiting for my favorite songs 193.7 文字布局(續(xù))Examp

10、le of 3.5-3.7 samplefont_5.html203.8 圖像3.8.1 鏈入圖象的基本語(yǔ)法 #=圖象的 URL #=在瀏覽器尚未完全讀入圖象時(shí)，在圖象位置顯示的文字。 213.8 圖像(續(xù))3.8.2圖象和文字的對(duì)齊 #=top, middle, bottom4.3圖象在頁(yè)面中的對(duì)齊/布局(Floating Image) 4.4邊框 #=value 223.8 圖像(續(xù))4.1-4.4 examplesampleimage.html 233.9 表單3.9.1基本語(yǔ)法 表單的基本語(yǔ)法. . *=GET, POST 表單中提供給用戶(hù)的輸入形式*=text, password,

11、checkbox, radio, image, hidden, submit, reset*=Symbolic Name for CGI script 243.9 表單(續(xù))3.9.2文字輸入和密碼輸入 *=text, password 您的姓名: 您的主頁(yè)的網(wǎng)址: 密碼: 253.9 表單(續(xù))3.9.3復(fù)選框(Checkbox) 和 單選框(RadioButton) Banana Apple Orange 263.9 表單(續(xù))3.9.4列表框(Selectable Menu) 基本語(yǔ)法 . Banana Apple Orange 273.9 表單(續(xù))3.9.5文本區(qū)域 . 283.9

12、表單(續(xù))表單例程sampleform.html293.10 表格3.10.1表格的基本語(yǔ)法. - 定義表格 - 定義表行 - 定義表頭 - 定義表元(表格的具體數(shù)據(jù))帶邊框的表格： FoodDrinkSweet ABC 303.10 表格(續(xù))3.10.2跨多行、多列的表元(Table Span)跨多列的表元 Morning Menu Food Drink Sweet ABC 跨多行的表元 313.10 表格(續(xù))3.10.3表格尺寸設(shè)置 邊框尺寸設(shè)置： 表格尺寸設(shè)置： 表元間隙設(shè)置： 323.10 表格(續(xù))3.10.4表格內(nèi)文字的對(duì)齊/布局水平方向 #=left, center, rig

13、ht 豎直方向 #=top, middle, bottom, baseline333.10 表格(續(xù))3.10.5表格在頁(yè)面中的對(duì)齊/布局(Floating Table) 343.10 表格(續(xù))3.10.6表格的標(biāo)題 . #=left, center, right . #=top, bottom 353.10 表格(續(xù))Examples sampletable.html363.11 框架3.11.1基本語(yǔ)法 . . 在 標(biāo)記后的文字將只出現(xiàn)在不支持 FRAMES 的瀏覽器中。 . 373.11 框架(續(xù))3.11.2各窗口的尺寸設(shè)置 縱向排列多個(gè)窗口： sampleframe1.html 橫向排列多個(gè)窗口： sampleframe2.html 縱橫排列多個(gè)窗口：COLS & ROWS sampleframe3.html 383.12 滾動(dòng)3.12.1基本語(yǔ)法 . 啦啦啦，我會(huì)移動(dòng)耶 393.12 滾動(dòng)(續(xù))3.12.2文字移動(dòng)屬性的設(shè)置 方向 #=left, right 方式 #=scroll, slide, alternate 循環(huán) #=次數(shù)；若未指定則循環(huán)不止(infinite) 速度 延時(shí) 403.12 滾動(dòng)(續(xù))3.12.3外觀(Layo