一、table
1、数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。
2、单独创建table标签会发现网页不会显示任何内容,原因是table标签代表一个表格整体,只有往里面填充元素才会把table撑起来(网页有展现),证明table标签是块级元素,但是table宽度是由内容来决定。
3、tr (table rows)定义表格行,th 元素定义表头单元格(居中),td (table data)元素定义标准单元格(垂直靠左居中),1个表格定义一个caption。浏览器呈现顺序:thead、tfoot、tbody。
4、col标签不可与colgroup同时使用span属性。
5、cellpadding:单元边沿与内容之间的空白,cellspacing单元格之间的空白。
<!-- colgroup标签要放到caption之后,thead之前 -->
<colgroup colgrouspan="2" style="width:100px;">
<col style="background: red">
</colgroup>
表格案例:
<table>
<caption>简历</caption>
<thead>
<tr>
<th colspan="2">编号和姓名</th>
<th>性别</th>
<th>家庭住址</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" rowspan="2">照片</td>
<td rowspan="2">男</td>
<td>云南·昆明</td>
</tr>
<tr>
<td>云南·丽江</td>
</tr>
<tr>
<td>003</td>
<td>王五</td>
<td>照片</td>
<td>云南·大理</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
table {
/* 指定边框之间距离 */
/* border-spacing: 0px; */
/* 表格塌陷(合并) */
border-collapse: collapse;
margin: 150px auto;
border: 1px solid black;
}
td {
border: 1px solid black;
vertical-align: middle;
text-align: center;
}
tbody>tr:nth-child(odd) {
background-color: #bfa;
}
表格的应用:
<div class="box1">
<div class="box2"></div>
</div>
.box1 {
width: 300px;
height: 300px;
background-color: #bfa;
/* 将元素设置为单元格 */
display: table-cell;
vertical-align: middle;
}
.box2 {
width: 100px;
height: 100px;
background-color: orange;
margin:auto;
}
二、表单
1、数据提交到服务器,有的指定一个name值,有的指定value值。
2、一个表单由三个部分组成,表单标签、表单域(表单控件)、表单按钮。
3、readonly只读 disabled禁用 hidden隐藏 required必须要填写字段 非空判断 pattern正则表达式
4、action指定表单向服务器发送提交数据地址,可以是网站html地址,也可以是一个请求处理地址。get提交:输入信息显示在地址栏中,请求内容长度有限制(不可以传输大文件),请求速度快高效。post提交:输入信息不会显示在地址栏,请求内容长度无限制(可以传输大文件,重要数据),请求速度慢。
5、value是元素的初始值,指定input
元素 value 的值。type为value时必须指定一个值。
label方式一:
for属性,让标签和指点的input元素建立关联,多数使用在单选或复选
给单选或复选后面的文字加入label标签,for属性值是input的id值
label方式二:
将input元素包含在lable标签中
如果将input放置在label标签之间,那么for属性就可以不可以用。
optgroup定义选项组,用label属性来命名。
6、datalist数据列表,input的list属性值和datalist的id属性值保持一致,option来定义列表项。option里面的文本不是作为展示内容,而是作为补充说明部分。我们只需要给input输入框设置大小,datalist会随之适配大小。
7、文件域,文件类型为accept ,值为image、png、audio、video、MIME_type,一次允许选择多个文件 multiple="multiple"。
<style>
.dinput {
width: 450px;
height: 30px;
line-height: 30px;
}
</style>
<!-- text默认宽度为 20 个字符 -->
<form action="result.html" method="get">
<input type="text" id="demoInput">
<p>姓名: <input type="text" name="username" maxlength="8" size="30" value="admin"></p>
<p><label>姓名: </label><input type="text" name="李克伟" placeholder="请填写完整"></p>
<p>密码:<input type="password" name="pwd"></p>
<!-- 数组/字母/下划线[5位数以上]@字母/数字[2-5位].com/cn/[.ccom.cn] -->
<p>邮箱: <input type="email" name="email" id=""></p>
<p>搜索: <input type="search" name="search" id=""></p>
<p>URL:<input type="url" name="url" id=""></p>
<p>号码: <input type="tel" name="tel" id=""></p>
<p>正则:<input type="text" name="diymail"
pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$//^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
</p>
<p>数值框: <input type="number" name="num" id="" min="1999" max="" step="12"></p>
<p>日期字段(时分): <input type="time" name="date" id=""></p>
<p>日期字段(年月): <input type="mouth"></p>
<p>日期字段(年周): <input type="week"></p>
<p>日期字段(年月日): <input type="date"></p>
<p>日期字段(年月日时分): <input type="datetime-local"></p>
<p>数值模块\滑块: <input type="range" name="range" id="" min="0" max="100" step="2">100</p>
<p>
<input type="radio" value="boy" name="sex" checked>男
<input type="radio" value="girl" name="sex" />女
</p>
<p>
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="chat" name="hobby">聊天
</p>
<p>工作日:
<select name="列表名称" id="">
<option value="">星期一</option>
<option value="">星期二</option>
</select>
</p>
<p>拾色器: <input type="color" name="color" id=""></p>
<p>
<input type="text" name="course" list="datalist" class="dinput">
<datalist id="datalist">
<option value="HTML5">最新版本的HTML</option>
<option value="Java">最热门的编程语言</option>
<option value="JavaScipt">最流行的脚本语言</option>
<option value="CSS">层叠样式表</option>
<option value="BootStrap">响应式框架</option>
<option value="Vue">最流行的JS框架</option>
</datalist>
</p>
<fieldset>
<legend>个性展示:</legend>
Name: <input type="text" size="30"><br>
Email: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
<p><input type="image"src="https://img2.baidu.com/it/u=4098779797,3907415900&fm=253&fmt=auto&app=120&f=JPEG?w=870&h=492"></p>
<!--文本域默认字体是等宽字体,通常是 Courier-->
<textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
<p><input type="file" name="files"></p>
<button type="submit">提交</button>
<input type="submit" name="submit" value="提交">
<p><input type="button" value="上传" name="upload"></p>
<button type="reset">重置</button>
<p><input type="button" name="btn1" value="点击变长"></p>
</form>
//demoInput 去页面中查找id为demoInput的元素
var demoInput = document.getElementById("demoInput");
demoInput.oninput = function () {
console.log(this.value)
}