HTML5 CSS新增特性

文章目录

• 一.HTML5
• • 1.新增语义化标签
  • 2.多媒体标签
  • • (1)视频<video>
    • (2)音频<audio>
  • 3.<input>类型
  • 4.表单属性
• 二、CSS
• • 1.选择器
  • • (1)属性选择器
    • (2)结构伪类选择器
    • (3)伪元素选择器(重点)
  • 2.CSS3盒子模型
  • 3.CSS3其他特性(了解)
  • 4. CSS3过渡(重点)

一.HTML5

以下新特性都有兼容性问题，基本是IE9+以上的版本才支持。如果不考虑兼容性问题，可以大量使用（例如：移动端）。

1.新增语义化标签

注意：

2.多媒体标签

(1)视频

常见属性：

注意：
谷歌浏览器设置视频自动播放时需要添加 muted=“muted”。

(2)音频

总结：

3.类型

重点记住：number tel search！

4.表单属性

需要对placeholder修改样式时，可使用伪类选择器：

二、CSS

1.选择器

(1)属性选择器

利用属性选择器就可以对某个或一些元素的某个属性进行样式修改！

1. 
   
2. 重点掌握！
   CSS样式中的“”可以省略。
3. 
   
   选择相同属性值开头或者结尾，或者包含部分相同属性值这三种情况编写代码相似。

注意：类选择器、伪类选择器、属性选择器的权重都为10！

(2)结构伪类选择器

nth-child(n)只需要修改括号中的n值,n值可以是数字，也可以是关键字和公式！
示例：
n值是数字：

n值是关键字：
even 偶数，odd奇数。

n值是公式：
n值只能是n，不能是m等其他的字母！
而且n都是从0开始，依次增加！

前三者和后三者的区别：

E:nth-child(1)–>首先看E中所有元素的第一个元素类型，再反过来确认是否与E相同，相同则选择其中的内容生效，反之无效；

E:nth-of-type(1)–>首先看指定的元素类型，接着看第一个元素。

(3)伪元素选择器(重点)

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML标签。


::before和::after的位置区别：
（::before放在父盒子内容的前边，::after放在父盒子内容的后边）
伪元素使用场景

• 伪元素字体图标

• 视频点击播放效果
  书写规则：

• 清除浮动
  
  
  

2.CSS3盒子模型

学到此时，html文件中的通配符选择器可以写为一下格式：

3.CSS3其他特性(了解)

• 滤镜filter
  
• calc函数

4. CSS3过渡(重点)

两个或多个属性需要甜蜜加过渡时用逗号隔开。
狭义HTML5

广义HTML5