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

最新推荐文章于 2024-09-20 12:08:28 发布

玉儿Qi

最新推荐文章于 2024-09-20 12:08:28 发布

阅读量568

点赞数

分类专栏：前端开发 JavaScript 文章标签： html

本文链接：https://blog.csdn.net/u014328357/article/details/70228507

版权

前端开发同时被 2 个专栏收录

227 篇文章 0 订阅

订阅专栏

JavaScript

185 篇文章 0 订阅

订阅专栏

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