html100實(shí)例教程

1、Html實(shí)例教程100例1. 簡(jiǎn)單的html程序我的第一個(gè) HTML 頁面body 元素的內(nèi)容會(huì)顯示在瀏覽器中。title 元素的內(nèi)容會(huì)顯示在瀏覽器的標(biāo)題欄中。2. 簡(jiǎn)單的段落這是段落。這是段落。這是段落。段落元素由 p 標(biāo)簽定義。 3. 更多的段落這個(gè)段落在源代碼中包含許多行但是瀏覽器忽略了它們。這個(gè)段落在源代碼 中包含 許多行但是 瀏覽器忽略了 它們。段落的行數(shù)依賴于瀏覽器窗口的大小。如果調(diào)節(jié)瀏覽器窗口的大小，將改變段落中的行數(shù)。4. 詩歌問題春曉 春眠不覺曉， 處處聞啼鳥。 夜來風(fēng)雨聲， 花落知多少。注意，瀏覽器忽略了源代碼中的排版（省略了多余的空格和換行）。5. 拆行To breakl

2、inesin aparagraph,use the br tag.6. 標(biāo)題This is heading 1This is heading 2This is heading 3This is heading 4This is heading 5This is heading 6請(qǐng)僅僅把標(biāo)題標(biāo)簽用于標(biāo)題文本。不要僅僅為了產(chǎn)生粗體文本而使用它們。請(qǐng)使用其它標(biāo)簽或 CSS 代替。7. 居中排列的標(biāo)題This is heading 1上面的標(biāo)題在頁面中進(jìn)行了居中排列。上面的標(biāo)題在頁面中進(jìn)行了居中排列。上面的標(biāo)題在頁面中進(jìn)行了居中排列。8. 水平線hr 標(biāo)簽定義水平線：這是段落。這是段落。這是段落。9

3、. 隱藏的注釋這是一段普通的段落。10. 背景顏色請(qǐng)看: 改變了顏色的背景。HTML 文本格式化實(shí)例11. 創(chuàng)建超鏈接本文本 是一個(gè)指向本網(wǎng)站中的一個(gè)頁面的鏈接。a href= 是一個(gè)指向萬維網(wǎng)上的頁面的鏈接。12. 將圖像作為超鏈接您也可以使用圖像來作鏈接：13. 在新的瀏覽器窗口打開超鏈接Visit W3School!如果把鏈接的 target 屬性設(shè)置為 _blank，該鏈接會(huì)在新窗口中打開。14. 鏈接到頁面的不同位置查看 Chapter 4。Chapter 1This chapter explains ba bla blaChapter 2This chapter explains

4、ba bla blaChapter 3This chapter explains ba bla blaChapter 4This chapter explains ba bla blaChapter 5This chapter explains ba bla blaChapter 6This chapter explains ba bla blaChapter 7This chapter explains ba bla blaChapter 8This chapter explains ba bla blaChapter 9This chapter explains ba bla blaCha

5、pter 10This chapter explains ba bla blaChapter 11This chapter explains ba bla blaChapter 12This chapter explains ba bla blaChapter 13This chapter explains ba bla blaChapter 14This chapter explains ba bla blaChapter 15This chapter explains ba bla blaChapter 16This chapter explains ba bla blaChapter 1

6、7This chapter explains ba bla bla15. 跳出框架被鎖在框架中了嗎？ 請(qǐng)點(diǎn)擊這里！ 16. 創(chuàng)建電子郵件鏈接這是郵件鏈接：發(fā)送郵件注意：應(yīng)該使用 %20 來替換單詞之間的空格，這樣瀏覽器就可以正確地顯示文本了。17. 創(chuàng)建另一個(gè)電子郵件鏈接這是另一個(gè) mailto 鏈接：發(fā)送郵件！注意：應(yīng)該使用 %20 來替換單詞之間的空格，這樣瀏覽器就可以正確地顯示文本了。 HTML 框架實(shí)例17.垂直框架 18.水平框架 19.如何使用 標(biāo)簽 您的瀏覽器無法處理框架！3. 混合框架結(jié)構(gòu)20.含有 noresize=noresize 屬性的框架結(jié)構(gòu) 21.導(dǎo)航框架 6. 內(nèi)聯(lián)

