编辑
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 – 允许在一组选项中选择一个.
在一个支持的浏览器上,一个上下文菜单的例子应该看起来这样: