HTML5新特性

前言

本文主要讲解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。