挖掘经典:几乎被人遗忘的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><a 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>效果:
挖掘经典:几乎被人遗忘的HTML七种用法 (转)相关推荐
- 五个经典故事讲述人脉经营全攻略
五个经典故事讲述人脉经营全攻略 [案例]:广东私企老板自费读中央党校渐成时尚 到中央党校学习,已成为广东私企老板的一种时尚.羊城晚报消息,记者从2005年12月25日结束的广东非公有制经济 ...
- 每日思考第 76 期:真正的死亡是被人遗忘
每日思考 专栏每周日更新,本期覆盖 20210426~20210502. 本期分享我这周的所思所想所见所闻. 210426:为什么人们很少质疑自己的看法 人们普遍存在一个认知缺陷,喜欢接受和自己假设相 ...
- 艾伟:一个让人遗忘的角落—Exception(二)
在上一篇中"一个被人遗忘的角落"中,跟大家简单介绍了一下Exception,也使大家充分的了解了Exception管理在一个项目中的重要性,那如何在我们的项目中处理异常呢?因为我从 ...
- 被人遗忘的绝美城市,鸟语花香,去一次就爱上
中国一直以来,被分为南北城市,南方城市给人的感觉是温文尔雅,而北方给人的感觉则是粗犷,当然也有一些城市较为独特,地理位置较为尴尬,融合了北方和南方的气候.相比之下很多人更喜欢南方城市,像是一个温和的姑 ...
- 欧美 手机ios android,全球第3大手机系统,比安卓IOS都流畅,却逐渐被人遗忘!...
全球第3大手机系统,比安卓IOS都流畅,却逐渐被人遗忘! 有很多的人在购买手机的时候,最看重的一点就是在于手机内部所搭载的处理器,因为他们认为一款手机的处理器决定了一款手机的流畅度和游戏性能,其实关系 ...
- 高贵灰html设计,设计时代 经典案例 | 极简水泥灰,一种高贵的朴素
原标题:设计时代 经典案例 | 极简水泥灰,一种高贵的朴素 混凝土显示的是一种最本质的美感 体现的是"素面朝天"的品位 我们通常把素混凝土俗称为"水泥墙" 它具 ...
- 解读经典《C#高级编程》第七版 Page32-38.核心C#.Chapter2
前言 接下来讲讲预定义数据类型.关于数据类型,其实是非常值得透彻研究的. 01 预定义数据类型 值类型和引用类型 C#将把数据类型分为两种,值类型和引用类型,值类型存储在堆栈上,引用类型存储在托管堆上 ...
- git 只merge部分_[Skill]俩小时掌握多人开发中git的主要用法
前言 几个月前看完了git文档,但是在实际开发中对很多git命令的具体影响仍有疑惑,比方说pull.fetch和rebase三个命令和检出位置拎不清. Git - Bookgit-scm.com 安 ...
- 高度不定垂直居中_经典:CSS垂直居中的七种方法
点击上方"程序员黑叔",选择"置顶或者星标" 你的关注意义重大! 作者: 来自互联网 我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处 ...
最新文章
- Nucleus 实时操作系统中断(下)
- 【转】贴片电阻的工作寿命
- Quartz整合Spring
- linux系统sql语句报错_如果数据库管理工具1045错误出现在Linux系统中怎么
- case when then else多个条件_CentOS「linux」学习笔记24:if和case多个条件判断
- Django框架(19.Django中获取url的参数(位置参数以及关键字参数))
- Cluster模式潜在问题及解决方案、Web服务综合解决方案
- Linux(1)-CentOS7下解决ifconfig command not found
- 数据异常值分析和处理
- 关于编译错误ambiguous call of overridden pre R14 auto-imported BIF get/1
- ajax post forbidden,解决 Ajax 发送 post 请求出现 403 Forbidden 的三种方式
- OpenMeetings(3)----启动顺序解析
- 安卓设备TF卡概率性无法识别问题
- 应用架构COLA 2.0
- 操作系统——linux
- 用上office365后配合RaiDrive效率如何提高
- .NET c#音乐播放器
- Unfair Tournament
- 数字经济商学院开班仪式成功举行 创新社《筱静观察》倾情支持
- 让大数据落地的正确姿势
热门文章
- python外卷(12)-sort(),sorted(),ord(),chr()
- python(16)-列表list,for循环
- php ajax队列,AJAX请求队列实现
- python顺序结构实验报告_Python 数据结构 之 串 的顺序存储结构
- 程序员赚钱致富的6种方法
- Linux 常用命令
- jenkins 执行构建 并查看结果
- 记录A component required a bean named ‘studentService‘ that could not be found.
- 在DOS命令行执行MYSQL语句
- [51nod1773]A国的贸易