目录
一、表格
概念
表格由 table标签来定义。每个表格均有若干行（由 tr 标签定义），每行被分割为若干单元格（由 td 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1" cellspacing="0" rules="all">
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
表格的特点
1.表头垂直水平居中
2.单元格垂直居中
3.cellspacing：控制单元格间距
4.table的显示特性：内容不超过规定宽高，采用规定的宽高，当内容显示区域的宽高超过规定宽高，表格的宽高由内容显示区域决定
5.rules：边宽规则，设置后会合并边框
6.cellpaddingL:cell的padding设置，对内容进行
7.cell的width可以规定列宽占比
8.colspan：合并列
9.rowspan：合并行
利用表格特性做到垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<style>
.sup{
200px;
height: 200px;
background-color: red;
/*控制子级垂直排列方式*/
display: table-cell;
/*设置垂直排列方式*/
vertical-align: middle;
}
.sub{
100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="sup">
<div class="sub"> </div>
</div>
</body>
</html>
二、表单
概念
表单用于收集用户输入。将前台用户数据通过get或post请求方式提交给后台,并在新页面标签中接收后台相应
请求方式:method=get/post
get:将数据以url链接拼接方式提交给后台,速度快,但安全性低,且有数据大小限制
post:将数据以数据包方式提交给后台,速度较慢,但安全性高,且无数据大小限制
语法
<form action="请求的服务器指定路径" method="请求方式">
<!-- 提交给后台的就是表单元素的name=value -->
</form>
常用表单元素
input 元素
input 元素是最重要的表单元素。根据不同的 type 属性。元素有很多形态
text：明文输入框
<input type="text" name="" placeholder="默认显示" size="文字大小" maxlength="最大限制">
password：密文输入框,输入的内容变成了星号
<input type="password" name="" placeholder="默认显示" maxlength="最大限制">
radio：单选框
<input type="radio" name="" value="" checked(默认选中)>
checkbox：复选框
<input type="checkbox" name="" value=""checked(默认选中)>
reset：重置按钮
<input type="reset" value="自定义重置" />
submit：提交按钮
<input type="submit" value="请求">
button：普通按钮
<input type="button" value="普通按钮" onclick="alert('你丫真帅')">
select 元素（下拉列表）
单选下拉框:name由select设置,value由option提供,selected默认项
<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 元素
textarea 元素定义多行输入字段
<textarea name="content" cols="列" rows="行"></textarea>
全局设置
required：value不能为空
三、音频
语法
<audio src="media/juhua.mp3" autoplay controls loop preload="auto">当前浏览器不支持audio,该文本便会显示
</audio>
属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放。 |
| muted | muted | 规定视频输出应该被静音。 |
| preload | preload | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 |
| src | url | 要播放的音频的 URL。 |
四、视频
语法
<video width="672" height="378" controls poster="img/poster.png">
<source src="media/HTML5的前世今生.mp4" type="video/mp4"></source>
当前浏览器不支持video直接播放
</video>
属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| loop | loop | 如果出现该属性，则每当视频结束时重新开始播放。 |
| muted | muted | 规定视频输出应该被静音。 |
| preload | preload | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 |
| src | url | 要播放的视频的 URL。 |
| eight | pixels | 设置视频播放器的高度。 |
| width | pixels | 设置视频播放器的宽度。 |
| poster | URL | 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。 |
五、形变
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
150px;
height: 150px;
background-color: red;
margin: 10px auto;
transition: 3s;
}
/*旋转形变*/
.d1:hover{
/*transform: rotateX(3600deg);
transform: rotateY(3600deg);
transform: rotateZ(3600deg);*/
}
/*偏移变形*/
.d2:hover{
transform: translateX(200px);
transform: translateY(200px);
transform: translateZ(200px);
}
/*缩放形变*/
.d3:hover{
transform: scale(2);
transform: scale(2,1);
}
/*混合缩放*/
.d4:hover{
/*transform: translateX(200px) rotateZ(3600deg);*/
transform: rotateZ(3600deg) translateX(200px) ;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
</body>
</html>
六、盒子阴影
向盒子添加一个或多个阴影。多个用逗号隔开
语法
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| spread | 可选。阴影的尺寸。 |
| blur | 可选。模糊距离。 |
| color | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
| inset | 可选。将外部阴影 (outset) 改为内部阴影。 |