元素（Elements）
元素用於結構化HTML文檔，並告知瀏覽器如何呈現網頁。一般來說，一個元素包括一個首標籤（start tag）、零或多個屬性（attribute）、內容（content）和一個尾標籤（end tag）。如下圖：
標籤（Tags）
格式：以小於號“<”開頭，以大於號“>”結尾
分爲首標籤（start tag）和尾標籤（end tag）。它們唯一的區別在於，尾標籤多一條斜槓”/”。 首尾標籤之間的爲內容。
屬性（Attributes）
爲元素附加一些信息，這些附加信息被稱爲屬性（attribute）。
屬性應寫在元素的首標籤上。格式：屬性名稱（attribute name）後緊跟一個等號（“=”），後面寫上用雙引號括起來的屬性值（attribute value）。
例如：
<h2 style="background-color:#ff0000;">紅色二級標題</h2>
對於style屬性的值，可以用分號（“;”）來分隔多個樣式指令。
16進制以#開頭，顏色符合RGB。
白色： #ffffff
黑色： #000000
紅色： #ff0000
蘭色： #0000ff
綠色： #00ff00
鏈接（Links）
做鏈接只需一個元素和一個屬性就行了。
鏈接到另一個網站
<a href="http://www.baidu.com/">這是一個指向百度的鏈接</a>元素a代表“錨（anchor）”；屬性href代表“超文本引用（hypertext reference）”，它用於指定鏈接指向何處——通常是一個因特網地址（如URL，URL必須包含http://）或者一個文件名。
同一個網站的網頁之間的鏈接
不必拼寫出網頁的完整URL。假如有兩個網頁（比如說page1.html和page2.html），而且它們被存放在同一個文件夾中，那麼在做鏈接的時候，只要寫出文件名就行了。
<a href="page2.html">page1->page2</a>一個網頁內做鏈接
使用id屬性和“#”符號來實現。<a href="#heading1">轉到標題1</a> <h1 id="heading1">標題1</h1>鏈接上使用title屬性
<a href="http://www.baidu.com/" title="指向百度">百度</a>把鼠標光標停留在該鏈接上時，提示文字“指向百度”便會出現。
圖像
有三種類型的圖片可被插入到網頁中：GIF，JPG或JPEG，PNG
插入一張圖片
<img src="qi.jpg"> 圖片來自文件夾 <img src="http://www.html.net/logo.png"> 圖片來自網站 <a href="http://www.html.net"><img src="qi.jpg"></a> 圖片用作鏈接屬性src用來指出要插入圖片的位置，若圖片不存在，則在網頁上顯示不出來。
其他屬性
alt用於給出圖像的替用描述，假如由於某些原因該圖像未能顯示出來，瀏覽器就通過顯示這個描述來替代圖像。
<img src="q.jpg" alt="qi">title用於將光標停留在圖片上時會顯示出文本。和鏈接上使用的title屬性的功能相同
<img src="q.jpg" title="qi">width和height用於設置圖片的寬度和高度的像素。
<img src="qi.jpg" width="300" height="500">
表格
用於創建表格的3個基本元素：
1. 首標籤 <table> 和尾標籤</table>分別表示一個表格的開始與結束。 2. tr是“table row（表格行）”的縮寫，用於表示一行的開始和結束。 3. td是“table data（表格數據）”的縮寫，用於表示行中各個單元格（cell）的開始和結束。 <table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> 輸出： Cell 1 Cell 2 Cell 3 Cell 4屬性
border： 指定表格四周邊框的厚度。
width： 用於設置屏佔百分比<table border="1" width="30%">align： 指定整個表格、某行或某個單元格里內容的水平對齊方式，比如左對齊、居中或右對齊。
valign： 指定某個單元格里內容的垂直對齊方式，比如靠上、置中或靠下。<td align="right" valign="top">單元格1</td>colspan（column span）： 指定單元格橫向跨越的列數
<td colspan="2">Cell 1</td>rowspan： 指定單元格縱向跨越的行數
<td rowspan="3">Cell 1</td>
頁面佈局
使用級聯樣式表（Cascading Style Sheets，簡稱CSS）爲網站設計頁面佈局。HTML負責網頁的具體內容（結構），而CSS則修飾網頁的表現形式（佈局）。
用style屬性將CSS內聯到網頁中
<p style="font-size:20px;">這裏的文字大小爲20</p> <p style="font-family:courier;">這裏的文字字體爲黑體/p> <p style="font-size:20px; font-family:courier;">這裏是文字大小爲20、採用黑體的文字</p>CSS對頁面佈局進行集中管理
要將CSS嵌入文檔，你只需通過標籤
<style type="text/css">告訴瀏覽器該段爲CSS即可。
<style type="text/css"> h1 {font-size: 30px; font-family: arial;} h2 {font-size: 15px; font-family: courier;} p {font-size: 8px; font-family: "times new roman";} </style>所有一級標題（h1）採用宋體，字體大小爲30（象素）；所有二級標題（h2）採用黑體，字體大小爲15（象素）；普通段落文字（p）採用隸書，字體大小爲8（象素）。
CSS還可以控制頁面設置與表現形式(邊距，漂浮，對齊，寬度，高度等）
樣例
<mata charset="UTF-8"> <!--防止中文亂碼-->
<html>
<head>
<title>網站標題</title>
<style type="text/css">
h1 {font-size: 30px; font-family: arial;}
h2 {font-size: 15px; font-family: courier;}
p {font-size: 8px; font-family: "times new roman"; color:green;}
</style>
</head>
<body>
<!-- 這裏添加註釋-->
<h1>一級標題</h1>
<h2>二級標題</h2>
...
<h6>六級標題</h6>
<p>文本段落</p>
<b>粗體</b>
<i>斜體</i>
<em>斜體</em>
<small>小字體</small>
<b><i>既是粗體又是斜體</i></b>
<br /> <!--插入一個換行符-->
<hr /> <!--畫一條水平線-->
<ul> <!--列表：粗點代表一個列表項-->
<li>列表項</li>
</ul>
<ol> <!--列表：有序數字代表一個列表項-->
<li>列表項</li>
</ol>
<h2 style="background-color:#ff0000;">爲二級標題附加紅色屬性</h2>
<a href="#heading1" title="轉到heading1">轉到標題1</a>
<h1 id="heading1">標題1</h1>
<table border="1" width="50%">
<tr>
<td align="right" valign="top">Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
</tr>
<tr>
<td colspan="4">Cell 9 </td>
</tr>
</table>
</body>
</html>
