html5增加语义化标签,HTML5新增语义化标签

在HTML第五次重大修改后，用于取代HTML4和XHTML的第一代标准版本，称为HTML5。HTML5中新增了一些语义化标签，提高可用性和改进用户的友好体验。接下来，就让我们来学习HTML5中新增的标签吧~(╹▽╹)

狭义的HTML5指的是HTML语言的第五个版本。

广义的HTML5是指，HTML5 + CSS3 + Javascript技术的综合。

HTML5新增语义化标签

HTML5的优势：

提高可用性和改进用户的友好体验

更好的语义化标签

带来更多的多媒体元素，很好的替代FLASH和Silverlight

涉及到网站抓取和索引时，对SEO很友好

大量应用于移动应用程序和游戏

可移植性好

HTML5的劣势：

该标准未能很好的被PC端浏览器支持

IE9以下浏览器几乎不兼容

H5新增语义化标签-常用布局标签

头部标签

导航标签

主体标签

独立内容标签

区段标签

侧边栏标签

尾部标签

语义化标签.PNG

注：这种语义化标准主要针对搜索搜索引擎，可在页面中多次使用。在IE9中，需要把这些元素转换为块级元素。

H5新增语义化标签-多媒体标签

音频标签

HTML5在不使用插件的情况下也可以原生的支持音频格式文件的播放，但支持的格式有限。

音频格式.PNG

音频标签的兼容写法

您的浏览器暂不支持audio标签

音频标签常见属性

属性

值

描述

autoplay

autoplay

音频在就绪后马上播放

controls

controls

向用户显示音频控件

loop

loop

音频结束时，会重新开始播放

preload

preload

音频在页面加载时进行加载，并预备播放，会忽略"autoplay"属性

src

url

要播放的音频URL

视频标签

HTML5在不使用插件的情况下也可以原生的支持视频格式文件的播放，但支持的格式有限。

视频格式.PNG

音频标签的兼容写法

您的浏览器暂不支持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新增表单类型

属性值

描述

type="email"

限制用户输入必须为email类型

type="url"

限制用户输入必须为url类型

type="date"

限制用户输入必须为日期类型

type="time"

限制用户输入必须为时间类型

type="month"

限制用户输入必须为月类型

type="week"

限制用户输入必须为周类型

type="number"

限制用户输入必须为数字类型

type="range"

滑动条

type="tel"

手机号码

type="search"

搜索框

type="color"

生成一个颜色选择表单

标签

标签规定了元素可能的选项列表；

元素包含了一组元素，这些元素表示预定义可选值，在元素输入过程，会自动相应元素的值，

绑定的标签必须设置list属性，属性值等于标签的id属性值。

gz

ct

sh

新增表单属性

属性

值

描述

required

required

拥有该属性表单内容不得为空，必填

placeholder

提示文本

表单提示信息

autofocus

autofocus

自动聚焦属性

autocomplete

off/on

默认打开，需要放在表单内同时加上name属性，同时需要成功提交

multiple

multiple

可以多选文件提交