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. 如何通过Restful API的方式读取SAP Commerce Cloud的Product图片

    需求:我在SAP Commerce Cloud的backoffice里给某product维护了一些图片: 分别位于Normal,Thumbnails和Others等字段: 现在我想通过Restful ...

  2. nginx+uwsgi+django+supervisor+mysql+redis

    目录 1. 概述 3 2. 安装与配置 3 2.1 django项目与应用创建 3 2.2 uwsgi安装与配置 6 2.3 supervisor安装与配置 8 2.4 nginx安装与作为反向代理服 ...

  3. Django使用Redis进行缓存详细最全流程

    背景和意义服务器数据非经常更新.若每次都从硬盘读取一次,浪费服务器资源.拖慢响应速度.而且数据更新频率较高,服务器负担比较大.若保存到数据库,还需要额外建立一张对应的表存储数据.在Django中建立表 ...

  4. Centos部署项目

    nginx + virtualenv + uwsgi + django + mysql + supervisor 部署项目 一.安装Python3 二.安装MariaDB,并授权远程 grant al ...

  5. Elasticsearch 7.x - IK分词器插件（ik_smart，ik_max_word）

    一.安装IK分词器 Elasticsearch也需要安装IK分析器以实现对中文更好的分词支持. 去Github下载最新版elasticsearch-ik https://github.com/medc ...

  6. 初学Django基础01 建立工程,目录结构,常用配置,上下文管理,模板渲染

    django是python的web重量级框架,发展已经有10年多了,对应下面版本 Django 版本 Python 版本 1.8 2.7, 3.2 , 3.3, 3.4, 3.5 1.9, 1.10 ...

  7. Linux系统 安装JDK和tomcat

    下载文件路径包: http://archive.apache.org/dist/ 首先将软件包上传到/tmp目录下 需要文件如下 jdk-8u60-linux-x64.gz apache-tomcat ...

  8. c语言实现整数转换为字符串——不考虑负数

    #include <stdio.h> #include <string.h> #define MAX_LEN 16 #define ESP 1e-5 typedef int i ...

  9. js清空数组

    js-清空array数组 两种实现方式: 1.splice:删除元素并添加新元素,直接对数组进行修改,返回含有被删除元素的数组. arrayObject.splice(index,howmany,el ...

  10. MongoDB collection Index DB 大小查询

    1.collection中的数据大小 db.collection.dataSize() 2.为collection分配的空间大小,包括未使用的空间db.collection.storageSize() ...