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

冷不防 2021-09-20 11:08 245阅读 0赞

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

### 学习要点 ###

*  了解新增的input属性**pattern**
 *  其他几个新增元素（非表单中元素，但是也放在这里讲解）

--------------------

1.  1.  新增的input属性**pattern**：设定**输入类型**的**正则表达式**;关于正则表达式的内容将在后续javascript的课程中进行讲解，暂时稍作了解即可
    2.  以下几个元素虽然放在表单这一章来讲，并非表单中的元素

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

** **

*  details/summary元素也是两个新增的元素，浏览器支持程度相对前两个较好，且用处较广，我们对其进行相对详细的解

### 学习要点 ###

*  掌握**details**/**summary**元素的用法

--------------------

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

### 实例 ###

![1163900-20171204101642638-1515218233.png][]

![1163900-20171204101725310-920313151.png][]

![1163900-20171204101813513-2059665147.png][]

![1163900-20171204101949294-1488901044.png][]

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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>

转载于:https://www.cnblogs.com/Renyi-Fan/p/7970667.html

[1163900-20171204101642638-1515218233.png]: /images/20210726/931e5b2278ea45fe8ba341e21372b810.png
[1163900-20171204101725310-920313151.png]: /images/20210726/df0160122cae47088c1c1bfbc2ece598.png
[1163900-20171204101813513-2059665147.png]: /images/20210726/9b58c39ae83c4e01816572fd43ad6e55.png
[1163900-20171204101949294-1488901044.png]: /images/20210726/2abff626ba7b486caecec93823506d29.png
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20210726/78a81341d6e84ff79d61a9e72459f63b.png