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