那些不熟悉但有趣的html元素大搜罗--源自W3School

来源：互联网发布：注册淘宝账号需要什么编辑：程序博客网时间：2024/06/02 02:39

a系列

abbr：缩写

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

效果示例：http://www.w3school.com.cn/tiy/t.asp?f=html_abbr

acronym：首字母缩写

<acronym title="World Wide Web">WWW</acronym>

area：带有可点击区域的图像映射，和图像上的位置相对应。
注意：area 元素总是嵌套在 map 标签中。
img 标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。

<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>这里写代码片

栗子：http://www.w3school.com.cn/tiy/t.asp?f=html_areamap

b系列

base

<head><base href="http://www.w3school.com.cn/i/" /><base target="_blank" /></head><body><img src="eg_smile.gif" /><a href="http://www.w3school.com.cn">W3School</a></body>

base标签为页面上的所有链接规定默认地址或默认目标。因此在上面这个例子中，img的真正获取地址为：http://www.w3school.com.cn/i/eg_smile.gif，而链接会以新窗口的方式打开（因为base规定了target=”_blank”）

bdo：文字方向

如下这段文字将是从右向左书写

<bdo dir="rtl">Here is some text</bdo>

blockquote：标记长引用，它是一个块级元素，标签之内的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。

br：换行

<p>To break<br />lines<br />in a<br />paragraph,<br />use the br tag.</p>

c系列

caption：为表格定义标题

<table border="1">  <caption>Monthly savings</caption>  <tr>    <th>Month</th>    <th>Savings</th>  </tr>  <tr>    <td>January</td>    <td>$100</td>  </tr></table>

code：它是一个短语元素，定义了计算机代码文本。
同样也是短语元素的标签包括：em strong dfn samp kbd var cite
这些短语元素会在显示时呈现特殊的样式，并且，都具有各自确切的语意。
em：把文本定义为强调的内容。
strong：把文本定义为语气更强的强调的内容。
dfn：定义一个定义项目。标记那些对特殊术语或短语的定义。
code：定义计算机代码文本。
samp：定义样本文本。
kbd：定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
var：定义变量。您可以将此标签与 pre及 code 标签配合使用。
cite：定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。

d系列

datalist：为input提供可选值

<input id="myCar" list="cars" /><datalist id="cars">  <option value="BMW">  <option value="Ford">  <option value="Volvo"></datalist>

注意，Internet Explorer 和 Safari不支持datalist。

dl/dt/dd
定义列表／定义列表条目的标题／定义列表条目的具体定义

<dl>   <dt>计算机</dt>   <dd>用来计算的仪器 ... ...</dd>   <dt>显示器</dt>   <dd>以视觉方式显示信息的装置 ... ...</dd></dl>

del：被划去的文字

a dozen is <del>20</del> 12 pieces

可以和ins标签配合使用，ins标签标示新插入的部分。

a dozen is <del>20</del> <ins>12</ins> pieces

e系列

embed：定义嵌入的内容，比如插件。

<embed src="helloworld.swf" />

f系列

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

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

<form>  <fieldset>    <legend>person information</legend>    name: <input type="text" />    sex: <input type="text" />  </fieldset>  <fieldset>    <legend>health information</legend>    height: <input type="text" />    weight: <input type="text" />  </fieldset></form>

figure/figcaption
文档中的图片／图片的标题
注意：”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

<figure>  <figcaption>黄浦江上的的卢浦大桥</figcaption>  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /></figure>

h系列

hr：水平分割线

<p>hr 标签定义水平线：</p><hr /><p>段落1</p><hr /><p>段落2</p><hr /><p>段落3</p>

k系列

keygen：表单元素，规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。

Internet Explorer 和 Safari不支持keygen。

l系列

label：为input标签定义标注。
abel 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

演示：http://www.w3school.com.cn/tiy/t.asp?f=html_label

m系列

mark：高亮显示文本

<p>Do not forget to buy <mark>apples</mark> today.</p>

meter：进度条

<meter value="3" min="0" max="10">十分之三</meter><meter value="0.6">60%</meter> 这里写代码片

演示：http://www.w3school.com.cn/tiy/t.asp?f=html5_meter

n系列

noframes/noscript
用于提示用户浏览器不支持frame/script

o系列

optgroup

将相关的option分类组合在一起

<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>

演示：http://www.w3school.com.cn/tiy/t.asp?f=html_optgroup

output

执行input中数字的计算，然后显示结果

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0   <input type="range" id="a" value="50">100   +<input type="number" id="b" value="50">   =<output name="x" for="a b"></output></form>

注意：Internet Explorer 不支持该标签
演示：http://www.w3school.com.cn/tiy/t.asp?f=html5_output

p系列

progress：进度条

<progress value="22" max="100"></progress>

s系列

source：为音频定义源文件，浏览器会选择它所支持的那一个

<audio controls>   <source src="horse.ogg" type="audio/ogg">   <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element.</audio>

sub/sup

上标和下标

summary

与details配合使用，用以显示详细信息；只有Chrome和Safari 6支持。

<details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details>

t系列

thead/tbody/tfoot

<table border="1">  <thead>    <tr>      <th>Month</th>      <th>Savings</th>    </tr>  </thead>  <tfoot>    <tr>      <td>Sum</td>      <td>$180</td>    </tr>  </tfoot>  <tbody>    <tr>      <td>January</td>      <td>$100</td>    </tr>    <tr>      <td>February</td>      <td>$80</td>    </tr>  </tbody></table>

u系列

u：为文本添加下划线

w系列

wbr：定义一段带有 Word Break Opportunity 的文本。Word Break Opportunity规定在文本中的何处适合添加换行符。
应用：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 wbr 元素来添加 Word Break Opportunity（单词换行时机）。

演示：http://www.w3school.com.cn/tiy/t.asp?f=html5_wbr

0 0