目录
- 1. 新增的语义化标签(header、nav、article、section、aside、footer)
- 2. 多媒体标签
- 2.1 视频标签
- 2.2 音频标签
- 3. 新增input表单，和表单属性
1. 新增的语义化标签(header、nav、article、section、aside、footer)
功能和<div>标签一样，在页面中可以使用多次。主要是针对搜索引擎的。常用标签如下
- <header>：头部标签
- <nav>：导航栏标签
- <article>：内容标签
- <section>：定义文档某个区域
- <aside>：侧边栏标签
- <footer>：尾部标签
在网页布局中使用的位置如下所示
示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>test title</title>
<style>
</style>
</head>
<body>
<header>我是头部标签</header>
<nav>我是导航栏标签</nav>
</body>
</html>
显示效果如下
2. 多媒体标签
2.1 视频标签
<video>标签使用的视频文件尽量使用mp4格式的，兼容性好
常见属性如下
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 视频是否自动播放(谷歌浏览器还需要添加muted属性实现自动化播放) |
| controls | controls | 显示播放控件 |
| width | px像素 | 设置播放画面宽带 |
| height | px像素 | 设置播放画面高度 |
| loop | loop | 是否循环播放 |
| preload | auto(预先加载视频)、none(不预先加载视频) | 是否预先加载视频(使用了autoplay会自动忽略该属性) |
| src | url | 视频url地址 |
| poster | img-url | 视频未加载好时，显示的图片 |
| muted | muted | 静音播放 |
示例如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>test title</title>
<style>
video {
width: 100%;
}
</style>
</head>
<body>
<video src="media/test.mp4" autoplay="autoplay" controls="controls" loop="loop" poster="media/test.png" muted="muted"></video>
</body>
</html>
2.2 音频标签
<audio>标签使用的音频文件尽量使用mp3格式的，兼容性好
常见属性如下
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 音频是否自动播放(谷歌浏览器并不会自动播放，可以使用Javascript进行解决) |
| controls | controls | 显示播放控件 |
| loop | loop | 是否循环播放 |
| src | url | 音频url地址 |
示例如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>test title</title>
<style>
</style>
</head>
<body>
<audio src="media/test.mp3" autoplay="autoplay" controls="controls" loop="loop"></audio>
</body>
</html>
显示效果如下，谷歌浏览器并不会自动播放
3. 新增input表单，和表单属性
新增的input表单，会对用户输入的内容进行一定的限制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>test title</title>
<style>
/*元素的属性选择器*/
input::placeholder {
color: red;
}
</style>
</head>
<body>
<form action="test.php" method="get" name="test_form">
<!--HTML5新增的input表单-->
请选择日期：<input type="date" name="date" value=""/> <br />
请选择月份：<input type="month" name="month" value=""/> <br />
请选择周：<input type="week" name="week" value=""/> <br />
请选择时间：<input type="time" name="time" value=""/> <br />
请输入数字：<input type="number" name="number" value=""/> <br />
请选择一个颜色：<input type="color" name="color" value=""/> <br />
<!--HTML5新增的input表单，和表单属性-->
请输入正确格式的邮箱, 页面打开光标自动定位到这里：<input type="email" name="email" value="" autofocus="autofocus"/> <br />
请输入正确格式的URL, 默认会记录输入过的URL：<input type="url" name="url" value="" autocomplete="on"/> <br />
请输入手机号码, 必填：<input type="tel" name="tel" value="" required="required"/> <br />
请根据提示, 输入要搜索的内容：<input type="search" name="search" value="" placeholder="搜索提示内容"/> <br />
<!--HTML5新增的表单属性-->
请选择文件，可以一个或多个：<input type="file" name="file" value="上传文件" multiple="multiple"/> <br />
<input type="submit" name="submit" value="提交"/> <br />
</form>
</body>
</html>
显示效果如下
