网页嵌入对象（图片、视频、网页）

在网页中嵌入对象，实际上并不会在网页中插入对象，而是通过某种标签链接到指定的对象，标签创建的只是被引用对象的占位符而已。

嵌入式对象主要包括图片、视频、音频、文档等，不同的对象使用不同的标签，并具有不同的样式，本节重点介绍如何控制不同对象的样式，而标签的使用方法不是本节的重点。

图片

使用 img 元素，可以在网页中嵌入一幅图片，并通过CSS的width 和height 属性来定义图片的宽度和高度。定义图片尺寸时，可以使用绝对单位，也可以使用百分比。如：

img {
width: 200px;
height: 200px;
}

使用百分比时，图片的宽度根据元素的 width 计算得到，图片的高度根据元素的 height 计算得到。如，设置图片的width 属性值为 50%，图片的宽度将是父元素宽度的一半。

如果同时定义了 width 和 height 属性，在 width 和height 的比值与图片本身的宽高比不相等时，图片就会在某个方向上被拉伸或压缩，使图片失真。所以，在定义图片尺寸时，建议只定义 width 和 height 中的某个属性，这样的话，浏览器就会按照图片本身的尺寸，按比例进行缩放，图片就不会失真。

当然，也可以不设置图片的宽度和高度，这样的话，图片将按原本的尺寸显示。不过，最好在CSS中作如下声明：

img {
max-width: 100%;
}

这样的话，图片就会随着布局自动缩放，当放大到容器的宽度后，图片就会停止放大，可以防止图片尺寸过大而撑破容器。

页面上的 img 元素也是一个盒子，也可以设置边框，既可以使用线条边框，也可以使用图像边框，并支持圆角和盒阴影，可以根据需要或个人喜好进行设置。

网页中，使用一副孤零零图像的情况很少，大多数情况下，一副图像是具有一定上下文关系的，它有标题、背景介绍、内容说明等。这时，就需要使用 figure 元素来定义一个图片单元，在图片单元中，用 img 元素来定义图片，用 figcaption 元素来定义图片的标题。

<figure>
<img src="img/gossip.jpg" />
<figcaption>八卦图</figcaption>
</figure>

figure 是块级元素，要使 figure 水平居中，只需设置 margin: 0 auto即可。默认情况下，图片和标题都是左对齐，如果要使图片及标题水平居中，为 figure 元素设置 text-align: center即可。

figure {
margin: 0 auto;
text-align: center;
}

在word中，图片的标题一般使用黑体，并加粗显示。在这里，为图片标题中的数字使用Georgia字体，这是报表中经常使用的字体，因为它有点艺术范儿。

figcaption {
font-weight: bold;
font-family: Georgia, SimHei;
}

上述方法都是使用嵌入的方式向网页插入图片，而在 word 及报纸、杂志等传统的印刷布局中，文本还可以按照需要围绕图像。在网页中，图文混排时，常常需要“文本环绕”的排版形式。

在CSS中，要实现“文本环绕”的效果，只需为图片元素应用 float 属性即可。这里使用 figure 元素来定义图片单元，使用 p 元素来定义文本，并把图片和文本放在一个容器中。

<figure>
<img src="img/gossip.jpg" />
<figcaption>八卦图</figcaption>
</figure>
<p>八卦是中国道家文化的深奥哲学概念，八卦的形成源于…</p>
<p>根据史料记载，八卦起源于三皇五帝之首的伏羲，伏羲氏在天水卦台…</p>
</div>

如果需要图像在左侧，文本在右侧环绕图片，只需把 figure 或 img（在使用 img 元素定义图片时）的 float 属性值设置为 left 即可。

figure {
float: left;
}

运行效果如图 11-18 所示：

图11-18 文本环绕效果

同理，如果需要图像在右侧，文本在左侧环绕图片，就要把 figure 或 img 的 float 属性值设置为 right。

使用 float 的好处是，当调整图片尺寸时，文本也将自动调整位置。也可以使容器使用相对定位，图片使用绝对定位来实现同样的布局。但使用这种方式，文本不受图片尺寸的影响，也不会随图片的尺寸自动调整位置。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

网页嵌入对象（图片、视频、网页）相关推荐

在html中怎么插入腾讯视频,腾讯视频加载方案, 网页嵌入腾讯视频方式 iframe, 网页嵌入腾讯视频方式...
前言:更多详细内容可以参考腾讯开发平台的文档,我在这里简单备忘一下方法一:引入iframe 在视频播放界面的左下方,鼠标移动到分享,复制通用代码放在页面上即可腾讯视频加载方案, 网页嵌入腾讯视频方 ...
谷歌翻译网页嵌入代码_在网页上嵌入Google地图
谷歌翻译网页嵌入代码 Maps are extremely useful ways to visualize the locations of business and events on web ...
unity 内部嵌入的网页插件中播放视频网页的问题
3D WebView 主要实现在unity 中制作网页浏览器! 3D WebView简单教程地址:unity 内嵌网页简单流程(3D WebView 3.14.1)_云小川的博客-CSDN博客详细教 ...
如何用在自己的网页中嵌入腾讯视频网页播放器播放一些文件
在需要调用视频的地方写上如下代码. <embed wmode="Opaque" flashvars="vid=9kFOkWIbQ4g&autoplay=1& ...
html网页嵌入优酷视频,HTML页面插入优酷视频代码（转）
PS:1.标注斜体部分XNzI0NDYzNzA0是优酷视频的ID号例如优酷视频地址:http://v.youku.com/v_show/id_XNzI0NDYzNzA0.html ...
html在网页中加入视频,如何在自己的网页嵌入优酷视频(easy)
准备: 前端基础 1.优酷开发者账号 + 应用ID 2.如果你还没有优酷开发者账号和应用ID:http://cloud.youku.com/docs/docs?id=0,需要审核,一半半天到一天就OK ...
如何将网页保存为图片_网页账号密码该如何保存？
我们在使用浏览器浏览一些网页的时候,需要输入我们的账号密码才能登陆,以保证安全.但是有时候浏览网页,不小心关掉了,重新打开时又要重新输入密码,这样会显得很繁琐.那么有什么办法能让网页记住我们的账号密 ...
MailBee.NET Objects发送电子邮件（SMTP）教程五：发送带有嵌入图片的网页和HTML邮件
MailBee.NET Objects介绍和试用点击查看>>> 为了发送带有嵌入对象的电子邮件,开发人员应该使用SMTP object.首先,开发人员应该按照[MailBee.NET ...
如何下载网页中的图片
http://qzher.com/?p=218 如何下载网页中的图片发表日期 2016年4月25日 by qzher https://tuchong.com/1181287/12974705/ 怎么 ...

网页嵌入对象（图片、视频、网页）

图片

网页嵌入对象（图片、视频、网页）相关推荐

最新文章

热门文章