HTML5新特性
- 前言
- 语义化标签
- 常用语义化标签
- 优点
- 新增input属性
- 新增type属性值内容
- 其他新增input属性
- video(视频)与audio(音频)标签
前言
本文主要讲解HTML5中新增了哪些内容。
语义化标签
HTML5新增了语义化标签这个特性,再语义化标签没有出现前,我们是用原始DIV
来进行布局,这样虽然能实现想要的布局,但同时当我们没有CSS
样式时,布局就会失效,但如果使用语义化标签,则能保证标签大的整体布局不会因为CSS
发生大的变化,能够保证基本的结构。
常用语义化标签
- header:头部标签
- nav:导航栏
- section:具体某个区域
- aside:侧边栏
- time:日期
- footer:页面底部标签
优点
- 使得代码整体结构清晰,便于二次开发与高效处理代码。
- 好的语义结构,便于被python脚本高效获取想要的信息
新增input属性
H5新增了input的type属性值,让开发者省去了很多校验和对比的时间。比如:time、email、url等。
新增type属性值内容
- type=
color
,颜色选择器,可以选择颜色。 - type=
email
,限制用户输入类型为email格式 - type=
number
,限制用户输入类型为number格式 - type=
time
,限制用户输入类型为时间 - type=
date
,限制用户输入类型为日期 - type=
tel
,限制用户输入类型为电话号 - type=
search
,搜索 - type=
week
,限制用户输入类型为周
其他新增input属性
required
:加上该输入框值则为必填mulitupe
:多选文件提交placeholder
:提示文本
video(视频)与audio(音频)标签
新增了视频和音频标签,用于视频或者音频的显示。
video属性:
autoplay
:视频准备完成自动播放,谷歌浏览器需加入muted
属性才能生效controls
:展示播放器控件width
与height
:宽高,又名像素loop
:循环播放src
:url地址muted
:静音播放
而音频常用属性为上述属性中的autoplay、controls、loop和src
。