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. Swift枚举的全用法

    鉴于昨天开会部门会议讨论的时候,发现有些朋友对枚举的用法还是存在一些疑问,所以就写下这个文章,介绍下Swift下的枚举的用法. 基本的枚举类型 来,二话不说,我们先贴一个最基本的枚举: enum Mo ...

  2. python基础-生成器

    生成器 概念:但凡在函数内部定义了一个yield,调用函数时,函数体代码不会执行,会返回一个结果,该结果就是生成器.本质上是迭代器,一个自定义的迭代器. # python内获取迭代器的方式 def i ...

  3. web项目中添加定时任务

    1.在web.xml中添加servlet <servlet> <servlet-name>StatisticInitServlet</servlet-name> & ...

  4. django获取数据queryset中的filter选项

    2.条件选取querySet的时候,filter表示=,exclude表示!=. querySet.distinct() 去重复__exact 精确等于 like 'aaa' __iexact 精确等 ...

  5. 【DRF框架】REST风格

    REST风格 表述性状态转移——web交互方案 目的 解决前后端交互的问题,开发效率高,简介,性能好 定义 资源:网上的所有信息或者很抽象的概念,在web中只要又被引用的必要都是资源 URI:统一资源 ...

  6. ISCC之msc1(签到题)

    V2VsbCBkb25lIQoKIEZsYWc6IElTQ0N7TjBfMG5lX2Nhbl9zdDBwX3kwdX0K Flag: ISCC{N0_0ne_can_st0p_y0u} 签到题 八进制 ...

  7. git 在本地备份与指定不需要管理文件

    git 在本地备份 备份文件夹操作 在本地备份文件夹克隆一个不带工作区的仓库: 哑协议: git clone --bare <workspace>/.git yourwork.git gi ...

  8. generator 和yeild

    参考 https://www.cnblogs.com/xybaby/p/6322376.html 使用yield那么该函数就变成了一个生成器方法. def zheng(n,m): if n<m: ...

  9. 《你说对就队》第九次团队作业：Beta冲刺与验收准备

    <你说对就队>第九次团队作业:Beta冲刺与验收准备 项目 内容 这个作业属于哪个课程 [教师博客主页链接] 这个作业的要求在哪里 [作业链接地址] 团队名称 <你说对就队> ...

  10. “只有DBA才能导入由其他DBA导出的文件”各种解决办法

    “只有DBA才能导入由其他DBA导出的文件”各种解决办法 当oracle导入的时候出现“只有 DBA 才能导入由其他 DBA 导出的文件”的时候通常有以下几种解决办法! 1:常见的是直接grant   ...