深入理解HTML5与CSS3：新特性与实践-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_64133626/article/details/123711015

【学习前提】

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

【阶段说明】

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

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

【学习时长】

3.5天

【学习技巧】

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

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

一、H5新增

1、HTML5 的概念与定义

定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的HTML。
两个概念：
1. 是一个新版本的 HTML 语言，定义了新的标签、特性和属性；
2. 拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5。

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

语义化标签：
header --- 头部标签
nav --- 导航标签
article --- 内容标签
section --- 块级标签
aside --- 侧边栏标签
footer --- 尾部标签
本地存储
兼容特性
2D、3D转换
动画、过渡
CSS3 特性
性能与集成

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转换
       特点
           近大远小
           物体和面遮挡不可见