前端基础——表格表单（tableForm）
<!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="" />C
checked=”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）；
