1.html5基本的模板：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<Meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
</body>
</html>
2.常用元素（包括锚点）
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>基本结构</title>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
b元素:<b>html5</b><br>
strong<strong>html5</strong><br>
wbr元素：abs<wbr>fabafjfjs<wbr>ifkjfsjflkjlksjoijojoijrqjosjfj<wbr>isofjiwqjfsjfoi<br>
i元素<i>html5</i><br>
em元素:这是<em>html5</em><br>
del元素:这是<del>html5</del><br>
u元素:这是<u>html5</u><br>
ins元素:这是<ins>html5</ins><br>
small元素：这是<small>html5</small><br>
sub元素:这是<sub>html5</sub><br>
sup元素:这是<sup>html5</sup><br>
<!-- 以下在英文下有效果 <html lang="en">-->
code元素:这是<code>html5</code><br>
var元素:这是<var>html5</var><br>
samp元素：这是<samp>html5</samp><br>
kbd元素：这是<kbd>html5</kbd><br>
abbr元素：这是<abbr>html5</abbr><br>
dfn元素：这是<dfn>html5</dfn><br>
q元素:这是<q>html5</q><br>
cite元素:这是<cite>html5</cite><br>
ruby元素：这是<ruby style="font-size:100px">饕(taotie)餮</ruby><br><br>
bdo元素:这是<bdo dir="rtl">HTML5</bdo><br>
mark元素:这是<mark>HTML5</mark><br>
time元素:这是<time>2015-10-11</time><br>
span元素:这是<span>html5</span><br>
<a href="#1">第一章</a> <a href="#2">第二章</a> <a href="#3">第三章</a>
<a name="1"></a><br><br>这是第一章内容
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="2"></a><br><br>这是第二章内容
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="3"></a><br><br>这是第三章内容
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
3.分组元素
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<Meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>这是一个段落</p>
<p>这是另一个段落</p>
<div>这是一个公益分组</div>
<div>这是另一个公益分组</div>
<blockquote>这是一个大段的来自他出的内容</blockquote>
<blockquote>这是另一个大段的来自他出的内容</blockquote>
<pre>
#######
########
### #######
########
########
</pre>
<hr>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ol start="2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<ol reversed="reversed">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<ol type="a">
<li>1</li>
<li>2</li>
<li value="5">3</li>
<li>4</li>
</ol>
<dl>
<dt>这是一份文件</dt>
<dd>这里是这份文件的详细内容1</dd>
<dd>这里是这份文件的详细内容2</dd>
<dt>这是2份文件</dt>
<dd>这里是这2份文件的详细内容1</dd>
<dd>这里是这2份文件的详细内容2</dd>
</dl>
<figure>
<figcaption>这是一张图片</figcaption>
<img alt="" src="img.jpg">
</figure>
</body>
</html>
4.表格的使用
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<Meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</table>
<br>
<table border="1" style="width: 300px">
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</table>
<br>
<table border="1" style="width: 300px">
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
<tr>
<td colspan="3">统计：共3人</td>
</tr>
</table>
<br>
<table border="1" style="width: 300px">
<tr>
<th rowspan="4">基本情况</th>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
<tr>
<td colspan="3">统计：共3人</td>
</tr>
</table>
<br>
<table border="1" style="width: 300px">
<caption>这是一个表格</caption>
<tfoot>
<tr>
<td colspan="3">统计：共3人</td>
</tr>
</tfoot>
<tbody>
<tr style="background: red;">
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</tbody>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
</thead>
</table>
<br>
<table border="1" style="width: 300px">
<colgroup style="background: white;" span="1"></colgroup>
<colgroup style="background: red;" span="1"></colgroup>
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
<tr>
<td colspan="3">统计：共3人</td>
</tr>
</table>
<br>
<table border="1" style="width: 300px">
<colgroup>
<col>
<col style="background: red">
</colgroup>
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
<tr>
<td colspan="3">统计：共3人</td>
</tr>
</table>
</body>
</html>
5.下拉列表和文本域
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<Meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="http://la.cc">
<select name="fruit" size="10" multiple="multiple">
<option value="1">矿泉水</option>
<option value="2">维他命水</option>
<option value="3">雪碧</option>
<option value="4">农夫山泉</option>
</select>
<button>提交</button>
</form>
<form action="http://la.cc">
<select name="fruit" size="10" multiple="multiple">
<optgroup >
<option value="1">矿泉水</option>
<option value="2">维他命水</option>
<option value="3">雪碧</option>
<option value="4">农夫山泉</option>
</optgroup>
<optgroup >
<option value="5">小米</option>
<option value="6">大米</option>
<option value="7">玉米</option>
</optgroup>
</select>
<button>提交</button>
</form>
<form action="http://la.cc">
<select name="fruit" size="10" multiple="multiple">
<optgroup label="饮用水">
<option value="1">矿泉水</option>
<option value="2">维他命水</option>
<option value="3">雪碧</option>
<option value="4">农夫山泉</option>
</optgroup>
<optgroup label="粮食">
<option value="5" selected="selected">小米</option>
<option value="6">大米</option>
<option value="7">玉米</option>
</optgroup>
</select>
<button>提交</button>
</form>
<form action="">
<textarea name="content">请留下您的建议！</textarea>
<br>
<textarea name="content" cols="30" rows="10">请留下您的建议！</textarea>
<!-- 在谷歌浏览器能看到换行的效果，URL地址栏 -->
<textarea name="content" cols="30" rows="10" wrap="hard">在谷歌浏览器能看到换行的效果，URL地址栏！</textarea>
</form>
<form action="http://ll.cc" oninput="res.value = num1.valueAsNumber * num2.valueAsNumber">
<input type="number" id="num1"> x <input type="number" id="num2">=
<output for="num1 num2" name="res" ></output>
<button>提交</button>
</form>
<form action="http://ll.cc" novalidate="novalidate">
<!-- 表单不需要验证 -->
<!-- <input type="text" id="num1" required="required"> -->
<input type="number" min="10" max="100" required="required">
<input type="text" placeholder="请输入区号+座机" pattern="^[\d]{2,4}\-[\d]{6,8}$">
<button>提交</button>
</form>
</body>
</html>
6.常用属性
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<!-- <Meta charset="UTF-8"> -->
<Meta name="author" content="jzz">
<Meta name="keywords" content="html5,css3">
<Meta http-equiv="content-type" content="text/html charset=utf-8">
<Meta http-equiv="refresh" content="3">
<!-- <Meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
<title>Insert title here</title>
</head>
<body>
这是一段中文
<br>
快捷键alt+n
<input type="text" accesskey="n" name="user"><br>
<p contenteditable="true">我可以修改吗</p><br>
<p dir="rtl">文字方向</p><br>
<p dir="rtl" hidden="true">文字隐藏</p><br>
<p dir="rtl" lang="en">html5</p><br>
<p lang="en" title="这是html5">html5</p><br>
<input type="text" name="user1" tabindex="2">
<input type="text" name="user2" tabindex="1">
<input type="text" name="user2" tabindex="-1"><!-- -1不会被选中 -->
<p style="color:red">css样式</p>
</body>
</html>
