一. Hello World
<!DOCTYPE html> <!--根標簽，一個HTML文檔有且只有一個根標簽--> <html lang="en"> <!-- 注釋快捷鍵：ctrl + / head 標記：HTML頭部 body 標記：HTML主體部分 --> <head> <!--指定HTML使用的編碼--> <meta charset="UTF-8"> <!--HTML標題--> <title>Title</title> </head> <!--網頁主體部分--> <body> <h1>Hello World!</h1> </body> </html>
二. HTML標簽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- HTML標簽： 1.HTML標簽必須要成對存在 2.不區分大小寫，建議使用小寫 --> <!--開始標簽和結束標簽寫在一起--> <h1>Hello World</h1> <!--分割線--> <hr /> <!--換行符--> <br /> </body> </html>
三. 基本標簽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--標題標簽--> <h1>Hello World</h1> <h2>Hello World</h2> <h3>Hello World</h3> <h4>Hello World</h4> <h5>Hello World</h5> <h6>Hello World</h6> <!--段落標簽--> <p> 一個HTML文件主要有兩部分組成：文件頭和文件體 1.文件頭用來告訴瀏覽器如何解析HTML文件 2.文件體用來存放網頁顯示的內容 </p> <hr /> <!--字符實體標簽--> <!-- HTML中有一些字符有特殊含義，例如：左尖括號<、右尖括號>等等。 為了能夠在HTML文本中顯示它們，我們需要使用字符實體。 字符實體有三部分：&符號 + 實體名 + 英文分號，比如： 小於號(左尖括號)：< 大於號(右尖括號)：> 一個空格: 常見的字符實體有：
-->
</html>
四. 格式化標簽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> Python人工智能<br /> <b>Python人工智能</b><br /> <strong>Python人工智能</strong><br /> <h1>HTML入門</h1><small>HTML標簽用法</small><br /> 水的化學式：H<sub>2</sub>0<br /> X的平方：X<sup>2</sup><br /> <pre> 靜夜思 床前明月光，疑是地上霜。 舉頭望明月，低頭思故鄉。 </pre> </body> </html>
五. 列表標簽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 無序列表： type屬性：指定列表類型 disc：點 square：方塊 circle：圓圈 --> 菜單： <ul type="circle"> <li>宮保雞丁</li> <li>黃燜雞</li> <li>糯米雞</li> </ul> <br /> <!-- 有序列表： type屬性：指定列表類型，可以是：1、a、A、i、I --> 明星： <ol type="a"> <li>劉德華</li> <li>劉燁</li> <li>劉濤</li> </ol> <br /> <!--定義標簽--> <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> </body> </html>
六. 超鏈接標簽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- a標簽：超鏈接標簽 工作原理： 1.如果a標簽的href屬性是以http開頭，那么瀏覽器就會啟用http協議解析該網址內容 2.如果a標簽的href屬性是以其他協議開頭，那么瀏覽器就會檢查注冊表中是否存在處理該協議的軟件。如果存在就打開軟件處理該協議 3.如果a標簽是以file協議開頭，那么瀏覽器就會在當前目錄下查找是否存在指定資源 target: 指定網頁的打開方式 _self: 在當前窗口中打開 _blank: 在新窗口中打開 --> <a href="http://www.baidu.com" target="_blank">點我進入百度首頁</a> </body> </html>
七. 錨點定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--錨點定位可以定位到網頁的某一位置,這樣使用者就無需不停的滾動頁面來尋找需要的信息--> <!-- 實現步驟: 1.定義錨點, name屬性用於創建命名的錨.這里不需要指定 href屬性 2.將 # 符號和錨名稱添加到URL末端,這樣可以跳轉到錨位置 --> <a name="tips">name屬性定義錨點</a> <a href="http://www.w3school.com.cn#tips"><br />點我跳轉到錨點位置</a> <br /> </body> </html>
八. 圖像
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="http://www.jd.com"> <img src="img/time2.jpg" alt="這是圖片" </a> </body> </html>
九. 表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- border: 設置表格邊框的寬度 width: 表格的寬度，以像素為單位 height: 設置表格的最小高度 cellspacing: 設置單元格之間的空白 --> <table border="1" width="500" height="200" cellspacing="0" align="left"> <!--表格標題,有top就有bottom--> <caption align="top">學員成績表</caption> <thead> <!-- align: 設置行或列的對齊方式，它的值可以是： left\center\right\justify --> <tr align="center"> <!--表格頭--> <th>姓名</th> <th>性別</th> <th>成績</th> </tr> </thead> <!--這里設置了center,下面的不用設置了--> <tbody align="center"> <tr> <td>小寶</td> <td rowspan="3">男</td> <td>100</td> </tr> <tr> <td>中寶</td> <td>90</td> </tr> <tr> <td>大寶</td> <td>95</td> </tr> <tr> <td>平均成績</td> <td colspan="2">95</td> </tr> </tbody> </table> </body> </html>