HTML 嵌入式内容

图片资源

[ 插入图片 ] 从技术上讲，img 标签并不会插入图像，而是从网页上链接图像，img 创建的是被引用图像的占位空间。

<img src="图像存储的位置" alt="图像的替代文字" title="提示文字" width="图片宽度" height="图片高度" />

1	<img src="图像存储的位置" alt="图像的替代文字" title="提示文字" width="图片宽度" height="图片高度" />

实际开发中，通常会把网站应用到的图片统一存放在 image 或 images 文件夹中。

src：指定图片的路径（包括图片名称），它是 img 标签的必需属性；

alt：用来描述图片的含义，图片不显示时替代图片，同时，用于 SE 抓取；

也就是说，在浏览器无法载入图像（比如图像路径错误导致）时，替换文本属性 alt 会告诉读者他们失去的信息，此时浏览器显示的是替代性的文本而不是图像。这有利于良好的用户体验和搜索引擎抓取，同时，对于那些使用纯文本浏览器的人来说是十分友好的。

1
2
3

也就是说，在浏览器无法载入图像（比如图像路径错误导致）时，替换文本属性 alt 会告诉读者他们失去的信息，
此时浏览器显示的是替代性的文本而不是图像。
这有利于良好的用户体验和搜索引擎抓取，同时，对于那些使用纯文本浏览器的人来说是十分友好的。

title：提供额外的提示或帮助信息，鼠标移至图片上时显示提示信息；

width/height：图片宽高，默认单位为 px，width/height 不设置默认显示原始大小。

~~border~~：设置图像边的宽度（单位为：数值）。

longdesc:与alt属性类似，提供多于1024字符的长文本描述
usemap:为图像定义客户端图像映射 usemap = "#元素的name或id属性"
srcset:指定图片的地址和对应的图片质量。
       属性格式：图片地址 宽度描述w 多个资源之间用逗号分隔。
       对于srcset里面出现了一个w单位，可以理解成图片质量。
       如果可视区域小于这个质量的值，就可以使用，当然，浏览器会自动选择一个最小的可用图片。
       但是，会发现随着浏览器窗口宽度变大，图片也在不断变大。
       浏览器会自动匹配最佳显示的图片，如果大图既然缓存了就用大图了，再缩小也不会变成小图了。
       <img src="small.jpg" srcset="small.jpg 300w,middle.gif 500w,big.gif 800w">
sizes:用来设置图片的尺寸零界点，主要跟响应式布局打交道。
      属性格式：媒体查询 宽度描述(支持px)，多条规则用逗号分隔
      如果加上sizes属性，会发现，随着浏览器宽度变大，图片一直保持其初始尺寸。
      所以，应该sizes和srcset两个属性配合使用。
      <img src="small.jpg" srcset="small.jpg 300w,middle.gif 500w,big.gif 800w" 
	   sizes="(max-width:300px) 300px, (max-width:500px) 500px,800px">
crossorigin:使得在canvas中使用图片资源时可以突破跨越限制
      <img alt="plane" src="test.jpg" crossorigin="anonymous">

longdesc:与alt属性类似，提供多于1024字符的长文本描述

usemap:为图像定义客户端图像映射 usemap = "#元素的name或id属性"

srcset:指定图片的地址和对应的图片质量。

属性格式：图片地址宽度描述w 多个资源之间用逗号分隔。

对于srcset里面出现了一个w单位，可以理解成图片质量。

如果可视区域小于这个质量的值，就可以使用，当然，浏览器会自动选择一个最小的可用图片。

但是，会发现随着浏览器窗口宽度变大，图片也在不断变大。

浏览器会自动匹配最佳显示的图片，如果大图既然缓存了就用大图了，再缩小也不会变成小图了。

sizes:用来设置图片的尺寸零界点，主要跟响应式布局打交道。

属性格式：媒体查询宽度描述(支持px)，多条规则用逗号分隔

如果加上sizes属性，会发现，随着浏览器宽度变大，图片一直保持其初始尺寸。

