HTML5新特性CSS3新特性

Posted 2021-06-10 YuLong~W

文章目录

• HTML5新特性
• • 新增语义化标签
  • 新增多媒体标签
  • • 视频标签
    • 音频标签
    • 多媒体标签总结
  • 新增input类型
  • 新增表单属性
• CSS3新特性
• • 属性选择器
  • 结构伪类选择器
  • 伪元素选择器
  • 盒子模型
  • calc函数

html5新特性

HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等
这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性

新增语义化标签

• <header>：头部标签
• <nav>：导航标签
• <article>：内容标签
• <section>：定义文档某个区域
• <aside>：侧边栏标签
• <footer>：尾部标签
  
  注意：
• 语义化标准主要是针对搜索引擎的
• 以上新标签页面中可以使用多次
• 在 IE9 中，需要把这些元素转换为块级元素

新增多媒体标签

在页面中嵌入音频和视频，而不再去使用 flash 和其他浏览器插件

视频标签

视频格式：.mp4 .ogg .webm
视频标签：<video>

<video src="视频文件名" controls="controls"></video>

controls：显示播放控制按钮

音频标签

音频格式：.mp3 .ogg .wav .avi
音频标签：<audio>

<audio src="" controls="controls"></audio>

兼容性问题：

source：指定多个备用音频、视频文件

<audio controls="controls">
	<source src="文件全路径名" type="文件类型">
	……
</audio>

多媒体标签总结

• 音频标签和视频标签使用方式基本一致
• 浏览器支持情况不同
• 谷歌浏览器把音频和视频自动播放禁止了
• 可以给视频标签添加 muted属性来静音播放视频，音频不可以（可以通过javascript解决）
• 视频标签是重点，经常设置自动播放，不使用 controls控件，循环和设置大小属性

新增input类型

属性值	说明
type=“email”	必须为Email类型
type=“url”	必须为url类型
type=“date”	必须为日期类型
type=“time”	必须为时间类型
type=“month”	必须为月类型
type=“week”	必须为周类型
type=“number”	必须为数字类型
type=“tel”	手机号码
type=“search”	搜索框
type=“color”	颜色选择表单

新增表单属性

属性	值	说明
required	required	表示其内容不能为空，必填
placeholder	提示文本	提示信息，存在默认值不显示
autofocus	autofocus	自动聚焦属性，页面加载完成后自动聚焦指定表单
autocomplete	autocomplete	off/on
multiple	multiple	可多选文件提交

可以通过以下设置方式修改placeholder里面的字体颜色：

input::placeholder {
 	color: red;
}

CSS3新特性

新增的CSS3特性有兼容性问题，ie9+才支持
移动端支持优于 PC 端。新增选择器和盒子模型以及其他特性

属性选择器

根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器

选择符	说明
E[att]	选择具有att属性的E元素
E[att=“value”] (重点)	选择具有att属性且值为value的E元素
E[att^=“value”]	选择具有att属性且值以value开头的E元素
E[att$=“value”]	选择具有att属性且值以value结尾的E元素
E[att*=“value”]	选择具有att属性且值含有value的E元素

注意：类选择器、属性选择器、伪类选择器，权重为 10

input[type=text]{  //权重为1+10=11
	color：red;
} 

结构伪类选择器

主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素

选择符	说明
E : first-child{ }	第一个子元素 E
E : last-child{ }	最后一个子元素E
E：nth-child(n){ }	第n个子元素 E
E：nth-last-child(n){ }	倒数第n个子元素E
E：first-of-type	指定类型E的第一个
E：last-of-type	指定类型E的最后一个
E：nth-of-type(n)	指定类型E的第n个
E：empty{ }	匹配没有任何子元素（包括next节点） 内容为空的元素

nth-child(n)：

• n可以是数字，也可以是关键字和公式，从0计算，但是第 0 个元素或者超出了元素的个数会被忽略，
• n是数字，就是选择第 n 个子元素， 里面数字从1开始
• n是关键字：even 偶数，odd 奇数
• n是公式：2n、2n+1、5n、n+5、-n+5

区别：

1. nth-child 对父元素里面所有子元素排序选择（序号是固定的） 先找到第n个子元素，然后看看是否和E匹配 （常用于无序列表，有li元素）
2. nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个子元素
3. 总结：nth-child 先找子元素，再看是否匹配E nth-of-type 先匹配E，再根据E找子元素

注意：类选择器、属性选择器、伪类选择器，权重为 10

伪元素选择器

利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构

选择符	说明
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

• before 和 after 创建一个元素，但是属于行内元素 ，可以使用display属性改变
• 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
• 语法：element::before {}
• before 和 after 必须有 content 属性
• before在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
• 伪元素选择器和标签选择器一样，权重为 1

盒子模型

CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box

• box-sizing: content-box 盒子大小为 width + padding + border （默认的）
• box-sizing: border-box 盒子大小为 width （padding和border就不会撑大盒子）

calc函数

calc() 此CSS函数使得在声明CSS属性值时执行一些计算

width: calc(100% - 80px);
//确保子元素始终与父元素有80px的距离

括号里面可以使用 + - * / 来进行计算