提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言
提示：这里可以添加本文要记录的大概内容：
HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。
CSS3 的新增特性也是为了更好的进行样式的修改，但目前还存在兼容性问题。
提示：以下是本篇文章正文内容，下面案例可供参考
一、HTML5的新特性
1. 新增语义化标签
以前布局，我们基本用 div 来做，但div 对于搜索引擎来说，是没有语义的。所以HTML5就添加了语义化的标签，使搜索引擎对网页语义进行识别。
下面这个案例可以对新增的语义化标签进行展示：
<style>
* {
margin: 0;
padding: 0;
}
body {
margin: 0 300px;
}
header,
nav,
footer {
clear: both;
width: 800px;
height: 80px;
border: 1px solid grey;
margin-top: 10px;
border-radius: 15px;
background-color: green;
}
article,
aside {
float: left;
width: 400px;
height: 300px;
margin: 10px 10px 10px 0;
border: 1px solid grey;
border-radius: 15px;
background-color: green;
}
section {
width: 100px;
height: 80px;
margin: 100px 150px;
border: 1px solid grey;
border-radius: 15px;
background-color: greenyellow;
}
</style>
<body>
<header>
header </header>
<nav>
nav</nav>
<article>
article
<section>
section </section>
</article>
<aside>aside</aside>
<footer>
footer</footer>
</body>
在进行布局时添加这些标签就可以明确的表示出该部分的位置及意义。但也有需要注意的地方：
这种语义化标准主要是针对搜索引擎的，这些新标签在页面中可以多次使用， 在 IE9 中，需要把这些元素转换为块级元素。
像这样的新增元素还有很多，让我们在后面进行更多的学习。
2. 新增多媒体标签
多媒体标签主要包含音频<audio>、视频<video>两种标签，现在就对这两个标签进行学习。
在播放视频和音频时会产生文件的兼容性问题，目前MP3、MP4的兼容性较好。
解决方案：
<video controls="controls" width="300">
/*按顺序依次执行，满足条件就不往下执行了。*/
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
您的浏览器暂不支持 <video> 标签播放视频
</ video >`
2.1 音频标签
语法： <audio src="文件地址" controls="controls"></audio>
案例演示：
<body>
<!--autoplay 设置自动播放 但谷歌禁止了直接设置自动播放-->
<!-- <audio src="media/music.mp3" autoplay="autopaly"></audio> -->
<!-- controls 显示播放控件 -->
<!-- <audio src="media/music.mp3" controls></audio> -->
<!-- loop 循环播放 -->
<audio src="media/music.mp3" controls loop></audio>
</body>
2.2 视频标签
语法： <video src="文件地址" controls="controls"></video>
案例演示：
<!-- autoplay 自动播放，但谷歌有限制 需要设置muted来实现自动播放 -->
<!-- <video src="media/mi.mp4" autoplay="autopaly" muted="muted"></video> -->
<!-- controls 显示播放控件-->
<!-- <video src="media/mi.mp4" controls="controls"></video> -->
<!-- loop 循环播放-->
<!-- <video src="media/mi.mp4" loop="loop" autoplay="autopaly" muted="muted"></video> -->
<!-- poster 加载等待的图片 -->
<video src="media/mi.mp4" poster="media/mi9.jpg" width="400px" height="300px" controls></video>
3. 新增表单类型
我们在填写表单时有的时候需要对表单中的内容进行相应的限制，比如在价格栏中只能填写数字、在填写邮箱时对邮箱的格式要求等等，都需要进行验证。之前的input中填写好后需要配合JS来进行验证填写的内容，但现在不用这么麻烦了使用我们新增的表单类型就可以实现。
注意的是这些新增的表单类型需要添加在表单域中使用.
案例演示：
<!-- 要进行验证需要在表单域中 -->
<form action="">
<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">
</li>
</ul>
</form>
在添加表单类型的同时也增添了几个表单属性：
案例演示：
<form action="">
<!-- required 不能为空 -->
<!-- <input type="text" required> -->
<!-- placeholder 提示文本 -->
<!-- autofocus 自动聚焦 -->
<!-- autocomplete 显示之前填写的内容 -->
<!-- multiple 多选文件提交 -->
<input type="text" placeholder="说的什么" autofocus autocomplete="off">
<!-- 没加多选文件时都只能提交一个文件 -->
<input type="file" multiple>
<input type="submit">
</form>
二、CSS3的新特性
1.新增选择器
1.1 属性选择器
属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。
主要有这些使用方法
案例演示：
<style>
/* 给相同标签，有不同属性的进行选择 */
input[value] {
color: pink;
}
/* 选择具有某属性且等于值 */
input[type=button] {
color: green;
}
/* 匹配属性以相同的开头的 */
div[class^='icon'] {
background-color: greenyellow;
}
/* 以相同的结尾 */
div[class$='icon'] {
background-color: hotpink;
}
/* 含有某值的进行选择 */
div[class*='1'] {
background-color: red;
}
</style>
<body>
<input type="text" value="这是要变的">
<input type="text">
<input type="button" value="属性">
<div class="icon1">1</div>
<div class="icon2">2</div>
<div class="icon3">3</div>
<div class="icon4">4</div>
<div class="1icon">1</div>
<div class="2icon">2</div>
<div class="3icon">3</div>
<div class="4icon">4</div>
</body>
1.2 结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素。
主要使用有：
案例演示：
<style>
/* 父元素的第一个孩子 */
ul li:first-child {
background-color: red;
}
/* 最后一个孩子 */
ul li:last-child {
background-color: pink;
}
/* 匹配每一个子元素 */
ul li:nth-child(n) {
background-color: green;
}
/* 可以设置奇偶行 */
/* 偶行 */
ul li:nth-child(even) {
background-color: #fff;
}
/* 奇行 */
ul li:nth-child(odd) {
background-color: grey;
}
/* 2的倍数 */
.box div:nth-child(2n) {
background-color: pink;
}
/* :nth-child() 与 :nth-of-type() 的区别 */
.div1 div:nth-child(1) {
/* :nth-child() 是固定排序，先对应值，在进行标签的确认*/
background-color: pink;
}
/* :nth-of-type() 先对标签进行确认，在进行排序*/
.div1 div:nth-of-type(1) {
background-color: greenyellow;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</div>
<div class="div1">
<p>1</p>
<div>2</div>
<div>3</div>
</div>
</body>
nth-child（n） 选择某个父元素的一个或多个特定的子元素（重点）
- n 可以是数字，关键字和公式
- n 如果是数字，就是选择第 n 个子元素， 里面数字从1开始…
- n 可以是关键字：even 偶数，odd 奇数
- n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第 0 个元素或者超出了元素的个数会被忽略 )
在演示中可以看出nth-child()与nth-of-type()的区别，就是排序的先后问题。但其他的都是相同使用的。
1.3 伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
伪元素选择器主要包含两个before 和 after
案例演示：
<style>
div {
width: 100px;
height: 100px;
border: 1px solid pink;
}
/* 在元素内部前面插入 必须有 content 属性*/
/* 新创建的这个元素在文档树中是找不到的 */
div::before {
content: '这';
}
/* 在元素后面插入 属于行内元素*/
div::after {
content: '是很神奇的显示';
}
</style>
<body>
<div>似乎</div>
</body>
注意：
- before 和 after 创建一个元素，但是属于行内元素 。
- 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素。
- 语法：element::before {}；
- before 和 after 必须有 content 属性 。
- before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素 。
- 伪元素选择器和标签选择器一样，权重为 1
伪元素选择器还有其他的神奇功能。
1.3.1 伪元素字体图标
案例演示：
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?98rnyr');
src: url('fonts/icomoon.eot?98rnyr#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?98rnyr') format('truetype'), url('fonts/icomoon.woff?98rnyr') format('woff'), url('fonts/icomoon.svg?98rnyr#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
div {
position: relative;
width: 200px;
height: 40px;
border: 1px solid black;
}
div::before {
position: absolute;
top: 10px;
right: 20px;
font-family: 'icomoon';
content: '\e902';
font-size: 18px;
}
</style>
<body>
<div></div>
</body>
1.3.2 进行笼罩
案例演示：
<style>
* {
margin: 0;
padding: 0;
}
.tudou {
/* 子绝父相 */
position: relative;
width: 520px;
height: 280px;
margin: 200px 0 0 40%;
background-color: pink;
}
.tudou img {
/* 图片大小和盒子大小一致。 */
width: 100%;
height: 100%;
}
/* .mask {
设置隐藏
display: none;
遮盖时不占有位置
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
} */
/* .tudou:hover .mask {
在鼠标经过时显示元素
display: block;
} */
/* 使用伪类元素实现遮盖的功能 */
.tudou::before {
display: none;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
}
.tudou:hover::before {
display: block;
}
</style>
<body>
<div class="tudou">
<!-- <div class="mask"></div> -->
<img src="images/tudou.jpg" alt="">
</div>
</body>
1.3.3 清除浮动
案例演示：
<style>
.box .one {
float: left;
height: 40px;
background: pink;
}
/* 1.给父元素添加overflow：hidden */
/* .box {
overflow: hidden;
} */
/*2. 额外标签法 且额外的标签不能浮动 */
/* .box .cl {
clear: both;
} */
/* 3.伪元素清除浮动 */
/* .box:after {
伪元素必须写的属性
content: "";
插入的元素必须是块级
display: block;
不要看见这个元素
height: 0;
核心代码清除浮动
clear: both;
不要看见这个元素
visibility: hidden;
} */
/* 4.双伪元素清除浮动 */
.box::before,
.box::after {
content: '';
/* 转换为块级元素并且一行显示 */
display: table;
}
.box::after {
clear: both;
}
</style>
<body>
<div class="box">
<div class="one">第一个</div>
<div class="one">第二个</div>
<div class="cl"></div>
</div>
<p>注意： 要求这个新的空标签必须是块级元素。</p>
</body>
2.盒子模型
CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，
这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况：
- box-sizing: content-box 盒子大小为 width + padding + border （以前默认的）
- box-sizing: border-box 盒子大小为 width
如果盒子模型我们改为了box-sizing: border-box ， 那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）
案例演示：
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/* border会扩大盒子 */
border: 10px solid red;
/* padding也会对盒子大小有影响 */
padding: 20px;
/* 但设置了box-sizing的话设置边框和内边距就不会超过宽度 */
box-sizing: border-box;
}
</style>
<body>
<div></div>
</body>
3. 其他特性
模糊函数
CSS3滤镜filter:filter CSS属性将模糊或颜色偏移等图形效果应用于元素。
CSS3 calc 函数:
calc() 此CSS函数让你在声明CSS属性值时执行一些计算。
CSS3 过渡（重点）
过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或
JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画： 是从一个状态 渐渐的过渡到另外一个状态
可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本） 但是不会影响
页面布局。经常和 :hover 一起 搭配使用。
案例演示：
<style>
div {
width: 300px;
height: 200px;
}
img {
width: 100%;
}
/* 设置图片模糊 */
div:hover img {
filter: blur(5px);
}
.box {
width: 200px;
height: 40px;
background-color: pink;
}
/* 进行一些计算，产生动态效果 */
.box:hover {
width: calc(100px + 200px);
}
.box1 {
width: 200px;
height: 40px;
margin-top: 20px;
background-color: pink;
/* 设置过渡， */
transition: all 0.5s ease 1s;
}
/* 经常和hover搭配使用 */
.box1:hover {
width: 100%;
}
</style>
</head>
<body>
<div>
<img src="images/tudou.jpg" alt="">
</div>
<div class="box"></div>
<div class="box1"></div>
</body>
总结
提示：这里对文章进行总结：
以上就是今天的内容，简单的介绍了HTML5和CSS3新增的内容，让我们的网页更加优美。
634
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