所以，应该sizes和srcset两个属性配合使用。

<img src="small.jpg" srcset="small.jpg 300w,middle.gif 500w,big.gif 800w"

sizes="(max-width:300px) 300px, (max-width:500px) 500px,800px">

crossorigin:使得在canvas中使用图片资源时可以突破跨越限制

[ 图片热点 ] area：定义定义图像热区，area 总是嵌套在 map 标签中；area 区域如果有重叠，以先出现的 area 为准。

属性：
href：定义此区域的目标URL；    
alt：替代文本；
shape：定义区域的形状；coords：定义可点击区域的坐标；
  1、圆形(circ/circle)：coords= "x,y,r"    x,y是圆心坐标；r是半径。
  2、多边形(poly/polygon)：coords = "x1,y1,x2,y2,x3,y3……"    x,y是多边形每个顶点的坐标。
  3、矩形(rect/rectangle)：coords = "x1,y1,x2,y2"    x1,y1是左上角坐标；x2,y2是右下角坐标。
  4、全部区域 default(默认)

属性：

href：定义此区域的目标URL；

alt：替代文本；

shape：定义区域的形状；coords：定义可点击区域的坐标；

1、圆形(circ/circle)：coords= "x,y,r" x,y是圆心坐标；r是半径。

2、多边形(poly/polygon)：coords = "x1,y1,x2,y2,x3,y3……" x,y是多边形每个顶点的坐标。

3、矩形(rect/rectangle)：coords = "x1,y1,x2,y2" x1,y1是左上角坐标；x2,y2是右下角坐标。

4、全部区域 default(默认)

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

<img src="jihe.jpg" alt="几何图形" width="600" height="220" usemap="#map">
<map name="map" id="map">
  <area shape="rect" coords="35,38,150,158" href="line4.html" alt="四边形">
  <area shape="poly" coords="175,109,193,44,268,41,296,109,233,151" href="line6.html" alt="六边形">
  <area shape="poly" coords="315,81,330,58,356,40,387,37,411,52,430,79,433,108,418,132,389,153,357,154,333,137,315,108" href="line12.html" alt="12边形">
  <area shape="circle" coords="512,95,60" href="line0.html" alt="圆形">
</map>

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

</map>

[ HTML5 新增的多媒体标签：figure ]

figure 代表一段独立的内容，通常用来插入图片，但它也可以是一段代码、图片、音乐或者视频。

默认样式：margin: 16px 40px; <figure> <p>黄浦江上的的卢浦大桥</p> <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>

1
2
3
4
5
6

默认样式：margin: 16px 40px;

<figure>
  <p>黄浦江上的的卢浦大桥</p>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

figure 经常与 figcaption 配合使用，并且作为一个独立的引用单元；figure 中只能包含一个 figcaption。

// figcatption用来定义figure元素的标题，且应该位于figure元素的第一个或最后一个子元素的位置。 <figure> <figcaption>黄浦江上的的卢浦大桥</figcaption> <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>

1
2
3
4
5

// figcatption用来定义figure元素的标题，且应该位于figure元素的第一个或最后一个子元素的位置。
<figure>
    <figcaption>黄浦江上的的卢浦大桥</figcaption>
    <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

视频音频

「媒体类型」多媒体元素（视频、音频等）存储于媒体文件中，确定媒体类型的常用方法是查看文件扩展名。

由于版权等原因，不同的浏览器支持播放的格式是不一样的。当前，audio 元素支持三种音频格式：

当前，video 元素支持三种视频格式：

「插件 object、embed 」在 HTML 中播放视频/音频的方法有很多种：

[1] embed
    <embed  height="240" width="320" src="movie.mp4" />
[2] <object>
    <object height="240" width="320" data="movie.mp4"></object>
[3] <video>
    <video controls="controls">
        <source src="movie.mp4" type="video/mp4" />
    </video>
[4] <a>
    <a href="movie.mp4">Play the video</a>
