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

学习要点

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

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

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

 

学习要点

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

实例

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

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

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

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

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

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

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

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

         <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>

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

     </form>

 </body>

 </html>

html5--3.21 课程小结与其他新增元素的更多相关文章

  1. html5--1.20 课程小结与若干点补充

    html5--1.20 课程小结与若干点补充 学习要点: 1.第一章HTML5基础知识做一个小结2.对本章课程中部分内容做几点补充 课程小结 对本章的知识点做一个简单的回顾,并对其中个别知识点做若干补 ...

  2. 7-81 js课程小结

    7-81 js课程小结 学习要点 理解全局对象 变量的作用范围 理解全局对象Global 全局属性和函数可用于所有内建的 JavaScript 对象.全局对象是所有全局方法的拥有者,用来统一管理全局方 ...

  3. 【转】HTML5新增元素兼容旧浏览器方法

    ref:http://www.jb51.net/html5/163906.html 问题:如何让IE8-兼容这些标签?(需要设计JS中的DOM) 代码如下: <span style=" ...

  4. HTML5表单新增元素与属性

    form属性 在html4中,表单的从属元素必须写在表单内部,而在HTML5中,可以把他们书写在任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了. ...

  5. HTML5 新增元素梳理

    HTML5新增元素如下图: <canvas> 新元素 <canvas> 标签定义图形,比如图表和其他图像,该标签基于javascript的绘图api 新多媒体元素 <au ...

  6. HTML5新增元素和移除的元素？

    新增元素: 图像Canvas 多媒体video.audio 本地存储localStorage.sessionStorage 语义化更好的内容元素aticle.header.footer.nav.sec ...

  7. html5 新增元素以及css3新特性

    HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签 描述 <article> 定义页面独立的内容区域. <aside> 定义页面的侧边栏内 ...

  8. 使用HTML5的JS选择器操作页面中的元素

    文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> ...

  9. 关于新增元素使用jQuery on()方法重复绑定的问题

    最近写ajax新增元素button绑定click事件的时候发现元素重新添加进来的时候会多执行一次事件函数,找了半天,怀疑是on()的问题,于是测试了一下,果然是因为on()的使用方式造成了有的新增元素 ...

随机推荐

  1. BT网络中DHT和UPnp的解释（转）

    DHT 类似Tracker的根据种子特征码返回种子信息的网络.DHT全称叫分布式哈希表(Distributed Hash Table),是一种分布式存储方法.在不需要服务器的情况下,每个客户端负责一个 ...

  2. Shadow Map阴影贴图技术之探 【转】

    这两天勉勉强强把一个shadowmap的demo做出来了.参考资料多,苦头可不少.Shadow Map技术是目前与Shadow Volume技术并行的传统阴影渲染技术,而且在游戏领域可谓占很大优势.本 ...

  3. 判断用户Input输入的事件来进行登陆

    我们是通过键盘按的object.keyCode获取的 Html <input onkeydown="keydownMsg(event)" type="text&qu ...

  4. pascals-triangleI、II——生成规律的三角形

    1.Given numRows, generate the first numRows of Pascal's triangle. For example, given numRows = 5,Ret ...

  5. vs附加到多个进程调试

    我们用vs调试,通常附加到一个进程进行调试,有时候需要同时附加到多个进程. 例如:同时调试客户端与服务端,我们需要同时附加到客户端与服务端进程. 按F5(执行)键调试,程序只要遇到断点就中断. 按F1 ...

  6. [C#]使用 C# 代码实现拓扑排序 dotNet Core WEB程序使用 Nginx反向代理 C#里面获得应用程序的当前路径 关于Nginx设置端口号，在Asp.net 获取不到的，解决办法 .Net程序员 初学Ubuntu ，配置Nignix 夜深了，写了个JQuery的省市区三级级联效果

    [C#]使用 C# 代码实现拓扑排序   目录 0.参考资料 1.介绍 2.原理 3.实现 4.深度优先搜索实现 回到顶部 0.参考资料 尊重他人的劳动成果,贴上参考的资料地址,本文仅作学习记录之用. ...

  7. CSS盒模型之三角形

    W3上介绍盒模型: 这里教程,但是太过于简单了,http://www.w3.org/community/webed/wiki/CSS/Training/Box_model. 如图,盒模型和背景属性控制 ...

  8. Swift高阶函数介绍（闭包、Map、Filter、Reduce）

    Swift语言有非常多函数式编程的特性.常见的map,reduce,filter都有,初看和python几乎相同,以下简介下 闭包介绍: 闭包是自包括的功能代码块,能够在代码中使用或者用来作为參数传值 ...

  9. idea分支合并

    1.切换到指定分支(例如dev) 2.点击master的merge进行合并 注意:最好删掉本地的master和dev然后重新拉下远程的master和dev生成最新的本地master和dev

  10. python中if __name__ == '__main__': 的解析（转载）

    当你打开一个.py文件时,经常会在代码的最下面看到if __name__ == '__main__':,现在就来介 绍一下它的作用. 模块是对象,并且所有的模块都有一个内置属性 __name__.一个 ...