备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

h5 -1

2017-11-15 1100
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 
<header></header> 页眉 
主要用于页面的头部的信息介绍，也可用于板块头部

<hgroup></hgroup> 页面上的一个标题组合
一个标题和一个子标题，或者标语的组合
<hgroup>
    <h1>妙味课堂</h1>
     <h2>带您进入富有人情味的IT培训</h2>
</hgroup>


<figure> < figure > 用于对元素进行组合。一般用于图片或视频
 <figcaption> <figcaption> figure的子元素 用于对figure的内容 进行说明
    <figure>
        <img src=“miaov.png”/>(注意没有alt)
         <figcaption> 妙味课堂 photo &copy 妙味趣学</figcaption>
   </figure>

   
   新的表单特性和函数
placeholder  :  输入框提示信息
例子 :  微博的密码框提示
autocomplete  :  是否保存用户输入值
默认为on，关闭提示选择off
autofocus  :  指定表单获取输入焦点
list和datalist  :  为输入框构造一个选择列表
list值为datalist标签的id
required  :  此项必填，不能为空
Pattern : 正则验证  pattern="\d{1,5}“
Formaction 在submit里定义提交地址


表单验证
validity对象，通过下面的valid可以查看验证是否通过，如果八种验证都通过返回true，一种验证失败返回false
oText.addEventListener("invalid",fn1,false);
ev.preventDefault()
valueMissing  :  输入值为空时
typeMismatch :  控件值与预期类型不匹配
patternMismatch  :  输入值不满足pattern正则
tooLong  :  超过maxLength最大限制
rangeUnderflow : 验证的range最小值
rangeOverflow：验证的range最大值
stepMismatch: 验证range 的当前值 是否符合min、max及step的规则
customError 不符合自定义验证
setCustomValidity(); 自定义验证


表单验证
Invalid事件  :  验证反馈 input.addEventListener('invalid',fn,false)
阻止默认验证：ev.preventDefault()
formnovalidate属性  :  关闭验证
复制代码
复制代码 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<header>用在页面的头部或者版块的头部</header>
<footer>用在页面的头部或者版块的底部</footer>
</body>
</html>
复制代码
复制代码 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<nav><a href="#">链接</a><a href="#">链接</a></nav>
<nav>
    <p><a href="#">妙味课堂</a></p>
    <p><a href="#">妙味课堂</a></p>
</nav>
<nav>
    <h2>妙味精品课程</h2>
    <ul>
        <li><a href="#">javascript</a></li>
        <li><a href="#">html+css</a></li>
    </ul>
</nav>
</body>
</html>
复制代码
复制代码 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<hgroup>
    <h1>妙味课堂</h1>
    <h2>带您进入富有人情味的IT培训</h2>
</hgroup>
</body>
</html>
复制代码
复制代码 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<p> 我们在每天早上 <time>9:00</time> 开始营业。 </p>
<p> 我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>
</body>
</html>
复制代码
复制代码 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<input type="text" list="valList" />
<datalist id="valList">输出框提示的下拉列表
    <option value="javascript">javascript</option>
    <option value="html">html</option>
    <option value="css">css</option>
</datalist>
</body>
</html>
复制代码
复制代码 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<details>
    <summary>妙味课堂</summary>
    <p>国内将知名的IT培训机构</p>
</details>
</body>
</html>
复制代码
复制代码 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<dialog open>
  <dt>老师</dt>
  <dd>2+2 等于？</dd>
  <dt>学生</dt>
  <dd>4</dd>
  <dt>老师</dt>
  <dd>答对了！</dd>
</dialog>
</body>
</html>
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv= "Content-Type"  content= "text/html; charset=utf-8" >
<title>无标题文档</title>
</head>
<body>
<form action= "http://www.baidu.com"  method= "get" >
     用户: <input type= "text"  name= "usr_name"  />
     公钥: <keygen name= "security"  />
     <input type= "submit"  />
</form>
</body>
</html>

　　

复制代码 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<progress max="200" value="100">
    <span>76</span>%   //低版本的兼容
</progress>
</body>
</html>
复制代码
复制代码 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
    <input type="email" />
    <input type="submit" />
</form>
</body>
</html>
复制代码
复制代码 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
    <input type="range" step="2" min="0" max="10" value="2" />  最小是0最大是10，每一步是2，初始值是2
    <input type="submit" />
</form>
</body>
</html>
复制代码
复制代码 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
    <input type="color"/>
    <input type="submit" />
</form>
</body>
</html>
复制代码
复制代码 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
    <input type="datetime"/>   时间控件
    <input type="submit" />
</form>
</body>
</html>
复制代码
复制代码 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
    <input type="datetime-local"/>
    <input type="submit" />
</form>
</body>
</html>
复制代码
复制代码 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
    <input type="month"/>
    <input type="submit" />
</form>
</body>
</html>
复制代码
复制代码 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
    <input type="text" placeholder="请输入4-16个字符" />
    <input type="submit" />
</form>
</body>
</html>
复制代码
复制代码 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
    <input type="text" placeholder="请输入4-16个字符" name="user" autocomplete="on" />  保存之前输入的值作为提示
    <input type="submit" />