[5] 更好的解决办法
    <video width="320" height="240" controls="controls">
         <source src="movie.mp4" type="video/mp4" />
         <object data="movie.mp4" width="320" height="240">
               <embed src="movie.mp4" width="320" height="240" />
         </object>
    </video>

[1] embed

[2] <object>

[3] <video>

</video>

[4] <a>

<a href="movie.mp4">Play the video</a>

[5] 更好的解决办法

</object>

</video>

[1] <embed>
    <embed  height="80" width="300" src="song.mp3" />
[2] <object>
    <object height="80" width="300" data="song.mp3"></object>
[3] <audio>
    <audio controls="controls">
         <source src="song.mp3" type="audio/mp3" />
    </audio>
[4] <a>
    <a href="song.mp3">Play the sound</a>
[5] 更好的解决办法
    <audio controls="controls" height="100" width="100">
        <source src="song.mp3" type="audio/mp3" />
        <embed height="100" width="100" src="song.mp3" />
    </audio>

[1] <embed>

[2] <object>

[3] <audio>

</audio>

[4] <a>

<a href="song.mp3">Play the sound</a>

[5] 更好的解决办法

</audio>

[ 视频 video ]

// 属性 autoplay 自动播放 controls 显示控件 height 　　　播放器高度 width 　　　播放器宽度 loop 循环播放 preload 视频在页面加载时进行加载，并预备播放(若使用autoplay,则忽略该属性) preload="none" // 当页面加载后不载入视频 preload="auto" // 当页面加载后载入整个视频 preload="meta" // 当页面加载后只载入元数据 src 要播放的视频的URL poster 　　　规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像

1
2
3
4
5
6
7
8
9
10
11
12

// 属性
   autoplay         自动播放
   controls         显示控件
   height 　　　     播放器高度
   width 　　　      播放器宽度
   loop             循环播放
   preload          视频在页面加载时进行加载，并预备播放(若使用autoplay,则忽略该属性)
   preload="none"   // 当页面加载后不载入视频
   preload="auto"   // 当页面加载后载入整个视频
   preload="meta"   // 当页面加载后只载入元数据
   src              要播放的视频的URL
   poster 　　　     规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像

<video id="test" src="movie.mp4" width="280" height="200" poster="diejia.jpg"></video>

1

<video id="test" src="movie.mp4" width="280" height="200" poster="diejia.jpg"></video>

[ 音频 audio ]

// 属性 autoplay 自动播放 controls 显示插件 loop 循环播放 preload 音频在页面加载时进行加载，并预备播放(若使用autoplay,则忽略该属性) src 要播放的音频的URL

1
2
3
4
5
6

// 属性
    autoplay 自动播放
    controls 显示插件
    loop 循环播放
    preload 音频在页面加载时进行加载，并预备播放(若使用autoplay,则忽略该属性)
    src 要播放的音频的URL

<audio controls autoplay loop muted src="song.mp3"> <source src="song.mp3" type="audio/mp3" /> </audio> 注意，<audio>元素不支持播放wma格式的文件。

1
2
3
4
5

<audio controls autoplay loop muted src="song.mp3">
  <source src="song.mp3" type="audio/mp3" />
</audio>

注意，<audio>元素不支持播放wma格式的文件。

[ source ]  使用 audio、video 至少要在标签中包含 src 属性；而该元素为 video、audio 提供媒介资源

因为并非所有浏览器都支持所有媒体格式，所以，可以使用一个或多个 source 元素，指定多个不同的媒体来源。

// 属性 media 规定媒体资源的类型(没有浏览器支持) src 　规定媒体文件的URL type 规定媒体资源的MIME类型 // 常用类型视频 [a] video/ogg [b] video/mp4 [c] video/webm 音频 [a] audio/ogg [b] audio/mpeg

1
2
3
4
5
6
7
8

// 属性
    media 规定媒体资源的类型(没有浏览器支持)
    src 　规定媒体文件的URL
    type 规定媒体资源的MIME类型

