無序列表
無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。
無序列表始於 <ul> 標籤。每個列表項始於 <li>。
列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
<html> <body> <ul> <li>Dog<br/>and<br/>Person</li> <li><img src="bw.jpg" alt="bw"></li> <li>Pig<br/>and<br/>Person</li> </ul> </body> </html>
有序列表
同樣，有序列表也是一列項目，列表項目使用數字進行標記。
有序列表始於 <ol> 標籤。每個列表項始於 <li> 標籤。
列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
<html> <body> <ol> <li>This is <br/>a big mouse</li> <li><img src="bw.jpg" alt="bw" href="http:www.baidu.com">Black Widow</li> <li><a href="http:www.baidu.com" target="_blank"><img src="bw.jpg" alt="bw" href="http:www.baidu.com"></a></li> </ol> </body> </html>
自定義列表
自定義列表不僅僅是一列項目，而是項目及其註釋的組合。
自定義列表以 <dl> 標籤開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
定義列表的列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
<html> <body> <dl><!-- 自定義列表開始標籤 --> <dt>Program</dt><!-- 類目 --> <dd>JAVA PHP C#</dd><!-- 內容 --> <dt>Animal</dt> <dd>Bird Bull Taiger</dd> </dl> </body> </html>
不同類型的無序列表
<html> <body> <ul> <li>BULL</li> <li>NASA</li> <li>IBM</li> </ul> <ul type="disc"> <li>BULL</li> <li>NASA</li> <li>IBM</li> </ul> <ul type="circle"> <li>BULL</li> <li>NASA</li> <li>IBM</li> </ul> <ul type="square"> <li>BULL</li> <li>NASA</li> <li>IBM</li> </ul> </body> </html>
不同類型的有序列表
<html> <body> <ol ><!-- 如果給出的類型無法識別，則按默認1,2,3顯示 --> <li>GOOGLE</li> <li>MICRO</li> <li>APPLE</li> </ol> <ol type="A"> <li>GOOGLE</li> <li>MICRO</li> <li>APPLE</li> </ol> <ol type="a"> <li>GOOGLE</li> <li>MICRO</li> <li>APPLE</li> </ol> <ol type="I"><!-- 大寫羅馬數字 --> <li>GOOGLE</li> <li>MICRO</li> <li>APPLE</li> </ol> <ol type="i"> <!-- 小寫羅馬數字 --> <li>GOOGLE</li> <li>MICRO</li> <li>APPLE</li> </ol> </body> </html>
列表嵌套
<html> <body> <ul>Big <ol>small <li>A</li> <li>B</li> <li>C</li> </ol> </ul> <ul>Big <dl>small <dt>A</dt> <dd>abc ABC 123</dd> </dl> </ul> <ul>Big <ul>small <li>1</li> <li>2</li> <li>3</li> </ul> </ul> </body> </html>
HTML 塊元素
大多數 HTML 元素被定義爲塊級元素或內聯元素。
編者注：“塊級元素”譯爲 block level element，“內聯元素”譯爲 inline element。
塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）。
例子：<h1>, <p>, <ul>, <table>
HTML 內聯元素
內聯元素在顯示時通常不會以新行開始。
例子：<b>, <td>, <a>, <img>
HTML <div> 元素
HTML <div> 元素是塊級元素，它是可用於組合其他 HTML 元素的容器。
<div> 元素沒有特定的含義。除此之外，由於它屬於塊級元素，瀏覽器會在其前後顯示折行。
如果與 CSS 一同使用，<div> 元素可用於對大的內容塊設置樣式屬性。
<div> 元素的另一個常見的用途是文檔佈局。它取代了使用表格定義佈局的老式方法。使用 <table> 元素進行文檔佈局不是表格的正確用法。<table> 元素的作用是顯示錶格化的數據。
HTML <span> 元素
HTML <span> 元素是內聯元素，可用作文本的容器。
<span> 元素也沒有特定的含義。
當與 CSS 一同使用時，<span> 元素可用於爲部分文本設置樣式屬性。
簡單的div佈局
<!DOCTYPE html>
<html>
<head>
<style>
#big{
width: 1000px;
background: gray;
}
#head{
height: 100px;
background: pink;
}
#left{
height: 400px;
width: 400px;
float: left;
}
#right{
height: 400px;
width: 600px;
background: url(bw.jpg);
float: right;
}
#foot{
height: 50px;
background: blue;
clear: both;
text-align: center;
}
</style>
</head>
<body>
<div id="big">
<div id="head">我是頭</div>
<div id="left">我是左邊
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
<li>Yellow</li>
</ul>
</div>
<div id="right">我是右邊</div>
<div id="foot">我是腳</div>
</div>
</body>
</html>HTML 佈局 - 使用表格
使用 HTML <table> 標籤是創建佈局的一種簡單的方式。
可以使用 <div> 或者 <table> 元素來創建多列。CSS 用於對元素進行定位，或者爲頁面創建背景以及色彩豐富的外觀。
提示：即使可以使用 HTML 表格來創建漂亮的佈局，但設計表格的目的是呈現表格化數據 - 表格不是佈局工具！
<html> <body> <!-- 設置表格總寬度和邊框厚度 --> <table width="500" border="1"> <tr><!--第一行 --> <!-- 設置橫跨兩列 --> <td colspan="2" bgcolor="red"> <h>Hello World</h> </td> </tr> <tr valign="top"><!--第二行 --> <!--設置背景色，寬度及文字靠上 --> <td style="background:blue;width:99px;text-align:top"> <!--主標題加粗 --> <b>Menu</b><br/> GOOGLE<br/> Apple<br/> Microsoft </td> <td style="background:pink; width:400px;height:200px;text-align:top"> Just try </td> </tr> <tr ><!--第三行 --> <!--設置內容居中顯示，橫跨兩列 --> <td align="center" colspan="2">Bye!</td> </tr> </table> </body> </html>
表單
表單是一個包含表單元素的區域。
表單元素是允許用戶在表單中（比如：文本域、下拉列表、單選框、複選框等等）輸入信息的元素。
表單使用表單標籤（<form>）定義。
輸入
多數情況下被用到的表單標籤是輸入標籤（<input>）。輸入類型是由類型屬性（type）定義的。大多數經常被用到的輸入類型如下：
文本域（Text Fields）
當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域。
表單本身並不可見。同時，在大多數瀏覽器中，文本域的缺省寬度是20個字符。
單選按鈕（Radio Buttons）
當用戶從若干給定的的選擇中選取其一時，就會用到單選框。
複選框（Checkboxes）
當用戶需要從若干給定的選擇中選取一個或若干選項時，就會用到複選框。
表單的動作屬性（Action）和確認按鈕
當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。
<html><!-- --> <body> <!-- 設置表單提交地址 --> <form action="001.html"> Chinese name: <!-- 文本框，類型爲text，賦值給chName --> <input type="text" name="chName"/> <br/> <br/> English name: <input type="text" name="enName"/> <br/> <br/> <!-- 單選框類型 元素名稱sex 選項之一爲male --> <input type="radio" name="sex" value="male"/>Male <br/> <input type="radio" name="sex" value="female"/>Female <br/> <br/> <!-- 多選框 選項之一名字爲 football --> <input type="checkbox" name="football"/> I love Football <br/> <input type="checkbox" name="basketball"/> I love Basketball <br/> <input type="checkbox" name="pingpang"/> I love Pingpang </form> <br/> <br/> <form name="input"action="002.html" method="get"> Username: <!-- text類型，賦值給user --> <input type="text" name="user"/> <!-- submit 提交類型 按鈕顯示文字Go --> <input type="submit" value="Go"> </form> <br/> <br/> <form action="003.html"> <!-- 下拉菜單，name爲組件名稱 id爲標示 --> <select name="cars" id="car"> <!-- 各個選項 value是選項元素名稱 --> <option value="Volvo">Volvo</option> <option value="Benz">Benz</option> <option value="BMW">BMW</option> <!-- 默認顯示最上面的，如果加上selected即將次選項作爲默認顯示 --> <option value="Farrari" selected="selected">Farrari</option> </select> <br/> <br/> <!-- 文本框 cols可見寬度 rows 可見行數 --> <textarea name="" id="" cols="30" rows="10"> This is a textarea </textarea> <br/> <br/> <!-- 創建一個顯示Hello的按鈕 --> <input type="button" value="Hello"> <br/> <br/> <!-- 自定義文字段 ，控件組 --> <fieldset> <!-- 標題，說明 --> <legend>Sum</legend> A: <input type="text"/> B: <input type="text"/> </fieldset> </form> </body> </html><!-- -->