在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

可以多选文件提交