HTML 用法

矫情吗；* 2021-12-16 19:25 253阅读 0赞

**一、元素分组：<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 > 
> 
> 效果：
> 
> ![1.gif][]  
>

**二、元素标注：<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 > 
> 
> 效果：
> 
> ![2.gif][]  
>

**三、所有链接规定默认地址或默认目标：<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 > 
> 
> 效果：
> 
>  ![4.gif][]

**五、分层列表：<dl>、<dt>、<dd>**

> 示例：
> 
> 1 < dl >   
>  2  < dt > 咖啡 </ dt >   
>  3  < dd > 黑色的热饮料 </ dd >   
>  4  < dt > Milk </ dt >   
>  5  < dd > 白色的冷饮料 </ dd >   
>  6  </ dl >
> 
> 效果：
> 
>  ![5.gif][]

**六、选项组：<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 > 
> 
> 效果：
> 
>  ![6.gif][]

**七、图像映射：<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 > 
> 
> 效果：
> 
>  ![7.gif][]

转载于:https://www.cnblogs.com/dgjack/archive/2011/05/22/2053471.html

[1.gif]: /images/20211216/535e6a76f2314774bf13d3e66a784451.png
[2.gif]: /images/20211216/c16b515a7e734594931c312ea276bec9.png
[4.gif]: /images/20211216/b5647f6a2f8242938a46fe2e02137dca.png
[5.gif]: /images/20211216/f58bacd1dba8459f8e598f9b5ef1d855.png
[6.gif]: /images/20211216/8022c8d27e934e8593f13bad646c4a63.png
[7.gif]: /images/20211216/7bd5470441734b3caa4addcb65116ffb.png