1 html標題
<h1> to <h6>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>h1</h1> <h2>h2</h2> <h3>h3</h3> <h4>h4</h4> <h5>h5</h5> <h6>h6</h6> </body> </html>
2 html水平線 <hr/>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h6>h6</h6> <hr/> </body> </html>
3 html注釋<!-- comment -->
注釋並不會顯示在網頁上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h6>h6</h6><!-- hello world --> <hr/> </body> </html>
4 html段落<p>以及段落換行<br/>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>hello world</p> <p>hello world</p> <hr/> </body> </html>
當顯示頁面時，瀏覽器會移除源代碼中多余的空格和空行。所有連續的空格或空行都會被算作一個空格。需要注意的是，HTML 代碼中的所有連續的空行（換行）也被顯示為一個空格。
段落換行使用<br/>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>hello world</p> <p>hello <br/> world</p> <hr/> </body> </html>
5 html文本格式化
6 html超鏈接<a>
<a>比較重要的屬性有兩個，分別是href、target
href指定超鏈接地址
target指定打開方式
_blank 新頁面打開
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>hello world</p> <a href="http://www.baidu.com">百度</a> <hr/> </body> </html>
另提供了較為全面的<a>標簽使用方法鏈接：http://blog.csdn.net/ao_xiaoqiang/article/details/44345565
7 html的圖像<img>
使用格式：<img src="url">
alt 定義當圖片無法加載時，顯示什么信息
width 定義寬度，單位可以為像素 也可以為百分比
height 定義高度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>hello world</p> <a href="http://www.baidu.com"><img src="l.jpg"/></a> <hr/> </body> </html>
8 html的表格<table>
表格由<table>來定義，每行<tr> 有許多單元格<td>。表頭可以使用<th>
<table>標簽屬性：
border 定義邊框
在<table>中可以嵌入<th> <tr> <td>等標簽
<tr> 定義行
<th> 定義表頭
colspan 定義表頭單元格可以橫跨的列數。
rowspan 定義表頭單元格橫跨的行數
heardes 定義與表頭單元格相關聯的一個或者多個單元格。(html5新增)
<td> 定義單元格
colspan 定義單元格可以橫跨的列數。
rowspan 定義單元格橫跨的行數
heardes 定義與單元格相關聯的一個或者多個單元格。(html5新增)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1px"> <tr> <th colspan="2" >name</th> <th rowspan="2">list</th> </tr> <tr> <th headers="name">first name</th> <th headers="name">last name</th> </tr> </table>
在瀏覽器中顯示如下：
另外，若某個單元格為空，瀏覽器可能無法顯示出這個單元格的邊框。為了防止這種情況，可以在該單元格加一個空格占位符 。
9 html列表<ul> <ol>
列表分為
無序列表<ul>
有序列表<ol>
列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等
<ul> <li>male</li> <li>female</li> </ul> <hr/> <ol> <li>male</li> <li>female</li> </ol>
瀏覽器顯示為：
10 html表單<form>
表單是一個包含表單元素的區域。
表單元素是允許用戶在表單中（比如：文本域、下拉列表、單選框、復選框等等）輸入信息的元素
<form>中的屬性：
action：后面加url 指定當提交表單時向何處發送表單數據
method：get/post兩個值，get為明文 post為加密
name：指定表單的名稱
target：_blanket _self _parent _top 指定網頁打開方式
<from>標簽中較為常用的標簽有<input> <select> <label> <button>
<fieldset> 標簽可以將表單內的相關元素分組。 會在相關表單元素周圍繪制邊框。
name 規定fieldset的名稱
form 值：form_id 規定fieldset所屬的表單
<legend> 定義了 <fieldset> 元素的標題。
<input>中最為常用的幾個屬性:
form 后面跟所屬form的id。規定所屬的form
required 值：required 規定必需在提交表單之前填寫輸入字段。
disabled 值： disabled disabled 屬性規定應該禁用的 <input> 元素。
type:決定輸入類型
text 文本域
radio 單選按鈕
checkbox 復選框
submit 提交按鈕
password 密碼輸入
reset 重置
color 設置拾色器 html5
number 定義用於輸入數字的字段（您可以設置可接受數字的限制）
range 定義用於精確值不重要的輸入數字的控件（比如 slider 控件）。您也可以設置可接受數字的限制
name:input元素的名稱
value：input元素的值
size：輸入字段的寬度
pattern 規定用於驗證 <input> 元素的值的正則表達式。pattern 屬性適用於下面的 input 類型：text、search、url、tel、email 和 password
list 值為datalist的id 該屬性引用 <datalist> 元素，其中包含 <input> 元素的預定義選項。
autofocus 該屬性是一個 boolean 屬性，讓頁面載入后，input自動獲得焦點
<datalist> html5中的新特性 標簽規定了 <input> 元素可能的選項列表。<datalist> 標簽被用來在為 <input> 元素提供"自動完成"的特性。
用戶能看到一個下拉列表，里邊的選項是預先定義好的，將作為用戶的輸入數據。
與<option>標簽配合使用
<button> 定義一個點擊按鈕
form 所屬的form表單
name button名稱
type
button 該按鈕是可點擊的按鈕
reset 該按鈕是重置按鈕
submit 該按鈕是提交按鈕
<label>標簽為 input 元素定義標注（標記）
label 元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控件。
就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上
for 值為某個元素的id 規定 label 與哪個表單元素綁定。
form form_id
<textarea>
name 規定textarea的名稱
form form_id 規定從屬的表單
cols 規定可見列數
rows 規定可見行數
<select>使用<option>標簽定義下拉列表的可用選項.常見的屬性：
name：指定select名稱
multiple：規定可選擇多個選項
<optgroup> 用於把相關的選項組合在一起。
label 為選項組規定描述。
<option> 常見的屬性：
value：指定送往服務器的選項值
selected：只有一個值--selected 默認選項
<keygen> 定義了表單的密鑰對生成器字段
form 所屬的表單名稱
name 名稱
keytype 使用的加密算法
rsa 默認的算法
dsa
es
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form name="biaoge" action="/return/" method="get"> 請選擇語言: <br/><br/><input type="radio" name="language" id="jtzw" value="chinese"/><label for="jtzw">簡體中文</label><br/><br/> <input type="radio" name="language" value="english" id="eng"/><label for="eng">English</label><br/><br/> 請選擇熟悉的編程語言:<br/><br/> <fieldset> <legend>編程語言</legend> <input type="checkbox" name="python" />python <input type="checkbox" name="c" />c <input type="checkbox" name="swift" />swift<br/><br/> </fieldset><br/> 請選擇地區： <select name="district"> <optgroup label="China"> <option value="shandong">山東</option> <option value="zhejiang" selected="selected">浙江</option> <option value="guangdong">廣東</option> </optgroup> <optgroup label="USA"> <option value="ny">紐約</option> <option value="lsj">洛杉磯</option> </optgroup> </select><br/><br/> 請選擇顏色:<input type="color"><br/><br/> name:<input type="text" name="name" value="slyoyo"/> password:<input type="password" name="passwd" value="hahaha"/> <input type="submit" value="login"/><br/><br/> 系統：<input list="xuanze" type="text"> <datalist id="xuanze"> <option value="windows">Windows</option> <option value="linux">Linux</option> </datalist> </form> </body> </html>
瀏覽器顯示：
