zoukankan      html  css  js  c++  java
  • html5学习系列之klm类标签

    一、旧标签:

    (1)<kbd>标签

    作用:定义键盘文本,已经被废弃。

    (2)<label>标签

    作用:为inout元素定义标注,特别之处在于它为鼠标用户改进了可用性,如果用户在label元素内点击文本就会触发此控件。就是说,当用户选中该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。

    <label>标签的for属性应当与相关元素的id属性相同

    属性:for :规定与哪个表单元素绑定

    form: form_id 规定label字段所属的一个或多个表单。

    (3)<legend>标签

    作用:为<fieldset>定义标题

    (4)<li>标签

    html有两种列表:一个是有序列表(ol),一个是无序列表(ul)

    li就是定义里面的列表项目的,也可以在menu中使用(菜单列表)

    (5)<link>标签

    作用:定义文档与外部资源的关系,最常见的用途是链接样式表,只存在于head部分。

    (6)<map>标签

    作用:用于客户端图像映射,图像映射指带有可点击区域的一副图像。

    <img>中的usemap属性可引起<map>的id或name,所以应同时向<map>添加id和name属性

    area 元素永远嵌套在map元素内部,area元素可定义图像映射中的区域。

    (7)<meta>标签

    作用:metadata是数据的数据信息,提供html文档的元数据,元数据不会显示在客户端,当时会被浏览器解析。通常用于指定网页的描述,关键词,作者和其他。

    二、新标签:

    (1)<keygen>标签

    作用:规定用于表单的密钥对生成器字段,当提交表单时,私钥存储在本地,公钥发送到服务器。

    属性:

    autofocus : 值为autofocus 自动获取焦点

    challenge :值为challenge 如果使用的化则将kyegen的值设置为在提交时询问

    disable: disabled 是否禁用

    form: form_id 定义该<keygen>字段所属的一个或多个表单

    keytype: 值为rsa/dsa/ec 定义密钥的安全算法。

    name:唯一名称

    (2)<mark>标签

    作用:定义带有记号的文本。要突出显示文本时使用<mark>标签

    (3)<meter>标签

    作用:定义度量衡,仅用于已知最大和最小值的度量。

    属性: form: form_id 定义该<meter>字段所属的一个或多个表单

    high: number 界定为高的值的范围

    low: number 界定为低的值的范围

    max:number 规定最大值

    min: number 规定最小值

    optimum:number 规定最优值

    value:number 必需  当前值

    三、涉及到的示例代码:

    <!DOCTYPE HTML>
    <html>
    	<head>
    		<title>Html学习系列之klm类标签</title>
    		<!--meta标签-->
    		<meta charset='UTF-8'>
    		<!--link标签-->
    		<link rel="stylesheet" type="text/css" href="theme.css">
    	</head>
    	<body>
    		<!--keygen标签-->
    		<form action="demo_keygen.jsp" method="get">
    			用户名:<input type="text" name="user_name"><br>
    			加密:<keygen name="security">
    			<br>
    			<input type="submit" value="submit">
    		</form>
    		<!--label标签-->
    		<form>
    			<label for="male">Male</label>
    			<input type="radio" name="sex" id="male" value="male"><br>
    			<label for="female">Female</label>
    			<input type="radio" name="sex" id="female" value="female"><br>
    		</form>
    		<!--legend标签-->
    		<form>
    			<fieldset>
    				<legend>PersonalInfo</legend>
    				Name:<input type="text"><br>
    				Email:<input type="text"><br>
    
    			</fieldset>
    		</form>
    		<ol>
    			<li>Coffee</li>
    			<li>Tea</li>
    			<li>Milk</li>
    		</ol>
    		<ul>
    			<li>Coffee</li>
    			<li>Tea</li>
    			<li>Milk</li>
    		</ul>
    		<!--map标签-->
    		<p>点击太阳或其他行星,注意变化:</p>
    
    		<img src="images/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
    
    		<map name="planetmap">
    		  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.html">
    		  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.html">
    		  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.html">
    		</map>
    		<!--mark标签-->
    		<p>Don't forget to buy <mark>Milk</mark> today</p>
    
    		<!--meter标签-->
    		<meter value="2" min="0" max="10">2 out of 10</meter><br>
    		<meter value="0.6">60%</meter>
    	</body>
    </html>
    

      

  • 相关阅读:
    MongoDB repair on Ubuntu
    java后台图形相关代码,weblogic报错
    weblogic配置达梦数据源
    详解JavaScript中的this
    web app指南之构建html5离线应用
    android中的跨进程通信的实现(一)——远程调用过程和aidl
    android应用开发全程实录出版
    android窗口管理框架解析
    BizTalk调用SAP系统RFC含多个参数以及DateTime类型参数
    plsql连接64位oracle在windows 764下连接设置方法
  • 原文地址:https://www.cnblogs.com/Gabby/p/5372637.html
Copyright © 2011-2022 走看看