表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
<style type="text/css">
table {
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>
垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>垂直居中</title>
<style type="text/css">
.sup {
200px;
height: 200px;
background-color: red;
/*可以控制内容/子级垂直排列方式*/
display: table-cell;
/*设置垂直排列方式*/
vertical-align: middle;
}
.sub {
100px;
/*height: 100px;*/
background-color: orange;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="sup">
<div class="sub">多行文本多行文本多行文本多行文本多行文本</div>
</div>
</body>
</html>
表单
<!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 {
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>
音频
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>音频视频</title>
<style type="text/css">
</style>
</head>
<body>
<audio src="F:musicBeyond - 不再犹豫.mp3" autoplay controls loop>当前浏览器不支持audio,该文本便会显示</audio>
</body>
</html>
视频
<!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>
形变
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>形变</title>
<style type="text/css">
div {
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>
浏览器适配
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浏览器适配</title>
<style type="text/css">
.box {
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>