H5 (HTML 5)

简介

所有的主流浏览器都支持H5(chrome,firefox,safari…),IE9及以上支持H5(有选择的支持，并不是全部支持)，IE8及以下不支持。
改变了用户与文档的交互方式：多媒体：video audio canvas
增加了语义特性，本地存储特性，网页多媒体，二维三维，特效（过渡、动画）
相对与H4：
- 抛弃了一些不合理不常用的标记和属性
- 新增了一些标记和属性–表单
- h5的网页结构代码更简洁

H5新增标签

菜鸟地址

W3C地址

语义化标签的兼容性处理

IE9在使用HTML5新增的语义化标签的时候会出现高度坍塌问题。

原因：它将新增标签当成行级元素，IE9行级元素在设置宽度的时候失效

解决方法：display: block;将行级元素转为块级元素

原因：IE8完全不支持语义标签(不支持HTML5):IE8不认识语义标签，所以无法解析这些标签，也就意味着所写的样式无效。

解决方法：

方式一：

手动创建标签(默认的标签的类型都是行级元素)

document.createElement("header");

方式二：

引入第三方插件html5shiv.min.js：在默认情况下，IE8及以下的IE版本不支持HTML5，引入这个文件就可以做到兼容

<script src="../html5shiv.min.js"></script>

form表单

新增的type属性

    <form action="">用户名：<input type="text" name="username"> <br>密码：<input type="password" name="password"> <br><!-- email提供了默认的电子邮箱的完整性验证：要求必须包含@符号，同时必须包含服务器名称，如果不能满足验证，则会组织当前的数据提交 -->邮箱：<input type="email"> <br><!-- tel并不是用来实现验证，它的本质目的是为了能够在移动端打开数字键盘，意味着数字键盘限制了用户只能输入数字。查看效果：QQ发送文件>>手机端使用qq来接收>>使用手机浏览器查看 -->电话：<input type="tel"> <br><!-- 验证只能输入合法的网址：必须包含http:// -->网址：<input type="url"> <br><!-- number : 只能输入数字(包含小数点)，不能输入其他字符 max: 最大值min: 最小值value: 默认值-->数量：<input type="number" value="10" max="20" min="0"> <br><!-- 提供更人性化的输入体验 -->请输入名称：<input type="search"> <br><!-- range:范围 max min value 可应用与调节音量-->范围：<input type="range" max="100" min="0" value="20"> <br>颜色：<input type="color"> <br><!-- 时间日期相关 --><!-- 时分秒 -->时间：<input type="time"> <br><!-- 年月日 -->日期：<input type="date"> <br><!-- 年月日时分秒 -->日期时间:<input type="datetime-local"> <br><input type="datetime" placeholder="只有safari支持"> <br>月份：<input type="month"> <br>周：<input type="week"> <br><input type="submit"></form>

新增的其他属性

    <form action="" id="myForm"><!-- placeholder:提示文本 --><!-- autofocus: 自动获取焦点 --><!-- autocomplete: 自动填充。实现前提：1.必须成功提交过：提交过才会有记录2.当前添加autocomplete的元素必须有name属性 -->用户名：<input type="text" name="uname" placeholder="请输入用户名" autofocus autocomplete="on"> <br><!-- required：必须输入，没输入会阻止当前数据的提交 --><!-- pattern：正则表达式验证 *:代表任意个?：代表0或1个+：代表一个或多个-->电话号码：<input type="tel" name="telephone" autocomplete="on" required pattern="^(\+86)?1\d{10}$"> <br><!-- multiple:可以选择多个文件 -->文件：<input type="file" name="phote" multiple> <br><!-- 在email中，multiple允许输入多个邮箱地址，用','分隔 -->邮箱：<input type="email" name="email" multiple> <br><input type="submit" value="提交"></form><!-- 此表单元素没有包含在form中，默认情况下表单元素的数据不会进行提交 --><!-- form: 指定表单id，在将来指定id号的表单进行数据提交的时候，也会将当前表单元素的数据一起提交 -->地址：<input type="text" name="address" form="myForm">

新增的元素

