目录
前言
html5的新增特性主要是针对以前的不足，增加了一些新的标签，新的表单和新的表单属性等
这些特性都有兼容性问题，基本都是IE9以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性（移动端）。
而css3中重点增加了一些新的选择器，可以让我们更方便的去选择样式。同样，也存在兼容性的问题。
而本节博客内容也将带领大家学习我们的html5与css3的新增特性
HTML5篇
一，html5新增语义化标签
以前布局，我们基本用div来做，div对于搜索引擎来说是没有语义的
在html5中有了新增语义化的标签。
<header></header> 头部标签
<nav></nav> 导航标签
<article></article> 内容标签
<section></section> 定义文档某个区域
<aside></aside> 侧边栏标签
<footer></footer> 尾部标签
注意：
1.这些语义化标准主要是针对搜索引擎的
2.这些新标签页面中可以使用多次
3.在IE9中，需要把这些元素转化为块级元素
4.其实我们移动端更喜欢使用这些标签
5.HTML5还增加了很多其他标签我们后面再慢慢学
二，html5中新增的多媒体标签
这一节我们主要介绍视频标签video和音频标签audio，使用它们可以很方便的在页面中嵌入音频和视屏，而不再去使用flash和其他浏览器插件
2.1 视频标签video
这里我们需要考虑兼容性：video元素支持三种视频格式：MP4，webm，ogg 尽量使用MP4格式，其中MP4几乎支持其他所有浏览器
格式：
<video src="文件地址"></video>
2.2 视频标签的属性
当我们光写出了video标签以及文件地址，文件是不能显示播放的。
因为视频播放很耗费流量，而且公共场合视频突然播放也会影响他人。所以谷歌把自动播放给禁止了。
解决方法：加上muted属性，也就是静音播放，以及autoplay属性，自动播放
格式
<video src="文件地址" muted="muted" autoplay="autoplay"></video>
那么打开之后就可以自动静音播放
那么问题来啦，我们不想让它自己播放，我们想控制它，那么就要依靠属性controls——控件。
格式
<video src="文件地址" autoplay="autoplay" muted="muted" controls="controls"></video>
另外还有几个比较常用的属性
loop="loop"播放循环
preload: auto(预先加载器) none(不应加载视频) 规定是否预加载视频如果有了autoplay就忽略该属性
poster: 加载等待的画面图片,后面添加图片地址即可
2.3 音频标签audio
html5在不使用插件的情况下，也可以原生的支持音频格式文件的播放，当然，支持的格式是有限的（同样也是兼容性问题）
audio： MP3 wav ogg 尽量添加MP3
格式
<audio src="音频地址"></audio>
2.4 音频标签的属性
音频标签和视频标签使用方式基本一致，但是谷歌浏览器把音频和视频自动播放禁止了，我们可以个视频标签添加muted属性来静音播放视频，音频不可以（可以通过js解决）
<audio src="./音频/葛东琪 - 悬溺.mp3" autoplay="autoplay" controls="controls" loop="loop"></audio>
三，html5新增的表单属性
3.1 input标签中新增的属性
搜索框type=search语义更好
url：限制用混输入必须为url类型
date： 限制用户输入必须为日期类型
time： 限制用户输入必须为时间类型
month： 限制用户输入必须为月类型
week: 限制用户输入必须为周类型
number： 限制用户输入必须为数字类型
tel： 手机号码
color： 生成一个颜色选择表单
3.2 新增表单属性
required: requered 表单拥有该属性表示其内容不能为空，必填
placeholder 提示文本表单提示信息，存在默认值将不再显示
autofocus autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete off/on 当用户字段开始输入时，浏览器基于之前键入过的值显示填写项，需要加name,默认为on，也可以改成off
multiple multiple可以选择文件提交 ，多选，可以配合文件域进行提价
CSS3篇
四，CSS3新增的选择器
4.1 属性选择器
属性选择器可以根据元素特定属性来选择元素，这样就可以借用子类或者id选择器
格式
选择符：
E{att}选择具有alt属性的E元素
E{att="val"}选择具有alt属性且属性值等于val的E元素
E{att^="val"}匹配具有att属性且值以val开头的E元素
E{att$="val"}匹配具有att属性且值以att皆为的E元素
E{att*="val"}匹配具有att属性且值中含有val的E元素，有就选择出来 -->
注意： 类选择器，属性选择器，伪类选择器权重为10，结合起来会叠加权重以上几乎都是10+1=11
<style>
/* 必须是input但是同时具有value这个属性 */
/* input[value] {
color: pink;
} */
/* 只选择type=password文本框的input选取出来*/
/* input[type="password"]{
color: pink;
} */
/* 把四个div变红色 */
/* 选择首先是div然后具有class属性并且属性值必须是icon开头的这些元素 */
div[class^="icon"] {
color: red;
}
</style>
</head>
<body>
<!--1.利用属性选择器就可以不用借助类或者id选择器
<input type="text" value="请输入用户名">
<input type="text"> -->
<!--2.属性选择器还可以选择属性=值得某些元素,重点务必掌握-->
<!-- <input type="text" name="" id="">
<input type="password" name="" id=""> -->
<!--属性选择器可以选择属性值开头的某些元素-->
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>我是打酱油的</div>
</body>
4.2 结构伪类选择器
4.2.1 nth-child(n)
结构伪类选择器主要根据文档结构来选择元素，常用语根据父级选择器里面的子元素
结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素
nth-child(n)可以选择某个父元素的一个或多个特定的子元素
<style>
/* 1.选择ul里面的第一个孩子小li */
ul li:first-child {
color: pink;
}
ul li:last-child {
color: pink;
}
ul li:nth-child(3) {
color: pink;
}
</style>
<ul>
<li>我是第一个孩子</li>
<li>我是第二个孩子</li>
<li>我是第三个孩子</li>
<li>我是第四个孩子</li>
<li>我是第五个孩子</li>
<li>我是第六个孩子</li>
<li>我是第七个孩子</li>
<li>我是第八个孩子</li>
</ul>
也可以选择奇数偶数
ul li:nth-child(even) {
/* 把所有偶数的孩子选出来 */
background-color:#ccc;
}
ul li:nth-child(odd) {
background-color: gray;
}
也可以是任意数
我们设括号里的是n，则n可以是 n可以是数字，关键字和公式。数字就是你任意规定的数字，比如我们要第五行，则n=5即可。关键词就比如前面讲的奇数偶数行，even和odd。
而公式注意必须要带n，其他字母不行
n从0开始计算，每次加个1，但是第0个元素或者超出了元素的个数会被忽略
ol li:nth-child(n+2) {
/* 从0开始每次加1往后面计算 */
background-color: orange;
}
n=0，则n+2=2，从第二个元素开始，n每次加1，也就是2以后的所有元素
效果如下
4.2.2 nth-of-type
nth-of-type与nth-child（n）非常相似
ul li:first-of-type {
background-color: pink;
}
ul li:last-of-type {
background-color: pink;
}
ul li:nth-of-type(even){
background-color: skyblue;
}
类似这些首位，末尾，以及关键词都可以使用
这里我们主要强调它和nth-child(n)的区别
<section>
<p>光头强</p>
<div>熊大</div>
<div>熊二</div>
</section>
大家请看上述代码：我现在想要让“熊大”变成别的颜色
section div:nth-of-type(1) {
background-color: blue;
}
section div:nth-child(1){
background-color: red;
/* nth-child会把所有的孩子都排出序号，执行的时候首先看nth-child1,之后回去看前面div，但是前面的是p，匹配补上，没有满足孩子的，所以出必来 */
}
(为了防止权重误会引起问题，我把nth-child放在了nth-of-type的下面)
大家请看上面的代码，请问最后熊大会变成什么颜色
为什么不是红色而是蓝色呢？
这就要谈一下这两个选择器的区别
child是先看孩子再看类型，type是先看类型再看孩子
nth-type-of执行的时候先找到所有div，然后再从div中选择第一个孩子
nth-child会把所有的孩子都排出序号，执行的时候首先看nth-child,之后回去看前面div，但是前面的是p，匹配补上，没有满足孩子的，所以出不来
五，新增伪类元素
5.1 伪类元素选择器初始
伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
注意：
1.before和after创建一个元素，但是属于行内元素
2.新创建的这个元素在文档树中找不到的，所以我们称为伪元素
3.语法： element::before()
4.before和after必须有content属性
5.before在父元素内容的前面创建元素，after在父元素内容后面插入元素
6.伪元素选择器和标签选择器一样权重为1
5.2 新增伪元素的基本使用
div {
width: 200px;
height: 200px;
background-color: pink;
}
<div>
yeah
</div>
这是一个粉色的盒子。盒子里面写的是yeah
现在我想在yeah的前面和后面都加上文字
则：
div::before {
/* 这个content是必须要写的，否则伪元素就没有效果了*/
display: inline-block;
content: '我';
width: 30px;
height: 40px;
background-color: purple;
}
div::after {
content: '前端'
}
注意，伪元素选择器必须要有内容content，否则将显示不出来
最后效果
写一个div::before{}创建了一个盒子，在div盒子的内部的前面
反之，div::after{}创建了一个盒子，在div盒子的内部的后面
但是创建的盒子再文档中是找不到的
注意，这是行内元素，没有给设置大小，如果想要设置大小，可以把它转化为行内块元素，这就是为什么我把上面代码中的before中加了一个转化
类似于这种伪类选择器（组合写法一个div一个伪类选择器）权重较低都为1，所以加起来为2
六，用于计算的方法calc()
calc()是caculate计算
给大家看个实例
<style>
.father {
width: 300px;
height: 200px;
background-color: pink;
}
.son {
width: calc(100% - 30px);
height: 30px;
background-color: skyblue;
}
</style>
<!--需求我们的子盒子宽度永远比父盒子小30px-->
<div class="father">
<div class="son"></div>
</div>
上述实例中就用到了calc()可以自动计算
width: calc(100%-80px);在小括号里做加减计算，通过±*/来计算
注意，计算符号两边要用空格隔开，否则报错
上述代码最后效果
七，伪元素清除浮动
首先，为什么要清除浮动？
在标准流中，我们没有给父元素高度，只给了子元素高度，但是父元素的高度被子元素撑开了
但是加了浮动后，父元素的高度变成了0，因为浮动的元素不占有高度，于是高度变成了0
由于浮动元素不再占有源文档流的位置，所以它会对后面的元素排版产生影响，所以我们需要清除浮动
在之前没有css3的情况下清除浮动，我们给所有的盒子后面放一个盒子，并给这个盒子清除浮动，但是现在我们可以利用伪元素
使用伪元素清除浮动（额外标签法的省级优化），我们给后面的盒子清除浮动，记住要有content，要加上display: block;
额外标签法必须是块级元素。visbility: hidden隐藏。不会对布局有影响，然后clear: both;即可
也可以在内容元素的前面插入盒子，这样就可以完全把浮动元素闭合了
八，图片模糊处理
CSS3滤镜filter：filter CSS属性将模糊或颜色偏移等图片效果运用于元素
filter: 函数()
例如：filter: blur(5px); blur 模糊处理，数值越大越模糊
<style>
img {
filter: blur(3px);
}
img:hover {
filter: blur(0px);
}
</style>
<img src="./小猫咪.jpg" alt="">
九，CSS3过渡
过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不适用FLash动画或js的情况下
当元素从一种样式变换为另一种样式时为元素添加效果
过渡动画：是从一个状态渐渐的过渡到另外一个状态
可以让我们的页面更好看，更动感十足，虽然，低版本浏览器不支持，但是不会影响页面布局
我们现在经常和:hover一起搭配使用
transition:要过渡的属性 花费时间 运动曲线 何时开始;
transition:要过渡的属性 花费时间 运动曲线 何时开始;
1.属性：想要变化的css属性，宽度高度，背景颜色，内外边距都可以，如果想要所有属性都变化过渡，写一个all都可以
2.花费时间：单位是秒（必须写单位）比如0.5s
3.运动曲线，默认是ease（可以省略）采取默认即可
4.何时开始：单位是秒，必须写单位，可以设置延迟触发时间，默认是0s,可以省略
记住过渡的使用口诀：谁做过渡给谁加
如果想要多个属性，利用逗号做出分割，想要所有属性，写一个all即可
<div></div>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition: 变化的属性 花费时间(单位必须写) 运动曲线 何时开始 最后两个可以省略 */
transition: all 1s;
}
div:hover {
width: 400px;
height: 200px;
background-color:skyblue;
}
</style>
由于是动画效果希望大家自己写出代码尝试
注意
transition谁做过渡给谁加这里是盒子做过渡，所以给盒子加
后记
狭义的HTML5和CSS3：就是HTNL5和CSS3的样式，广义的HTML5：HTML5本身+CSS3+javaScript，这个集合有时称为HTML5和朋友，通常缩写为HTML5，虽然HTML5的一些特性仍然不被某些浏览器支持，但是它是一种发展趋势。
所以，希望大家认真学习，坚持这条路，一直不懈的走下去！！！谢谢关注。
274
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
