html實例教程_第1頁
html實例教程_第2頁
html實例教程_第3頁
html實例教程_第4頁
html實例教程_第5頁
已閱讀5頁，還剩38頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、Html實例教程100例1. 簡單的html程序<html><head><title>我的第一個 HTML 頁面</title></head><body><p>body 元素的內容會顯示在瀏覽器中。</p><p>title 元素的內容會顯示在瀏覽器的標題欄中。</p></body></html>2. 簡單的段落<html><body><p>這是段落。</p><p>這是段落。</p>

2、<p>這是段落。</p><p>段落元素由 p 標簽定義。</p> </body></html>3. 更多的段落<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN""/TR/html4/loose.dtd"><html><body><p>這個段落在源代碼中包含許多行但是瀏覽器忽略了它們。</p><p>這個段落在源代碼

3、中包含 許多行但是 瀏覽器忽略了 它們。</p><p>段落的行數依賴于瀏覽器窗口的大小。如果調節瀏覽器窗口的大小，將改變段落中的行數。</p></body></html>4. 詩歌問題<html><body><h1>春曉</h1><p> 春眠不覺曉， 處處聞啼鳥。 夜來風雨聲， 花落知多少。</p><p>注意，瀏覽器忽略了源代碼中的排版（省略了多余的空格和換行）。</p></body></html>5. 拆行<

4、html><body><p>To break<br />lines<br />in a<br />paragraph,<br />use the br tag.</p></body></html>6. 標題<html><body><h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3>&l

5、t;h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6><p>請僅僅把標題標簽用于標題文本。不要僅僅為了產生粗體文本而使用它們。請使用其它標簽或 CSS 代替。</p></body></html>7. 居中排列的標題<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN""http:/

6、/TR/html4/loose.dtd"><html><body><h1 align="center">This is heading 1</h1><p>上面的標題在頁面中進行了居中排列。上面的標題在頁面中進行了居中排列。上面的標題在頁面中進行了居中排列。</p></body></html>8. 水平線<html><body><p>hr 標簽定義水平線：</p><hr /><p&

7、gt;這是段落。</p><hr /><p>這是段落。</p><hr /><p>這是段落。</p></body></html>9. 隱藏的注釋<html><body><!-這是一段注釋。注釋不會在瀏覽器中顯示。-><p>這是一段普通的段落。</p></body></html>10. 背景顏色<html><head><meta http-equiv="Content-T

8、ype" content="text/html; charset=gb2312" /><meta http-equiv="Content-Language" content="zh-cn" /></head><body bgcolor="yellow"><h2>請看: 改變了顏色的背景。</h2></body></html>HTML 文本格式化實例11. 創建超鏈接<html><body>&l

9、t;p><a href="/index.html">本文本</a> 是一個指向本網站中的一個頁面的鏈接。</p><p><a href=" 是一個指向萬維網上的頁面的鏈接。</p></body></html>12. 將圖像作為超鏈接<html><body><p>您也可以使用圖像來作鏈接：<a href="/example/html/lastpage.html"><img border="0

10、" src="/i/eg_buttonnext.gif" /></a></p></body></html>13. 在新的瀏覽器窗口打開超鏈接<html><body><a href=" target="_blank">Visit W3School!</a><p>如果把鏈接的 target 屬性設置為 "_blank"，該鏈接會在新窗口中打開。</p></body></html

11、>14. 鏈接到頁面的不同位置<html><body><p><a href="#C4">查看 Chapter 4。</a></p><h2>Chapter 1</h2><p>This chapter explains ba bla bla</p><h2>Chapter 2</h2><p>This chapter explains ba bla bla</p><h2>Chapter 3</

12、h2><p>This chapter explains ba bla bla</p><h2><a name="C4">Chapter 4</a></h2><p>This chapter explains ba bla bla</p><h2>Chapter 5</h2><p>This chapter explains ba bla bla</p><h2>Chapter 6</h2><p>Thi

13、s chapter explains ba bla bla</p><h2>Chapter 7</h2><p>This chapter explains ba bla bla</p><h2>Chapter 8</h2><p>This chapter explains ba bla bla</p><h2>Chapter 9</h2><p>This chapter explains ba bla bla</p><h2>Chapter

