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. mysql学习之基础篇05

    mysql中的统计函数: 1. 查询商品价格中最高的价格: select max(shop_price) from goods; 2. 查询商品价格中最低的价格: select min(shop_pr ...

  2. HTML&CSS基础-属性选择器

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

  3. k8s安装之prometheus.yaml

    这个系列的东东满多的.要另开系列说明. 这里为了内容连续完成,先贴一个吧,其它configmap,exporter就不展示. 为了保持统一,将prometheus也放到二级目录了. - '--web. ...

  4. 微信小程序使用本地图片在真机不显示的问题

    最近做的小程序,在真机测试发现有些本地图片在开发工具上可以显示,但是在真机上预览的时候不能显示 代码是这样写的 <view class='seat-size' wx:for="{{it ...

  5. 牛客NOIP暑期七天营-普及组1 解题报告

    A 对于\(100\%\),直接开个桶统计即可.入门题目. 代码:https://ac.nowcoder.com/acm/contest/view-submission?submissionId=41 ...

  6. AI文本审核垃圾内容

    今天无意获得一个AI的文本审核的API,基于深度学习及大规模样本训练的人工智能文本审核技术,一站式准确  检测识别文本中夹杂的色情.推广.辱骂.违禁违法等垃圾内容,净化 网络环境,为您的应用提供更可靠 ...

  7. Union-Find(并查集): Union-Find Application

    Union-find 可以应用在很多方面 之前我们看到了union-find在dynamic connectivity上的应用,接下来介绍它在percolation上的应用. union-find在K ...

  8. C#使用托管程序连接Oracle数据库(Oracle.ManagedDataAccess.dll)

    一.概述 Oracle Data Provider for  .NET, Managed Driver: Oracle官方的托管数据库访问组件,单DLL,Oracle.ManagedDataAcces ...

  9. 行为型模式(九) 访问者模式（Visitor）

    一.动机(Motivate) 在软件构建过程中,由于需求的改变,某些类层次结构中常常需要增加新的行为(方法),如果直接在基类中做这样的更改,将会给子类带来很繁重的变更负担,甚至破坏原有设计.如何在不更 ...

  10. Visual Studio 2017 许可证已过期解决方案

    1.卸载并重安VS2017 2.安装后打开VS2017,点击帮助=>注册产品,输入序列号NJVYC-BMHX2-G77MM-4XJMR-6Q8QF(企业版), KBJFW-NXHK6-W4WJM ...