h5简介和新特性（总结）

最新推荐文章于 2023-03-17 08:10:41 发布

lpl_L

最新推荐文章于 2023-03-17 08:10:41 发布

阅读量224

点赞数 1

本文链接：https://blog.csdn.net/lpl_L/article/details/108307129

版权

h5简介和新特性

语义化标签

表单新增的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
例子：

<!--建立输入框与datalist的关联  list="datalist的id号"-->
    编程语言：<input type="text" list="language"> <br>
    <!--通过datalist创建下拉列表-->
    <datalist id="language">
        <!--label:提示信息-->
        <option value="java" label="市场份额最高"/>
        <option value="php" label="世界上最好的语言"></option>
        <option value="node.js" label="单线程，异步处理能力强"></option>
         <!--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():判断是否是全屏状态

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>

lpl_L

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
h5简介和新特性（总结）

h5简介和新特性语义化标签表单新增的type属性表单元素的其他属性新增的表单元素，datalisth5新增表单事件meter标签fieldset标签和legend标签自定义属性规范全屏接口上传图片实时预览+进度条语义化标签：语义化标签的出现是为了简化编程，并不意味着有了语义化就有什么特殊性，本质就是一个divheader 头部nav 导航main 主体article 文章aside 侧边栏footer 底部表单新增的type属性：email：邮箱tel：电话url
复制链接

扫一扫