挖掘经典:几乎被人遗忘的HTML七种用法 (转)

转来学习http://www.cnblogs.com/netWild/archive/2010/11/30/1892418.html

当今的WEB领域,新概念、新技术不断涌现 -- WEB2.0、AJAX、HTML5.0... ...

但在几乎被我们忽略的HTML和XHTML里,还有许多并不为人所知的,但却非常有用的一些TAG

以下就是其中的七种用法:

 


 

 

一、元素分组:<fieldset>、<legend>

示例:

  

1 <fieldset>   
2 <legend>健康信息:</legend>   
3 <form>   
4 <label>身高:<input type="text" /></label>   
5 <label>体重:<input type="text" /></label>   
6 </form>   
7 </fieldset>  

 

 

效果:


 

二、元素标注:<label>

示例:

  

1 <form>   
2   <label for="male">Male</label>   
3   <input type="radio" name="sex" id="male" />   
4   <br />   
5   <label for="female">Female</label>   
6   <input type="radio" name="sex" id="female" />   
7 </form> 

 

 

效果:


 

三、所有链接规定默认地址或默认目标:<base>

示例:

 

 1 <html>   
 2  <head>   
 3 <base href="http://www.w3school.com.cn/i/" mce_href="http://www.w3school.com.cn/i/" />   
 4 <base target="_blank" />   
 5 </head>   
 6   
 7 <body>   
 8 <img src="eg_smile.gif" mce_src="eg_smile.gif" /><br />   
 9 <p>请注意,我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准 URL,浏览器将在如下地址寻找图片:</p>   
10 <p>"http://www.w3school.com.cn/i/eg_smile.gif"</p>   
11   
12 <br /><br />   
13 <p><href="http://www.w3school.com.cn" mce_href="http://www.w3school.com.cn">W3School</a></p>   
14 <p>请注意,链接会在新窗口中打开,即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。</p>   
15   
16 </body>   
17 </html>  

 

 

 

四、上标与下标:<sup>、<sub>

示例:

  

1 <p>   
2 This text contains <sub>subscript</sub>   
3 </p>   
4   
5 <p>   
6 This text contains <sup>superscript</sup>   
7 </p> 

 

 

效果:

 

 

五、分层列表:<dl>、<dt>、<dd>

示例:

  

1 <dl>   
2   <dt>咖啡</dt>   
3   <dd>黑色的热饮料</dd>   
4   <dt>Milk</dt>   
5   <dd>白色的冷饮料</dd>   
6 </dl>

 

 

效果:

 

 

六、选项组:<optgroup>

示例:

  

 1 <select>   
 2   <optgroup label="Swedish Cars">   
 3     <option value="volvo">Volvo</option>   
 4     <option value="saab">Saab</option>   
 5   </optgroup>   
 6   <optgroup label="German Cars">   
 7     <option value="mercedes">Mercedes</option>   
 8     <option value="audi">Audi</option>   
 9   </optgroup>   
10 </select> 

 

 

效果:

 

 

七、图像映射:<map>

示例:

  

 1 <html>   
 2 <body>   
 3   
 4 <p>请点击图像上的星球,把它们放大。</p>   
 5   
 6 <img   
 7 src="/i/eg_planets.jpg"   
 8 border="0" usemap="#planetmap"   
 9 alt="Planets" />   
10   
11 <map name="planetmap" id="planetmap">   
12   
13 <area   
14 shape="circle"   
15 coords="180,139,14"   
16 href ="/example/html/venus.html"   
17 target ="_blank"   
18 alt="Venus" />   
19   
20 <area   
21 shape="circle"   
22 coords="129,161,10"   
23 href ="/example/html/mercur.html"   
24 target ="_blank"   
25 alt="Mercury" />   
26   
27 <area   
28 shape="rect"   
29 coords="0,0,110,260"   
30 href ="/example/html/sun.html"   
31 target ="_blank"   
32 alt="Sun" />   
33   
34 </map>   
35   
36 <p><b>注释:</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性(根据浏览器),所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>   
37   
38 </body>   
39 </html>   

 

 

效果:

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/465209.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

