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. Android多线程操作，as快捷键笔记

    Android studio 快捷键 cmd+p 快速查看该方法的参数定义 * * option + shift +上下 快速移动上下行 * * cmd + e 显示最近操作的文件 * * cmd + ...

  2. Linux 新手入门教程

    Linux 新手入门教程 1991年10月5日,Linus Torvalds 在互联网上发布消息,宣布他自己开发的内核系统诞生了.他将内核源代码保存在芬兰最大的 FTP 网站上,命名为 Linux,取 ...

  3. HTML&CSS基础-字体的样式

    HTML&CSS基础-字体的样式 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> & ...

  4. ealsticsearch历史版本下载

    ealsticsearch历史版本下载 https://www.elastic.co/cn/downloads/past-releases#elasticsearch

  5. javascript中的var,let,const关键字

    文章:JavaScript 中 var 和 let 和 const 关键字的区别 比较全面的文章.

  6. visual studio故障修复

    如果没有安装程序,直接在控制面板——>程序和功能,在列表中找到您安装的vs,右键选择更改,然后程序会启动,做一些准备.然后又三个选项,可以选择修复.

  7. mysql存储、function、触发器等实例

    一.创建数据库&表 DROP DATABASE IF EXISTS security; CREATE database security; USE security; CREATE TABLE ...

  8. destoon修改搜索页面标题方法

    最近研究destoon内核开发,发现destoon6.0的搜索页面模块的标题太长,是搜索标题+模块+首页标题,这样导致标题过长,百度不喜欢,所以我经过修改成百度所喜欢的. 修改前截图: 修改的文件:/ ...

  9. postgresql —— 数组类型

    创建数组 CREATE TABLE sal_emp ( name text, pay_by_quarter integer[] --还可以定义为integer[4]或integer ARRAY[4] ...

  10. python - django (logging 日志配置和简单使用)

    1. settings 配置 # 配置日志 LOGGING = { 'version': 1, 'disable_existing_loggers': True, 'formatters': { 's ...