表格表单

表格表单

一、表格

<!-- tr: 代表表格中的行 -->
<!-- td: 代表表格中的单元格 -->

<!-- 表格的特点 -->
<!-- 1.表头垂直水平居中 -->
<!-- 2.单元格垂直居中 -->
<!-- 3.cellspacing控制单元格之间的间距 -->
<!-- 4.table的显示特性:内容不超过规定宽高,采用规定的宽高,当内容显示区域的宽高超过规定宽高,表格的宽高由内容显示区域决定 -->
<!-- 5.rules:边框规则,设置后会合并边框(cellspacing失效): groups rows cols all -->
<!-- 6.cellpadding:cell的padding设置,对内容进行格式化布局 -->
<!-- -->
<!-- 7.cell的width可以规定列宽占比 -->
<!-- 8.colspan:合并列 -->
<!-- 9.rowspan:合并行 -->

1、基本结构

<table>
    <caption></caption>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
        </tr>
    </tfoot>
</table>

2、常用属性

table
-- border: <integer>：表格外框及单元格外框
-- cellpadding: <integer>：单元格的内边距
-- cellspacing: <integer>：单元格之间的间距，最小为0
-- rules：rows、cols、groups、all：边框规则
​
td
-- rowspan: <integer>：行合并(该单元格占多行)
-- colspan: <integer>：列合并(该单元格占多列)
-- width: : <integer>%：列宽占比
​
caption
-- align: top | bottom：标题方位

　　

3、垂直水平居中

.sup {
    width: 200px;
    height: 200px;
    display: table-cell;
    vertical-align: middle;
}
.sub {
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

　　

二、表单

<!-- form -->
<!-- 作用:将前台用户数据通过get或post请求方式提交给后台,并在新页面标签中接收后台相应 -->
<!-- 请求方式: -->
<!-- get:将数据以url链接拼接方式提交给后台,速度快,但安全性低,且有数据大小限制 -->
<!-- post:将数据以数据包方式提交给后台,速度较慢,但安全性高,且无数据大小限制 -->
<!-- 前后台交换数据的依据为:表单元素的name与value,name为key,value为value -->

<!-- action:提交的后台接口(请求的服务器指定路径) -->
<!-- method:请求方式 -->

1、基本结构

<form>
    <label>输入框</label><input type="text" /> 
    <button type="submit">提交</button>
</form>

 

2、input常用类型

text、password、hidden、radio、checkbox、reset、submit

　　

3、常用类型标签

• 文本框

<input type="text" name="username" placeholder="请输入用户名" size="10" maxlength="15">

• 密文框

<input type="password" name="pwd" placeholder="请输入密码" maxlength="12">

• 单选框

<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女

• 复选框

<input type="checkbox" name="hobby" value="basketball"> 篮球
<input type="checkbox" name="hobby" value="football"> 足球
<input type="checkbox" name="hobby" value="ping-pong" checked> 乒乓球 
<input type="checkbox" name="hobby" value="baseball"> 棒球

• 下拉选项

<select name="major">
    <option value="computer">计算机</option>
    <option value="archaeology">考古学</option>
    <option value="medicine" selected>医学</option>
    <option value="Architecture">建筑学</option>
    <option value="Biology">生物学</option>
</select>
​
<!--多选-->
<select name="major" multiple>
    <option value="computer">计算机</option>
    <option value="archaeology">考古学</option>
    <option value="medicine">医学</option>
    <option value="Architecture">建筑学</option>
    <option value="Biology">生物学</option>
</select>

• 多行文本输入

<textarea name="content"></textarea>
<textarea name="content" cols="30" rows="10"></textarea>

• 按钮

<!--提交按钮-->
<input type="submit" value="提交">
<button>提交</button>
<button type="submit">提交</button>
​
<!--重置按钮-->
<input type="reset" value="重置">
<button type="reset">重置</button>
​
<!--普通按钮-->
<input type="button" value="按钮">
<button type="button">按钮</button>

4、全局属性

• required：必填项

• pattern：正则

5、伪类

• focus：获得焦点