一、框架

HTML 内联框架元素 <iframe>。它能够将另一个 HTML 页面嵌入到当前页面中。

<iframe
  id="frameId" title="frameTitle" 
  width="300" height="200" 
  src="./other.html">
</iframe>

name：框架名字，可以与 target 属性配合。
width：框架的宽度。
height：框架的高度。
src：被嵌套的页面的 URL 地址。

二、meter（HTML5 新增）

<meter> 元素表示在已知范围内的标量值或分数值。

<meter id="fuel" min="0" max="100" 
  low="33" high="66" optimum="80" 
  value="50">at 50/100</meter>

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

min：最小值
max：最大值
low：低档值。
high：高档值。
optimum：该属性表示最佳数值
value：当前数值，如果 value 介于 0 和 1 之间（包括 0 和 1）代表百分比，否则 min 和 max 不能为空且 value 的值应在该范围内。

三、progress（HTML5 新增）

<progress> 元素用来显示一项任务的完成进度：

<progress id="file" max="100" 
  value="70">70%</progress>

max：目标值。
value：当前值。

四、图像映射

<map> 标签用于客户端图像映射，图像映射指带有可点击区域的一幅图像。

<img> 中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。

<img src="planets.gif" 
  width="145" height="126" 
  alt="Planets" usemap="#planetmap" />

<map id="planetmap" name="planetmap">
  <area shape="rect" coords="0,0,82,126" 
    href="sun.htm" alt="Sun" />
  <area shape="circle" coords="90,58,3" 
    href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="124,58,8" 
    href="venus.htm" alt="Venus" />
</map>

name 属性给予该映射引用的名称，这个属性必须存在，值不得为空并且不能带空格。

name 属性的值不得与同文档中其他 <map> 元素的该属性值相同，如果还指定了 id 属性，则两个属性的值必须相同。

<area> 元素在图片上定义一个热点区域，可以关联一个超链接。<area> 元素仅在 <map> 元素内部使用。

alt：规定区域的替代文本。
shape：规定区域的形状。rect | circle | poly
coords：规定区域的坐标，这个值的数值和意义取决于这个值所描述的形状属性。
对于矩形或长方形，这个 coords 值为两个 X,Y 对：左上、右下。
对于圆形，这个值是 x,y,r，这里的 x,y 是一对确定圆的中心的坐标而 r 则表示的是半径值。对于多边和多边形，这个值是用 x,y 对表示的多边形的每一个点：x1,y1,x2,y2,x3,y3 等等。
href：规定区域的目标 URL。
target：规定在何处打开目标 URL。
type：规定目标 URL 的 MIME 类型（HTML5 新增）。
download：把超链接用于下载一个资源（HTML5 新增）。
media：媒体查询（HTML5 新增）。

五、canvas（HTML5 新增）

<canvas> 标签定义图形，比如图表和其他图像，您必须使用脚本（通常是 JavaScript）来绘制图形。

我们可以在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。

<!-- 使用 canvas 元素定义画布 -->
<canvas id="myCanvas" 
  width="200" height="100" 
  style="border:1px solid #d3d3d3;">
  您的浏览器不支持 HTML5 canvas 标签。
</canvas>

<!-- 使用 js 脚本绘图 -->
<script>
  // 获取元素并创建 context 对象
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");

  // 把路径移动到画布中的指定点，不创建线条。
  ctx.moveTo(0, 0);
  // 添加一个新点，然后在画布中创建从该点到最后指定点的线条。
  ctx.lineTo(200, 100);
  // 绘制已定义的路径。
  ctx.stroke();

  // 重置当前路径。
  ctx.beginPath();

  // 创建弧/曲线（用于创建圆形或部分圆）。
  ctx.arc(95, 50, 40, 0, 2 * Math.PI);
  // 绘制已定义的路径。
  ctx.stroke();

  // 绘制实心文字
  ctx.font = "30px Arial";
  ctx.fillText("Hello World", 10, 30);

  // 绘制空心文字
  ctx.font = "30px Arial";
  ctx.strokeText("Hello World", 10, 80);

  // 创建渐变
  var grd = ctx.createLinearGradient(0, 0, 200, 0);
  grd.addColorStop(0, "red");
  grd.addColorStop(1, "white");
  // 填充渐变
  ctx.fillStyle = grd;
  ctx.fillRect(10, 100, 150, 80);
</script>

六、SVG（HTML5 新增）

SVG 定义为可缩放矢量图形，在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中。

<!--圆形-->
<svg xmlns="http://www.w3.org/2000/svg" 
  version="1.1">
  <circle cx="100" cy="50" r="40" 
    stroke="black" stroke-width="2" 
    fill="red" />
</svg>
<!--五角星-->
<svg xmlns="http://www.w3.org/2000/svg" 
  version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
    style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

HTML/CSS 备忘录 - 06. HTML 其他标签