// 常用类型
    视频  [a] video/ogg  [b] video/mp4  [c] video/webm
    音频  [a] audio/ogg  [b] audio/mpeg

// 位于开始和结束标签之间的任何内容都将作为后备内容，在浏览器不支持这两个媒体元素的情况下显示。 <video> <source src="video.webm" type="video/webm; codecs='vp8,vorbis'"> <source src="video.ogg" type="video/ogg; codecs='theora,vorbis'"> <source src="video.mp4"> video player not available. </video> <audio> <source src="audio.ogg" type="audio/ogg"> <source src="audio.mp3" type="audio/mp3"> audio player not available. </audio>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// 位于开始和结束标签之间的任何内容都将作为后备内容，在浏览器不支持这两个媒体元素的情况下显示。

<video>
    <source src="video.webm" type="video/webm; codecs='vp8,vorbis'">
    <source src="video.ogg" type="video/ogg; codecs='theora,vorbis'">
    <source src="video.mp4">
    video player not available.
</video>

<audio>
    <source src="audio.ogg" type="audio/ogg">
    <source src="audio.mp3" type="audio/mp3">
    audio player not available.
</audio>

因为并非所有浏览器都支持 audio 和 video 标签，所以，更好的解决办法（多浏览器支持）是有备选内容。

<audio controls="controls" height="100" width="100"> <source src="song.mp3" type="audio/mp3" /> <embed height="100" width="100" src="song.mp3" /> </audio> <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <object data="movie.mp4" width="320" height="240"> <embed src="movie.mp4" width="320" height="240" /> </object> </video>

1
2
3
4
5
6
7
8
9
10
11

<audio controls="controls" height="100" width="100">
    <source src="song.mp3" type="audio/mp3" />
    <embed height="100" width="100" src="song.mp3" />
</audio>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.mp4" width="320" height="240" />
  </object>
</video>

[ track ]  被当作媒体元素 audio 和 video 的子元素来使用，允许指定计时字幕（或者基于事件的数据）。

该元素指向当用户请求额外的数据时浏览器公开的包含定时文本的源文件。一个media元素的任意两个track子元素不能有相同的 kind、srclang和 label属性。 1. default属性规定该轨道是默认的，假如没有选择任何轨道。 2. kind属性表示轨道属于什么文本类型。 captions 　　　　该轨道定义将在播放器中显示的简短说明 chapters 　　该轨道定义章节，用于导航媒介资源 descriptions 该轨道定义描述，用于通过音频描述媒介的内容，假如内容不可播放或不可见 metadata 该轨道定义脚本使用的内容 subtitles 该轨道定义字幕，用于在视频中显示字幕 3. label属性表示轨道的标签或标题。 4. URL属性表示字幕文件的URL。 5. srclang属性表示轨道的语言，若 kind 属性值是 "subtitles"，则该属性必需的。中文为"zh"，英文为"en" 　　字幕文件书写格式如下所示，注意，毫秒位的3个0不能省略。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

该元素指向当用户请求额外的数据时浏览器公开的包含定时文本的源文件。
一个media元素的任意两个track子元素不能有相同的 kind、srclang和 label属性。

1. default属性规定该轨道是默认的，假如没有选择任何轨道。
2. kind属性表示轨道属于什么文本类型。
   captions 　　　　该轨道定义将在播放器中显示的简短说明
   chapters    　　该轨道定义章节，用于导航媒介资源
   descriptions   该轨道定义描述，用于通过音频描述媒介的内容，假如内容不可播放或不可见
   metadata       该轨道定义脚本使用的内容
   subtitles      该轨道定义字幕，用于在视频中显示字幕
3. label属性表示轨道的标签或标题。
4. URL属性表示字幕文件的URL。
5. srclang属性表示轨道的语言，若 kind 属性值是 "subtitles"，则该属性必需的。中文为"zh"，英文为"en"
　　字幕文件书写格式如下所示，注意，毫秒位的3个0不能省略。

