<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--网页重定向-->
<meta http-equiv="refresh" content="5, http://www.qq.com"/>
<!--外部样式连接-->
<link rel="stylesheet" type="text/css" href="css/all.css"/>
<!--设置icon图标-->
<link rel="icon" href="img/favicon.ico">
</head>
<body>
</body>
</html>表格行与列
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
</head>
<body>
<table border="1" width="300" height="200" cellspacing="0" cellpadding="20">
<tr>
<td>Sam</td>
<td>22</td>
<td>Web</td>
</tr>
<tr>
<td>Jack</td>
<td>27</td>
<td>Python</td>
</tr>
</table>
</body>
</html>
table 属性：
Border=”1” 边框
Width=”500” 宽度
Height=”300” 高
cellspacing=”2” 默认值为2 单元格与单元格的距离
cellpadding=”2” 内容距边框的距离
align=”left | right | center”
如果直接给表格用align=”center” 表格居中
如果给tr或者td使用 ，tr或者td内容居中。
bgcolor=”red” 背景颜色。
表格的标准结构
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
</head>
<body>
<table>
<!--完整的标准结构有利于seo，但是有的浏览器不友好-->
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
</body>
</html>标准结构的标签只是表明表格的结构，不支持样式属性，若想加样式可以放在tr、td上
表头和单元格合并
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
</head>
<body>
<table border="1" width="500" height="300" cellspacing="0" align="center">
<caption>表头标签</caption>
<tr>
<td colspan="2">John 22</td> <!--colspan 合并行-->
<!--<td>26</td>-->
<td>web前端</td>
</tr>
<tr>
<td>John</td>
<td>26</td>
<td rowspan="2">web前端</td> <!--rowspan 合并列-->
</tr>
<tr>
<td>John</td>
<td>26</td>
<!--<td>web前端</td>-->
</tr>
</table>
</body>
</html>表格之标题、内容垂直对齐方式、边框颜色
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
</head>
<body>
<table border="1" bordercolor="blue" width="500" height="300" cellspacing="0">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
<tr>
<td valign="top">姓名</td>
<td>年龄</td>
<td>职业</td>
</tr>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>职业</td>
</tr>
</table>
</body>
</html>
表格标题 <th></th>用法和td一样
标题的文字自动加粗水平居中对齐
bordercolor="blue" 边框颜色
内容垂直对齐方式
valign="top | middle | bottom" 三个值
表单之文本输入框、密码输入框、单选框
表单域
<form action="act.py" method="get"></form>属性：action:处理信息
Method=”get | post”
Get通过地址栏提供（传输）信息，安全性差。
Post 通过act.py来处理信息，安全性高。
文本输入框
<form action="act.py" method="post">
<!--文本输入框-->
用户名：<input type="text" maxlength="12" readonly="readonly" value="" />
</form>
maxlength="6" 限制输入字符长度
readonly=”readonly” 将输入框设置为只读状态（不能编辑）
<input type="text" maxlength="12" disabled="disabled" value="" />disabled="disabled" 输入框未激活状态
name="username" 输入框的名称，取个名字，在处理信息的时候知道谁是谁
value="web前端" 将输入框的内容传给处理文件
密码输入框
<!--密码输入框-->
密码：<input type="password" />注意：文本输入框的所有属性对密码输入框都有效。
单选框
<!--单选框-->
<input type="radio" name="genter" id="genter" value="" />男
<input type="radio" name="genter" id="genter" value="" checked="checked" />女只有将name的值设置相同的时候，才能实现单选效果。
checked=”checked” 设置默认选择项。
下拉列表
<!--下拉列表-->
省（市）：
<select name="">
<option>黑龙江</option>
<option>吉林</option>
<option>辽宁</option>
<option>山东</option>
<option value="" selected="selected">北京</option>
</select><br />
<select name="" multiple="multiple">
<option value="">河北</option>
<option value="">湖北</option>
<option value="">江苏</option>
<option value="">浙江</option>
</select>
属性：
multiple=”multiple” 将下拉列表设置为多选项
selected=”selected” 设置默认选中项目
<!--下拉列表分组-->
<select name="">
<optgroup label="北京">
<option value="">昌平</option>
<option value="">大兴</option>
<option value="">古城</option>
<option value="">朝阳</option>
</optgroup>
<optgroup label="河北">
<option value="">昌平</option>
<option value="">大兴</option>
<option value="">古城</option>
<option value="">朝阳</option>
</optgroup>
</select>
<optgroup></optgroup> 对下拉列表进行分组。
label=" " 分组名称。
表单之多选框、按钮、信息分组
<!--多选框-->
<input type="checkbox" name="" id="" value="" />A
<input type="checkbox" name="" id="" value="" checked="checked" />B
<input type="checkbox" name="" id="" value="" />Cchecked=”checked” 设置默认选中项
<!--多行文本框-->
<textarea cols="10" rows="20"></textarea>cols 控制输入字符的长度。相当于宽
rows 控制输入的行数。相当于高
文件上传控件、提交按钮
<!--文件上传控件-->
<input type="file" name="" id="" value="" /><br /><br />
<!--提交按钮-->
<input type="submit" id="" name="提交" />submit 可以实现信息提交功能
普通按钮 不能提交信息，配合JS使用。
<!--普通按钮-->
<input type="button" name="" id="" value="普通按钮" />
图片按钮 可实现信息提交功能
<!--图片按钮-->
<input type="image" src="" />
重置按钮 将信息重置到默认状态
<!--重置按钮-->
<input type="reset" name="" id="" value="重置按钮" />
表单信息分组 fieldset 标签要放在 form 标签内部
<form action="act.py" method="post">
<fieldset id="">
<legend>分组名称</legend>
</fieldset>
</form><fieldset></fieldset> 对表单信息分组
<legend></legend> 表单信息分组名称
html5补充表单控件
标签语义化
好的语义化的网站标准就是去掉样式表文件之后，结构依然很清晰。
标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）
-标签语义化意义：
1:网页结构合理
2:有利于seo和搜索引擎建立良好沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取；
3:方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
4:便于团队开发和维护
1：尽可能少的使用无语义的标签div和span；
2：在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
3：不要使用纯样式标签，如：b、font、u等，改用css设置。
4：需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）；