14、10</h2><p>This chapter explains ba bla bla</p><h2>Chapter 11</h2><p>This chapter explains ba bla bla</p><h2>Chapter 12</h2><p>This chapter explains ba bla bla</p><h2>Chapter 13</h2><p>This chapter explains ba bla bla

15、</p><h2>Chapter 14</h2><p>This chapter explains ba bla bla</p><h2>Chapter 15</h2><p>This chapter explains ba bla bla</p><h2>Chapter 16</h2><p>This chapter explains ba bla bla</p><h2>Chapter 17</h2><p>This

16、 chapter explains ba bla bla</p></body></html>15. 跳出框架<html><body><p>被鎖在框架中了嗎？</p> <a href="/index.html"target="_top">請點擊這里！</a> </body></html>16. 創建電子郵件鏈接<html><body><p>這是郵件鏈接：<a href="ma

17、ilto:someone?subject=Hello%20again">發送郵件</a></p><p><b>注意：</b>應該使用 %20 來替換單詞之間的空格，這樣瀏覽器就可以正確地顯示文本了。</p></body></html>17. 創建另一個電子郵件鏈接<html><body><p>這是另一個 mailto 鏈接：<a href="mailto:someone?cc=someoneelse&bcc=andsomeon

18、eelse2&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">發送郵件！</a></p><p><b>注意：</b>應該使用 %20 來替換單詞之間的空格，這樣瀏覽器就可以正確地顯示文本了。</p></body></html> HTML 框架實例17.垂直框架<html><frameset cols="25%,50%,25%&q

19、uot;> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"></frameset></html>18.水平框架<html><frameset rows="25%,50%,25%"> <frame src="/examp

20、le/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"></frameset>19.如何使用 <noframes> 標簽 <html><frameset cols="25%,50%,25%"> <frame src="/example/html/frame_a.html"&

21、gt; <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"><noframes><body>您的瀏覽器無法處理框架！</body></noframes></frameset></html></html>3. 混合框架結構<html><frameset rows="50%,50%"><fram

22、e src="/example/html/frame_a.html"><frameset cols="25%,75%"><frame src="/example/html/frame_b.html"><frame src="/example/html/frame_c.html"></frameset></frameset></html>20.含有 noresize="noresize" 屬性的框架結構 <html

23、><frameset cols="50%,*,25%"> <frame src="/example/html/frame_a.html" noresize="noresize" /> <frame src="/example/html/frame_b.html" /> <frame src="/example/html/frame_c.html" /></frameset></html>21.導航框架 <html

24、><frameset cols="120,*"> <frame src="/example/html/html_contents.html"> <frame src="/example/html/frame_a.html" name="showframe"></frameset></html>6. 內聯框架<html><body><iframe src="/i/eg_landscape.jpg">

25、;</iframe><p>一些老的瀏覽器不支持 iframe。</p><p>如果得不到支持，iframe 是不可見的。</p></body></html>22.跳轉到框架一個指定的節<html><frameset cols="20%,80%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/link.html#C10">

26、;</frameset></html>23.使用框架導航跳轉至指定的節 <html><frameset cols="180,*"><frame src="/example/html/content.html"><frame src="/example/html/link.html" name="showframe"></frameset></html>HTML 表格實例1.表格<html><body&g

27、t;<p>每個表格由 table 標簽開始。</p><p>每個表格行由 tr 標簽開始。</p><p>每個表格數據由 td 標簽開始。</p><h4>一列：</h4><table border="1"><tr> <td>100</td></tr></table><h4>一行三列：</h4><table border="1"><tr> <

28、td>100</td> <td>200</td> <td>300</td></tr></table><h4>兩行三列：</h4><table border="1"><tr> <td>100</td> <td>200</td> <td>300</td></tr><tr> <td>400</td> <td>500

29、</td> <td>600</td></tr></table></body></html>2. 表格邊框<html><body><h4>帶有普通的邊框：</h4> <table border="1"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <t

