关卡一：H5C3进阶

【学习前提】

完成第一阶段前端开发基础的学习。

【阶段说明】

         H5是标准通用标记语言下的一个应用超文本标记语言的第五次重大修改。作为新的HTML语言，具有一些新的元素，属性和行为。

1. 掌握h5新增的语义化标签、多媒体标签、input表单、表单属性；
2. 掌握CSS3新增属性，选择器，转换，移动，旋转及缩放属性；
3. 掌握CSS3的透视原理。

【学习时长】

                   3.5天

【学习技巧】

在学习H5C3的新标签及新特性的时候，重点理解语义化标签的使用。懂得灵活运动C3的新属性进行网页布局。同样，在学习过程中，不需要死记硬背，掌握常用的标签及属性即可。不常用标签和属性用时，可及时查阅文档。

（详见：关卡五：HTML5+CSS3）

一、H5新增

1、HTML5 的概念与定义

• 定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的HTML。

• 两个概念：

  1. 是一个新版本的 HTML 语言，定义了新的标签、特性和属性；

  2. 拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5。

2、HTML5拓展的内容（具体内容，有意者自行查找）

1. 语义化标签：
   header --- 头部标签
   nav --- 导航标签
   article --- 内容标签
   section --- 块级标签
   aside --- 侧边栏标签
   footer --- 尾部标签

2. 本地存储

3. 兼容特性

4. 2D、3D转换

5. 动画、过渡

6. CSS3 特性

7. 性能与集成

3、HTML5 的现状

绝大多数的新属性都已经被浏览器所支持，最新版本的浏览器已经开始陆续支持最新的特性，

总的来说：HTML5 已经是大势所趋。

二、CSS3新增

1、属性选择器：根据标签中的属性来选择元素，例子：

• input[type=text]             选择具有 type = text 属性的 input 元素
• header[class='box']       选择具有 class 属性且属性值是 box 的 header 元素
• div[class^=icon]            选择具有 class 属性且属性值必须是 icon 开头的 div 元素
• section[class$=data]    选择具有 class 属性且属性值必须是 data 结尾的 section 元素
• div[class*='demo']        选择具有 class 属性且属性值中含有 demo 的 div 元素

2、结构伪类选择器
    一般用于选择父级里面的第几个孩子

• E:nth-child(n) 匹配父元素中的第n个子元素
  其中 n 是从 0 开始计算的
              2n：偶数    2n+1：奇数
              3n：3  6  9 ...    
              n+3：从第3个开始（含第3个）到最后
              -n+3：前3个（含第3个）
• E:first-child 匹配父元素中的第一个子元素
• E:last-child 匹配父元素中的最后一个子元素
• E:first-of-type  指定类型E的第一个
• E:last-of-type  指定类型E的最后一个
• E:nth-of-type(n)  指定类型E的第n个

3、伪元素选择器

注意事项：

• before 和 after 必须有 content 属性

• before 在内容前面，after 在内容后面

• before 和 after 创建的是一个元素，但是属于行内元素

• 创建出来的元素在 Dom 中查找不到，所以称为伪元素

• 伪元素和标签选择器一样，权重为 1

三、CSS3透视的原理

1、CSS3转换 transform
    1.2D转换
        2D 转换是改变标签在二维平面上的位置和形状

• 移动：translate
• 旋转：rotate

            设置元素旋转中心点(transform-origin)

• 缩放：scale（x,y）

            x 与 y 之间使用逗号进行分隔；
           可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子；
           同时使用多个转换，其格式为 transform: translate( ) rotate( ) scale( )；
    2.3D转换
        特点
            近大远小
            物体和面遮挡不可见

• 位移：translate3d(x, y, z)

            x, y, z 对应的值不能省略，不需要填写用 0 进行填充

• 旋转：rotate3d(x, y, z)
• 透视：perspctive

            透视需要写在被视察元素的父盒子上面

• 呈现 transfrom-style

            控制子元素是否开启三维立体环境
            代码写给父级，但是影响的是子盒子

二、透视

知识点：

• 如果想要网页产生 3D 效果需要透视(理解成 3D 物体投影的 2D 平面上)

• 实际上模仿人类的视觉位置，可视为安排一直眼睛去看

• 透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离

• 距离视觉点越近的在电脑平面成像越大，越远成像越小

• 透视的单位是像素