HTML5和CSS3提高
HTML5的新特性
新特性 有兼容性问题,基本上都是IE9+以上版本的浏览器才支持。
div对于搜索引擎来说是没有语义的
HTML5新增的语义化标签
- <header>:头部标签
- <nav>:导航标签
- <article>: 内容标签
- <section>:定义文档某个区域 相当于大号的div
- <aside>: 侧边栏标签
- <footer>:尾部标签
注意: 1. 这种语义化标准主要是针对搜索引擎的;
- 这些新标签页面中可以使用多次;
- 在IE9中,需要把这些元素转换为块级元素;
- 其中,我们移动端更喜欢使用这些标签;
- HTML5还增加了很多其他标签,我们后面再慢慢学。
HTML5新增的多媒体标签
包含两个:1. <auto>音频
- <video>视频,<video>元素支持三种视频格式:MP4,Webm和Ogg。尽量使用mp4格式。
<video src=”文件地址” controls=”controls”></video>
<video width:”320” height=”240” controls>
<source src=”movie.mp4” type=”video/mp4”>
<source src=”movie.ogg” type=”video.ogg”>
您的浏览器不支持video标签
</video>
怎样下载视频: 在对应的网页中点击右键,选择“检查”,点击该视频找到对应的video中的src,右键,选择open in new tab, 打开视频后右键另存为。
<video src=”media/mi.mp4” autoplay=”autoplay” muted=”muted></video>谷歌浏览器可以自动播放。
.video{
width: 100%;
}
<!-- autoplay表示自动播放,muted表示允许谷歌自动播放 controls表示显示控件,比如播放按钮等
loop表示自动循环播放 poster表示等待加载时显示的图片 -->
3. 音频<audio>
支持三种音频格式
<audio src=”文件地址” controls=”controls”></a
<audio controls=”controls”>
<source src=”happy.mp3” type=”audio/mpeg”>
<source src=”happy.oog” type=”autio/ogg”>
您的浏览器暂不支持<autio>标签
</audio>
4. 新增搜索表单
<input type=”search”>
5. HTML5新增的表单属性
属性 -->
<form action="">
ltCSS3的新特性
有兼容性问题ie9才支持
- 新增选择器
- 属性选择器 (也有权重,权重值为10)
Input[value]{ color: pink; }
- 结构伪类选择器
主要根据文档结构来选择器元素, 常用于根据父级选择器里面的子元素。
nth-child(n) 选择某个父元素的一个或多个特定的子元素。
n可以是数字,关键字和公式
n如果是数字就选择第n个子元素,里面数字从1开始...
n可以是关键字:even偶数,odd奇数
n可以是公式
隔行变色
/* nth-child与nth-of-type的区别
- nth-child对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子,然后看看是否和E匹配。
- nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E,然后再根据E找第n个孩子。
- 无序列表nth-child更多。
/* nth-child与nth-of-type的区别 */
1.1. 伪元素选择器(当在盒子里插入一些装饰的小标签时使用)
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
Content: ‘’; 是必填内容
注意:
before和after创建一个元素,但是属于行内元素
新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
语法:element::before{}
before和after必须有content属性
before在父元素内容的前面创建元素,after在父元素内容的后面插入
伪元素选择器的应用:
/* 伪元素选择器使用场景2: 仿土豆效果 即一个图片有遮
后面两种伪元素 清除浮动算是第一种额外标签法的一个升级和优化
- 图片模糊处理
CSS3滤镜filter filter CSS属性将模糊或颜色偏移等图形效果应用于元素。blur是函数。
filter:函数(); 例如:filter:blur(5px); blur模糊处理 数值越大越模糊。
im
/* blur是函数,数值越大越模糊 */
filte
1. 计算盒子宽度width: calc函数
calc()此CSS函数让你在声明CSS属性值时执行一些计算
width: calc(100% -80px);
括号里可以使用+-*/
/* 计算盒子宽度width: calc函数 */
4. CSS3过渡(重点) 谁做过渡给谁加
过渡动画:是从一个状态渐渐的过渡到另外一个状态,经常和:hover一起搭配使用
transition:要过渡的属性 花费时间运动曲线 何时开始;
- 属性:想要变化的css属性 宽度高度 背景颜色 内外边距都可以。如果想要所有属性都变化过渡,写一个all就可以了。
- 花费时间:单位是秒(必须写单位)比如0.5s
- 运动曲线:默认是ease(可以省略)
- 何时开始:单位是秒(必须写单位)可以设置延迟触发时间 默认是0s(可以省略)
/* css过渡 */
比如进度条就利用过渡 css过渡练习-进度条 */
.b
- H5介绍
广义的html5是html5本身+css3+javascript
ar {
width: 150px;
height: 30px;
border: 1px solid red;
border-radius: 7px;
padding: 1px;
}
.bar_in {
width: 50%;
height: 100%;
background-color: red;
transition: all .7s;
}
.bar:hover .bar_in {
width: 100%;
}
<!-- css过渡练习-进度条 -->
<div class="bar">
<div class="bar_in"></div>
罩层*/
.tudou::before{
content: '';
/* 隐藏遮罩层 */
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.4) url(image...) no-repeat center;
}
.tudou:hover::before{
display: block;
}
/* 伪元素选择器使用场景3: 清除浮动 */
.clearfix:before,.clearfix:after{
content: '';
display: table;
}
.clearfix:after{
clear: both;
}
<!-- 伪元素选择器使用场景1:伪元素字体图标 -->
<div></div>
<!-- 伪元素选择器使用场景2: 仿土豆效果 即一个图片有遮罩层 -->
<div class="tudou">
<img src="" alt="">
</div>
<!-- 伪元素选择器使用场景3: 清除浮动 -->