day49
表格
表单
音频视频
形变
浏览器适配
表格
表格的特性：
1.表头垂直水平居中
2.但愿哥哥吃u之居中
3.cellspacing控制单元格之间的间距
4.table的显示特性：内容不超过规定宽高，采用规定的宽高，当内容显示区域的宽高超过规定宽高，表格的宽高有内容显示区域决定。
5.rules:变宽规则，设置后会合并边框（cellspacing失效）|groups(分组)|rows|cols|all
6.cellspadding:cell的padding设置，对内容进行格式化布局
7.cell的width可以规定列宽占比
8.cospan:合并列
9.rowspan:合并行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
<style>
table{
width: 600px;
height:400px;
/*border:1px solid black;*/
}
td,th{
/*border:1px solid black;*/
}
</style>
</head>
<body>
<!-- table:display:table -->
<!-- td,th:display:table-cell -->
<!-- tr:代表表格中的行 -->
<!-- td:代表表格中的单元格 -->
<table border="1" cellspacing="10" rules="groups" cellpadding="10">
<caption align="bottom">表格标题</caption>
<thead>
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">单元格</td>
<!-- <td>单元格</td> -->
<td>单元格</td>
</tr>
</tbody>
<tfoot>
<tr>
<td width="1%">单元格</td>
<td width="3%">单元格</td>
<td width="6%">单元格</td>
</tr>
</tfoot>
</table>
</body>
</html>
表格最大的一个好处就是用来处理垂直居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>垂直居中</title>
<style>
.sup{
width: 200px;
height: 200px;
background-color: red;
/*控制内容/子级垂直居中*/
display: table-cell;
/*设置垂直居中*/
vertical-align: middle;
}
.sub{
/* width: 100px;*/
height: 100px;
background-color: orange;
/*margin: 0 auto;*/
}
</style>
</head>
<body>
<div class="sup">
<div class="sub">多行文本垂直居中多行文本
垂直居中多行文本垂直居中
</div>
</div>
</body>
</html>
表单
表单（form）作用:将前台用户数据通过get或post请求方式提交给后台，并在新页面标签中接收后台响应。
请求方式：
get：将数据作为url链接拼接方式提交给后台，并速度快，但安全性低且有数据大小限制。
post:将数据以数据包方式提交给后台，速度较慢，但安全性高，且无数据大小限制。
前后台交互的数据依据为：表单元素的name与value，name为key，value为value。
action：提交的后台接口（也就是请求的服务器指定路径）
method：请求方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
<style>
</style>
</head>
<body>
<form action="" method="get">
<div>
<!-- 提交给后台的就是表单元素的name=value -->
<label for="">用户名:</label><input type="text" name="user" value="hahah" />
</div>
<div>
<!-- placeholder:文本占位符 -->
<label for="">密码:</label><input type="password" name="ps"
placeholder="请输入密码" />
</div>
<div>
<button type="submit">提交</button>
</div>
</form>
<!-- 常用表单元素 -->
<form action="">
<!-- 单选框:name必须相同,value需要提前规定 -->
<input type="radio" name="sex" value="male" />男
<input type="radio" name="sex" value="fmale" />女
<!-- 复选框:name必须相同,check(Boolean类型属性) -->
<!-- 单选下拉框 :name由select设置,value由option提供,select-->
<select name="major" id="">
<option value="computer">计算机</option>
<option value="medicine" selected>医学</option>
<option value="biology">生物学</option>
</select>
<!-- 多选下拉框 -->
<select name="major" id="" multiple>
<option value="computer">计算机</option>
<option value="medicine" selected>医学</option>
<option value="biology">生物学</option>
</select>
<!-- 多行文本 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
<!-- 全局属性设置 -->
<!-- required:value不能为空 -->
<input type="text" name="usr" required />
<input type="text" name="name" pattern="\d" />
<!-- 按钮 -->
<!-- 重置按钮 -->
<input type="reset" value="自定义重置" />
<!-- 提交按钮 -->
<input type="submit" value="交了" />
<!-- 普通按钮 -->
<input type="button" value="普通按钮" onclick="alert('boom boom boom')">
</form>
<style>
.box{
width: 200px;
height: 0px;
background-color: red;
/*display: none;*/
transition: 0.5s;
}
.usr:focus + .box{
/*display: block;*/
height: 200px;
}
</style>
<form action="">
<input id="usr" class="usr" type="text" name="usr">
<div class="box"></div>
</form>
</body>
</html>
音频视频
音频：
- 应用
<audio id="ad" src="media/juhua.mp3" autoplay controls loop>如果浏览器不支持H5新标签audio，此段话将被显示出来</audio>
- 属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 自动播放 |
| controls | controls | 音频控件 |
| loop | loop | 循环播放 |
| muted | muted | 静音 |
| preload | auto metadata none | 预加载 |
| src | URL | 音频源 |
视频：
- 应用
<video width="672" height="378" controls poster="img/poster.png">
<source src="media/HTML5的前世今生.mp4" type="video/mp4"></source>
当前浏览器不支持video直接播放
</video>
- 属性
| 属性 | 值 | 描述 |
|---|---|---|
| width | pixels | 宽度 |
| height | pixels | 高度 |
| controls | controls | 视频控件 |
| autoplay | autoplay | 自动播放 |
| loop | loop | 循环播放 |
| muted | muted | 静音 |
| poster | URL | 图像占位 |
| src | URL | 视频源 |
| preload | auto metadata none | 预加载 |
| 属性 | 值 | 描述 |
|---|---|---|
| src | URL | 视频源 |
| type | MIME_type | MIME类型 |
形变
旋转形变：旋转的角度是deg
.box {
transform: rotateX(360deg) | rotateY(360deg) | rotateZ(360deg);
}
偏移形变：偏移的是距离
.box {
transform: translateX(200px) | translateY(200px);
}
缩放形变：缩放的是比例
.box {
transform: scaleX(2) scaleY(0.5)
}
浏览器适配
- -o-：Opera浏览器
- -ms-：IE浏览器
- -moz-：Firefox浏览器
- -webkit-：Chrome、Safari、Android浏览器
径向渐变
.box {
width: 200px;
height: 200px;
border-radius: 50%;
background-image: -webkit-radial-gradient(red, yellow);
}
倒影
-webkit-box-reflect: below | above | left | right;
浙公网安备 33010602011771号