这种扯淡的嵌入式项目,尽量不要碰

第一种&#xff1a;画大饼的项目不接。有的客户会很热情的找到你&#xff0c;告诉你这个项目如何如何地有前途&#xff0c;产品研发成功了之后会有多么大的出货量&#xff0c;会有多么丰厚的利润&#xff0c;建议你一起跟他创业合作&#xff0c;成功了之后给你高额提成。但是产…

Linux编译内核出错怎么抓log,内核编译失败

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼.config:491:warning: trying to assign nonexistent symbol DEBUG_CROND_OPTION.config:506:warning: trying to assign nonexistent symbol FEATURE_LESS_FLAGCS.config:549:warning: trying to assign nonexistent symbol FEATU…

apache ignite系列(二):配置

ignite有两种配置方式&#xff0c;一种是基于XML文件的配置&#xff0c;一种是基于JAVA代码的配置&#xff1a; 这里将ignite常用的配置集中罗列出来了&#xff0c;一般建议使用xml配置。 1&#xff0c;基于XML的配置 <beans xmlns"http://www.springframework.org/sch…

高频面试题,malloc实现

面试官&#xff1a;你好&#xff0c;请先做自我介绍我&#xff1a;巴拉巴拉&#xff0c;我喜欢打篮球……面试官&#xff1a;请解释下malloc的实现原理我&#xff1a;我不会面试官&#xff1a;那就先这样&#xff0c;我们就不浪费大家的时间了。在开发c或c时&#xff0c;经常需…

