[TOC] # 表格 ~~~ <table> 表格 <thread>标签定义表格的表头。该标签用于组合 HTML 表格的表头内容 <tr> 行 <td></td> 列 <td></td> <td></td> </tr> </thread> <tfoot>用于对 HTML 表格中的主体内容进行分组 <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody>用于对 HTML 表格中的表注（页脚）内容进行分组 <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table> ~~~ 加了表格的头部,身体和脚,写了这些有利于SEO优化,但是这些在不同浏览器中支持不是太好 ## 属性 ~~~ Border="1" 边框 Width="500" 宽度 Height="300" 高 cellspacing="2" 单元格与单元格的距离(默认为2像素) cellpadding="2" 内容距边框的距离(默认值为1) align="left | right | center" 设置表格在网页中的水平对齐方式 如果直接给表格用align="center" 表格居中 如果给tr或者td使用 ，tr或者td内容居中。 bgcolor="red" 背景颜色 ~~~ ## 表头和单元格合并 先上后下,先左后右 ~~~ 表头 <caption></caption> colspan="2" 合并同一行上的单元格 rowspan="2" 合并同一列上的单元格 ~~~ ## 表格标题,边框颜色,内容垂直对齐 ~~~ 表格标题 <th></th> 用法和td一样 ~~~ 边框颜色 ~~~ bordercolor="red" ~~~ 内容垂直对齐方式 ~~~ <td valign="bottom">11</td> valign="top | middle | bottom" ~~~ # 注意 ~~~ <tr></tr>只能嵌套<td></td> <td></td>标签,就像个容器,可以容纳所有的元素 ~~~ # 表单域 ~~~ <form action="1.php" method="get"> 属性: action处理信息 method="get | post" get 安全性差 post 安全性高 ~~~ ## 文本输入框 ~~~ maxlength="6" 限制输入字符长度 readonly=”readonly” 将输入框设置为只读状态（不能编辑） disabled="disabled" 输入框未激活状态 name="username" 输入框的名称 value="大前端" 将输入框的内容传给处理文件 size 正整数,inout显示的宽度 ~~~ ## 密码输入框 ~~~ 密码: <input type="password" name="pwd"> ~~~ 文本输入框的所有属性对密码输入框都有效 ## 单选框 ~~~ <input type="radio" name="gender" checked="checked"> ~~~ 只有将name的值设置相同的时候,才能实现单选效果 ~~~ checked="checked" 设置默认选择项 ~~~ ## 下拉列表 ~~~ <select> <option>下拉</option> <option>下拉</option> </select> ~~~ 属性 ~~~ multiple="multiple" 将下拉列表设置为多选项 selected="selected" 设置默认选中项目 ~~~ ~~~ <optgroup label="北京市"> <option>朝阳区</option> <option>昌平区</option> </optgroup> ~~~ ~~~ <optgroup></optgroup> 对下拉列表进行分组 label="" 分组名称 ~~~ ## 多选框 ~~~ <input type="checkbox" checked="checked">上衣 <input type="checkbox" checked="checked">下衣 <input type="checkbox" checked="checked">鞋子 checked="checked" 设置默认选中项 ~~~ ## 多行文本 ~~~ <textarea cols="130" rows="10"></textarea> ~~~ cols 控制输入字符的长度 rows 控制输入的行数 ## 文件上传控件 ~~~ <input type="file"> ~~~ ## 文件提交按钮 ~~~ <input type="submit"> ~~~ 可以实现信息提交功能 = ## 普通按钮 ~~~ <input type="button" value="普通按钮"> ~~~ 不可以实现信息提交功能,需配合js ## 图片按钮 ~~~ <input type="image" src="1.jpg"> ~~~ 图片按钮可以实现信息提交功能 ## 重置按钮 ~~~ <input type="reset"> ~~~ 将信息重置到默认状态 ## 表单信息分组 ~~~ <form action="1.php" method="post"> <fieldset> <legend>分组信息</legend> </fieldset> </form> ~~~ ## html5补充表单控件 type属性 ~~~ email: 邮箱 tel: 手机号码 url: url格式 number: 数字格式 search: 搜索框 range: 自由拖动滑块 time: 小时分钟 date: 年月日 datetime: 时间 month : 月年 week: 星期 年 ~~~ ## 常用新属性 | 属性 | 用法 | 含义 | | -------------------- | ---------------------------------------- | ---------------------------------------- | | placeholder | `placeholder="请输入用户名"` | 占位符 当用户输入的时候 里面的文字消失 删除所有文字，自动返回 | | autofocus | `autofocus` | 规定当页面加载时 input 元素应该自动获得焦点 | | multiple | ` multiple` | 多文件上传 | | autocomplete | `autocomplete="off"` | 规定表单是否应该启用自动完成功能 有2个值，一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮 2.这个表单您必须给他名字 | | required | `required ` | 必填项 内容不能为空 | | accesskey | `accesskey="s"` | 规定激活,使元素获得焦点元素的快捷键 采用 alt + s的形式 | ## label标签 label标签为input元素定义标注(标签) 作用: 用于绑定一个表单元素,当点击label标签的时候,被绑定的表单元素就会获得输入焦点 ~~~ <label for="pwd">pwd</label> <br> 用户名: <input type="text" name="username"> <br> 密码: <input type="password" name="password" id="pwd"> ~~~ label中的for对应里面的id 点label的会自动在对应input里获得焦点 --- 还有种,包含的 ~~~ <label> 密码: <input type="password" name="password"> </label> ~~~ # 标签语义化 好的语义化的网站标准就是去掉样式表文件之后，结构依然很清晰。 标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化） -标签语义化意义： 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）；  # 表格让盒子垂直居中 ~~~ .t1 { width: 300px; height: 300px; border: 1px solid red; display: table-cell; vertical-align: middle; } .t2 { width: 200px; height: 200px; border: 1px solid blue; margin-left: 50px; } <div class="t1"> <div class="t2"></div> </div> ~~~