html5--3.21 课程小结与其他新增元素

一、总结

一句话总结：

input的pattern属性可以设置正则验证，比如检测学号的位数和数字区间
details/summary元素配合起来可以做元素折叠的效果，summary为detail设置标题
请输入你的学号：<input type="text" name="name" pattern="[0-9]{4}">

1、details/summary元素实例？

details/summary元素配合起来可以做元素折叠的效果，summary为detail设置标题
  <details>

      <summary>点击率调查</summary>

      <p>该文章目前点击率：6000</p>

      <ul>

          <li><meter max="10000" low="3000" high="8000" value="9000"></meter> 8000以上：很火</li>

          <li><meter max="10000" low="3000" high="8000" value="4000"></meter> 3000--8000：一般</li>

          <li><meter max="10000" low="3000" high="8000" value="1000"></meter> 3000以下：人气不高啊!</li>

      </ul>

  </details>

二、html5--3.21 课程小结与其他新增元素

学习要点

  • 了解新增的input属性pattern
  • 其他几个新增元素（非表单中元素，但是也放在这里讲解）
    1. 新增的input属性pattern：设定输入类型的正则表达式;关于正则表达式的内容将在后续javascript的课程中进行讲解，暂时稍作了解即可

    2. 以下几个元素虽然放在表单这一章来讲，并非表单中的元素

      • 目前所有主流浏览器都不支持的menu标签和目前只有 Internet Explorer 支持command标签暂时不做讲解。

 

学习要点

  • 掌握details/summary元素的用法
  • 虽然将这个元素放在表单这一章来讲解，但是它可以用在其他更多的场景中，比如导航菜单等
  • details元素：用于描述文档或文档某个部分的细节。
    • 通常与summary元素配合使用，可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details中的内容。
  • details元素的属性：
    • open属性：规定在 HTML 页面上 details 是可见的。
  • 目前还不是所以浏览器都支持，但是相信以后都会支持的

实例

 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>Document</title>

 6 </head>

 7 <body>

 8     <form action="L3_01.html" method="get">

 9         <h2 style="color:#FFFF00;background: #00ADFF">这是pattern属性的用法：</h2>

10         <span style="color:#FF0000">用来为input元素设置正则表达式</span><br><br>

11         请输入你的学号：<input type="text" name="name" pattern="[0-9]{4}"><br><br>

12         <h2 style="color:#FFFF00;background: #00ADFF">这是detail元素的用法：</h2>

13         <p style="color:#FF0000">details元素用来展示细节，很好用</p>

14         details元素不一定要在form表单中<br>

15         <details>

16             <summary>点击率调查</summary>

17             <p>该文章目前点击率：6000</p>

18             <ul>

19                 <li><meter max="10000" low="3000" high="8000" value="9000"></meter> 8000以上：很火</li>

20                 <li><meter max="10000" low="3000" high="8000" value="4000"></meter> 3000--8000：一般</li>

21                 <li><meter max="10000" low="3000" high="8000" value="1000"></meter> 3000以下：人气不高啊!</li>

22             </ul>

23

24         </details>

25         <br><input type="button" value="确定">

26     </form>

27 </body>

28 </html>