单机版简易考试系统开发过程讲解(C#注册机、用户注册、考试系统、×××全部源码)...

前些日子有个朋友&#xff0c;找我做一个考试软件&#xff0c;浙江省驾驶员理论包考专用系统&#xff0c;总共也没几个页面需要做&#xff0c;但是他以前的数据库VFP的数据&#xff0c;题库里有几千条数据&#xff0c;若人工录入几乎比太可行&#xff0c;他把原来的软件&#x…

linux下usb调试工具,LINUX USB调试

LinuxUSB驱动程序调试&#xff1a;这是LinuxUSB驱动程序调试--003&#xff1a;Ubuntu下的准备工作的详细页面&#xff0c;介绍了和linux,有关的知识、技巧、经验&#xff0c;和一些linux源码等。Ubuntu下的准备工作&#xff1a;(1)如何查看内核中的printk输出&#xff1a; dmes…

CF 1025C Plasticine zebra

昨晚忘记判只有一个字符的情况fst了呜呜呜 挺有趣的题&#xff0c;昨晚连刚带猜弄出结论 考虑答案的取值&#xff0c;最优答案可能是一个后缀&#xff0c;或者是一个前缀&#xff0c;或者是一个后缀加上前缀 那么翻转之后最优答案的可选值就有了1的前缀n的后缀 对于一个合法的z…

嵌入式|这些年我都是怎么找兼职的?

‍‍‍‍1这篇文章是在上一篇文章之后写的&#xff0c;因为上篇文章写到了嵌入式找兼职的一些坑&#xff0c;下面有同学留言说要怎么找到兼职项目&#xff0c;所以这篇文章会写一些我的兼职经历还有总结建议&#xff0c;希望对大家如何找兼职有一些帮助。这篇文章是写第二次了&…

WCF 第五章 行为 实现事务(操作行为)

有两个场景一般用作事务的参考。多步骤商业过程是典型跨度分&#xff0c;天&#xff0c;月的长时间运行过程。它们可以涉及多个组织和基于人的工作流。短期运行事务是那些在几秒钟完成并很少有外部依赖的商业操作。尽管它们都有定义的很好的接口和确定的工作流&#xff0c;它们…

linux java的启动内存溢出,java - Java的R代码可在Linux上运行,但不能在Windows中运行 - 堆栈内存溢出...

我在做什么&#xff1f;我正在用Java编写一个数据分析程序&#xff0c;该程序依赖R的arulesViz库来挖掘关联规则。我想要什么&#xff1f;我的目的是将规则存储在Java中的String变量中&#xff0c;以便以后进行处理。它是如何工作的&#xff1f;该代码分别使用String.format和e…

这届毕业生薪资高,是真的

‍‍‍‍最近一份校招的薪资上了知乎的热搜榜。大家想查薪资的&#xff0c;可以用这个微信小程序offershow>查薪资的小程序<可以看到这个小程序可以查到的企业还挺多的&#xff0c;方便大家在选择工作谈薪资的时候做下参考。额&#xff0c;我这篇文章不是为了介绍这个小程…

心得 : 面向对象和面向过程的区别【分享】

面向对象&#xff1a;用线性的思维。与面向过程相辅相成。在软件开发过程中&#xff0c;宏观上&#xff0c;用面向对象来把握事物间复杂的关系&#xff0c;分析系统。微观上&#xff0c;仍然使用面向过程。 “面向过程”是一种是事件为中心的编程思想。就是分析出解决问题所需的…

linux 系统监控脚本

Linux下性能预警及应急处理 自己编写一个脚本程序&#xff0c;该程序在工作时段&#xff08;8&#xff1a;00-22&#xff1a;00&#xff09;&#xff0c;每隔一个小时执行一次&#xff1b;在其他时段每隔两小时执行一次。 每次执行都要完成如下任务&#xff1a; 1、检测进程CPU…

这辆迷你摩托车,很酷!

摘要&#xff1a;平衡小车大家应该见到过很多了&#xff0c;比如最有名的要数野生钢铁侠稚晖君的自行车平衡小车了。那个玩意太高级一般人做不出来&#xff0c;作为学生或者DIY爱好者做一辆小型的mini平衡小车还是可以实现的。随着16届恩智浦杯全国大学生智能汽车大赛新增单车拉…

自测题

什么是硬件&#xff1f;什么是软件&#xff1f; 硬件是看得见摸得着东西&#xff0c;软件是数据程序 电脑常见的硬件有&#xff1a;主板、机箱、CPU、内存条、硬盘、光驱、显示器、键盘、鼠标等&#xff1b; 电脑的软件有很多&#xff0c;像windows系统&#xff0c;office系列…

linux errno 线程,Linux errno 错误对照表

errno 在 中定义&#xff0c;错误 Exx 的宏定义在 /usr/include/asm-generic 文件夹下面的 errno-base.h 和 errno.h&#xff0c;分别定义了 1-34 、35-132 的错误定义。strerror() 函数依据 errno 值返回错误描述字符串&#xff0c;下面程序打印对照表&#xff1a;Code highli…

如何当好独立CIO(1)

如何当好独立CIO(1)出处:信息方略 文: 刘少东 评论( 0 )条 论坛 博客导读&#xff1a;独立CIO一般有比较丰富的信息化管理经历&#xff0c;具有新的想法和思路&#xff0c;视野也更加开阔&#xff0c;能够以局外人的身份冷静、客观地分析企业战略&#xff1b;同时&#xff0c;这…

提高单片机设计的10个细节

前言1 干扰对单片机应用系统的影响1.1测量数据误差加大1.2 控制系统失灵1.3 影响单片机RAM存储器和E2PROM等1.4 程序运行失常2 如何提高我们设备的抗干扰能力2.1 解决来自电源端的干扰2.2 模拟信号采样抗干扰技术2.3 数字信号传输通道的抗干扰技术2.4 硬件监控电路2.5 PCB电路合…

bzoj 2653 洛谷 P2839 [国家集训队] middle

2653: middle Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 2381 Solved: 1340[Submit][Status][Discuss]Description 一个长度为n的序列a&#xff0c;设其排过序之后为b&#xff0c;其中位数定义为b[n/2]&#xff0c;其中a,b从0开始标号,除法取下整。给你一个长度为n的序…

linux统计单拷贝基因家族,为什么要进行基因家族分析?

原标题&#xff1a;为什么要进行基因家族分析&#xff1f;某物种基因组被测序后&#xff0c;大部分课题组都会发表一些基因家族分析的文章&#xff0c;此举常常被误解为“灌水”&#xff0c;其实不然&#xff0c;理清基因组内基因家族成员分类组成&#xff0c;是挖掘和物种特性…