1. HTML5的新特性
1.1 HTML5新增的语义化标签
●< header> : 头部标签
●< nav> :导航标签
●< article> :内容标签
●< section> : 定义文档某个区域
●< aside> :侧边栏标签
●< footer> :尾部标签
注意:
●这种语义化标准 主要是针对搜索引擎的
●这些新标签页面中可以使用多次
●在IE9中， 需要把这些元素转换为块级元素
● 其实，我们移动端更喜欢使用这些标签
●HTML5还增加了很多其他标签,我们后面再慢慢学
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5新增语义化标签</title>
<style>
header,
nav {
width: 800px;
height: 120px;
background-color: pink;
border-radius: 15px;
margin: 15px auto;
}
section {
width: 500px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<header>头部标签</header>
<nav>导航栏标签</nav>
<section>某个区域</section>
</body>
</html>
1.2 HTML5新增的多媒体标签
新增的多媒体标签主要包含两个:
1.音频: < audio>
2.视频: < video>
使用它们可以很方便的在页面中嵌入音频和视频,而不再去使用flash和其他浏览器插件。
HTML5在不使用插件的情况下,也可以原生的支持视频格式文件的播放,当然,支持的格式是有限的。
1.视频< video>
尽量使用MP4
语法
<video src="文件地址" controls=" controls"></video>
<video controls=" controls" width="300">
<source src= "move. ogg" type= "video/ogg" >
<source src= "move . mp4" type= "video/mp4" >
您的浏览器暂不支持<video>标签播放视频
</video>
常见属性
HTML5在不使用插件的情况下,也可以原生的支持音频格式文件的播放,当然,支持的格式是有限的。
2.音频
当前< audio>元素支持三种音频格式:
语法
< audio src="文件地址" controls=" cont rols "></ audio>
<audio controls="controls" >
<source src= "happy .mp3" type=" audio/ mpeg" >
<source src= "happy . ogg" type=" audio/ogg" >
您的浏览器暂不支持<audio>标签。
</audio>
常见属性
●谷歌浏览器把音频和视频自动播放禁止了
3.多媒体标签总结
●音频标签和视频标签使用方式基本一致
●浏览器支持情况不同
●谷歌浏览器把音频和视频自动播放禁止了
●我们可以给视频标签添加muted属性来静音播放视频,音频不可以(可以通过JavaScript解决)
●视频标签是重点 ,我们经常设置自动幡放,不使用controls控件,循环和设置大小属性
1.3 HTML5新增的input类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5新增input表单</title>
</head>
<body>
<!-- 我们验证的时候必须添加form表单域 -->
<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>
</body>
</html>
●重点记住: number tel search这三个
1.4 HTML5新增的表单属性
可以通过以下设置方式修改placeholder里面的字体颜色:
input::placeholder {
color: pink;
}
2. CSS3的新特性
2.1 CSS3的现状
● 新增的CSS3特性有兼容性问题, ie9+才支持
● 移动端支持优于PC端不断改进中
● 应用相对广泛
● 现阶段主要学习 :新增选择器和盒子模型以及其他特性
CSS3新增选择器
CSS3给我们新增了选择器,可以更加便捷,更加自由的选择目标元素。
- 属性选择器
- 结构伪类选择器
- 伪元素选择器
2.2属性选择器
属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。
注意:类选择器、属性选择器、伪类选择器,权重为10。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3新增属性选择器</title>
<style>
/* 必须是input，但是同时具有value这个属性，选择这个元素[] */
input[value] {
color: pink;
}
/* 只选择 type=text 文本框的 input 选取出来 */
input[type=text] {
color: pink;
}
/* 选择首先是div，然后具有class属性，并且属性值必须是 icon 开头的这些元素 */
div[class^=icon] {
color: pink;
}
/* 选择首先是section, 然后具有class属性，并且属性值必须是以 data结尾的这些元素 */
section[class$=data] {
color: plum;
}
div[class*=y] {
color: powderblue;
}
/* 类选择器和属性选择器、伪类选择器 权重都是10 */
</style>
</head>
<body>
<!-- 1.利用属性选择器就可以不用借助于类或者id选择器 -->
<input type="text" value="请输入用户名">
<input type="text">
<!-- 2.属性选择器还可以选择属性=值的某些操作 重点务必掌握的-->
<input type="text" name="" id="">
<input type="password" name="" id="">
<!-- 3.属性选择器还可以选择属性值开头的某些元素 -->
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>我是打酱油的</div>
<!-- 4.属性选择器可以选择属性值结尾的某些元素 -->
<section class= "icon1-data" >我是安琪拉</section>
<section class= "icon2-data" >我是哥斯拉</section>
<section class="icon3-ico">哪我是谁</section>
<!-- 5. 属性选择器可以选择含有属性值中一部分的元素-->
<div class="ygc">傻子</div>
<div class="ppy">笨蛋</div>
<div class="cjh">可爱</div>
</body>
</html>
2.3结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素
nth-child(n)选择某个父元素的一个或多个特定的子元素
●n可以是数字,关键字和公式
●n如果是数字,就是选择第n个子元素，里面数字从1开始…
●n可以是关键字:even偶数,odd奇数
●n可以是公式:常见的公式如下(如果n是公式,则从开始计算，但是第0个元素或者超出了元素的个数会被忽略)
区别:
- nth-child 对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子.然后看看是否和E匹配
- nth- of-type对父元索里面指定子元索进行排序选择。先去匹配E , 然后再根据E找第n个孩子
小结
●结构伪类选择器一般用于选择父级里面的第几个孩子
●nth-child对父元索里面所有孩子排序选择(序号是固定的)先找到第n个孩子 ,然后看看是否和E匹配
●nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E , 然后再根据6找第n个孩子
●关于nth-child (n)我们要知道n是从0开始计算的,要记住常用的公式
●如果是无序列表,我们肯定用nth-child更多
●类选择器、属性选择器、伪类选择器,权重为10。
nth-child()——1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3新增结构伪类选择器</title>
<style>
/* 1.选择ul里面的第一个孩子 小li */
ul li:first-child {
background-color: plum;
}
/* 2.选择ul里面的最后一个孩子 小li */
ul li:last-child {
background-color: plum;
}
/* 3.选择ul里面的第二个孩子 小li */
ul li:nth-child(2) {
background-color: powderblue;
}
ul li:nth-child(6) {
background-color: pink;
}
</style>
</head>
<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>
</body>
</html>
nth-child()——2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3新增结构伪类选择器</title>
<style>
/* 1.把所有的偶数 even 的孩子选出来 */
ul li:nth-child(even) {
background-color: #ccc;
}
/* 2.把所有的奇数 odd 的孩子选出来 */
ul li:nth-child(odd) {
background-color: gray;
}
/* 3.nth-child(n) 从0开始，每次加1，这里面必须是n，不能是其他的字母. 选择了所有的孩子*/
/* ol li:nth-child(n) {
background-color: pink;
} */
/* 4.nth-child(2n) 从0开始，每次加1，选择了偶数的孩子*/
/* ol li:nth-child(2n) {
background-color: pink;
} */
/* ol li:nth-child(n+5) {
background-color: paleturquoise;
} */
ol li:nth-child(-n+5) {
background-color: palegreen;
}
</style>
</head>
<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>
<ol>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ol>
</body>
</html>
CSS3新增nth-of-type选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3新增nth-of-type选择器</title>
<style>
ul li:first-of-type {
background-color: plum;
}
ul li:last-of-type {
background-color: pink;
}
ul li:nth-of-type(5) {
background-color: palegoldenrod;
}
/* :nth-child() 会把 所有 的盒子都排列序号 */
/* 执行的时候先看 :nth-child(1)，之后回去看 前面的div */
section div:nth-child(1) {
background-color: gold;
}
/* :nth-of-type() 会把 指定 的盒子都排列序号 */
/* 执行的时候先看 :nth-child(1)，之后回去看 前面的div */
section div:nth-of-type(1) {
background-color: cornflowerblue;
}
</style>
</head>
<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>
<!-- 区别 -->
<section>
<p>光头强</p>
<div>熊大</div>
<div>熊二</div>
</section>
</body>
</html>
2.4伪元素选择器(重点)
伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。
注意:
●before和after创建一个元素 ,但是属于行内元素
●新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
●语法: element:before 0
●before 和after必须有content 属性
●before 在父元素内容的前面创建元素, after在父元素内容的后面插入元素
●伪元素选择器和标签选择器一样,权重为1
2.5 CSS3盒子模型
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宽度)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3盒子模型</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
box-sizing: content-box;
}
p {
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
/* CSS3盒子模型 盒子最终的大小就是width的大小*/
box-sizing: border-box;
}
</style>
</head>
<body>
<div>小猪乔治</div>
<p>小猪佩奇</p>
</body>
</html>
2.6 CSS3其他特性(了解)
CSS3滤镜filter:
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。
filter:函数(); 例如: filter: blur(5px); blur模糊处理 数值越大越模糊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片模糊处理</title>
<style>
img {
/* blur是一个函数，小括号里面数值越大，图片越模糊，注意数值要加px单位 */
filter: blur(15px);
}
img:hover {
filter: blur(0);
}
</style>
</head>
<body>
<img src="images/zhongli.jpg" alt="">
</body>
</html>
CSS3 calc函数:
calc()此CSS函数让你在声明CSS属性值时执行-一些计算。
width: calc(100% 80px);
括号里面可以使用+ -* /来进行计算。
2.7CSS3过渡(重点)
过渡( transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或
JavaScript的情况下,当元索从一种样式变换为另一种样式时为元索添加效果。
过渡动画:是从一个状态渐渐的过渡到另外一个状态
可以让我们页面更好看,更动感十足,虽然低版本浏览器不支持( ie9以下版本)但是不会影响
页面布局。
我们现在经常和:hover -起搭配使用。
transition:要过渡的属性花费时间运动曲线何时开始;
1.**属性:**想要变化的Css属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都
变化过渡，写一个all 就可以。
2.**花费时间:**单位是秒(必须写单位)比如0.5s
3.**运动曲线:**默认是ease (可以省略)
4.何时开始: 单位是秒(必须写单位)可以设置延迟触发时间默认是0s ( 可以省略)
记住过渡的使用口诀:谁做过渡给谁加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3过渡效果（重点）</title>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition: 变化的属性 花费时间 运动曲线 何时开始; */
/* transition: width .5s, height .5s ; */
/* 如果想要多个属性都变化，属性写all */
/* 谁做过度给谁加 */
transition: all .5s;
}
div:hover {
width: 400px;
height: 200px;
background-color: plum;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
扫一扫
143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
