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>   

    效果:

     

  • 相关阅读:
    UVA12125 March of the Penguins (最大流+拆点)
    UVA 1317 Concert Hall Scheduling(最小费用最大流)
    UVA10249 The Grand Dinner(最大流)
    UVA1349 Optimal Bus Route Design(KM最佳完美匹配)
    UVA1212 Duopoly(最大流最小割)
    UVA1395 Slim Span(kruskal)
    UVA1045 The Great Wall Game(二分图最佳匹配)
    UVA12168 Cat vs. Dog( 二分图最大独立集)
    hdu3488Tour(KM最佳完美匹配)
    UVA1345 Jamie's Contact Groups(最大流+二分)
  • 原文地址:https://www.cnblogs.com/leeolevis/p/1893337.html
Copyright © 2011-2022 走看看