html5--3.21 课程小结与其他新增元素
html5--3.21 课程小结与其他新增元素
学习要点
- 了解新增的input属性pattern
- 其他几个新增元素（非表单中元素，但是也放在这里讲解）
- 新增的input属性pattern：设定输入类型的正则表达式;关于正则表达式的内容将在后续javascript的课程中进行讲解，暂时稍作了解即可
以下几个元素虽然放在表单这一章来讲，并非表单中的元素
- 目前所有主流浏览器都不支持的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 课程小结与其他新增元素的更多相关文章
- html5--1.20 课程小结与若干点补充
html5--1.20 课程小结与若干点补充 学习要点: 1.第一章HTML5基础知识做一个小结2.对本章课程中部分内容做几点补充 课程小结 对本章的知识点做一个简单的回顾,并对其中个别知识点做若干补 ...
- 7-81 js课程小结
7-81 js课程小结 学习要点 理解全局对象 变量的作用范围 理解全局对象Global 全局属性和函数可用于所有内建的 JavaScript 对象.全局对象是所有全局方法的拥有者,用来统一管理全局方 ...
- 【转】HTML5新增元素兼容旧浏览器方法
ref:http://www.jb51.net/html5/163906.html 问题:如何让IE8-兼容这些标签?(需要设计JS中的DOM) 代码如下: <span style=" ...
- HTML5表单新增元素与属性
form属性 在html4中,表单的从属元素必须写在表单内部,而在HTML5中,可以把他们书写在任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了. ...
- HTML5 新增元素梳理
HTML5新增元素如下图: <canvas> 新元素 <canvas> 标签定义图形,比如图表和其他图像,该标签基于javascript的绘图api 新多媒体元素 <au ...
- HTML5新增元素和移除的元素？
新增元素: 图像Canvas 多媒体video.audio 本地存储localStorage.sessionStorage 语义化更好的内容元素aticle.header.footer.nav.sec ...
- html5 新增元素以及css3新特性
HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签 描述 <article> 定义页面独立的内容区域. <aside> 定义页面的侧边栏内 ...
- 使用HTML5的JS选择器操作页面中的元素
文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> ...
- 关于新增元素使用jQuery on()方法重复绑定的问题
最近写ajax新增元素button绑定click事件的时候发现元素重新添加进来的时候会多执行一次事件函数,找了半天,怀疑是on()的问题,于是测试了一下,果然是因为on()的使用方式造成了有的新增元素 ...
随机推荐
- nginx和php通信
#启动php-fpm服务 #配置nginx.conf worker_processes ; worker_rlimit_nofile ; worker_cpu_affinity ; #error_lo ...
- SQL-基础学习2--ORDER BY ,DESC，WHERE, BETWEEN,AND ,OR ,IN ,NOT
所使用的数据库资料在:数据库资料 第三课:排序检索数据 3.1 排序数据 按单列排序 如果不排序,数据一般将以它在底层表中出现的顺序显示,这有可能是数据最初添加到表中的顺序.但是,如果数据随后进行 ...
- [Python-tools]defaultdict的使用场景
Python标准库中collections对集合类型的数据结构进行了非常多拓展操作.这些操作在我们使用集合的时候会带来非常多的便利.多看看非常有优点. defaultdict是当中一个方法,就是给字典 ...
- CloudStack管理VMware遇到的问题
话说前段安装了CloudStack并使用它来管理XenServer,这回要用它来管理VMware.虽说之前遇到了大大小小的问题都攻克了,但在VMware这一块还是遇到了一些麻烦. 在创建资源域.加入集 ...
- C++静态库与动态库深入研究
什么是库 库是写好的现有的,成熟的,可以复用的代码.现实中每个程序都要依赖很多基础的底层库,不可能每个人的代码都从零开始,因此库的存在意义非同寻常. 本质上来说库是一种可执行代码的二进制形式,可以被操 ...
- 关于C++ 命名空间Namespace 的解析
使用命名空间的目的是对标识符的名称进行本地化,以避免命名冲突.在C++中,变量.函数和类都是大量存在的.如果没有命名空间,这些变量.函数.类的名称将都存在于全局命名空间中,会导致很多冲突.比如,如果我 ...
- Linux基础（4）-硬盘分区、格式化及文件系统的管理、软件包的管理、yum管理RPM包和python的源码安装
一: 1) 开启Linux系统前添加一块大小为15G的SCSI硬盘 2) 开启系统,右击桌面,打开终端 3) 为新加的硬盘分区,一个主分区大小为5G,剩余空间给扩展分区,在扩展分区上划分1个逻辑 ...
- 【每日Scrum】第八天（4.29） TD学生助手Sprint2
站立会议 组员 今天 签到 刘铸辉 (组长) 绩效考核 Y 刘静 测试用例书写 测试bug报告 测试详细报告 Y 解凤娇 Y 王洪叶 项目可行性报告 项目开发计划书 需求分析(已完成并发布) Y 胡宝 ...
- AMD单双桥时序简叙
芯片组(双桥)时序 VBAT :RTC电路的供电3V(RTC电路有问题会导致没复位或不跑码等故障) RTCCLK :晶振起振给南桥提供32.768KHz频率(RTC电路有问题会导致没复位或不跑码等故障 ...
- centos创建本地yum仓库
怎样发布自己软件的安装和更新YUM源 在创建之前,我们先了解些相关的内容: yum仓库可以支持三种途径提供给yum在安装的时候下载rpm包 第一种: ftp服务 ftp:// 第二种: http ...