「学习笔记」HTML5、CSS3提高导读
|前言
仅供学习使用💪💪
1. HTML5的新特性
「1.1 HTML5新增的语义化标签(部分)」
- < header > : 定义了文档的头部区域.
- < nav > : 定义导航链接的部分。
- < article > : 定义页面独立的内容区域。
- < section >: 定义文档中的节(section、区段)。
- < aside > : 定义页面的侧边栏内容。
- < footer > : 定义 section 或 document 的页脚。
注 意 : \color{red}{注意:} 注意:
- 这种语义化标准主要针对搜索引擎的
- 这些新标签页面中可以使用多次
- 在IE9中,需要把这些元素转换为块级元素
- 移动端更喜欢这些标签
- HTML5中还增加了很多其他标签,详细请见菜鸟教程HTML5
「1.2 HTML5新增的多媒体标签」
- < audio > :定义音频内容
- < video > : 定义视频(video 或者 movie)
「1. 视频(viedo)」
目前,< video > 元素支持三种视频格式:MP4、WebM、Ogg,尽量使用MP4文件。
浏览器 | MP4 | WebM | Ogg |
---|---|---|---|
Internet Explorer | YES | NO | NO |
Chrome | YES | YES | YES |
Firefox | YES 从 Firefox 21 版本开始 Linux 系统从 Firefox 30 开始 |
YES | YES |
Safari | YES | NO | NO |
Opera | YES 从 Opera 25 版本开始 |
YES | YES |
-
语 法 : \color{1A6C12}{语法:} 语法:
<viedo src = "文件地址" controls = "controls"></viedo>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
可选属性:
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
muted | muted | 如果出现该属性,视频的音频输出为静音。 |
src | URL | 要播放的视频的 URL。 |
poster | URL | 定视频正在下载时显示的图像,直到用户点击播放按钮。 |
width | pixels | 设置视频播放器的宽度。 |
height | pixels | 设置视频播放器的高度。 |
preload | auto(预先加载视频) none(不应加载视频) |
如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。 |
「2. 音频(audio)」
标签定义声音,比如音乐或其他音频流。
目前, 元素支持的3种文件格式:MP3、Wav、Ogg。
浏览器 | MP3 | Wav | Ogg |
---|---|---|---|
Internet Explorer | YES | NO | NO |
Chrome | YES | YES | YES |
Firefox | YES | YES | YES |
Safari | YES | YES | NO |
Opera | YES | YES | YES |
-
语 法 : \color{1A6C12}{语法:} 语法