表格、表单、音频、视频、形变、浏览器适配、字体图标、盒子阴影
一、表格（table）
1、基本结构
<table>：表格
<caption>：表题
<tr>：表格中的行
<th>：表头
<td>：表格中的单元格
<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：边框规则，设置后会合并边框(cellspacing失效)
td
rowspan: <integer>：行合并(该单元格占多行)
colspan: <integer>：列合并(该单元格占多列)
: <integer>%：列宽占比
caption
align: top | bottom：标题方位
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格</title> <style type="text/css"> table { width: 600px; height: 400px; /*border: 1px solid #333;*/ } td, th { /*border: 1px solid #333;*/ } </style> </head> <body> <table border="1" cellspacing="0" rules="all" cellpadding="10"> <caption align="bottom">表格标题</caption> <!-- <thead> --> <tr> <th width="1%">表头</th> <th width="3%">表头</th> <th width="6%">表头</th> </tr> <!-- </thead> --> <!-- <tbody> --> <tr> <td colspan="2">单元格</td> <!-- <td>单元格</td> --> <td rowspan="2">单元格</td> </tr> <!-- </tbody> --> <!-- <tfoot> --> <tr> <td>单元格</td> <td>单元格</td> <!-- <td>单元格</td> --> </tr> <!-- </tfoot> --> </table> </body> </html>
3、垂直居中
display:table-cell 可以控制内容 / 子级垂直排列方式
vertical-align:middle | top | bottom 设置垂直排列方式
但是父级必须设置过高度
.sup {
width: 200px;
height: 200px;
display: table-cell;
vertical-align: middle;
}
.sub {
width: 100px;
height: 100px;
margin: 0 auto;
}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>垂直居中</title> <style type="text/css"> .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）
1、基本结构
<form>
<label>输入框</label><input type="text" />
<button type="submit">提交</button>
</form>
2、表单的作用
（1）作用
将前台用户数据通过 get 或 post 请求方式提交给后台，并在新页面标签中接收后台相应
（2）get与post请求方式
- get：将数据以url链接拼接方式提交给后台,速度快,但安全性低,且有数据大小限制
- post：将数据以数据包方式提交给后台,速度较慢,但安全性高,且无数据大小限制
前后台交换数据的依据为：表单元素的name与value,name为key，value为value。实际传送到后台的数据是：username=" " & password=" "
3、input的常用类型
text、password、hidden、radio、checkbox、reset、submit
4、常用类型的标签
（1）文本框（text）
placeholder：文本框中的提示信息，不会发送到后台，发送到后台的是：username=输入的值
<input type="text" name="username" placeholder="请输入用户名" size="10" maxlength="15">
（2）密文框（password）
password：密文，输入的时候不会显示真是的值，显示 · ，传送到后台的信息是 pwd=用户输入的值
<input type="password" name="pwd" placeholder="请输入密码" maxlength="12">
（3）单选框（radio）
name必须相同，value要提前给定，checked表示默认选的是该项，传送到后台的是male或者female，男女只是给用户看的
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女
（4）复选框（checkbox）
name必须相同，value要提前给定，checked表示默认选有改选项
<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"> 棒球
（5）下拉选项
单选下拉框：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>
（6）多行文本（textarea）
rows设置行数，cols设置列数
<textarea name="content" cols="30" rows="10"></textarea>
（7）按钮
<!--提交按钮-->
<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>
<input type="button" value="普通按钮" onclick="alert('你丫真帅')">
5、全局属性
required：必填项
pattern：正则
<input type="text" name="usr" required /> <!--必须输入值 -->
<input type="text" name="name" pattern="d" /> <!-- 输入的必须是数字 -->
6、伪类
focus焦点
<!-- 当鼠标点击user时，就会出现box-->
<style type="text/css">
.box {
width: 200px;
height: 0;
background-color: red;
/*display: none;*/
transition: .5s;
}
.usr:focus + .box {
/*display: block;*/
height: 200px;
}
</style>
<form>
<input id="usr" class="usr" type="text" name="usr">
<div class="box"></div>
</form>
三、音频（auto）
<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）
<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类型 |
五、形变（transform）
<!--旋转-->
transform: rotateX(3600deg) rotateY(3600deg) rotateZ(3600deg);
<!-- 偏移-->
transform: translateX(200px) translateY(200px);
<!--缩放-->
transform: scaleX(2) scaleY(0.5)
六、浏览器适配
- -ms-：IE浏览器
- -moz-：Firefox浏览器
- -webkit-：Chrome、Safari、Android浏览器
径向渐变
.box {
200px;
height: 200px;
border-radius: 50%;
background-image: -webkit-radial-gradient(red, yellow);
}
倒影
-webkit-box-reflect: below | above | left | right;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浏览器适配</title> <style type="text/css"> .box { width: 200px; height: 200px; border-radius: 50%; font: 900 80px/200px 'STSong'; text-align: center; /*径向渐变*/ /*background-image: radial-gradient(red, yellow, green);*/ background-image: -webkit-radial-gradient(left, red, yellow, green); /*倒影*/ /*below | above | left | right*/ -webkit-box-reflect: below 2px; } </style> </head> <body> <!-- -o- Opera --> <!-- -ms- IE --> <!-- -moz- FireFox --> <!-- -webkit- Safari Chrome 国内主流浏览器 Android内置浏览器 --> <div class="box">123</div> </body> </html>
七、字体图标
1、字体图标
类似于下图的每个图标表示一个字
http://fontawesome.dashgame.com/
2、使用语法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体图标</title>
<!-- 使用第三方库 -->
<!-- 通过网络将第三方库链接进来 -->
<!-- <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
<!-- 使用本地的第三方库，精简版，不能更改源代码 -->
<!-- <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"> -->
<!-- 使用本地的第三方库，提供源代码，可以更改源代码 -->
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
<style type="text/css">
.i1 {
/*font-size: 30px;*/
color: orange;
}
</style>
</head>
<body>
<i class="i1 fa fa-spinner fa-4x fa-spin"></i>
</body>
</html>
八、盒子阴影（box-shadow）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子阴影</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: red;
margin: 350px auto;
/*盒子阴影*/
/*x轴偏移 y轴偏移 虚化长度 阴影宽度 阴影颜色*/
/*多个值之间用,隔开，设置好x、y轴的偏移量可以设置不同方向的阴影*/
box-shadow: -310px 0 30px 0px yellow, 310px 0 30px -10px green, 0 -310px 30px -10px orange, 0 310px 30px -10px blue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>