HTML5新标签和特性

HTML5新标签与特性

1.兼容性问题（ie9以上的版本）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8hkif4aQ-1647847660818)(C:\Users\29802\AppData\Roaming\Typora\typora-user-images\image-20220308183103780.png)]

2.文档类型设定

document

HTML：sublime输入html：4s

XHTML：sublime输入html：xt

HTML5:sublime输入html：5 <!DOCTPY html>

3.字符设定

:html与XHTML中建议这样去写 :HTML5标签中建议这样去写

4.常用新标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SyrlZzJC-1647847660822)(C:\Users\29802\AppData\Roaming\Typora\typora-user-images\image-20220308183654492.png)]

datalist 标签定义选项列表。请与input元素配合使用该元素。例：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AyNhGBUj-1647847660823)(C:\Users\29802\AppData\Roaming\Typora\typora-user-images\image-20220308184055553.png)]

fieldset元素可将表单内的相关元素分组，打包 legend搭配使用。例：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cnMpVJjg-1647847660824)(C:\Users\29802\AppData\Roaming\Typora\typora-user-images\image-20220308184219605.png)]

2.新增表单属性

常用新属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NkZKD0qp-1647847660825)(C:\Users\29802\AppData\Roaming\Typora\typora-user-images\image-20220308184602722.png)]

3audio多媒体

HTML5通过标签解决音频播放的问题。

使用相当简单，如下图所示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1zAHiRza-1647847660827)(C:\Users\29802\AppData\Roaming\Typora\typora-user-images\image-20220308185022713.png)]

并且可以添加附加属性：

autoplay自动播放

controls 是否显不默认播放课件

loop 循环播放

由于版权问题，不同浏览器可支持播放的格式是不一样的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3YRUra26-1647847660828)(C:\Users\29802\AppData\Roaming\Typora\typora-user-images\image-20220308185206964.png)]

2.css新增选择器

结构伪类选择器（css3）

:first-child:选取其父元素的首个子元素的指定选择器

:last-child:选取属于其父元素的最后一个子元素的指定选择器

:nth-child(n)：匹配属于其父元素的第N个子元素，不论元素类型

:nth-last-child(n):选择器匹配属于其元素的第N个子元素的每个元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HvKq7wk6-1647847660829)(C:\Users\29802\AppData\Roaming\Typora\typora-user-images\image-20220308185705564.png)]

属性选择器

选取标签带有某些特殊属性的选择器，我们称为属性选择器，例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BAz5aJEi-1647847660830)(C:\Users\29802\AppData\Roaming\Typora\typora-user-images\image-20220308185756833.png)]

伪元素选择器

1.E::first-letter文本的第一个单词或者字（如中文，日文，韩文等）

2.E::first-line文本第一行；

3.E::selection可改变选中文本的样式；

使用after伪元素清除浮动

:after方式为空元素的升级版，好处是不用单独加标签了

使用方法：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8edq4khp-1647847660831)(C:\Users\29802\AppData\Roaming\Typora\typora-user-images\image-20220308191614569.png)]

优点：符合闭合浮动思想，结构语义化正确

缺点：由于IE6-7不支持:after，使用zoom:1触发hasLayout。

css盒模型

css3中可以通过box-sizing来指定盒模型，即可指定为content-box,border-box，这样我们计算盒子。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v0HFTxB4-1647847660832)(C:\Users\29802\AppData\Roaming\Typora\typora-user-images\image-20220308192042549.png)]

这篇好文章是转载于：学新通技术网