HTML5新标签和特性
*header:定义文档的页眉 头部
*aside:定义其所处内容之外的内容 侧边
*article:定义文章。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
header {
width: 200px;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<header></header>
<aside></aside>
<article></article>
<time> 12:09 </time>
</body>
</html>
datalist和fieldset标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
fieldset {
width: 300px;
}
</style>
</head>
<body>
<input type="text" value="请输入明星" list="star"/>
<datalist id="star">
<option value="刘德华">刘德华</option>
<option value="刘若英">刘若英</option>
<option value="刘晓庆">刘晓庆</option>
<option value="戚薇">戚薇</option>
<option value="戚继光">戚继光</option>
</datalist>
<fieldset>
<legend>用户登录</legend>
用户名: <input type="text"> <br>
密码: <input type="password">
</fieldset>
</body>
</html>
表单和强大的input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 600px;
border: 1px solid #ccc;
margin: 0 auto;
}
.box dl {
overflow: hidden;
margin: 15px 0;
}
.box dl dt, .box dl dd {
float: left;
}
.box dl dt {
width: 100px;
}
.box dl dd {
width: 200px;
}
</style>
</head>
<body>
<form action="">
<div class="box">
<dl>
<dt>您的邮箱</dt>
<dd><input type="email"></dd>
<dd>* 注册后不可更改</dd>
</dl>
<dl>
<dt>手机号码</dt>
<dd><input type="tel"></dd>
<dd>* 注册后不可更改</dd>
</dl>
<dl>
<dt>网址</dt>
<dd><input type="url"></dd>
<dd>* 注册后不可更改</dd>
</dl>
<dl>
<dt>邮政编码</dt>
<dd><input type="number"></dd>
<dd>* 注册后不可更改</dd>
</dl>
<dl>
<dt>拖动滑块</dt>
<dd><input type="range"></dd>
<dd>* 注册后不可更改</dd>
</dl>
<dl>
<dt>时间</dt>
<dd><input type="time"></dd>
<dd>* 注册后不可更改</dd>
</dl>
<dl>
<dt>出生日期</dt>
<dd><input type="date"></dd>
<dd>* 注册后不可更改</dd>
</dl>
<dl>
<dt>时间</dt>
<dd><input type="datetime"></dd>
<dd>* 注册后不可更改</dd>
</dl>
<dl>
<dt>月份</dt>
<dd><input type="month"></dd>
<dd>* 注册后不可更改</dd>
</dl>
<dl>
<dt>星期</dt>
<dd><input type="week"></dd>
<dd>* 注册后不可更改</dd>
</dl>
<dl>
<dt></dt>
<dd><input type="submit" value="提交"> <input type="reset" value="重置"></dd>
</dl>
</div>
</form>
</body>
</html>
别样的表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
用户名: <input type="text" placeholder="请输入用户名" autofocus> <br />
上传头像: <input type="file" name="" id="" multiple > <br />
昵称: <input type="text" required accesskey="s"> <br />
<input type="submit" value="提交按钮">
</form>
</body>
</html>
插入视频。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe height=498 width=510 src='http://player.youku.com/embed/XMzIzNTc0MTAwMA==' frameborder=0 'allowfullscreen'></iframe>
</body>
</html>
HTML5中的视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<audio controls loop>
<source src="bgsound.mp3"/>
<source src="music.ogg"/>
您的浏览器版本太低
</audio>
<video autoplay controls>
<source src="movie04.ogg"/>
<source src="mp4.mp4"/>
</video>
</body>
</html>
结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*a:hover 鼠标经过a链接的时候 */
/*ul li:first-child {
background-color: pink;
}
ul li:last-child {
background-color: pink;
}
li:nth-child(3) { 选择第3个
background-color: purple;
}*/
/*li:nth-child(even) { even 选择所有的偶数
background-color: pink;
}
li:nth-child(odd) { odd 选择所有的奇数
background-color: purple;
}*/
/* li:nth-child(2n) { n = 0 1 2 3 4 5 2n 0 2 4 6 8 10...开始 2n 类似于even
background-color: pink;
}
*/
/* li:nth-child(2n+1) { 奇数 odd
background-color: pink;
}
*/
li:nth-child(4n) { /* 4.8.12 */
background-color: blue;
}
</style>
</head>
<body>
<ul>
<li>地方</li>
<li>二父</li>
<li>与父</li>
<li>二分</li>
<li>梧桐</li>
<li>梧桐</li>
<li>梧桐</li>
<li>梧桐</li>
<li>梧桐</li>
</ul>
</body>
</html>
属性选择器
扫描二维码关注公众号,回复:
3649108 查看本文章
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*div[class] { 选出所有 带有 class 属性的
background-color: pink;
}*/
/*div[class=demo] { 选出 class = demo 的
background-color: pink;
}*/
/* div[class^=test] { 选出test 开头的 标签
background-color: purple;
}*/
div[class$=test] { /*选出test 结尾的 标签 ^ $ */
background-color: purple;
}
</style>
</head>
<body>
<div class="demo">王者荣耀</div>
<div>王者荣耀</div>
<div class="firsttest">王者荣耀</div>
<div class="test">王者荣耀</div>
<div class="test1">王者荣耀</div>
<div class="test2">王者荣耀</div>
<div class="test3">王者荣耀</div>
</body>
</html>
伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*p::first-letter { 选择第一个字
font-size: 100px;
}*/
/*p::first-line { 第一行
color: red;
}*/
p::selection { /*选择文字时候的状态*/
background-color: pink;
color: yellow;
}
</style>
</head>
<body>
<p>中国有嘻哈,2017中国有嘻哈巡回演唱会 北京站,首都体育馆!立享188元新人大礼包!中国有嘻哈,100%正票,票品保障!更多折扣票,热门票,上票牛网!中国有嘻哈,2017中国有嘻哈巡回演唱会 北京站,首都体育馆!立享188元新人大礼包!中国有嘻哈,100%正票,票品保障!更多折扣票,热门票,上票牛网!中国有嘻哈,2017中国有嘻哈巡回演唱会 北京站,首都体育馆!立享188元新人大礼包!中国有嘻哈,100%正票,票品保障!更多折扣票,热门票,上票牛网!</p>
</body>
</html>
after和before伪元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div::before { /*必须带一个属性 content 伪元素 其实这个 before 是个盒子*/
/* 这个盒子是行内的盒子 可以转换*/
content: "我";
}
div::after {
content: "18岁";
}
</style>
</head>
<body>
<div>今年</div> 我今年18岁
</body>
</html>
图标字体的两种表方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?hrstq9');
src: url('fonts/icomoon.eot?hrstq9#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?hrstq9') format('truetype'),
url('fonts/icomoon.woff?hrstq9') format('woff'),
url('fonts/icomoon.svg?hrstq9#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
span , div {
font-family: 'icomoon';
}
div::after {
content: "\e91b";
}
</style>
</head>
<body>
<span></span>
<div></div>
</body>
</html>
css3盒子模型:内减模式,可以保证我们设置的宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
padding: 30px;
border-right: 20px solid red;
box-sizing: border-box; /*内减模式*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
案例:盒子模型实现的特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 632px;
height: 340px;
position: relative;
border-radius: 10px;
overflow: hidden;
}
div:hover::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 20px solid rgba(255, 255, 255, 0.5);
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
<img src="mi.jpg" alt="">
</div>
</body>
</html>
可以插入元素的选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?hrstq9');
src: url('fonts/icomoon.eot?hrstq9#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?hrstq9') format('truetype'),
url('fonts/icomoon.woff?hrstq9') format('woff'),
url('fonts/icomoon.svg?hrstq9#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
div {
width: 200px;
height: 30px;
border: 1px solid #ccc;
margin: 100px auto;
font-family: "icomoon";
position: relative;
}
div::before { /*是一个能插入元素的选择器*/
content: "\ea51";
position: absolute;
right: 10px;
top: 5px;
}
div:hover {
border: 1px solid red;
}
div:hover::before {
color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>