7、框架一些老的瀏覽器不支持 iframe。如果得不到支持，iframe 是不可見的。22.跳轉(zhuǎn)到框架一個(gè)指定的節(jié) 23.使用框架導(dǎo)航跳轉(zhuǎn)至指定的節(jié) HTML 表格實(shí)例1.表格每個(gè)表格由 table 標(biāo)簽開始。每個(gè)表格行由 tr 標(biāo)簽開始。每個(gè)表格數(shù)據(jù)由 td 標(biāo)簽開始。一列： 100一行三列： 100 200 300兩行三列： 100 200 300 400 500 6002. 表格邊框帶有普通的邊框： First Row Second Row帶有粗的邊框： First Row Second Row帶有很粗的邊框： First Row Second Row3. 沒有邊框的表格這個(gè)表格沒有邊框：

8、100 200 300 400 500 600這個(gè)表格也沒有邊框： 100 200 300 400 500 6004. 表格中的標(biāo)頭表頭： 姓名 電話 電話 Bill Gates 555 77 854 555 77 855垂直的表頭： 姓名 Bill Gates 電話 555 77 854 電話 555 77 8555. 空單元格 Some text Some text Some text正如您看到的，其中一個(gè)單元沒有邊框。這是因?yàn)樗强盏?。在該單元中插入一個(gè)空格后，仍然沒有邊框。我們的技巧是在單元中插入一個(gè) no-breaking 空格。no-breaking 空格是一個(gè)字符實(shí)體。如果您不清

9、楚什么是字符實(shí)體，請(qǐng)閱讀關(guān)于字符實(shí)體的章節(jié)。no-breaking 空格由和號(hào)開始 (&)，然后是字符nbsp，并以分號(hào)結(jié)尾(;)。6. 帶有標(biāo)題的表格這個(gè)表格有一個(gè)標(biāo)題，以及粗邊框：我的標(biāo)題 100 200 300 400 500 6007. 跨行跨列的表格橫跨兩列的單元格： 姓名 電話 Bill Gates 555 77 854 555 77 855橫跨兩行的單元格： 姓名 Bill Gates 電話 555 77 854 555 77 8558. 表格內(nèi)的標(biāo)簽 這是一個(gè)段落。 這是另一個(gè)段落。 這個(gè)單元包含一個(gè)表格： A B C D 這個(gè)單元包含一個(gè)列表： 蘋果 香蕉 菠蘿 HELLO9

10、. 單元格邊距沒有 cellpadding： First Row Second Row帶有 cellpadding： First Row Second Row9. 單元格間距沒有 cellspacing： First Row Second Row帶有 cellspacing： First Row Second Row10. 向表格添加背景顏色或背景圖像 背景顏色： First Row Second Row背景圖像： First Row Second Row11. 向表格單元添加背景顏色或者背景圖像 單元背景： First Row Second Row11. 在表格單元中排列內(nèi)容 消費(fèi)項(xiàng)目. 一

11、月 二月 衣服 $241.10 $50.20 化妝品 $30.00 $44.45 食物 $730.40 $650.00 總計(jì) $1001.50 $744.65 12. 框架屬性注釋：frame 屬性無法在 Internet Explorer 中正確地顯示。Table with frame=box: Month Savings January $100 Table with frame=above: Month Savings January $100 Table with frame=below: Month Savings January $100 Table with frame=hsid

12、es: Month Savings January $100 Table with frame=vsides: Month Savings January $100 HTML 列表實(shí)例1. 無序列表一個(gè)無序列表： 咖啡 茶 牛奶2. 有序列表一個(gè)有序列表： 咖啡 茶 牛奶3. 不同類型的無序列表Disc 項(xiàng)目符號(hào)列表： 蘋果 香蕉 檸檬 桔子 Circle 項(xiàng)目符號(hào)列表： 蘋果 香蕉 檸檬 桔子 Square 項(xiàng)目符號(hào)列表： 蘋果 香蕉 檸檬 桔子 4. 不同類型的有序列表數(shù)字列表： 蘋果 香蕉 檸檬 桔子 字母列表： 蘋果 香蕉 檸檬 桔子 小寫字母列表： 蘋果 香蕉 檸檬 桔子 羅馬字母列