</form>
</body>
</html>
复制代码
复制代码 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
    <input type="text" placeholder="请输入4-16个字符" name="user" autocomplete="off" />
    <input type="password" placeholder="请输入4-16个字符" name="password" autocomplete="off" autofocus />  获取焦点
    <input type="submit" />
</form>
</body>
</html>
复制代码
复制代码 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
    <input type="text" placeholder="请输入4-16个字符" name="user" autocomplete="off" required />      非空校验
    <input type="password" placeholder="请输入4-16个字符" name="password" autocomplete="off" required />
    <input type="submit" />
</form>
</body>
</html>
复制代码
复制代码 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form action="http://www.baidu.com">
    <input type="text" placeholder="请输入4-16个字符" name="user" autocomplete="off" pattern="\d{1,5}" />  正则校验，前台校验在浏览器可以改，改了就没有了。
    <input type="submit" value="提交" />
    <input type="submit" value="保存至草稿箱" formaction="http://www.qq.com" />  按钮的url
</form>
</body>
</html>
复制代码
复制代码 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
    <input type="text" required id="text"/>
    <input type="submit" />
</form>
<script>
var oText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
function fn()
{
    alert(this.validity.valid);
    ev.preventDefault();
}
</script>
</body>
</html>
复制代码
复制代码 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
    <input type="text" required id="text"/>
    <input type="submit" />
</form>
<script>
var oText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);  //invalid事件名
function fn()
{
    alert(this.validity.valueMissing);
    ev.preventDefault();//阻止默认提交事件
    
    /*validity对象，通过下面的valid可以查看验证是否通过，如果八种验证都通过返回true，一种验证失败返回false
oText.addEventListener("invalid",fn1,false);
ev.preventDefault()
valueMissing  :  输入值为空时
typeMismatch :  控件值与预期类型不匹配
patternMismatch  :  输入值不满足pattern正则
tooLong  :  超过maxLength最大限制
rangeUnderflow : 验证的range最小值
rangeOverflow：验证的range最大值
stepMismatch: 验证range 的当前值 是否符合min、max及step的规则
customError 不符合自定义验证
setCustomValidity(); 自定义验证*/

}

//valueMissing   当输入值为空的时候返回true
</script>
</body>
</html>
复制代码
复制代码 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
    <input type="email" id="text"/>
    <input type="submit" />
</form>
<script>
var oText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
function fn()
{
    alert(this.validity.typeMismatch);
    ev.preventDefault();
}

//valueMissing   当输入值为空的时候返回true
//typeMismatch   当输入类型和要求的类型email不一致的时候返回true
</script>
</body>
</html>
复制代码
复制代码 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
    <input type="email" id="text" maxlength="5"/>
    <input type="submit" />
</form>
<script>
var oText=document.getElementById("text");
oText.value="123456789";
oText.addEventListener("invalid",fn,false);
function fn()
{
    alert(this.validity.tooLong);
    ev.preventDefault();
}

//valueMissing   当输入值为空的时候返回true
//typeMismatch   当输入类型和要求的类型不一致的时候返回true
//patternMismatch 当用户输入的内容和预期的正则要求不匹配 返回true
//tooLong 当用户输入的长度 超出了maxlength的限制 返回true
</script>
</body>
</html>
复制代码
复制代码 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
    <input type="text" id="text" />
    <input type="submit" />
</form>
<script>
var oText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
oText.oninput=function()//oninput事件
{
    if(this.value=="敏感词")
    {
        this.setCustomValidity("请不要输入敏感词");//校验下拉框文本
    }
    else
    {
        this.setCustomValidity("");
    }
};
function fn()
{
    alert(this.validity.customError);
    ev.preventDefault();
}

//valueMissing   当输入值为空的时候返回true
//typeMismatch   当输入类型和要求的类型不一致的时候返回true
//patternMismatch 当用户输入的内容和预期的正则要求不匹配 返回true
//tooLong 当用户输入的长度 超出了maxlength的限制 返回true
//customError  不符合自定义验证的时候返回true
</script>
</body>
</html>
复制代码
复制代码 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form action="http://www.baidu.com">
    <input type="text" placeholder="请输入4-16个字符" name="user"  pattern="\d{1,5}" required />
    <input type="submit" value="提交" />
    <input type="submit" value="保存至草稿箱" formaction="http://www.qq.com" formnovalidate />
</form>
</body>
</html>
复制代码

 


本文转自农夫山泉别墅博客园博客，原文链接：http://www.cnblogs.com/yaowen/p/5358352.html，如需转载请自行联系原作者

