HTML标签拾遗

    在日常的开发过程中，经常与HTML标签打交道，常用的标签往往是那么几个，在此记录下后续可能会用到的html标签，或许会有意向不到的奇效。全部内容来自w3cschool。

• <abbr>    

　　<abbr> 标签指示简称或缩写，比如 "WWW" 或 "NATO"。

　　通过对缩写进行标记，您能够为浏览器、拼写检查和搜索引擎提供有用的信息。

　　可以用于快速的建立文字的提示信息。

• <area>

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>

 

        <area> 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。

        area 元素总是嵌套在 <map> 标签中。

        注释：<img> 标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。

        注释：<img> 中的 usemap 属性可引用 <map> 中的 id 或 name 属性（由浏览器决定），所以我们需要同时向 <map> 添加 id 和 name 两个属性。

         可以用于快速的建立针对不同区域的不同链接转向。

 

• <del> <ins>
  

          del 定义文档中已被删除的文本。 ins定义文档中已被插入的问题（下划线）.

        用样式可以解决这个问题，但是对于个别使用的时候可以考虑使用标签解决。

 

• <fieldset>

        fieldset 元素可将表单内的相关元素分组。

        <fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。

        当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

        

<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form>

        效果如图：

        

        可以将查询框、输入框的内容隔离出来，更好的显示效果。

 

• <hr>

　　<hr> 标签在 HTML 页面中创建一条水平线。

　　水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。

　　

　　 便捷的添加横线区分段落。

 

• <ol>,<ul>

        <ol> 标签定义有序列表。五种类型，通过type来定义，分别是1,A,a,I,i,对应于数字，大小写字母，大小写罗马字母

        <ul> 标签定义无序列表。

         便捷的添加标号。

 

• <optgroup>

　　<optgroup> 标签定义选项组。

　　optgroup 元素用于组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。

<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

　　其展示效果：

　　能够将下拉框条件更清晰的展示出来。

 

• <sup>    <sub>
  

    上下标标签，常用于数学公式，效果如下：

    

     便于显示数学等式、科学符号和化学公式等。

 

            

 

转载于:https://www.cnblogs.com/dengtianlang/p/6256287.html