学习课程：《Html5第一季》6~11节
学习时间：2018-09-04
**表格元素**
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>表格元素</title>
</head>
<body>
<!-- 基本表格 -->
<table border="1">
<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 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">统计：合计2人</td>
</tr>
</table>
<br>
<!-- thead tbody和tfoot -->
<table border="1" style="width: 300px">
<caption>这是一个表格</caption> <!-- 添加标题 -->
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
</thead>
<tbody>
<tr style="background: red">
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">统计：合计2人</td>
</tr>
</tfoot>
</table>
<br>
<!-- 设置列颜色方法案例1 -->
<table border="1" style="width: 300PX">
<colgroup style="background: red" span="2"></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>
</table>
<br>
<!-- 设置列颜色方法案例2 -->
<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>
</table>
<br>
<!-- 设置列颜色方法案例3 -->
<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>
</table>
</body>
</html>
**文档元素**
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>文档元素</title>
</head>
<body>
<!-- 页面标头部分,属于区块，下面内容会换行 -->
<header>
<hgroup>
<h1>这是一个h1大标题</h1>
<h4>这是一个h4副标题</h4>
</hgroup>
<nav>这里是一个导航</nav>
这里存放页面标头部分：LOGO 标题 导航
</header>
<section>
这里是文档主题部分
</section>
<article>
<header>...</header>
<section>...</section>
<footer>...</footer>
</article>
<aside>...</aside>
<footer>
这里存放的页面的尾部：版权声明 友情链接
<h4>这是一个尾部h4副标题</h4>
<address>这是联系方式</address>
</footer>
</body>
</html>
**嵌入元素**
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>嵌入元素</title>
</head>
<body>
<!-- <a href="index.html">
<img ismap src="1.jpg" alt="风景图" width="200" height="200">
</a> -->
<!-- 创建分区响应，热点区域 -->
<!-- <a href="index.html">
<img src="1.jpg" alt="风景图" width="200" height="200" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="10,24,95,97" href="http://www.baidu.com" target="_blank" alt="百度">
<area shape="circle" coords="145,64,42" href="http://www.so.com" target="_blank" alt="SOSO">
<area shape="poly" coords="18,123" href="#">
<area shape="poly" coords="50,114,50,163" href="#">
<area shape="poly" coords="17,117,16,173,169,177,167,131,167,121" href="http://www.sougou.com" target="_blank" alt="搜狗">
</map>
</a> -->
<!-- <img src="11.jpg">
<img src="11.jpg" alt="风景图"> -->
<!-- 一个区域引入固定区域 -->
<!-- <a href="http://www.baidu.com" target="in">百度</a>丨<a href="http://www.soso.com" target="in">好搜</a>
<br>
<iframe src="http://www.soso.com" width="800" height="400" name="in"></iframe> -->
<!-- 插入flash文件 -->
<!-- <embed src="flash.swf" type="application/x-shockwave-flash" width="400" height="200">
</embed> -->
<!-- 进度条 -->
<progress value="30" max="100"></progress>
<meter value="66" min="10" max="100" low="30" high="80" optimum="66"></meter>
</body>
</html>
**音频和视频**
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>音频和视频</title>
</head>
<body>
<!-- webm mpeg-4 ogg -->
<!-- <video src="1.mp4" width="600" height="200" controls="" autoplay="" loop="" muted=""></video> -->
<!-- <video src="1.mp4" width="600" height="200" controls="" poster="1.jpg"></video> -->
<!-- <video src="1.mp4" width="600" height="200" controls="" poster="1.jpg" preload=""></video> -->
<!-- <video src="1.mp4" width="600" height="200" controls="" poster="1.jpg" preload="metadata"></video> -->
<!-- <video src="1.mp4" width="600" height="200" controls="" poster="1.jpg" preload="autoplay"></video> -->
<!-- <video width="600" height="200" controls="">
<source src="1.mp4" type="">
<source src="1.webm" type="">
<source src="1.ogg" type="">
<object>实现Flash插件的播放，如果屏蔽IE9以下则不需要</object>
</video> -->
<!--
<audio src="1.mp3"></audio> -->
<audio controls="">
<source src="1.mp3" type="">
<source src="1.m4a" type="">
<source src="1.wav" type="">
</audio>
</body>
</html>
**表格元素**
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>表单元素[上]</title>
</head>
<body>
<form id="register" method="get" name="reg" action="http://www.baidu.com" target="_blank" autocomplete="on">
<!-- 用户名： <input type="" name="user" autofocus disabled=""> -->
<fieldset>
<legend>注册分组</legend>
<label for="user">
用户名：
</label>
<input id="user" name="user" autocomplete="off" value="请输入账号"><br>
<!-- <button>提交</button> -->
<label>
电子邮件： <input type="" name="bbs" form="register">
</label>
</fieldset>
</form>
<button type="submit" form="register">提交</button>
<button type="reset" form="register">重置</button>
<button type="button" form="register">其他</button>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>表单元素[中]</title>
</head>
<body>
<form action="http://www.so.com">
<!-- <input type="text" name="user" maxlength="5" size="30" value="11111" disabled> -->
<!-- <input type="text" list="abc" required=""> -->
<!-- <input type="password" name="" placeholder="请输入密码"> -->
<!-- <input type="search" name=""> -->
<!-- <input type="number" name="" min="10" max="100" step="5"> -->
<!-- <input type="date" name="">
<input type="month" name="">
<input type="time" name="">
<input type="week" name="">
<input type="datetime" name="">
<input type="datetime-local" name=""> -->
<!-- <input type="color" name="color"> -->
<!-- 音乐 <input type="checkbox" name="music" value="1">
音乐 <input type="checkbox" name="sport" value="2"> -->
<!-- <input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="2" checked>女 -->
<!-- <input type="submit" name="">提交
<input type="reset" name="">重置
<input type="button" name="">一般按钮 -->
<!-- <input type="image" src="1.jpg"> -->
<!-- <input type="email" name="">
<input type="tel" name="">
<input type="url" name=""> -->
<!-- <input type="hidden" name="id" value="1"> -->
<input type="file" name="" accept="image/gif">
<button>提交</button>
</form>
<datalist id="abc">
<option value="1">苹果</option>
<option value="2">橘子</option>
<option value="3" label="香蕉">
<option value="菠萝">
</datalist>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="zh-cn">
<meta charset="utf-8">
<title> 表单元素[下]</title>
</head>
<body>
<form action="http://www.baidu.com" oninput="res.value = num1.valueAsNumber*num2.valueAsNumber" novalidate="">
<!-- <select name="fruit" size="10" multiple="">
<optgroup label="水果">
<option value="1">苹果</option>
<option value="2" selected="">橘子</option>
<option value="3">香蕉</option>
</optgroup>
<optgroup label="粗粮">
<option value="4">小米</option>
<option value="5">大米</option>
<option value="6">玉米</option>
</optgroup>
</select> -->
<!-- <textarea name="content" rows="10" cols="10" wrap="">请留下您的建议！</textarea> -->
<!-- <input type="number" id="num1">X<input type="number" id="num2">=
<output for="num1 num2" name="res"></output> -->
<!-- <input type="text" required="">
<input type="number" min="10" max="100"> -->
<input type="text" placeholder="请输入区号+座机" pattern="^[\d]{2,4}\-[\d]{6,8}$" name="" required="">
<button>提交</button>
</form>
</body>
</html>
**全局属性和其他**
<!DOCTYPE html>
<html>
<head lang="zh-cn">
<!-- <meta charset="utf-8"> -->
<meta name="autor" content="bbs">
<meta name="description" content="这是一个描述">
<meta name="keywords" content="php;开发">
<meta http-equiv="content-type" content="text/html charset=utf-8">
<!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
<title>全局属性和其他</title>
<style type="text/css">
#abc{
color: red
}
.abc{
color: blue
}
</style>
</head>
<body>
<div>1</div>
<div>
我?????你
?
这是一段中文
<!-- <p id="abc">这是id</p>
-->
<!-- <p class="abc">1</p>
<p class="abc">2</p>
<p class="abc">3</p> -->
<!-- <input type="text" name="" accesskey="L"> -->
<p contenteditable="">我可以修改吗</p>
<P dir="rtl" hidden>文字方向</P>
<p lang="en" title="这是一个html5教程" style="color: red">Html5</p>
<input type="text" name="user" tabindex="2">
<input type="text" name="user" tabindex="1"> <!-- -1不会被选中 -->
</body>
</html>原文：http://blog.51cto.com/pm365/2170401