html5的新特性
增加了一些新的标签,新的表单,新的表单属性
1.新增的语义化标签
header 头部标签
nav 导航标签
articel 内容标签
section 定义文档某个区域
aside 侧边栏标签
footer 尾部标签
这些语义化标准主要针对搜索引擎的
可以多次使用
再ie9中,需要转换成块级元素
再移动端更喜欢这些标签
2.新增的多媒体标签
2.1视频 video
只支持三种视频格式mp4 webm ogg,尽量使用mp4格式
语法:
<video src="文件地址" controls="controls"></video>
常见属性:
autoplay 自动播放
controls 向用户显示播放控件
loop 是否循环播放 loop="loop"
poster = "***.jpg" 预加载,视频没有播放出来先加载出来图片、
举例:
<video src="media/mi.mp4" muted="muted" controls="controls" poster="../taobao/jjt.jpg"></video>
2.2音频 audio
仅支持三种格式:mp3 wav ogg 尽量使用MP3
语法:
<audio src="文件地址" controles="controles"> </audio>
常见属性:
autoplay="autoplay" 自动播放
controls="controls" 显示播放控件
loop="loop" 结束后自动播放
3.html5 新增的input类型
属性值
type="email" 邮箱
type="url" url
* type="number" 数字
* type="tel" 电话
* type="search" 搜索框
type="color" 选择颜色
4.h5新增的表单属性
required="required" 必填
placehold="提示文本" 表单的提示信息,存在默认值将不显示
autofocus 自动获取焦点
multiple 提交多个文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
header,
nav {
height: 120px;
background-color: pink;
border-radius: 15px;
width: 800px;
margin: 15px auto;
}
section {
width: 500px;
height: 300px;
background-color: skyblue;
}
video {
width: 100%;
}
</style>
</head>
<body>
<header>头部标签</header>
<nav>导航栏标签</nav>
<section>某个区域</section>
<video src="media/mi.mp4" muted="muted" controls poster="../taobao/jjt.jpg"></video>
<audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>
<form action="">
<ul>
<li>邮箱: <input type="email" /></li>
<li>网址: <input type="url" /></li>
<li>日期: <input type="date" /></li>
<li>时间: <input type="time" /></li>
<li>数量:<input type="number" /></li>
<li>手机号码; <input type="tel" /></li>
<li>搜索:<input type="search" /></li>
<li>颜色:<input type="color" /></li>
<li><input type="submit" value="提交"></li>
</ul>
</form>
<form action="">
<input type="text" required placeholder="必填">
<input type="file" multiple>
<input type="submit" value="提交">
</form>
</body>
</html>