13、表： 蘋果 香蕉 檸檬 桔子 小寫羅馬字母列表： 蘋果 香蕉 檸檬 桔子 5. 嵌套列表一個(gè)嵌套列表： 咖啡 茶 紅茶 綠茶 牛奶6. 嵌套列表2一個(gè)嵌套列表： 咖啡 茶 紅茶 綠茶 中國(guó)茶 非洲茶 牛奶7. 定義列表一個(gè)定義列表： 計(jì)算機(jī) 用來計(jì)算的儀器 . . 顯示器 以視覺方式顯示信息的裝置 . .HTML 表單與輸入實(shí)例1. 文本域名：姓：2. 密碼用戶：密碼：請(qǐng)注意，當(dāng)您在密碼域中鍵入字符時(shí)，瀏覽器將使用項(xiàng)目符號(hào)來代替這些字符。3. 復(fù)選框我喜歡自行車：我喜歡汽車：4. 單選按鈕男性：女性：當(dāng)用戶點(diǎn)擊一個(gè)單選按鈕時(shí)，該按鈕會(huì)變?yōu)檫x中狀態(tài)，其他所有按鈕會(huì)變?yōu)榉沁x中狀態(tài)。5. 簡(jiǎn)單的下拉

14、列表VolvoSaabFiatAudi6. 另一個(gè)下拉列表VolvoSaabFiatAudi7. 文本域領(lǐng)先的 Web 技術(shù)教程 - 全部免費(fèi)在w3school，你可以找到你所需要的所有的網(wǎng)站建設(shè)教程。從基礎(chǔ)的HTML到XHTML，乃至進(jìn)階的XML、SQL、數(shù)據(jù)庫(kù)、多媒體和WAP。您無法對(duì)本例進(jìn)行編輯，因?yàn)槲覀兊脑诰€編輯器使用 textarea 進(jìn)行輸入，而瀏覽器不允許 textarea 中存在另一個(gè) textarea。8. 創(chuàng)建按鈕9. 本例演示如何在數(shù)據(jù)周圍繪制一個(gè)帶標(biāo)題的框 健康信息 身高： 體重： 如果表單周圍沒有邊框，說明您的瀏覽器太老了。表單實(shí)例1.本例演示如何向頁面添加表單。此表

15、單包含兩個(gè)輸入框和一個(gè)確認(rèn)按鈕。 First name: Last name: 請(qǐng)單擊確認(rèn)按鈕，輸入會(huì)發(fā)送到服務(wù)器上名為 form_action.asp 的頁面。2.此表單包含兩個(gè)復(fù)選框和一個(gè)確認(rèn)按鈕。I have a bike:I have a car: I have an airplane: 如果您點(diǎn)擊 Submit 按鈕，您將把輸入傳送到名為 html_form_action.asp 的新頁面。3. 帶有單選按鈕的表單Male: Female: 如果您點(diǎn)擊 Submit 按鈕，您將把輸入傳送到名為 html_form_action.asp 的新頁面。4.此例演示如何從表單發(fā)送電子郵件。這

16、個(gè)表單會(huì)把電子郵件發(fā)送到 W3School。姓名：電郵：內(nèi)容：HTML 圖像實(shí)例1. 插入圖像一幅圖像：一幅動(dòng)畫圖像：請(qǐng)注意，插入動(dòng)畫圖像的語法與插入普通圖像的語法沒有區(qū)別。2. 從不同位置插入圖片來自另一個(gè)文件夾的圖像：來自 W3S 的圖像：3. 背景圖片圖像背景gif 和 jpg 文件均可用作 HTML 背景。如果圖像小于頁面，圖像會(huì)進(jìn)行重復(fù)。4. 排列圖片未設(shè)置對(duì)齊方式的圖像：圖像 在文本中已設(shè)置對(duì)齊方式的圖像：圖像 在文本中圖像 在文本中圖像 在文本中請(qǐng)注意，bottom 對(duì)齊方式是默認(rèn)的對(duì)齊方式。5. 浮動(dòng)圖片 帶有圖像的一個(gè)段落。圖像的 align 屬性設(shè)置為 left。圖像將浮動(dòng)到文本的左側(cè)。