在页面中嵌入PDF文件

自学网页制作(封闭在家学网页制作)(1)

在上一篇《在HTML页面中嵌入其他页面的方法——零基础自学网页制作》(结尾见目录)中我们学习了如何在页面中嵌入其他页面的操作。今天我们来嵌入一个pdf文件。

其实使用<iframe>标签也可以导入pdf标签,就是把pdf文件路径赋予src属性就可以了。

示例代码如下:

<body> <iframe width="100%" height="900px" src="pdf/人工智能游戏编程真言.pdf"></iframe> </body>

页面效果如下:

自学网页制作(封闭在家学网页制作)(2)

考虑到pdf的版权问题就不给大家上传云盘了,大家可以找其他pdf文件代替即可。如果您对这本书感兴趣可以关注并私信我。

除此之外再给大家介绍两个新标签。

一个是<embed/>标签,一个是<object></object>标签。

<embed/>标签和<img/>标签类似,没有结尾标签,修改src属性即可显示pdf文件。

<object>标签与<iframe>标签类似,有开始有结尾,不同的是,指定文件路径的属性不是src而是data。

设置长宽的操作都一样,示例代码如下:

<body> <iframe width="100%" height="300px" src="pdf/人工智能游戏编程真言.pdf"></iframe> <embed width="100%" height="300px" src="pdf/人工智能游戏编程真言.pdf"/> <object width="100%" height="300px" data="pdf/人工智能游戏编程真言.pdf"></object> </body>

页面效果如下:

自学网页制作(封闭在家学网页制作)(3)

实际上,<embed>和<object>也可以显示页面,示例代码如下:

<body> <iframe width="100%" height="300px" src="https://baike.baidu.com/item/歼-20/1555348?fromtitle=歼20&fromid=1838467&fr=aladdin"></iframe> <embed width="100%" height="300px" src="https://baike.baidu.com/item/歼-20/1555348?fromtitle=歼20&fromid=1838467&fr=aladdin"/> <object width="100%" height="300px" data="https://baike.baidu.com/item/歼-20/1555348?fromtitle=歼20&fromid=1838467&fr=aladdin"></object> </body>

页面显示效果如下:

自学网页制作(封闭在家学网页制作)(4)

除了页面和pdf文件外,这三个标签均可以嵌入图片,示例代码如下:

<body> <iframe width="100%" height="300px" src="image1.jpg"></iframe> <embed width="100%" height="300px" src="image1.jpg"/> <object width="100%" height="300px" data="image1.jpg"></object> </body>

页面效果如下:

自学网页制作(封闭在家学网页制作)(5)

观察一下还是挺有趣的,除了iframe外,其他两个标签的图片长宽均继承了它们自身的长宽比例。这里只是为了给大家做测试,显示图片的话还是尽量使用<img>标签。

说到<embed>和<object>这两个标签,在功能上和<iframe>非常相似,但是相比较而言,<iframe>标签更加灵活。在我之前做的测试中,在不经过特殊设置的情况下,iframe可以显示MP4视频文件,而另外两个不能。实际上,html5之后视频统一由<video>标签来打开,具体操作我们在后面的内容中为大家介绍。

<embed> <object>标签可以在页面中嵌入.swf文件,不过这个类型的文件目前在手机上已经很少用到了,电脑上也不是很常见。

object 的初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持,这一点并未实现。

因此相比较而言,<embed> <object>两个标签作用不是很大,大部分功能也被其他标签取代。

在笔者的产业实践过程中也很少用到这两个标签,这里也就作为一个扩充知识介绍给大家吧。

实际上我本人对这两个标签和<iframe>标签的具体区别以及背后的原因知道的也不多。

如果有小伙伴对<embed>和<object>的历史和特性有了解的话,请在留言区赐教!在下不胜感激!

喜欢的小伙伴请关注和转发,阅读中遇到任何问题请给我留言,如有疏漏或错误欢迎大家斧正,不胜感激!

HTML完整学习目录

HTML序章(学习目的、对象、基本概念)——零基础自学网页制作

HTML是什么?——零基础自学网页制作

第一个HTML页面如何写?——零基础自学网页制作

HTML页面中head标签有啥用?——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2(路径详解)——零基础自学网页制作

使用HTML添加表格1(基本元素)——零基础自学网页制作

使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作

使用HTML添加表格3(间距与颜色)——零基础自学网页制作

使用HTML添加表格4(行颜色与表格嵌套)——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作!为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3(下拉列表、多行文字输入)——零基础自学网页制作

HTML表单4(form的action、method属性)——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

,