前端项目开发-21_额外知识补充.pdf

额外知识补充（一）

王红元coderwhy

目录

1HTML5新增元素

content

2Video、Audio元素

3input、全局属性data-*

4white-space/text-overflow

5理解浏览器前缀

6CSS常见的函数扩展

7深入理解BFC

coderwhyHTML5语义化元素

◼在HMTL5之前，我们的网站分布层级通常包括哪些部分呢？

header、nav、main、footer

◼但是这样做有一个弊端：

我们往往过多的使用div,通过id或class来区分元素；

对于浏览器来说这些元素不够语义化；

对于搜索引擎来说,不利于SEO的优化；

◼HTML5新增了语义化的元素：

header：头部元素

nav：导航元素

section：定义文档某个区域的元素

article：内容元素

aside：侧边栏元素

footer：尾部元素

coderwhyHTML5其他新增元素

◼Web端事实上一直希望可以更好的嵌入音频和视频,特别是21世纪以来,用户带宽的不断提高,浏览器因为和视频变得非常容易.

在HTML5之前是通过flash或者其他插件实现的,但是会有很多问题;

比如无法很好的支持HTML/CSS特性,兼容性问题等等;

◼HTML5增加了对媒体类型的支持：

音频：audio

视频：video

◼Video和Audio使用方式有两个：

一方面我们可以直接通过元素使用video和autio；

另一方面我们可以通过JavaScript的API对其进行控制；

coderwhyHTML5新增元素-video

◼HTMLvideo元素用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放。

◼video常见的属性:

常见属性值的方式属性作用

srcURL地址视频播放的URL地址

widthpixels(像素)设置video宽度

heightpixels(像素)设置video高度

controlsBoolean类型是否显示控制栏,包括音量，跨帧，暂停/恢复播放。

autoplayBoolean类型是否视频自动播放(某些浏览器需要添加muted,比如Chrome)

mutedBoolean类型是否静音播放

preloadnone/metadata/auto是否需要预加载视频.metadata表示预加载元数据(比如视频

时长等)

posterURL地址一海报帧的URL

coderwhyvideo支持的视频格式

◼