HTML5新特性与语义化标签解析-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_58721653/article/details/120690842

语义化标签

表单新增的type属性

表单元素的其他属性

新增的表单元素，datalist

h5新增表单事件

meter标签

fieldset标签和legend标签

自定义属性规范

全屏接口

上传图片实时预览+进度条

语义化标签：
语义化标签的出现是为了简化编程，并不意味着有了语义化就有什么特殊性，本质就是一个div

header 头部
nav 导航
main 主体
article 文章
aside 侧边栏
footer 底部

表单新增的type属性：
email：邮箱

tel：电话

url：网址

number：数量

search：请输入商品名称

range：范围

color：颜色

time：时间

date：日期

datetime：日期时间

month：月份

week：星期

表单元素的其他属性：
placeholder，获得焦点时提示文字消失，失去焦点若value为空，则再度提示

autofocus ，页面加载完自动获得焦点

required，必须输入

pattern，正则验证

multiple，允许多文件上传

新增的表单元素，datalist
例子：

编程语言：<input type="text" list="language"> <br>

<datalist id="language">

<option value="java" label="市场份额最高"/>
<option value="php" label="世界上最好的语言"></option>
<option value="node.js" label="单线程，异步处理能力强"></option>

<option value="python" label="火爆的编程语言，处理数据能力强"/>
</datalist>
效果：

meter标签

fieldset标签和legend标签

例子：

<fieldset>
<legend>冷月心个人信息</legend>
</fieldset>
效果：

自定义属性规范
小写，非纯数字，不含特殊字符
data开头,data-后必须至少有一个字符，多个单词使用-连接
实例， data-name， data-project-name

全屏接口
有兼容问题，可能需要加前缀，webkit，moz，ms

element.requestFullScreen():开启全屏显示,element指的是某个dom元素，如div
document.cancelFullScreen():退出全屏
document.fullScreenElement():判断是否是全屏状态
1
2
3
h5新增表单事件：
例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>h5新增表单事件oninput,onkeyup,oninvalid</title>
</head>
<body>
<form >
用户名：<input type="text" name="name" ><br>
电话：<input type="tel" name="phone" pattern="^1\d{10}$"> <br>
<input type="submit">
</form>
<script>
//oninput:实时监听当前指定元素内容的改变：只要内容改变(如添加内容，删除内容)，就会触发这个事件

document.querySelector("input[type=text]").οninput=function(){
console.log("oninput:"+this.value);
}

//onkeyup:键盘弹起的时候触发：每一个键的弹起都会触发一次
document.querySelector("input[type=text]").οnkeyup=function(){
console.log("onkeyup:"+this.value);
}

//oninvalid:当验证不通过时触发
document.querySelector("input[type=tel]").oninvalid=function(){
//设置默认的提示信息
this.setCustomValidity("请输入合法的11位手机号");
}
</script>
</body>
</html>

h5简介和新特性（总结）