web前端基础 html5+css3（十.html5css3新特性）

1.html5新增的语义化标签(针对搜索引擎，提高优化)

<header>：头部标签

<nav>：导航标签

<active>：内容标签

<section>：定义文档某个内容

<aside>：侧边栏标签

<footer>：尾部标签

   body{width: 800px;margin: 0 auto;}header,nav,footer{width: 800px;height: 120px;background: #c00;margin:15px auto 0;border-radius: 5px; float: left;}section{width: 500px;height: 120px;background: blue;margin-top:15px;border-radius: 5px;float: left;}aside{width: 300px;height: 120px;background: pink;margin-top:15px;border-radius: 5px;float: right;}
<header>头部</header>
<nav>导航</nav>
<section>左</section>
<aside>右</aside>
<footer>底部</footer>

2.HTML5新增的多媒体标签

（1）video

autoplay：视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放的问题）

controls：向用户显示播放控件

width：设置播放器宽度

height：设置播放器高度

loop：播放完是否继续播放该视频（循环播放）

preload：auto（预先加载视频）none（不应加载视频），规定是否预加载视频（如果有了autoplay,就忽略该属性）

src：视频url地址

poster：加载等待的画面图片

muted：静音播放

video{width: 100%;height:600px;}
<video src="data:images/mi.mp4" controls="controls" autoplay="autoplay" muted="muted" loop="loop" poster="images/mi.jpg"></video>

（2）audio

autoplay：音频就绪后马上播放

controls：播放按钮

loop：则每当音频结束时重新开始播放

src：播放的音频的url

<audio src="data:images/schj.mp3" autoplay="autoplay" controls="controls" loop="loop"></audio>

3.html5新增的input标签

<form action=""><ul><li>邮箱：<input type="email"/></li><li>网址：<input type="url"/></li><li>日期：<input type="date"/></li><li>日期：<input type="time"/></li><li>数量：<input type="number"/></li><li>手机号码：<input type="tel"/></li><li>搜索：<input type="search"/></li><li>颜色：<input type="color"/></li><li><input type="submit" value="提交"/></li></ul>
</form>

4.html5新增的表单属性

required：必填

placeholder：文本框默认值

autofocus：自动聚焦

autocomplete：off/on 记录之前键入的值（可关闭）

multple：多选文件提交

<form action=""><ul><li>文本域：<input type="search" placeholder="who is me" autofocus="autofocus" required="required" autocomplete="on"/></li><input type="file" multiple="multiple"/><li><input type="submit" value="提交"/></li></ul>
</form>

5.属性选择器

（1）E[att] 选择具有att属性的E元素

/*必须是input 但是同时具有value这个属性 选择这个元素*/
input[value]{color:#c00;}
<input type="text" value="who is me ?"/>
<input type="text" name="me"/>

（2）E[att=“val”]选择具有att属性且属性值等于val的E元素

input[type="password"]{color:#c00;}
<!--2.属性选择器可以选择属性=值的某些元素-->
<input type="text"/>
<input type="password"/>

（3）E[att∧=“val”]匹配具有att属性且值以val开头的E元素

/*选择首先是div 然后具有class属性 并且属性值必须是icon开头的这些元素*/
div[class^="icon"]{color:blue;}
<!--3.属性选择器可以选择属性值开头的某些元素-->
<div class="icon1">icon1</div>
<div class="icon2">icon2</div>
<div class="icon3">icon3</div>
<div class="icon4">icon4</div>
<div>AAAAAA</div>

（4）E[att$="val"]匹配具有att属性且值以val结尾的E元素

div[class$="data"]{color:yellow;}
<!--4.属性选择器可以选择属性值结尾的某些元素-->
<div class="icondata">icon1</div>
<div class="icondata">icon2</div>
<div class="iconwho">who is me ?</div>

（5）E[att*="val"]匹配具有att属性且值中含有val的E元素（开头/结尾中含有val的元素）

/*属性选择器可以选择属性值开头/结尾的某些元素*/
div[class*="icon"]{color:green;}
<div class="icon1">icon1</div>
<div class="icon2">icon2</div>
<div class="icon3">icon3</div>
<div class="icon4">icon4</div>
<div>AAAAAA</div>
<div class="icondata">icon1</div>
<div class="icondata">icon2</div>
<div class="iconwho">who is me ?</div>

类选择器，属性选择器，伪类选择器权重是10

6.结构伪类选择器

E:first-child 匹配父元素中的第一个子元素

E:last-child 匹配父元素中的最后一个子元素

E:nth-child(n) 匹配父元素中的第n个子元素

/*选择ul的第一个孩子*/
ul li:first-child{color:#c00;}
/*选择ul的最后一个孩子*/
ul li:last-child{color:yellow;}
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li>
</ul>

nth-child(n) ：n可以是数字，关键字或者公式

ul li:nth-child(2){color:green;}
/*选取奇数的孩子（odd）*/
ul li:nth-child(odd){color:blue;}
/*选取偶数的孩子（even）*/
ul li:nth-child(even){color:skyblue;}
/*nth-child(n)*从0开始，每次加1 往后面计算，这里面必须是n，不能是其他字母，选择了所有的孩子*/
ol li:nth-child(n){color:pink;}
/*选择所有偶数孩子相当even*/
ol li:nth-child(2n){color:yellow;}
/*选择所有奇数孩子相当odd*/
ol li:nth-child(2n-1){color:orange;}
/*从第三个元素开始*/
ol li:nth-child(n+3){color:#c00;}
/*从第三个元素往后数*/
ol li:nth-child(-n+3){color:skyblue;}
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li>
</ul>
<ol><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li>
</ol>

E:first-of-type 指定类型E的第一个

E:last-of-type 指定类型E的最后一个

E:nth-of-type(n) 指定类型E的第n个

/*nth-child 会把所有盒子排列序号*/
/*执行的时候首先看 :nth-child(1)找第一个元素，之后再回去看前面div*/
section span:nth-child(1){color:#c00;}
/*nth-of-type会把指定元素的盒子排列序号*/
/*执行的时候首先看div指定的元素，之后回去看:nth-of-type(1)第几个孩子*/
section span:nth-of-type(2){color:yellow;}
section span:first-of-type{color:red;}
section span:last-of-type{color:skyblue;}
<section><div>AAA</div><span>BBB</span><span>ccc</span><span>fff</span><span>ggg</span><span>hhhh</span>
</section>

7.伪元素选择器

1.文字

div{width:200px;height:200px;background: pink;}
div:before{display:inline-block;content:"我";width: 20px;height: 30px;background: purple;}/*content必须要写*/
div:after{content:"谁";}/*content必须要写*/
<div>是</div>

2.字体图标

@font-face {font-family: 'icomoon';src:  url('fonts/icomoon.eot?p4ssmb');src:  url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?p4ssmb') format('truetype'),url('fonts/icomoon.woff?p4ssmb') format('woff'),url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;
}
div{width: 200px;height: 30px;border: 1px solid #c00;position: relative;}
div::after{font-family: 'icomoon';content: '\e900';font-size: 18px;position: absolute;right: 10px;top: 5px;}
<div></div>

3.土豆网显示隐藏遮罩层

.tudou{width: 300px;height: 200px;position: relative;}
.tudou img{width: 100%;height: 100%;}
.tudou:hover::before{content:'';background:rgba(0,0,0,.3);position: absolute;width: 100%;height: 100%;background: url("images/arr.png") center no-repeat rgba(0,0,0,.3);}
<div class="tudou"><img src="data:images/tudou.jpg"/>
</div>

4.伪元素清除浮动

.clearfix:after{content: '';/*伪元素必须写的属性*/display: block;/*插入的元素必须是块级*/height: 0;/*不要看到这个元素*/clear: both;/*核心代码清除浮动*/visibility: hidden;/*不要看到这个元素*/
}
.clearfix:after,.clearfix:before{content='';display: table;
}
.clearfix:after{clear: both;}

8.css3盒子模型border-box

box-sizing:content-box（默认）

box-sizing:border-box（加上边框不会撑大盒子）

div{width: 200px;height: 100px;background: #c00;border: 10px solid pink;padding: 20px;box-sizing: content-box;}
p{width: 200px;height: 100px;background: blue;border: 10px solid skyblue;padding: 20px;box-sizing: border-box;}
<div></div>
<p></p>

9.图片模糊处理filter

img{/*blur是一个函数 小括号里面数值越大，图片越模糊 注意数值要加px单位*/filter:blur(5px);
}
img:hover{filter:blur(0px);}
<img src="data:images/2.jpg"/>

10.css3宽度calc函数

.father{width:300px;height: 200px;background: #c00;}
.son{width: calc(100% - 30px);height: 30px;background:skyblue;margin:0 auto;}
<!--需求我们的子盒子宽度永远比父盒子小30像素-->
<div class="father"><div class="son"></div>
</div>

11.css过渡

transition ：要过渡的属性花费时间运动曲线何时开始；

1.属性：想要变化的css属性，宽度高度，背景颜色，内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以。

2.花费时间：单位是秒（必须写单位）比如0.5s

3.运动曲线：默认是ease（可以省略）

4.何时开始：单位是秒（必须是单位）可以设置延迟触发时间，默认是0s，可以省略

div{width: 200px;height: 100px;background: #c00;/*transition：变化的属性 花费时间 运动曲线 何时开始*/transition:width .5s;transition:width .5s,height .2s;transition:height .5s ease 1s;/*如果想要多个属性都变化，属性写all就可以了*//*谁要过渡，给谁加*/transition:all .6s;
}
div:hover{width:400px;height:200px;background: pink;}

12.css过渡练习

（1）进度条

.hg {width: 300px;height: 20px;border: 1px solid #c00;border-radius: 150px;padding: 1px;}
.hg .lyf{background: #c00;width: 50%;height: 100%;border-radius: 150px;transition:all .5s;}
.hg:hover .lyf{width: 100%;}
<div class="hg"><div class="lyf"></div>
</div>

（2）小米图标

.lyfhg{width: 200px;height: 100px;position: relative;overflow: hidden;}
.lyfhg::after{content: '';position: absolute;width: 100%;height: 100%;background: url(images/tudou.jpg);}
.lyfhg::before{content: '';position: absolute;width: 100%;height: 100%;background: url(images/2.jpg);}
.lyfhg:hover::after{opacity: 0;/*transform: translate3d(55px,0,0) scale(.9);*/transition:all 0.5s;}
<div class="lyfhg"></div>
<div class="hg"></div>

13.背景线性渐变

background：-webkit-linear-gradient(起始方向，颜色1，颜色2........);//颜色没有限制，多个也可以（必须加上浏览器的私有前缀-webkit-）

background：-webkit-linear-gradient(left，red，blue);

background：-webkit-linear-gradient(left top，red，blue);

div{width: 600px;height:200px;background: -webkit-linear-gradient(left top,red,purple);}
<div></div>

14.文本框提示（placeholder）

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color: #999;
}input:-moz-placeholder, textarea:-moz-placeholder {color: #999;
}input::-moz-placeholder, textarea::-moz-placeholder {color: #999;
}input:-ms-input-placeholder, textarea:-ms-input-placeholder {color: #999;
}