html5中 input的pattern属性 和 details/summary元素的更多相关文章

  1. js进阶正则表达式14验证邮编（input的pattern属性）（正则表达式加起^始$）

    js进阶正则表达式14验证邮编(input的pattern属性)(正则表达式加起^始$) 一.总结 1.input的pattern属性:里面可以直接放正则表达式,<input type=&quo ...

  2. html5中input的type类型有哪些（总结）

    html5中input的type类型有哪些(总结) 一.总结 一句话总结:时间.颜色.(邮件.电话.url).(数字.数字范围).搜索search 二.html5中input的type类型 值 描述 ...

  3. HTML5中input[type='date']自定义样式

    HTML5提供了日历控件功能,缩减了开发时间,但有时它的样式确实不如人意,我们可以根据下面的代码自行修改. 建议:复制下面的代码段,单独建立一个css文件,方便我们修改. /* 修改日历控件类型 */ ...

  4. HTML5中script的async属性异步加载JS

    HTML5中script的async属性异步加载JS     HTML4.01为script标签定义了5个属性: charset 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer 可 ...

  5. html5中script的async属性

    html5中script的async属性 我兴奋于html5的原因之一是一些久久未能实现的特性现在可以真正运用于实际项目中了. 如我们使用placeholder效果蛮久了但是那需要javascript ...

  6. HTML5中input标签有用的新属性

    HTML5对input增加了一些新标签,个人觉得比较常用有效的以下几个 placeholder=“请输入” 常见用于默认提示 autofocus 自动聚焦到当前输入框 maxlength=" ...

  7. HTML5 为 <input> 增加的属性 ; 为 <form> 增加的如需属性

    HTML5 为 <input> 增加了如下属性: autocomplete autofocus form formaction formenctype formmethod formnov ...

  8. Html5中input新增的表单元素和属性介绍。

    input标签主要用于Web表单的创建交互,以便接受来自用户的数据. 我们通过更改type属性的值,来实现不同的输入类型.在以前的写法中表单元素必须放在form元素所包含的里面,而在html5中,我们 ...

  9. html5中常见的全局属性

    1.contentEditable属性 1.功能说明 (1)功能:允许用户编辑元素中的内容 (2)说明:是一个布尔值,false是不能编辑,true为可编辑 该元素还隐藏一个inherit状态  也是 ...

随机推荐

  1. pssh安装及使用

    pssh全称是parallel-ssh,基于Python编写的并发在多台服务器上批量执行命令的工具,它支持文件并行复制.远程并行执行命令.杀掉远程主机上的进程等:该工具可以视作ansible的简化版本 ...

  2. linux防火墙开放端口，针对固定ip开放端口

    编辑/etc/sysconfig/iptables,添加 -A INPUT -m state --state NEW -m tcp -p tcp -s 127.0.0.1 --dport 6379 - ...

  3. layui.table前端+后台处理+分页

    前端 注:监听工具条没有详细写,但路子一样的 @section head{ <script src="~/Content/jquery-easyui-1.5.5.4/jquery.ea ...

  4. Android笔记（三十六） AsyncTask是如何执行的？

    在上一个例子中,我们是在LoadImage的onPostExecute中修改的UI,不是说只允许在主线程中修改UI吗?我们看一下源代码是如何操作的. MainActicity.java package ...

  5. NFS启动文件系统

    NFS启动文件系统 一.软硬件平台 1.开发板:创龙AM3359核心板,网口采用RMII形式. 2.UBOOT版本:U-Boot-2016.05,采用FDT和DM. 3.交换芯片MARVELL的88E ...

  6. Django使用swagger生成接口文档

    参考博客:Django接入Swagger,生成Swagger接口文档-操作解析 Swagger是一个规范和完整的框架,用于生成.描述.调用和可视化RESTful风格的Web服务.总体目标是使客户端和文 ...

  7. redis都有哪些数据类型？分别在哪些场景下使用比较合适？

    (1)string 这是最基本的类型了,没啥可说的,就是普通的set和get,做简单的kv缓存 (2)hash 这个是类似map的一种结构,这个一般就是可以将结构化的数据,比如一个对象(前提是这个对象 ...

  8. linux下svn的使用

    环境搭建: yum install subversion       yum安装svn服务 svn --version 检查是否安装 cd /usr/local/svn/conf 找到conf 文件 ...

  9. 忘记 MySQL 的 root 帐号密码该怎么办

    如果你忘了 MySQL 的 root 帐号密码,别担心,使用下面步骤就可以重设一个新密码: 首先停止 MySQL 服务 “/etc/init.d/mysql stop” 启动 MySQL 服务并屏蔽用 ...

  10. 快速开平方取倒数的算法--嵌入式ARM转载

    #include<stdio.h> #include<string.h> #include <stdlib.h> /* atof */ /* 计算=1/sqrt(n ...