H5C3基础

一、HTML5 的新特性
1.1 HTML5 新增的语义化标签
1.2 HTML5 新增的多媒体标签
① 视频< video>
② 音频< audio>

1.3 HTML5 新增的 input 类型

1.4 HTML5 新增的表单属性

二、CSS3 的新特性

2.1 圆角边框 border-radius（重点）
2.2 盒子阴影 box-shadow（重点）
2.3 文字阴影 text-shadow（了解）
2.4 CSS3 新增选择器
① 属性选择器
② 结构伪类选择器
:first-child
:last-child
:nth-child(n)

③ 伪元素选择器（重点）

2.5 CSS3 盒子模型

2.6 图片变模糊

2.7 CSS3 过渡 transition（重点）

进度条案例

2.8 CSS3 2D转换 transform

① 移动：translate
水平和垂直居中方法：

② 旋转：rotate

③ 缩放：scale

④ 2D转换综合写法及顺序问题

⑤ 2D转换总结

2.9 CSS3 动画 animation

① 动画的基本使用
② 动画的常见属性
③ 速度曲线细节
④ 动画简写属性

2.10 CSS3 3D转换

① 3D位移：translate3d（x,y,z）
② 3D旋转：rotate3d（x,y,z）
③ 透视：perspective
④ 3D呈现 transform-style

三、浏览器私有前缀

四、广义的HTML5

一、HTML5 的新特性

1.1 HTML5 新增的语义化标签

1.2 HTML5 新增的多媒体标签

① 视频< video>

<!--   1.MP4格式2.autoplay=\"autoplay\"视频就绪自动播放controls=\"content\"向用户显示播放控件width height 设置宽高loop=\"loop\"循环播放poster=\"加载等待的画面图片\"muted=\"muted\"静音播放 --><video src=\"media/mi.mp4\" autoplay=\"autoplay\" muted=\"muted\" controls=\"controls\" loop=\"loop\" poster=\"images/下载.jpg\"></video>

考虑兼容性问题使用：

② 音频< audio>

1.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=\"month\"></li><li>周：<input type=\"week\"></li><li>手机号码：<input type=\"tel\"></li><li>搜索：<input type=\"search\"></li><li>颜色：<input type=\"color\"></li><li><input type=\"submit\" value=\"提交\"></li></ul></form>

结果演示：

1.4 HTML5 新增的表单属性

二、CSS3 的新特性

2.1 圆角边框 border-radius（重点）

2.2 盒子阴影 box-shadow（重点）

h-shadow: 越大越往右；
v-shadow: 越大越往下；
blur: 越大越模糊;
spread: 越大阴影越大。

2.3 文字阴影 text-shadow（了解）

2.4 CSS3 新增选择器

① 属性选择器

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>新增选择器</title><style>input[value] {color: pink;}input[type=text] {color: red;}/* 选择div中具有class的属性值以icon开头的元素 */div[class^=icon] {color: seagreen;}/* 选择div中具有class的属性值以data结尾的元素 */section[class$=data] {color: blue;}</style></head><body><!-- 1.利用属性选择器就可以不用借助于类或者id选择器 --><!-- <input type=\"text\" value=\"请输入用户名\"><input type=\"text\"> --><!-- 2.属性选择器可以选择属性=值的某些属性 --><input type=\"text\"><input type=\"password\"><!-- 3.属性选择器可以选择属性值开头的某些元素 --><div class=\"icon1\">小图标1</div><div class=\"icon2\">小图标2</div><div class=\"icon3\">小图标3</div><div class=\"icon4\">小图标4</div><div>我是打酱油的</div><!-- 3.属性选择器可以选择属性值开结尾的某些元素 --><section class=\"icon1-data\">五</section><section class=\"icon2-data\">四</section><section class=\"icon3-data\">三</section></body></html>

② 结构伪类选择器

:first-child:last-child

<head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>结构伪类选择器</title><style>/* 1.选择ul里的第一个小li */ul li:first-child {background-color: pink;}/* 2.选择ul里的最后一个小li */ul li:last-child {background-color: pink;}/* 3.选择某个元素一个或多个的子元素 */ul li:nth-child(2) {background-color: purple;}</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>

:nth-child(n)

<head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>/* 1.选择偶数的孩子 */ul li:nth-child(even) {background-color: #ccc;}/* 2.选择奇数的孩子 */ul li:nth-child(odd) {background-color: green;}/* 3.nth-child(n):选择所有的孩子 ，只能写n*/ol li:nth-child(n) {background-color: pink;}/* 4.nth-child(2n): 选择偶数的孩子*/ol li:nth-child(2n) {background-color: blue;}/* 4.nth-child(2n+1): 选择奇数的孩子*/ol li:nth-child(2n+1) {background-color: purple;}/* 5.nth-child(n+3): 选择从第三个孩子开始*/ol li:nth-child(n+3) {background-color: skyblue;}/* 6.nth-child(-n+3): 选择前三个孩子*/ol li:nth-child(-n+3) {background-color: orange;}</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>

总结：