HTML5与CSS3新特性详解-CSDN博客

这篇学习笔记详述了HTML5和CSS3的新特性。HTML5中新增了语义化标签，如<header>, <nav>, <article>等，以及多媒体标签<audio>和<video>。CSS3带来了新的选择器，如属性选择器、结构伪类选择器和伪元素选择器，以及滤镜、过渡、2D和3D转换等特性。过渡和动画效果为元素变换提供了更多可能性，而CSS3的3D转换则引入了透视和自定义轴旋转的概念。" 119756069,8078273,XSS修炼手册：独孤九剑详解,"['Web安全', '前端开发', 'JavaScript', 'HTML']

「学习笔记」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”，则忽略该属性。