30、d>Row</td></tr></table><h4>帶有粗的邊框：</h4> <table border="8"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table><h4>帶有很粗的邊框：</h4> &

31、lt;table border="15"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table></body></html>3. 沒有邊框的表格<html><body><h4>這個表格沒有邊框：</h4><table>&

32、lt;tr> <td>100</td> <td>200</td> <td>300</td></tr><tr> <td>400</td> <td>500</td> <td>600</td></tr></table><h4>這個表格也沒有邊框：</h4><table border="0"><tr> <td>100</t

33、d> <td>200</td> <td>300</td></tr><tr> <td>400</td> <td>500</td> <td>600</td></tr></table></body></html>4. 表格中的標頭<html><body><h4>表頭：</h4><table border="1"><tr&

34、gt; <th>姓名</th> <th>電話</th> <th>電話</th></tr><tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td></tr></table><h4>垂直的表頭：</h4><table border="1"><tr> <th>姓

35、名</th> <td>Bill Gates</td></tr><tr> <th>電話</th> <td>555 77 854</td></tr><tr> <th>電話</th> <td>555 77 855</td></tr></table></body></html>5. 空單元格<html><body><table border=&qu

36、ot;1"><tr> <td>Some text</td> <td>Some text</td></tr><tr> <td></td> <td>Some text</td></tr></table><p>正如您看到的，其中一個單元沒有邊框。這是因為它是空的。在該單元中插入一個空格后，仍然沒有邊框。</p><p>我們的技巧是在單元中插入一個 no-breaking 空格。</p>

37、<p>no-breaking 空格是一個字符實體。如果您不清楚什么是字符實體，請閱讀關于字符實體的章節。</p><p>no-breaking 空格由和號開始 ("&")，然后是字符"nbsp"，并以分號結尾("")。</p></body></html>6. 帶有標題的表格<html><body><h4>這個表格有一個標題，以及粗邊框：</h4><table border="6">

38、;<caption>我的標題</caption><tr> <td>100</td> <td>200</td> <td>300</td></tr><tr> <td>400</td> <td>500</td> <td>600</td></tr></table></body>7. 跨行跨列的表格<html><body><h4>橫

39、跨兩列的單元格：</h4><table border="1"><tr> <th>姓名</th> <th colspan="2">電話</th></tr><tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td></tr></table><h4>橫跨兩行的單元格：</h

40、4><table border="1"><tr> <th>姓名</th> <td>Bill Gates</td></tr><tr> <th rowspan="2">電話</th> <td>555 77 854</td></tr><tr> <td>555 77 855</td></tr></table></body></

41、html>8. 表格內的標簽<html><body><table border="1"><tr> <td> <p>這是一個段落。</p> <p>這是另一個段落。</p> </td> <td>這個單元包含一個表格： <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr>

42、 <td>C</td> <td>D</td> </tr> </table> </td></tr><tr> <td>這個單元包含一個列表： <ul> <li>蘋果</li> <li>香蕉</li> <li>菠蘿</li> </ul> </td> <td>HELLO</td></tr></table></body>

43、</html>9. 單元格邊距<html><body><h4>沒有 cellpadding：</h4><table border="1"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table><h4>帶有 cellpaddin

44、g：</h4><table border="1" cellpadding="10"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table></body></html>9. 單元格間距<html><body><h4

45、>沒有 cellspacing：</h4><table border="1"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table><h4>帶有 cellspacing：</h4><table border="1" cellspa

46、cing="10"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table></body></html>10. 向表格添加背景顏色或背景圖像 <html><body><h4>背景顏色：</h4><table border=&qu

47、ot;1" bgcolor="red"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table><h4>背景圖像：</h4><table border="1" background="/i/eg_bg_07.gif">&

48、lt;tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table></body></html>11. 向表格單元添加背景顏色或者背景圖像 <html><body><h4>單元背景：</h4> <table border="1"><tr

49、> <td bgcolor="red">First</td> <td>Row</td></tr> <tr> <td background="/i/eg_bg_07.gif"> Second</td> <td>Row</td></tr></table></body></html>11. 在表格單元中排列內容 <html><body><table width

