一、表格
一、表格的基本结构
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>表格的基本结构</title> ???????</head><body> ???<table> ???????<caption></caption> ???????<thead> ???????????<tr> ???????????????<th></th> ???????????</tr> ???????</thead> ???????<tbody> ???????????<tr> ???????????????<td></td> ???????????</tr> ???????</tbody> ???????<tfoot> ???????????<tr> ???????????????<td></td> ???????????</tr> ???????</tfoot> ???</table></body></html>
二、表格的常用属性
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>三、如何通过表格中的table-cell特点实现水平垂直居中。
</html><!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>水平垂直居中</title> ???<style> ???????.sup { ???????????width: 200px; ???????????height: 200px; ???????????display: table-cell; ???????????vertical-align: middle; ???????} ???????.sub { ???????????width: 100px; ???????????height: 100px; ???????????margin: 0 auto; ???????} ???</style></head><body> ???<div class="sub"> ???????<div class="sup"></div> ???</div></body></html>二、表单
一、基本结构
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>表单基本结构</title></head><body> ???<form> ???<label>输入框</label><input type="text" /> ???????<button type="submit">提交</button> ???</form></body></html>
二、from标签简介
简述：作用将前台用户数据通过get或post请求方式提交给后台，并在新页面标签中接受后台响应的数据
请求方式get与post的区别：
get：将数据以URL连接方式提交给后台，速度快，但安全性低并且有数据大小限制。
post：将数据以数据包方式提交给祸胎，速度较慢，但安全性高并且没有数据大小限制
了解：前后台交换数据的依据为：表单元素的name与value，name为key，value为value；form标签中action为提交的后台接口（请求的服务器指定路径），method为请求方式。
三、表单常用标签类型
1、input常用类型
text、password、hidden、radio、checkbox、reset、submit
2、文本框
<input type="text" name="username" placeholder="请输入用户名" size="10" maxlength="15">
3、密文框
<input type="password" name="pwd" placeholder="请输入密码" maxlength="12">
4、单选框
<input type="radio" name="sex" value="male" checked>男<input type="radio" name="sex" value="female">女
5、多选框
<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"> 棒球
6、下拉选项框
<!--单选--><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>
7、多行文本输入
<textarea name="content"></textarea><textarea name="content" cols="30" rows="10"></textarea>
8、几种常用的按钮
<!--提交按钮--><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>
9、全局属性
<!-- 全局属性设置 --><!-- required:value不能为空 -->
<!-----pattern:正则-----------><input type="text" name="usr" required /><input type="text" name="name" pattern="\d" />
10、伪类
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>伪类</title> ???<style type="text/css"> ???/*获取焦点*/ ???????.box { ???????????width: 200px; ???????????height: 0; ???????????background-color: red; ???????????/*display: none;*/ ???????????transition: .5s; ???????} ???????????????.usr:focus + .box { ???????????/*display: block;*/ ???????????height: 200px; ???????} ???</style></head><body> ???<form action="" > ???????<div class="box"></div> ???</form></body></html>三、布局所需的方式
一、音频与视频的插入
1、音频
- 应用
```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 ???????????????| 音频源 ??|
2、视频
- 应用
```html
<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类型 |
二、形变
<!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>三、简单的浏览器适配
浏览器适配了解如下：
- -o-：Opera浏览器
- -ms-：IE浏览器
- -moz-：Firefox浏览器
- -webkit-：Chrome、Safari、Android浏览器
```css
径向渐变
.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>四、字体图标与盒子阴影
字体图标
<!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>盒子阴影
<!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>HTML表格和表单以及一些布局所需的用法
原文地址：https://www.cnblogs.com/ageliu/p/9718927.html