1.表格
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：标题方位
<!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: display: table -->
<!-- th,td: dispaly: table-cell -->
<!-- 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:合并行 -->
<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>
2.垂直水平居中
<!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>
3.表单
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：获得焦点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!-- form -->
<!-- 作用:将前台用户数据通过get或post请求方式提交给后台,并在新页面标签中接收后台相应 -->
<!-- 请求方式: -->
<!-- get:将数据以url链接拼接方式提交给后台,速度快,但安全性低,且有数据大小限制 -->
<!-- post:将数据以数据包方式提交给后台,速度较慢,但安全性高,且无数据大小限制 -->
<!-- 前后台交换数据的依据为:表单元素的name与value,name为key,value为value -->
<!-- action:提交的后台接口(请求的服务器指定路径) -->
<!-- method:请求方式 -->
<form action="" method="get">
<div>
<!-- 提交给后台的就是表单元素的name=value -->
<label>用户名:</label><input type="text" name="usr" value="hehe" />
</div>
<div>
<!-- placeholder:文本占位符 -->
<label>密码:</label><input type="password" name="ps" placeholder="请输入密码" />
</div>
<div>
<button type="submit">提交</button>
</div>
</form>
<!-- 常用表单元素 -->
<form>
<!-- 明文输入框 -->
<input type="text" name="username" placeholder="请输入用户名" size="10" maxlength="15">
<!-- 密文输入框 -->
<input type="password" name="pwd" placeholder="请输入密码" maxlength="12">
<!-- 单选框:name必须相同,value需要提前规定 -->
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女
<!-- 复选框:name必须相同,checked(boolean类型属性) -->
<input type="checkbox" name="hobby" value="basketball"> 篮球
<input type="checkbox" name="hobby" value="football" checked"> 足球
<input type="checkbox" name="hobby" value="ping-pong" checked="checked"> 乒乓球
<input type="checkbox" name="hobby" value="baseball"> 棒球
<!-- 单选下拉框: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 name="content" 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('你丫真帅')">
</form>
<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>
</body>
</html>
4.音频
1.应用
<audio id="ad" src="media/juhua.mp3" autoplay controls loop>
如果浏览器不支持H5新标签audio，此段话将被显示出来</audio>
2.属性
| 属性 |
值 |
描述 |
| autoplay |
autoplay |
自动播放 |
| controls |
controls |
音频控件 |
| loop |
loop |
循环播放 |
| muted |
muted |
静音 |
| preload |
auto metadata none |
预加载 |
| src |
URL |
音频源 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>音频</title>
</head>
<body>
<audio src="media/juhua.mp3" autoplay controls loop preload="auto">
当前浏览器不支持audio,该文本便会显示</audio>
</body>
</html>
5.视频
1.应用
<video width="672" height="378" controls poster="img/poster.png">
<source src="media/HTML5的前世今生.mp4" type="video/mp4"></source>
当前浏览器不支持video直接播放
</video>
2.属性
| 属性 |
值 |
描述 |
| width |
pixels |
宽度 |
| height |
pixels |
高度 |
| controls |
controls |
视频控件 |
| autoplay |
autoplay |
自动播放 |
| loop |
loop |
循环播放 |
| muted |
muted |
静音 |
| poster |
URL |
图像占位 |
| src |
UR; |
视频源 |
| preload |
auto metadata none |
预加载 |
| type |
MIME_type |
MIMA类型 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>视频</title>
</head>
<body>
<video width="672" height="378" controls poster="img/poster.png">
<source src="media/HTML5的前世今生.mp4" type="video/mp4"></source>
当前浏览器不支持video直接播放
</video>
</body>
</html>
6.形变
.box {
transform: rotateX(360deg) | rotateY(360deg) | rotateZ(360deg);
}
.box {
transform: translateX(200px) | translateY(200px);
}
.box {
transform: scaleX(2) scaleY(0.5)
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>形变</title>
<style type="text/css">
div {
width: 150px;
height: 150px;
background-color: red;
margin: 10px auto;
transition: 3s;
}
/*旋转形变:旋转的是角度 deg*/
.d1:hover {
/*transform: rotateX(3600deg);*/
/*transform: rotateY(3600deg);*/
/*transform: rotateZ(3600deg);*/
transform: rotateX(3600deg) rotateY(3600deg) rotateZ(3600deg);
}
/*偏移形变:偏移的是距离 px*/
.d2:hover {
/*transform: translateX(200px);*/
/*transform: translateY(200px);*/
transform: translateX(200px) translateY(200px);
}
/*缩放形变:缩放的是比例*/
.d3:hover {
transform: scale(2, 0.5);
}
.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>
7.浏览器适配
- -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;
<!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>
8.字体图标
<!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>
9.盒子阴影
<!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轴偏移 虚化长度 阴影宽度 阴影颜色*/
/*多个值之间用,隔开*/
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>
