一些不常见的html标签 及其兼容性

1.

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

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

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

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

<fieldset> 标签没有必需的或唯一的属性。

<legend> 标签为 fieldset 元素定义标题。

所有浏览器都支持 <fieldset> 标签。

 

 

2.

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

caption 元素定义表格标题。

caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

 

3.

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

<datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。

datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

请使用 input 元素的 list 属性来绑定 datalist。

ie 和 safair不支持。！！

 

4.

<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

淘宝中的价格删除就是用del 和INS。

 

5.

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

这样文档只显示HTML 5，点击HTML5会显示下面的文字。
支持的浏览器只有safair和chrome！！
<details> 标签用于描述文档或文档某个部分的细节。

6.

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

 

<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。

 

7.一下这些标签可以使用样式表代替！！！

<em>	把文本定义为强调的内容。
<strong>	把文本定义为语气更强的强调的内容。
<dfn>	定义一个定义项目。
<code>	定义计算机代码文本。
<samp>	定义样本文本。
<kbd>	定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var>	定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
<cite>	定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。

 

 

8.

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

属性	值	描述
max	number	规定任务一共需要多少工作。
value	number	规定已经完成多少任务。

 

 

 

9.

<meter value="3" min="0" max="10">十分之三</meter>

<meter value="0.6">60%</meter> 

<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。

例子：磁盘用量、查询结果的相关性，等等。

IE不支持！！

10.

<form action="/example/html5/demo_form.asp" method="get" id="nameform">
姓：<input type="text" name="lname" /><br />
名：<input type="text" name="fname" /><br />
</form>

<p>下面的按钮位于 form 元素之外，但仍是表单的一部分。</p>

<button type="submit" form="nameform" value="Submit">提交</button>
 button标签和form的配合使用

虽然button标签在form的外面，但是button标签仍然属于form的控制范围

类比于

<input id="myCar" list="cars" />
<datalist id="cars">

转载于:https://www.cnblogs.com/pinkpig/p/4097084.html