一:HTML5语义化标签
- header:头部标签
- nav:导航标签
- article:内容标签
- section:块级标签
- aside:侧边栏标签
- footer:尾部标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
header,
nav,
article,
section,
aside,
footer {
width: 100%;
height: 40px;
background-color: pink;
margin-top: 10px;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<header>header</header>
<nav>nav</nav>
<article>article</article>
<section>section</section>
<aside>aside</aside>
<footer>footer</footer>
</body>
</html>
二:audio音频标签
- autoplay属性:音频就绪自动播放
- controls属性:向用户显示控件
- loop属性:每当音频结束时重新开始播放
- src属性:音频地址
<audio src="media/snow.mp3" controls="controls" loop="loop" autoplay="autoplay"></audio>
- 注意事项
<!-- 因为不用浏览器支持不同格式,我们采取的解决方案是 我们为这个音频准备多个格式 -->
<audio controls="controls">
<source src="media/snow.mp3" type="audio/mpeg">
<source src="media/snow.ogg" type="audio/ogg">
</audio>
三:多媒体视频标签
- autoplay属性:视频就绪自动播放
- controls属性:向用户显示播放控件
- width属性:设置播放器宽度
- height属性:设置播放器高度
- loop属性:每当视频结束时重新开始播放
- preload属性:规定是否预加载视频
- src属性:视频地址
- poster属性:加载等待的画面图片
- muted属性:静音播放
<video src="media/video.mp4" controls="controls"></video>
- 注意事项
<!-- 谷歌浏览器禁用了自动播放功能,如果想自动播放,需要添加 muted 属性 -->
<video controls="controls" autoplay muted loop poster="./media/pig.jpg">
<source src="./media/video.mp4" type="video/mp4">
<source src="./media/video.ogg" type="video/ogg">
</video>
五:HTML5新增input表单,表单属性