html5中的fieldset/legend元素和keygen元素

一、总结

一句话总结：

fieldset/legend元素和figure和figcaption很像，只不过是作用于表单，前者表示内容，后者表示标题
keygen元素用来建立一个密钥生成器

1、keygen元素使用实例？

form中放<keygen name="mykey">后，会让你选择加密方式，后台会收到加密后的表单信息

2、fieldset/legend元素使用实例？

fieldset放在form中，legend放在fieldset中做标题，呈现的效果就是有边框，标题在边框上
<fieldset>

    <legend>用户注册</legend>

    用户名：<input type="text" name="name"><br>

    密码：<input type="password" name="password"><br>

    <input type="submit" value="确定">

</fieldset>

二、html5--3.20 新增的keygen元素

学习要点

  • 掌握fieldset/legend元素的用法（和figure和figcaption很像，只不过是作用于表单）
  • 了解keygen元素的用法
  • fieldset元素：可将表单内的相关元素分组。
  • 当一组表单元素放到fieldset标签内时，浏览器会以特殊方式来显示它们，通常会有一个边框。
  • 没有必需的或唯一的属性。form/disabled属性可用。
  • legend元素：为 fieldset 元素定义标题

学习要点

  • 了解keygen元素的用法
    • keygen元素
      • 是HTML5中新增的元素，用来建立一个密钥生成器
      • 当提交表单时，私钥存储在本地，公钥发送到服务器。主要作用是提供一种用户验证身份的方法
      • 使用时注意不同浏览器支持程度不同；目前Internet Explorer 和 Safari暂不支持
      • 因为涉及到服务器的一些知识，本节课我们近对该元素了解即可，和服务器相关的知识不在本套课程范围内。
    • keygen元素元素的属性：
      • name/form/autofocus/disabled
      • challenge属性:将 keygen 的值设置为在提交时询问。
      • keytype属性：定义密钥类型，如设置为rsa（一种密码的算法），则生成 RSA 密钥。

了解内容，非本课程内容，有兴趣的同学课下课自己查阅相关资料：RSA是目前最有影响力的公钥加密算法，它能够抵抗到目前为止已知的绝大多数密码攻击，已被ISO推荐为公钥数据加密标准。

实例

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 </head>

     <p style="color:#FF0000">

         掌握fieldset/legend元素的用法（和figure和figcaption很像，只不过是作用于表单）

     </p>

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

         <fieldset>

         <legend>用户注册</legend>

             用户名：<input type="text" name="name"><br>

             密码：<input type="password" name="password">

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

         </fieldset><br>

         keygen元素用法：<br>

         加密：<keygen name="mykey"><br>

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

     </form>

 <body>

 </body>

 </html>
 

html5中的fieldset/legend元素和keygen元素的更多相关文章

  1. HTML5中DOM元素的querySelector/querySelectorAll的工作机制

    在HTML5中,提供了强大的DOM元素选择API querySelector/querySelectorAll,允许使用JavaScript代码来完成类似CSS选择器的DOM元素选择功能.通常情况下, ...

  2. HTML5中a标签的锚点使用

    前几天有个用户问我关于在线手册功能里的锚点问题.因为他通过代码发现,在编辑手册内容时,锚点的设置是通过id选择器来制定的,而不是带有name属性的a标签.其实这是HTML5和HTML4(XHTML)等 ...

  3. HTML5中改变了哪些东西？

    HTML5 推出的理由 想要把目前web上存在的各种问题一并解决 Web浏览器之间的兼容性很低 文档结构不够明确 Web应用程序的功能受到了限制 HTML5重新定义了浏览器的统一标准 HTML5 与 ...

  4. html5，新增的元素，fieldset legend

    <form action="">    <fieldset>        <legend>用户注册</legend>       ...

  5. fieldset、legend、display html元素

    fieldset 定义和用法 fieldset 元素可将表单内的相关元素分组. <fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段. 当一组表单元素放到 <fi ...

  6. html5-fieldset和legend和keygen元素的用法

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  7. HTML5中已经不支持元素汇总，持续更新

    HTML5中已经不支持以下的元素,不建议在进行开发时再使用以下的元素. 1.acronym(建议abbr) : 定义首字母缩写 2.applet(建议object):  定义 applet 3.bas ...

  8. 第一章 用HTML5中的结构元素构建网站

    1.当一个容器需要直接定义样式或通过脚本定义行为时,推荐使用div元素而非section元素. 2.section是需要标题的,而nav或aside没有标题也是可以的. 3.html5轮廓工具 htt ...

  9. html5中新增的非主体结构的元素

    html5中出了新增了article.section.nav.aside.time主要结构元素外,还增加了一些表示逻辑结构或附加信息的非主体结构元素. 一.header元素 header元素是一种具有 ...

随机推荐

  1. python多进程间通信

    这里使用pipe代码如下: import time from multiprocessing import Process import multiprocessing class D: @stati ...

  2. centos 7.6 安装php70

    1.首先查看是否有老版本 yum list installed | grep php 2.如果安装的有,清除老版本 yum remove php.x86_64 php-cli.x86_64 php-c ...

  3. Android笔记（五十） Android中的JSON数据

    JSON是什么: JSON是轻量级的文本数据交换格式 JSON独立于语言和平台 JSON具有自我描述性,更容易理解 JSON语法: 数据在名称/值对中 数据由逗号分割 大括号表示对象 中括号表示数组 ...

  4. 蓝桥杯-入门训练 ：Fibonacci数列

    问题描述 Fibonacci数列的递推公式为:Fn=Fn-1+Fn-2,其中F1=F2=1.当n比较大时,Fn也非常大,现在我们想知道,Fn除以10007的余数是多少. 输入格式 输入包含一个整数n. ...

  5. 使用maven导入module时，报java.security.InvalidAlgorithmParameterException: the trustAnchors parameter must be non-empty

    在新装IDEA导入Flink源码时出现一些问题,在此记录,希望能帮到大伙! 一.环境 IDEA2019.1.2(破解版):OpenJDK 1.8.0_40:Maven 3.5.3/3.2.5/3.6. ...

  6. [IC]浅谈嵌入式MCU软件开发之中断优先级与中断嵌套

    转自:https://mp.weixin.qq.com/s?__biz=MzI0MDk0ODcxMw==&mid=2247483680&idx=1&sn=c5fd069ab3f ...

  7. 私有容器镜像仓库harbor

    私有镜像仓库Harbor 1.Harbor概述 Habor是由VMWare公司开源的容器镜像仓库.事实上,Habor是在Docker Registry上进行了相应的企业级扩展,从而获得了更加广泛的应用 ...

  8. zabbix4.2监控nginx

    项目环境: 操作系统 主机名 IP地址 Centos7.6 x86_64 zabbix-server 192.168.1.18 Centos7.6 x86_64 zabbix-client 192.1 ...

  9. cmd xcopy进行远程复制

    首先  win+R 打开cmd 1  目标远程服务器 查看共享的文件夹 net share 2 与远程建立连接 net use \\192.168.3.200\ipc$ Yhxwl123456 /us ...

  10. java计算两个经纬度之间的距离

    /** * 计算点 是否在一个固定点的半径范围内 * @2016年10月20日 * @param a 经度1 已知 * @param b 纬度1 已知 * @param x 经度2 * @param ...