50、="400" border="1"> <tr> <th align="left">消費項目.</th> <th align="right">一月</th> <th align="right">二月</th> </tr> <tr> <td align="left">衣服</td> <td align="right"&

51、gt;$241.10</td> <td align="right">$50.20</td> </tr> <tr> <td align="left">化妝品</td> <td align="right">$30.00</td> <td align="right">$44.45</td> </tr> <tr> <td align="left"

52、;>食物</td> <td align="right">$730.40</td> <td align="right">$650.00</td> </tr> <tr> <th align="left">總計</th> <th align="right">$1001.50</th> <th align="right">$744.65</th>

53、; </tr></table></body></html>12. 框架屬性<html><body><p><b>注釋：</b>frame 屬性無法在 Internet Explorer 中正確地顯示。</p><p>Table with frame="box":</p><table frame="box"> <tr> <th>Month</th> <th>S

54、avings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr></table><p>Table with frame="above":</p><table frame="above"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr&g

55、t; <td>January</td> <td>$100</td> </tr></table><p>Table with frame="below":</p><table frame="below"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td

56、>$100</td> </tr></table><p>Table with frame="hsides":</p><table frame="hsides"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr></

57、table><p>Table with frame="vsides":</p><table frame="vsides"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr></table></body></html>H

58、TML 列表實例1. 無序列表<html><body><h4>一個無序列表：</h4><ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li></ul></body></html>2. 有序列表<html><body><h4>一個有序列表：</h4><ol> <li>咖啡</li> <li>茶</li>

59、; <li>牛奶</li></ol></body></html>3. 不同類型的無序列表<html><body><h4>Disc 項目符號列表：</h4><ul type="disc"> <li>蘋果</li> <li>香蕉</li> <li>檸檬</li> <li>桔子</li></ul> <h4>Circle 項目符號列表：</

60、h4><ul type="circle"> <li>蘋果</li> <li>香蕉</li> <li>檸檬</li> <li>桔子</li></ul> <h4>Square 項目符號列表：</h4><ul type="square"> <li>蘋果</li> <li>香蕉</li> <li>檸檬</li> <li>

61、桔子</li></ul> </body></html>4. 不同類型的有序列表<html><body><h4>數字列表：</h4><ol> <li>蘋果</li> <li>香蕉</li> <li>檸檬</li> <li>桔子</li></ol> <h4>字母列表：</h4><ol type="A"> <li>蘋果&

62、lt;/li> <li>香蕉</li> <li>檸檬</li> <li>桔子</li></ol> <h4>小寫字母列表：</h4><ol type="a"> <li>蘋果</li> <li>香蕉</li> <li>檸檬</li> <li>桔子</li></ol> <h4>羅馬字母列表：</h4><ol type=&

63、quot;I"> <li>蘋果</li> <li>香蕉</li> <li>檸檬</li> <li>桔子</li></ol> <h4>小寫羅馬字母列表：</h4><ol type="i"> <li>蘋果</li> <li>香蕉</li> <li>檸檬</li> <li>桔子</li></ol> </body

64、></html>5. 嵌套列表<html><body><h4>一個嵌套列表：</h4><ul> <li>咖啡</li> <li>茶 <ul> <li>紅茶</li> <li>綠茶</li> </ul> </li> <li>牛奶</li></ul></body></html>6. 嵌套列表2<html><body>&l

65、t;h4>一個嵌套列表：</h4><ul> <li>咖啡</li> <li>茶 <ul> <li>紅茶</li> <li>綠茶 <ul> <li>中國茶</li> <li>非洲茶</li> </ul> </li> </ul> </li> <li>牛奶</li></ul></body></html>7. 定義列表<

66、;html><body><h2>一個定義列表：</h2><dl> <dt>計算機</dt> <dd>用來計算的儀器 . .</dd> <dt>顯示器</dt> <dd>以視覺方式顯示信息的裝置 . .</dd></dl></body></html>HTML 表單與輸入實例1. 文本域<html><body><form>名：<input type="text&q

