HTML5新增语义化标签

在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	可以多选文件提交