在HTML第五次重大修改后,用于取代HTML4和XHTML的第一代标准版本,称为HTML5。HTML5中新增了一些语义化标签,提高可用性和改进用户的友好体验。接下来,就让我们来学习HTML5中新增的标签吧~(╹▽╹)
- 狭义的HTML5指的是HTML语言的第五个版本。
- 广义的HTML5是指,HTML5 + CSS3 + Javascript技术的综合。
HTML5新增语义化标签
HTML5的优势:
- 提高可用性和改进用户的友好体验
- 更好的语义化标签
- 带来更多的多媒体元素,很好的替代FLASH和Silverlight
- 涉及到网站抓取和索引时,对SEO很友好
- 大量应用于移动应用程序和游戏
- 可移植性好
HTML5的劣势:
- 该标准未能很好的被PC端浏览器支持
- IE9以下浏览器几乎不兼容
H5新增语义化标签-常用布局标签
- <header> 头部标签
- <nav> 导航标签
- <main> 主体标签
- <article> 独立内容标签
- <section> 区段标签
- <aside> 侧边栏标签
-
<footer> 尾部标签
语义化标签.PNG
注:这种语义化标准主要针对搜索搜索引擎,可在页面中多次使用。在IE9中,需要把这些元素转换为块级元素。
H5新增语义化标签-多媒体标签
<audio>音频标签
HTML5在不使用插件的情况下也可以原生的支持音频格式文件的播放,但支持的格式有限。
音频格式.PNG
<audio>音频标签的兼容写法
<audio controls="controls">
<source src="happy.mp3" type="audio/mpeg">
<source src="happy.ogg" type="audio/ogg">
您的浏览器暂不支持audio标签
</audio>
<audio>音频标签常见属性
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 音频在就绪后马上播放 |
controls | controls | 向用户显示音频控件 |
loop | loop | 音频结束时,会重新开始播放 |
preload | preload | 音频在页面加载时进行加载,并预备播放,会忽略"autoplay"属性 |
src | url | 要播放的音频URL |
<video>视频标签
HTML5在不使用插件的情况下也可以原生的支持视频格式文件的播放,但支持的格式有限。
视频格式.PNG
<audio>音频标签的兼容写法
<video controls="controls">
<source src="move.mp4" type="audio/mp4">
<source src="move.ogg" type="audio/ogg">
您的浏览器暂不支持video标签
</video>
<video>视频标签常见属性
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 视频就绪自动播放 |
controls | controls | 向用户显示播放控件 |
loop | loop | 视频结束,会继续播放该视频,循环播放 |
preload | auto(预先加载),none(不预先加载) | 是否预加载视频,"autoplay"属性会被忽略 |
src | url | 视频url地址 |
width | pixels(像素) | 播放器宽度 |
height | pixels(像素) | 播放器高度 |
poster | img url | 加载时等待画面的图片 |
muted | muted | 静音播放 |
H5新增语义化标签-表单标签
输入标签
HTML5新增<input>表单类型
属性值 | 描述 |
---|---|
type="email" | 限制用户输入必须为email类型 |
type="url" | 限制用户输入必须为url类型 |
type="date" | 限制用户输入必须为日期类型 |
type="time" | 限制用户输入必须为时间类型 |
type="month" | 限制用户输入必须为月类型 |
type="week" | 限制用户输入必须为周类型 |
type="number" | 限制用户输入必须为数字类型 |
type="range" | 滑动条 |
type="tel" | 手机号码 |
type="search" | 搜索框 |
type="color" | 生成一个颜色选择表单 |
<datalist> 标签
- <datalist>标签规定了<input>元素可能的选项列表;
- <datalist>元素包含了一组<option>元素,这些元素表示预定义可选值,在<input>元素输入过程,会自动相应<option>元素的值,
- 绑定的<input>标签必须设置list属性,属性值等于<datalist>标签的id属性值。
<!-- 第一种写法 -->
<input type="text" list="city-list">
<datalist id="city-list">
<option value="广州">gz</option>
<option value="成都">ct</option>
<option value="上海">sh</option>
</datalist>
<!-- 第二种写法 -->
<input type="text" list="city-list">
<datalist id="city-list">
<option value="广州">
<option value="成都">
<option value="上海">
</datalist>
新增表单属性
属性 | 值 | 描述 |
---|---|---|
required | required | 拥有该属性表单内容不得为空,必填 |
placeholder | 提示文本 | 表单提示信息 |
autofocus | autofocus | 自动聚焦属性 |
autocomplete | off/on | 默认打开,需要放在表单内同时加上name属性,同时需要成功提交 |
multiple | multiple | 可以多选文件提交 |
网友评论