67、uot; name="firstname"><br />姓：<input type="text" name="lastname"></form></body></html>2. 密碼<html><body><form>用戶：<input type="text" name="user"><br />密碼：<input type="password"

68、 name="password"></form><p>請注意，當您在密碼域中鍵入字符時，瀏覽器將使用項目符號來代替這些字符。</p></body></html>3. 復選框<html><body><form>我喜歡自行車：<input type="checkbox" name="Bike"><br />我喜歡汽車：<input type="checkbox" name="Ca

69、r"></form></body></html>4. 單選按鈕<html><body><form>男性：<input type="radio" checked="checked" name="Sex" value="male" /><br />女性：<input type="radio" name="Sex" value="female"

70、/></form><p>當用戶點擊一個單選按鈕時，該按鈕會變為選中狀態，其他所有按鈕會變為非選中狀態。</p></body></html>5. 簡單的下拉列表<html><body><form><select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option>&l

71、t;option value="fiat">Fiat</option><option value="audi">Audi</option></select></form></body></html>6. 另一個下拉列表<html><body><form><select name="cars"><option value="volvo">Volvo</option

72、><option value="saab">Saab</option><option value="fiat" selected="selected">Fiat</option><option value="audi">Audi</option></select></form></body></html>7. 文本域<html><body><textarea c

73、ols="30" rows="5">領先的 Web 技術教程 - 全部免費在w3school，你可以找到你所需要的所有的網站建設教程。從基礎的HTML到XHTML，乃至進階的XML、SQL、數據庫、多媒體和WAP。</textarea><p>您無法對本例進行編輯，因為我們的在線編輯器使用 textarea 進行輸入，而瀏覽器不允許 textarea 中存在另一個 textarea。</p></body></html>8. 創建按鈕<html><body><fo

74、rm><input type="button" value="Hello world!"></form></body></html>9. 本例演示如何在數據周圍繪制一個帶標題的框<!DOCTYPE HTML><html><body><form> <fieldset> <legend>健康信息</legend> 身高：<input type="text" /> 體重：<input t

75、ype="text" /> </fieldset></form><p>如果表單周圍沒有邊框，說明您的瀏覽器太老了。</p></body></html>表單實例1.本例演示如何向頁面添加表單。此表單包含兩個輸入框和一個確認按鈕。<html><body><form action="/example/html/form_action.asp" method="get"> <p>First name: <inpu

76、t type="text" name="fname" /></p> <p>Last name: <input type="text" name="lname" /></p> <input type="submit" value="Submit" /></form><p>請單擊確認按鈕，輸入會發送到服務器上名為 "form_action.asp" 的頁面。</p&

77、gt;</body></html>2.此表單包含兩個復選框和一個確認按鈕。<html><body><form name="input" action="/html/html_form_action.asp" method="get">I have a bike:<input type="checkbox" name="vehicle" value="Bike" checked="checked&quo

78、t; /><br />I have a car: <input type="checkbox" name="vehicle" value="Car" /><br />I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" /><br /><br /><input type="submit&q

79、uot; value="Submit" /></form> <p>如果您點擊 "Submit" 按鈕，您將把輸入傳送到名為 html_form_action.asp 的新頁面。</p></body></html>3. 帶有單選按鈕的表單<html><body><form name="input" action="/html/html_form_action.asp" method="get">M

80、ale: <input type="radio" name="Sex" value="Male" checked="checked"><br />Female: <input type="radio" name="Sex" value="Female"><br /><input type ="submit" value ="Submit"></form

81、> <p>如果您點擊 "Submit" 按鈕，您將把輸入傳送到名為 html_form_action.asp 的新頁面。</p></body></html>4.此例演示如何從表單發送電子郵件。<html><body><form action="MAILTO:someone" method="post" enctype="text/plain"><h3>這個表單會把電子郵件發送到 W3School。</h3&g

82、t;姓名：<br /><input type="text" name="name" value="yourname" size="20"><br />電郵：<br /><input type="text" name="mail" value="yourmail" size="20"><br />內容：<br /><input type="text" name="comment" value="yourcomment" size="40"><br /><br /><input type="submit" value="發送"><input type="r

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論