<form action=""><!-- 专业：<select name="" id=""><option value="1">前端</option><option value="2">后端</option><option value="3">微信小程序</option><option value="4">大数据</option></select> --><!-- 这种只能选择不能输入 --><!-- ====================================================== --><!-- 不只是可以选择，还应该可以输入 --><!-- 要建立输入框和datalist的关联  list="datalist的id"-->专业：<input type="text" list="subjects"><!-- 通过datalist创建选项列表 --><datalist id="subjects"><!-- 创建选项值：value:具体的值，label :提示信息，辅助值 --><option value="前端" label="美妙"></option><option value="java" label="牛逼"></option><option value="C语言" label="恼火"></option><option value="python" label="哟西"></option></datalist>网址：<input type="url" list="urls"><datalist id="urls"><option value="www.baidu.com" label="百度"></option><option value="www.163.com" label="网易"></option><option value="www.bilibili.com" label="B站"></option></datalist></form>

新增的表单事件

    <form action="">用户名：<input type="text" name="userName" id="userName"> <br>电话： <input type="tel" name="phone" id="phone" pattern="^1\d{10}$"> <br><input type="submit"></form><script>// 1.oninput: 监听当前指定元素内容的改变：只要内容改变(增加、删除)，就会触发这个事件document.getElementById("userName").oninput=function(){console.log("oninput:"+this.value);}//onkeyup: 键盘弹起的时候触发，每一个键的弹起都会触发一次document.getElementById("userName").onkeyup=function(){console.log("onkeyup:"+this.value);}//oninvalid: 当验证不通过时触发document.getElementById("phone").oninvalid=function(){// 设置默认的提示信息this.setCustomValidity("请输入合法的11位手机号")}</script>

进度条

    <!-- 进度条 --><!-- max: 最大值 --><!-- value: 当前进度值 --><progress></progress><!-- 度量器 --><!-- high: 规定的较高的值 --><!-- low: 规定的较低的值 --><!-- max: 最大值 --><!-- min: 最小值 --><!-- value: 当前度量值 --><meter max="100" min="0" high="80" low="40" value="30"></meter><meter max="100" min="0" high="80" low="40" value="50"></meter><meter max="100" min="0" high="80" low="40" value="90"></meter>

H5C3进阶学习——form表单相关推荐

Django学习--form(表单)
01 表单基础 1.1概念在html中,一个表单的元素是<form>.....</form>,在表单里面允许visitor做输入文本,选择,提交对象等等工作.对于当中< ...
uni-app学习 form表单（五）
因为有jquery 基本几天就可以上手做项目了只是一些方法还是不知道怎么用比如: input怎么取值 button怎么像jquery那样动态设置属性效果图: input为空不能提交提交后有个 ...
Django(part46)--form表单验证
学习笔记,仅供参考文章目录 form表单验证举个例子 form表单验证 form提供表单和字段验证,我们可以使用form.is_valid() 方法进行表单验证,若该方法返回值为True,则表示当 ...
学习日志day45（2021-09-09）（1、有道翻译API使用json格式数据 2、JSONP 3、Ajax提交form表单 4、Web Uploader）
学习内容:学习JavaWeb(Day45) 1.有道翻译API使用json格式数据 2.JSONP 3.Ajax提交form表单 4.Web Uploader 1.有道翻译API使用json格式数据 ...
1月26日学习内容整理：reverse函数补充，modelform对象补充，form表单参数补充
1.reverse函数中的args参数,必须是一个元组,只有一个元素时必须加逗号,并且args给URL传参数的时候是根据分组传的,所以我们设置的URL中的要传参的正则表达式一定要加括号 2.我们用未绑 ...
html（5）标签form表单——进阶
在上一篇博客中,我们只是写好了表单,但是如何提交呢? 此时我们要知道form表单里面有两个属性,一个是action属性,一个是method属性,action属性代表的是我们的表单数据要提交给谁,而me ...
django ajax form表单,Django学习系列之Form表单和ajax(示例代码)
昵称: 生日: 性别: 男女地址: 手机号: 邮箱: [修改] {% csrf_token %}$(\'#js ...
前端学习笔记--AJAX的应用（三）form表单改为AJAX提交
无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家.教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家.点这里可以跳转到教程. 参考博客:http://ww ...
java学习之服务器第26天( --form表单-- 四大域对象--cookie)
你想要多大的成功, 你愿意为这份成功付出什么? 1.form表单定义: 相当于一个控件集合,里面包含多个控件,点"提交"后会把表单中的所有控件的值都传给action到的页面: 通 ...

H5C3进阶学习——form表单

文章目录