html5的新特性

1、新增语义化标签:顾名思义,这些标签没有实际效果,仅仅是一个盒子,仅仅为了方便开发人员根据标签名编写相应布局功能,便于维护
section:页面中的内容区块
article:与上下文无关的独立内容
aside:在article之外的,与article内容相关的辅助信息
header:区块标题
footer:区块脚注
nav:导航链接部分
figure:独立的流内容
main:主要内容(IE不兼容)

2、音频标签audio:属性controls表示显示音频控件,默认不显示;loop表示循环播放;autoplay表示播放,但是部分浏览器刷新页面或者多开页面会实效;muted表示静音;这些属性都可以简写
视频标签video:包括上面audio标签的属性,还有背景图poster、宽高

3、表单input的type的新增值:
color颜色选择控件
email邮箱输入控件、url网址输入控件,文本会进行基本的格式判断
tel手机号输入控件,一般用于手机端,会弹出数字键盘,电脑端就跟普通文本一样
range滑块效果,类似于音量控件,默认0-100,可以通过min、max设置两端边界值;默认是中间值,可以通过value设置默认值;默认步长为1,可以通过step设置
number数字输入控件,手机端是弹出数字键,电脑端只能输入数字,可以通过min、max设置控件里面上下的范围,value是设置默认值,step设置控件里面上下的步长
search搜索输入控件,跟普通文本的区别就是多了个删除文本的小功能
date日期选择控件,精确到日;month精确到月;week精确到周;datetime-local本地的时间

4、新增选项列表控件datalist:根据关联文本内容显示模糊匹配结果,基本样式如下

<form>
		<input type="text" list="name">
		<datalist id="name">
				<option value="内容1"></option>
				<option value="内容2"></option>
				<option value="内容3"></option>
				......
		<datalist>
</form>

注意的是选择列表要跟其它控件关联时,其它控件要带上list属性进行关联,option要带上value,这个一般跟后端、js配合使用

5、其它新增属性
autofocus表示控件自动获取焦点
required表示控件必填项
multiple表示可以填写多个内容,用逗号隔开
pattern文本匹配正则表达式

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值