文章标签：
Web App开发
范大脚脚
目录
相关文章
开放平台
|
9天前
|
弹性计算 运维 安全
访问控制（RAM）｜云上程序使用临时凭证的最佳实践
STS临时访问凭证是阿里云提供的一种临时访问权限管理服务，通过STS获取可以自定义时效和访问权限的临时身份凭证，减少长期访问密钥（AccessKey）泄露的风险。本文将为您介绍产品原理，以及具体的使用步骤。
开放平台
150950 3
阿里云云原生
|
7天前
|
数据采集 存储 运维
提升团队工程交付能力，从“看见”工程活动和研发模式开始
本文从统一工程交付的概念模型开始，介绍了如何将应用交付的模式显式地定义出来，并通过工具平台落地。
阿里云云原生
119848 1
念广隶
|
7天前
|
监控 负载均衡 Java
深入探究Java微服务架构：Spring Cloud概论
**摘要：** 本文深入探讨了Java微服务架构中的Spring Cloud，解释了微服务架构如何解决传统单体架构的局限性，如松耦合、独立部署、可伸缩性和容错性。Spring Cloud作为一个基于Spring Boot的开源框架，提供了服务注册与发现、负载均衡、断路器、配置中心、API网关等组件，简化了微服务的开发、部署和管理。文章详细介绍了Spring Cloud的核心模块，如Eureka、Ribbon、Hystrix、Config、Zuul和Sleuth，并通过一个电商微服务系统的实战案例展示了如何使用Spring Cloud构建微服务应用。
念广隶
103466 7
阿里云云原生
|
9天前
|
人工智能 Serverless 对象存储
让你的文档从静态展示到一键部署可操作验证
通过函数计算的能力让阿里云的文档从静态展示升级为动态可操作验证，用户在文档中单击一键部署可快速完成代码的部署及测试。这一改变已在函数计算的活动沙龙中得到用户的认可。
阿里云云原生
120103 120
Ganos全空间数据库
|
8天前
|
SQL 存储 数据可视化
Ganos H3地理网格能力解析与最佳实践
本文介绍了Ganos H3的相关功能，帮助读者快速了解Ganos地理网格的重要特性与应用实践。H3是Uber研发的一种覆盖全球表面的二维地理网格，采用了一种全球统一的、多层次的六边形网格体系来表示地球表面，这种地理网格技术在诸多业务场景中得到广泛应用。Ganos不仅提供了H3网格的全套功能，还支持与其它Ganos时空数据类型进行跨模联合分析，极大程度提升了客户对于时空数据的挖掘分析能力。
Ganos全空间数据库
81855 5
阿里云大数据Al技术
|
15天前
|
人工智能 编解码 对象存储
一键生成视频！用 PAI-EAS 部署 AI 视频生成模型 SVD 工作流
本教程将带领大家免费领取阿里云PAI-EAS的免费试用资源，并且带领大家在 ComfyUI 环境下使用 SVD的模型，根据任何图片生成一个小短视频。
阿里云大数据Al技术
143803 68
瓴羊Dataphin
|
13天前
|
数据采集 运维 监控
DataphinV4.0来啦：自定义全局角色 ，实时研发覆盖全部署场景，个性化企业配置看本期
本次V4.0版本升级，Dataphin支持自定义全局角色、自定义逻辑表命名规范、Flink on K8s的部署模式，提升企业级适配能力，灵活匹配企业特色；将集成任务快速从组件模式切换为脚本模式、支持外部触发类型节点等，提升研发平台易用性，助力高效开发便捷运维。
瓴羊Dataphin
90946 1
灵杰开发者
|
14天前
|
SQL Kubernetes 调度
Flink 流批一体在模型特征场景的使用
本文整理自B站资深开发工程师张杨老师在 Flink Forward Asia 2023 中 AI 特征工程专场中的分享。
灵杰开发者
76861 3
Flink 流批一体在模型特征场景的使用
阿里云瑶池数据库
|
19天前
|
存储 关系型数据库 数据库
超1/3中国500强企业都在用的「汇联易」，为什么选用阿里云RDS？
迎峰而上：汇联易依托阿里云RDS通用云盘，加速业务智能化升级
阿里云瑶池数据库
134268 4
超1/3中国500强企业都在用的「汇联易」，为什么选用阿里云RDS？
最后一支迷迭香
|
8天前
|
存储 缓存 安全
深度解析JVM世界：JVM内存结构
深度解析JVM世界：JVM内存结构
最后一支迷迭香
51946 2
为什么选择阿里云什么是云计算全球基础设施技术领先稳定可靠安全合规分析师报告
产品和定价全部产品免费试用产品动态产品定价价格计算器云上成本管理
解决方案技术解决方案
文档与社区文档开发者社区天池大赛培训与认证
权益中心免费试用高校计划企业扶持计划推荐返现计划
支持与服务基础服务企业增值服务迁云服务官网公告健康看板信任中心
关注阿里云
关注阿里云公众号或下载阿里云APP，关注云资讯，随时随地运维管控云服务
阿里云APP阿里云微信
联系我们：4008013260
法律声明Cookies政策廉正举报安全举报联系我们加入我们
阿里巴巴集团淘宝网天猫全球速卖通阿里巴巴国际交易市场1688阿里妈妈飞猪阿里云计算AliOS万网高德UC友盟优酷钉钉支付宝达摩院淘宝海外阿里云盘饿了么
© 2009-2024 Aliyun.com 版权所有 增值电信业务经营许可证： 浙B2-20080101 域名注册服务机构许可： 浙D3-20210002 京D3-20220015
浙公网安备 33010602009975号浙B2-20080101-4