过一遍HTML标签（四）

编辑

ins（行内）

定义增加到文档的内容。

属性：

• cite：cite 属性的值指向一个文档的 URL，该文档解释了文本被插入或修改的原因。（目前该属性还没有被主流浏览器支持）
• datetime：该特性指示的此修改发生的时间和日期，并且该特性的值必须是一个有效的日期或者时间字符串。如果该值不能被解析为日期或者时间，则该元素不具有相关联的时间标记。

del（行内）

定义从文档移除的内容。

通常表现形式为删除线。

属性和ins元素的相同。

<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p>
<del ><p >This paragraph has been deleted.</p ></del >

嵌入内容

img（行内）

代表文档中的一个图像。
是一个空元素；没有结束标签

属性：

• alt：这个属性定义了描述图像的替换文本。
  如果图像的URL是错误的，或该图像不在支持的格式列表中，或者如果图像还没有被下载，用户将看到这个文字。

• crossorigin（HTML5）：这个枚举属性表明是否必须使用 CORS 完成相关图像的抓取。

  • anonymous：执行一个跨域的请求，但没有发送证书。
  • use-credentials：一个有证书的跨域请求

当用户并未显式使用本属性时，默认不使用 CORS 发起请求

• height：图像的高度，单位是CSS像素
• ismap：这个布尔属性表示图像是否是服务器端map的一部分。如果是， 那么点击的精准坐标将会被发送到服务器。
• sizes（HTML5）：你可能想根据用户屏幕尺寸来使用不同方式展示图片。这点用sizes属性就可以实现。它允许你为图片分配屏幕的宽度，然后通过srcset属性选择合适的图片。

<img src="images/low-res.jpg" sizes="(max-width: 40em) 100vw, 50vw" 
  srcset="images/low-res.jpg 600w, 
  images/high-res.jpg 1000w, 
  images/ultra-high-res.jpg 1400w"
>

当视口宽度大于40em时，sizes属性把图片的宽度定义为视口宽度的50%；当视口（viewport）宽度小于或者等于40em时，把图片宽度定义为视口宽度的100%。

• src：图像的 URL，这个属性对 <img> 元素来说是必需的。
• srcset（HTML5）：srcset图像属性允许列出多个可用于替代的图片数据源，这些数据源的像素密度不同。这使得浏览器可以针对用户设备选择合适质量的图片（由设备的像素密度、缩放比例或者网速决定）。
  srcset属性接受一个用逗号分隔的URL列表，每个URL带有一个表示最接近所请求图片像素比（一个CSS像素所代表的物理像素数量）的修饰x。下面是一个简单的例子：

<img src="images/low-res.jpg" srcset="
  images/low-res.jpg 1x, 
  images/high-res.jpg 2x, 
  images/ultra-high-res.jpg 3x"
>

在这个例子中，如果用户设备的像素比是1，图片low-res将会被展示；如果是2，图片high-res将会被展示；如果是3或者更大，图片ultra-high-res将会被展示。

• width：图像的宽度，单位是CSS像素

支持的图像格式：jpeg、gif、png、svg、bmp等……

在CSS中，img是一个替换元素。它没有基线，这意味着当在一个行内格式的上下文中使用vertical-align：baseline时，图像的底部会与容器的基线对齐。

iframe

HTML中的<iframe>标签（又称内联框架元素）表示了一个嵌套的浏览上下文(browsing context)，实际上是用来在当前页面中内嵌另一个HTML页面。

embed（HTML5）

代表一个嵌入 的外部资源，如应用程序或交互内容。

属性：

• width：资源显示的宽度。单位为CSS像素。
• height：资源显示的高度。单位为CSS像素。
• src：被嵌套的资源的URL。
• type：用来选择被示例化的插件的 MIME 类型。

<embed type="video/quicktime" src="movie.mov" width="640" height="480">

object（行内）

代表一个外部资源 ，如图片、HTML 子文档、插件等。

属性：

• data：一个合法的 URL 作为资源的地址，需要为 data 和 type 中至少一个设置值。
• form（HTML5）：对象元素关联的 form 元素（属于的 form）。 取值必须是同一文档下的一个 <form> 元素的 ID。
• height
• width
• name：浏览上下文名称
• type：data 指定的资源的 MIME 类型，需要为 data 和 type 中至少一个设置值。

<!-- Embed a flash movie -->
<object data="move.swf" type="application/x-shockwave-flash"></object>

<!-- Embed a flash movie with parameters -->
<object data="move.swf" type="application/x-shockwave-flash">
  <param name="foo" value="bar">
</object>

param

代表 <object> 元素所指定的插件的参数 。

属性：

• name：参数的名字
• value：参数的值

video（HTML5、块级）

audio（HTML5、块级）

source（HTML5）

track（HTML5）

这4个元素参考什么是HTML5（一）：语义中相关部分

canvas（HTML5、块级）

代表位图区域 ，可以通过脚本在它上面实时呈现图形，如图表、游戏绘图等。
不同于img元素、需要闭合标签

属性：width、height

map（行内）

area

这两个元素共同定义图像映射区域。（一个可点击的链接区域）

<map name="primary">
  <area shape="circle" coords="200,250,25" href="another.htm" /> 
  <area shape="default" nohref />
</map>

svg（HTML5）

定义一个嵌入式矢量图 。

math（HTML5）

定义一段数学公式 。

交互元素

details（HTML5）

summary（HTML5）

新的<details>和<summary>元素可以实现折叠的区块，通过鼠标点击实现附加信息的展示和隐藏。这是使用JavaScript时候经常在干的事，现在可以使用<details>元素和<summary>元素代劳了。点击<summary>元素可以展示和隐藏details元素的其余部分.

<details> 存放折叠区块内容，用于描述文档或文档某个部分的细节。
<summary> 元素包含 details 元素的标题

details元素属性：

• open
  本属性只支持布尔值。且该属性默认值为”open”，这表示只有当用户点击该标签的时候才会展示详情。如果设置为“false”，那页面渲染完毕，就将展示details元素内包含的内容。

<details>
  <summary>Some details</summary>
  <p>More info about the details.</p>
</details>

menu（HTML5）

menuitem（HTML5）

menu和menuitem用来扩展本地上下文菜单，通常被页面上的鼠标右击激活。

可以使用 <menu> 标签来定义一个包含一个或几个 <menuitem> 元素的菜单，然后把它绑定到任何使用contextmenu 属性的元素上。

每个 <menuitem> 可以是以下三种类型之一:

• checkbox – 允许选择或者取消选择一个选项(option);

• command – 允许在单击鼠标时执行一个动作;

• radio – 允许在一组选项中选择一个.

在一个支持的浏览器上，一个上下文菜单的例子应该看起来这样：