<video width="320" height="240" controls="controls"> <source src="mov.mp4" type="video/mp4" /> <track src="cn_track.vtt" srclang="zh" default kind="captions" label="欢迎你"> <object data="mov.mp4" width="320" height="240"> <embed src="mov.mp4" width="320" height="240" /> </object> </video>

1
2
3
4
5
6
7

<video width="320" height="240" controls="controls">
  <source src="mov.mp4" type="video/mp4" />
  <track src="cn_track.vtt" srclang="zh" default kind="captions" label="欢迎你">
  <object data="mov.mp4" width="320" height="240">
    <embed src="mov.mp4" width="320" height="240" />
  </object>
</video>

内联框架 iframe

框架 frame 已被废弃，而内嵌框架 iframe 依在使用。通过使用框架，可以在同一个窗口显示不止一个页面。

每份 HTML 文档称为一个框架，并且每个框架都独立于其他的框架。

<iframe src="引用页面地址" name="框架标识名"…>

1	<iframe src="引用页面地址" name="框架标识名"…>

[ 作用 ] 页面中的部分内容用框架实现，一般用在页面中引用站外的页面内容。iframe 可以很方便地创建框架，但由于创建一个框架意味着要创建一个完整的页面环境，很耗费资源。因此，能不用就尽量不用。

[ 常用属性 ] src、name/id、width、height、target

src 规定在内联框架中显示的文档的URL。

name或者id可以和锚链接结合起来实现页面间的相互跳转。
操作步骤：
    （1）在被打开的框架上加name或id属性。
    （2）在超链接上设置target目标窗口属性为希望显示的框架窗口名
        <iframe name="mainFrame" src="the_second.html"/>
        <a href="the_second.html" target="mainFrame">下边显示第二页</a>
        // 当前页和嵌入页在不同浏览器上下文中，JS/CSS是相互隔离的；在嵌入页面中的操作并不影响当前页面。

src 规定在内联框架中显示的文档的URL。

name或者id可以和锚链接结合起来实现页面间的相互跳转。

操作步骤：

（1）在被打开的框架上加name或id属性。

（2）在超链接上设置target目标窗口属性为希望显示的框架窗口名

<a href="the_second.html" target="mainFrame">下边显示第二页</a>

// 当前页和嵌入页在不同浏览器上下文中，JS/CSS是相互隔离的；在嵌入页面中的操作并不影响当前页面。

target属性：链接打开方式。要了解框架之间的关系，就必须了解target属性。
    _self 当前窗口（默认）
    _blank 新窗口
    _parent 父框架集
    _top 整个窗口
    _framename 指定框架

// 外层框架
<frameset cols = "20%, *">
    <frame src="left.html">
    <frame src="right.html">
</frameset>
// 里层框架
<frameset rows = "50%,*">
    <frame src="top.html">
    <frame src="bottom.html" name="bottom">        
</frameset>
// 锚点页
<ul class="list">
    <li class="in"><a href="chap1.html" target="_self">chap1(_self)</a></li>
    <li class="in"><a href="chap2.html" target="_blank">chap2(_blank)</a></li>
    <li class="in"><a href="chap3.html" target="_parent">chap3(_parent)</a></li>
    <li class="in"><a href="chap4.html" target="_top">chap4(_top)</a></li>    
    <li class="in"><a href="chap5.html" target="bottom">chap5(framename)</a></li>
</ul>

target属性：链接打开方式。要了解框架之间的关系，就必须了解target属性。

_self 当前窗口（默认）

_blank 新窗口

_parent 父框架集

_top 整个窗口

_framename 指定框架

// 外层框架

</frameset>

// 里层框架

</frameset>

// 锚点页

<li class="in"><a href="chap2.html" target="_blank">chap2(_blank)</a></li>

<li class="in"><a href="chap3.html" target="_parent">chap3(_parent)</a></li>

<li class="in"><a href="chap5.html" target="bottom">chap5(framename)</a></li>

</ul>