zoukankan      html  css  js  c++  java
  • 挖掘经典:几乎被人遗忘的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>   

    效果:

     

  • 相关阅读:
    【转】【Salesfoece】Salesforce 应用生命周期管理
    【Apex】【Salesfoece】Salesforce 的 package.xml 文件
    【转】【Salesfoece】Apex计划作业框架的实现--用于实现数据的定时自动处理。
    【转】【Salesfoece】Apex 的 Trigger 类简介
    【转】【Salesforce】提高 Visualforce 页面加载效率的小知识
    「这是啥」关于三维偏序
    Javaweb中PO BO VO DTO POJO DAO DO概念理解
    Python多进程、多线程及各自的适用场景
    基于LDA主题模型和SVM的文本分类
    理解accuracy/precision_score、micro/macro
  • 原文地址:https://www.cnblogs.com/netWild/p/1892418.html
Copyright © 2011-2022 走看看