前端技术对html5的新特性学习
html5新元素
语义化元素
<article>：代表页面或应用中的一个独立内容区域，如博客帖子、论坛帖子或用户评论。它通常包含标题（<header>）、内容（段落、图片等）和页脚（<footer>）。<aside>：表示与页面主要内容稍微独立的内容区域，如侧边栏、广告、导航链接组或一组链接到文章其他部分的链接。<footer>：表示其所在元素（如<article>、<section>或<body>）的页脚。它通常包含作者信息、版权信息、链接到隐私政策等。<header>：表示其所在元素（如<body>、<article>或<section>）的页眉。它通常包含标题、导航链接、徽标或搜索框等。<hgroup>（已废弃）：原本用于将多个标题组合成一个标题组，但由于使用上的复杂性和不一致性，HTML5.1 草案中已废弃此元素。现在，建议通过 CSS 样式来组织标题。<main>：表示文档的主要内容区域。每个文档只能有一个<main>元素，并且它不能是<article>、<aside>、<footer>、<header>或<nav>元素的子元素。<nav>：表示导航链接的集合，通常包含一组链接到页面或网站内其他部分的链接。<section>：表示文档中的一个区域（或节），通常包含标题（<h1>-<h6>）和内容（如段落、列表、表格等）。<section>元素用于对文档或应用中的页面区域进行逻辑分组。<figure>和<figcaption>：<figure>元素表示一个独立的单元，如插图、图表、照片、代码示例等，它可以独立于文档的主流内容而存在。<figcaption>元素用于为<figure>元素提供标题或说明。
音频标签
HTML5 的 <audio> 标签用于在网页上嵌入音频内容。这个标签支持多种音频格式，如 MP3、WAV、Ogg 等，具体支持哪些格式取决于浏览器。<audio> 标签提供了一种简单的方式来在网页上播放音频文件，而无需使用额外的插件（如 Flash）。
基本用法
<audio src="audiofile.mp3" controls>
Your browser does not support the audio element.
</audio>
src属性指定音频文件的路径。controls属性是一个布尔属性，表示显示音频控件（如播放/暂停按钮、音量控制等）。如果省略此属性，则音频不会自动显示控件，但可以通过 JavaScript 控制播放。
示例
<audio src="example.mp3" controls>
Your browser does not support the audio element.
</audio>
在这个例子中，如果浏览器支持 <audio> 标签，它将尝试加载并播放 example.mp3 文件。如果浏览器不支持 <audio> 标签，它将显示文本“Your browser does not support the audio element.”。
多种音频源
为了增加兼容性，你可以为 <audio> 标签指定多个 <source> 元素，每个元素都指向一个不同格式的音频文件。浏览器将使用它支持的第一个音频文件。
<audio controls>
<source src="example.mp3" type="audio/mpeg">
<source src="example.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
属性
<audio> 标签支持多个属性，但最常用的包括：
autoplay：如果设置，音频将自动播放。controls：显示默认的音频控件。loop：如果设置，音频将循环播放。muted：如果设置，音频将默认静音。preload：指定页面加载时是否应该加载音频文件，以及加载多少。可能的值包括none、metadata和auto。src：音频文件的 URL。
注意事项
- 并非所有浏览器都支持相同的音频格式。为了最大兼容性，建议提供多种格式的音频文件。
- 自动播放音频（尤其是带有声音的音频）可能会干扰用户体验，因此请谨慎使用
autoplay属性。 - 考虑到可访问性，即使使用了
autoplay和muted属性，也建议提供控件，以便用户可以控制音频的播放。
视频标签
HTML5 的 <video> 标签用于在网页上嵌入视频内容。与 <audio> 标签类似，<video> 标签也支持多种视频格式，如 MP4、WebM、Ogg 等，具体支持哪些格式取决于浏览器。<video> 标签提供了一种简单的方式来在网页上播放视频文件，而无需使用额外的插件（如 Flash）。
基本用法
<video src="movie.mp4" controls>
Your browser does not support the video tag.
</video>
src属性指定视频文件的路径。controls属性是一个布尔属性，表示显示视频控件（如播放/暂停按钮、音量控制、全屏按钮等）。如果省略此属性，则视频不会自动显示控件，但可以通过 JavaScript 控制播放。
示例
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
在这个例子中，<video> 标签包含了两个 <source> 元素，每个元素都指向一个不同格式的视频文件。浏览器将尝试加载并播放它支持的第一个视频文件。如果浏览器不支持 <video> 标签，它将显示文本“Your browser does not support the video tag.”。
属性
<video> 标签支持多个属性，但最常用的包括：
autoplay：如果设置，视频将自动播放。controls：显示默认的视频控件。height：设置视频播放器的高度。loop：如果设置，视频将循环播放。muted：如果设置，视频将默认静音。playsinline（在某些浏览器中）：防止视频全屏播放（特别是在移动设备上）。poster：指定视频封面图像的 URL，该图像将在视频播放前显示。preload：指定页面加载时是否应该加载视频文件，以及加载多少。可能的值包括none、metadata和auto。src：视频文件的 URL。width：设置视频播放器的宽度。
注意事项
- 并非所有浏览器都支持相同的视频格式。为了最大兼容性，建议提供多种格式的视频文件。
- 自动播放视频（尤其是带有声音的视频）可能会干扰用户体验，因此请谨慎使用
autoplay属性，并考虑结合muted属性使用。 - 考虑到可访问性，即使使用了
autoplay和muted属性，也建议提供控件，以便用户可以控制视频的播放。 - 视频文件可能很大，因此请确保您的网站服务器和网络连接能够处理大量视频数据的传输。
