【前端基础】Day 8 H5C3提高

目录
1. HTML5新特性
1.1 新增语义化标签
1.2 新增多媒体标签
1.3 新增input类型
1.4 新增表单属性
2. CSS3的新特性
2.1 新增选择器
2.1.1 属性选择器
2.1.2 结构伪类选择器
2.1.3 伪元素选择器（重点）
2.2 CSS3盒子模型
2.3 CSS3其他特性（了解）
CSS3 过渡（重点）

---

1. HTML5新特性

1.1 新增语义化标签

1.2 新增多媒体标签

IE浏览器除了要设置autoplay="autoplay"，还须要设置muted="muted"才能主动播放；google只需设置autoplay。

1.3 新增input类型

1.4 新增表单属性

2. CSS3的新特性

2.1 新增选择器

2.1.1 属性选择器

2.1.2 结构伪类选择器

2.1.3 伪元素选择器（重点）

1.         div::before {
2.             /* content必须要写 */
3.             content: '我';
4.         }

复制代码

使用场景1：伪元素字体图标 

使用场景2：遮罩层

1.         .tudou::before {
2.             content: '';
3.             /* 隐藏遮罩层 */
4.             display: none;
5.             position: absolute;
6.             top: 0;
7.             left: 0;
8.             width: 100%;
9.             height: 100%;
10.             background: rgba(0, 0, 0, .4) url(arr.png ) no-repeat center;
11.         }
12.         .tudou:hover::before {
13.             display: block;
14.         }

复制代码

使用场景3：伪元素扫除浮动

2.2 CSS3盒子模型

1.         * {
2.             margin: 0;
3.             padding: 0;
4.             box-sizing: border-box;
5.         }

复制代码

2.3 CSS3其他特性（了解）

CSS3 过渡（重点）

狭义的HTML5指的是结构标签本身，CSS3指的是相干样式；

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。