一,表格
特点:1,表头垂直水平居中
2,单元格垂直居中
3,cellspacing控制单元格之间的间距
4,table的显示特性:内容不超过规定的宽高则采用规定的宽高,当内容显示区域的宽高超过规定的宽高,表格的宽高由内容显示区域决定
5,rules:边框规则,设置后会合并边框(cellspacing失效):groups分组带有边框 all所有带有边框,rows行带有边框,cols列带有边框
6,cellpadding:内边距(一般对内容进行格式化布局)
7,cell的width可以规定列宽占比(以上的设置一般在table标签中设置)
8,colspan合并列 rowspan合并行(在表格中直接操作),以上的赋值可以在引号里面直接给值,不用加单位
具体步骤:1,把想要合并的其中一盒表格删除,2在另一个表格中添加行(列)合并=合并的表格数
<!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 boreder="1" cellspacing="0" rules="all" cellpadding="10"> <caption align="bottom">表格标题</caption> <thead> <th width="1%">表头</th> <th width="3%">表头</th> <th width="6%">表头</th> </thead> <tbody> <td colspan="2">单元格</td> <!-- <td>单元格</td> --> <td rowspan="2">单元格</td> </tbody> <tfoot> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tfoot> </table> </body> </html><!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>
二,表单
作用:将前台用户数据通过get或post请求方式,提交给后台,并将新页面标签中接收与后台相应
请求方式:
1,get:将数据以url链接拼接方式提交给后台,速度快,但安全性低,且有数据大小的限制
2,post:将数据以数据包的方式提交给后台,速度较慢,但安全性高,且无数据大小限制
3,前后台交换数据的依据为:表单元素的name与value,name为key,value为value
action:提交的后台接口(请求的服务器指定路径)
method:请求方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <!-- action:提交的后台接口,method:请求方式 --> <form action="" method="get"> <div> <!-- 下面给一个默认值,一个提交后台的名字 --> <label>用户名:</label><input type="text" name="usr" value="h" /> </div> <div> <!-- placeholder:文本占位符 --> <label>密码:</label><input type="text" name="password" 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需要提前规定(checked为默认值) --> <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不能为空(如果对应的值不填会提示)pattern表示正则匹配--> <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> </body> </html>
三,音频
<!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>
四,视频
<!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 { 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>
六,浏览器适配
<!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>