整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

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

HTML页面中嵌入其他页面的方法

在自己的页面中嵌入其他页面是一个非常重要的操作,既能丰富自己的页面样式又能增强页面的信息量。

举个例子,如果打算在自己的页面中插入一个视频网站的视频该怎么做呢?

假如我现在自己的页面中嵌入这个视频,

我只需要在视频下侧找到"分享"。

点击之后出现这样的对话框,如图:

通过在我们的页面中粘贴这段通用代码就可以显示这个视频了。

代码如下:

<iframe height=498 width=510 src='http://player.youku.com/embed/XNDQ5Mjg1MTU1Mg==' frameborder=0 'allowfullscreen'></iframe>

下面就写到我们的页面中试试吧。

首先复制"第一个网页.html"文件,改名为"在页面中嵌入页面.html"保存,然后用记事本打开,修改<head></head>标签中的<title>第一个页面</title>编辑为"在页面中嵌入页面"即可,完整代码如下:

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>在页面中嵌入页面</title>
  </head> 
  <body>
  <iframe height=498 width=510 src='http://player.youku.com/embed/XNDQ5Mjg1MTU1Mg==' frameborder=0 'allowfullscreen'></iframe>
  </body>
  </html>

页面效果如下:

怎么样,是不是很神奇!

下面我们来分析一下这段代码的含义。

首先要引入一个新标签<iframe>,HTML的使用手册中翻译为"框架",说实话,这么翻译初学者是不知所云的。这个框架元素的主要作用就是在自己的页面中嵌入其他页面。

在<iframe>标签中先指定路径属性即src。这里使用的是单引号,实际上只要是半角符号,单引号和双引号都可以的。

然后设置长宽属性,即width和height,大家可以尝试改变数据看看。

frameborder可以为iframe的窗口指定一个边框,大家可以尝试把0改成1看看。大家注意哈,这里输入30和输入1是一样的,因为这个属性不是定义边框的宽度,而是定义是否显示边框!在编程中叫做布尔值,0代表没有边框,1代表有边框!和我们点灯的开关一样!

如图:多了个边框出来。

最后'allowfullscreen'这个描述非常的奇葩,把它删掉没有任何影响。不晓得是干什么的,主要是也不符合html的语法(也可能是我没见识)。如果有详细了解的小伙伴欢迎留言指教,感激不尽。

下面我们尝试修改一下src属性,给它一个别的路径看看。例如:

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>在页面中嵌入页面</title>
  </head> 
  <body>
  <iframe height=498 width=510 src='https://www.toutiao.com/i6790673377188119052/'>
  </iframe>
  </body>
  </html>

需要注意的是,修改了src并保存文件之后要把原页面关闭然后重新打开才可以正常显示!

效果如下:

在浏览网页时我们还经常遇到这样的情况,就是有一个独立窗口显示嵌套的页面,上面有个标题,一点击就会跳到那个嵌入的页面上,这个其实很简答,使用一个<a></a>元素即可办到,示例代码如下:

<a href="https://www.toutiao.com/i6790673377188119052/">HTML中的块级元素与内联元素——零基础自学网页制作</a>
<iframe height=498 width=510 src='https://www.toutiao.com/i6790673377188119052/'></iframe>

页面示例如下:

框架元素并没有换行,所有我们可以推测出<iframe>标签实际上是个内联元素,如何让它换行呢?

为<iframe>的style属性中写入display:block即可。这句代码的意思是按照块元素来显示<iframe>内容。

示例代码如下:

<iframe height=498 width=510 style = "display:block;"src='https://www.toutiao.com/i6790673377188119052/'></iframe>

页面效果如下:

是不是很有意思。

下面我们来介绍一个更有趣的玩法。如图所示:

这个怎么做呢?

这就要介绍<iframe>标签中的另一个属性:name(名字)

示例代码如下:name="iframe"

<iframe name = "iframe" height=498 width=510style = "display:block;"src='https://www.toutiao.com/i6790673377188119052/'allowfullscreen'></iframe>

这里讲个题外话,如果大家了解中国古代的"请神术"的话就会知道这样一个有趣的传说,就是如果我们能叫出鬼神的名字就可以驱使它。

编程也是这样,我们给函数或变量一个名字后,就可以随时随地的驱使它。

现在我们给<iframe>起了个名字叫做"iframe",当然您可以使用其他名字也没问题,但要使用英文或汉语拼音命名,名字是英语字母组合最好。

有了名字之后,<a>标签就要驱使<iframe>标签来显示自己路径下的内容,如何驱使呢?

大家还记得<a>标签中有一个target属性吗?只要让target="iframename"即可!

也就是target="iframe"。示例代码如下:大家要注意的是<a>标签也是内联元素,也需要添加display:block,不然也是排在一列显示。

<a style = "display:block;" target="iframe" href="https://www.toutiao.com/i6790673377188119052/">HTML中的块级元素与内联元素——零基础自学网页制作</a><!--第一个a链接的是头条文章-->
<a style = "display:block;" target="iframe" href="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin"> 歼20战斗机百科</a><!--第二个a链接的是百度百科-->
<a style = "display:block;"target="iframe" href="image1.jpg">IT美女</a><!--第三个a链接的是本地图片-->
<iframe name = "iframe" height=498 width=510style = "display:block;"></iframe>

只要我们为不同的<a>标签赋予target="iframe"的属性,点击这些<a>标签就可以在叫做"iframe"的框架元素中显示自己的页面。这时我们可以把<iframe>标签中的src属性删除掉,保存文件后,关闭测试网页,再重新打开,效果如下:

初始状态下,因为框架元素中的src是空的,所以打开后是空白的。如果您觉得单调可以任意复制3个<a>中的一个href中的链接路径给<iframe>的src属性,打开就是相应的标签。这个就不演示了,大家自己试试即可。

点击第一个链接效果如下:

点击第二个链接如下:

点击第三个链接如下:

最后再强调一下,改完框架的src属性后需要关闭页面后重新打开才可以,刷新的话并不能正确显示!切记!

今天的示例代码如下:

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>在页面中嵌入页面</title>
  </head> 
  <body>
  <a style = "display:block;" target="iframe" href="https://www.toutiao.com/i6790673377188119052/">HTML中的块级元素与内联元素——零基础自学网页制作</a>
  <a style = "display:block;" target="iframe" href="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin">歼20战斗机百科</a>
<a style = "display:block;" target="iframe" href="image1.jpg">IT美女</a>
<iframe name = "iframe" height=498 width=510 style = "display:block;"></iframe>
</body>
</html>

今天的内容结束了,明天我将会为大家介绍<object>和<embed>这两个标签,它们可以在页面中嵌入更多有趣的东西。

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

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>标签实现文本内链接——零基础自学网页制作

数字时代,多媒体元素如视频、音频、图片和动画成为了网页设计中不可或缺的一部分。它们不仅能够提升用户体验,还能有效地传达信息和情感。在本文中,我们将探讨如何在网页中嵌入各种多媒体元素,并提供一些例子来说明如何使用它们。

图片

图片是最常见的多媒体类型之一。在HTML中,我们使用 <img> 标签来嵌入图片。

示例

<img src="example.jpg" alt="描述性文字" width="500" height="300">

在这个例子中,src 属性指定图片的路径,alt 属性提供图片的替代文本(对于视觉障碍用户和图片无法加载的情况非常有用),width 和 height 属性指定图片的尺寸。

视频

视频可以提供动态的视觉体验和信息。HTML5引入了 <video> 标签,使得嵌入视频变得简单。

示例

<video width="640" height="360" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持视频标签。
</video>

在这个例子中,controls 属性添加了视频播放控件,如播放、暂停和音量控制。<source> 标签允许指定多个视频格式,以确保跨不同浏览器的兼容性。

音频

音频元素可以用来播放声音或音乐。HTML5通过 <audio> 标签提供了对音频内容的支持。

示例

<audio controls>
  <source src="sound.mp3" type="audio/mpeg">
  <source src="sound.ogg" type="audio/ogg">
  您的浏览器不支持音频元素。
</audio>

与视频标签类似,controls 属性为音频文件提供了基本的控制选项,而 <source> 标签让我们可以指定多个音频格式。

嵌入式内容

除了直接嵌入文件,我们还可以嵌入整个网页或者其他网站的内容,比如地图或社交媒体帖子。这通常是通过 <iframe> 标签完成的。

示例

<iframe src="https://www.example.com" width="600" height="400">
  <p>您的浏览器不支持iframe标签。</p>
</iframe>

在这个例子中,src 属性指定了要嵌入的网页的URL,width 和 height 属性设置了iframe的尺寸。

动画和图形

SVG(可缩放矢量图形)和Canvas API是创建网页动画和图形的两种流行技术。

SVG 示例

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

这个SVG示例创建了一个简单的带有绿色边框和黄色填充的圆。

Canvas 示例

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, 150, 75);
</script>

这个Canvas示例使用JavaScript在画布上绘制了一个红色的矩形。

社交媒体嵌入

我们还可以嵌入社交媒体平台上的内容,如推文或Instagram帖子。

示例

<!-- Twitter -->
<a class="twitter-timeline" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<!-- Instagram -->
<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/B1JWcqCgsdH/">
</blockquote>
<script async defer src="//www.instagram.com/embed.js"></script>

这些例子展示了如何嵌入Twitter和Instagram的内容。通常,社交媒体平台提供了易于嵌入内容的代码片段。

总结

嵌入多媒体元素可以极大地提升网站的吸引力和互动性。通过使用HTML的 <img>, <video>, <audio>, <iframe>, <svg> 和 <canvas> 标签,我们可以在网页中添加丰富的视觉和听觉内容。此外,社交媒体的嵌入功能使得分享和展示社交媒体内容变得简单。当设计包含多媒体元素的网页时,记得考虑到所有用户的访问性,确保内容对所有人都是可访问的。

本内链接

最后这些关于html的内容有点查漏补缺的意思了,这一次是关于文本内链接的使用方法,简单来说就是我们的页面中有一个章节名称目录,如何点击目录中的名称,就能正好在页面中显示相应内容。

如图所示:

点击目录的"总体评价"跳转到相应内容,如图:

就是这样的一个效果。在很多网页中经常看到。

这个案例我们会分三部分来讲解。

今天主要学习如何使用<a>标签进行页面内链接,已及从其他网页链接该页面内的指定内容。

这里会有一个问题,就是点击链接后,文字内容会置顶显示,这个默认形式会给我们带来不便,解决方案较复杂,会在最后一次讲解中给出。

下一次我们来学习如何对图片添加映射超链接,映射超链接的意思是,假如我的图片中有两个人物或物象,考虑读者会感兴趣,想了解更多内容,如何框选出物象边缘来添加链接,这就是图像映射超链接。如图:使用一个平时不可见的边框来制作图片映射链接,确保感兴趣的读者能点击到画面中的目标物体。

最后一部分我们将回答今天结尾的问题,也就是如何解决置顶问题。这一部分也会作为HTML部分结束的综合练习,和css部分启蒙的预热练习。,

首先看一下今天的基础代码

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>文内链接</title>
  </head> 
  <body >
  <a>试飞进程</a>
  <a>研制情况</a>
  <a>服役动态</a>
  <a>总体评价</a>
  <p>
  <h2><a>试飞进程</a></h2>
  歼-20隐形战斗机首架技术验证机于2011年1月11日中午12时50分左右进行首次升空飞行测试,13时08分成功着陆,历时18分钟。<br>整个首飞过程在歼-10S战斗教练机陪伴下完成 。2016年10月28日,首次发布"空军试飞员将驾歼-20飞机亮相中国航展"后,还陆续发布了"歼-20战机列装空军作战部队""空军歼-20战机首次开展海上方向实战化训练"等。
  <h2><a>研制情况</a></h2>
  在2016年11月1日,第十一届珠海航展,歼-20首次进行空中飞行展示。两架歼-20做了公开飞行,不仅在现场引起轰动,也立刻被西方媒体大量报道。歼-20是中国现代空中力量的代表作,也进入了世界最先进的第五代战斗机行列,它是中国国防能力高速发展的一个象征。<br>2018年11月11日,第十二届中国航展在珠海迎来"高光时刻":歼-20战机在公开飞行展示中挂弹开仓,震撼献礼人民空军成立69周年纪念日。 <br>2019年10月13日,庆祝人民空军成立70周年航空开放活动新闻发布上,空军新闻发言人申进科大校介绍歼-20战机列阵人民空军"王牌部队"
  <h2><a>服役动态</a></h2>
  2017年3月9日,中央电视台报道歼-20战斗机正式进入空军序列。<br>2017年3月13日,《中国日报》发布消息称,中国自主研制的歼-20近期将装配国产发动机。<br>2017年7月30日,歼-20三机编队参加在朱日和举行的庆祝中国人民解放军成立90周年阅兵。歼击机梯队飞来,3架歼-20隐形战斗机以楔形编队的形式在天空中飞过。<br>2017年9月28日,在中国国防部行记者会上,国防部新闻发言人吴谦大校介绍歼-20飞机已经列装部队。<br>2017年11月10日上午,中国空军发言人申进科大校表示,歼-20 列装部队后,已经开展编队训练。<br>2018年2月9日,中国空军新闻发言人申进科大校发布消息,歼-20开始列装空军作战部队。<br>2018年10月30日,中国空军4架歼-20隐形战斗机现身珠海金湾机场上空。<br>2019年10月1日,歼-20现身庆祝中华人民共和国成立70周年阅兵式;阅兵中,歼-20与歼-16、歼-10C三型飞机分别以5机楔队组成战斗队形接受检阅;该三款歼击机被誉为中国空军歼击机家族的"三剑客",是未来联合作战的骨干力量
  <h2><a>总体评价</a></h2>
  歼-20是眼下亚洲区域最先进的战机,这让中国空军在面对日本、韩国与印度等国家的空军时占有显著优势。外媒将歼-20与其他国家战机进行了对比。俄罗斯苏霍伊苏-57战斗机由于研制进度几度推迟,尚未正式交付入役;美国F-35战斗机也多次出现飞机供氧不足的问题,大面积停飞,出口受阻;韩国KF-X隐形战机先是被爆出因掌握不了关键技术而被迫降成四代半战机的情况,后又传出了合作方印尼打算撤资并已告知韩国的消息。因此,中国歼-20战机成为亚太区域领跑的优势战机。<br>中国空军正向全疆域作战的现代化战略性军种迈进,成为有效塑造态势、管控危机、遏制战争、打赢战争的重要力量。歼-20战机列装空军作战部队,将进一步提升空军综合作战能力,有助于空军更好的肩负起维护国家主权、安全和领土完整的神圣使命。<br>歼20是我国自主研制的第五代战斗机,它的研制实现了既定的四大目标——打造跨代新机、引领技术发展、创新研发体系、建设卓越团队。打造跨代新机,是按照性能、技术和进度要求,研制开发我国自己的新一代隐身战斗机。引领技术发展,指通过自主创新实现强军兴军的目标。歼20在态势感知、信息对抗、协同作战等多方面取得了突破,这是中国航空工业从跟跑到并跑,再到领跑的必由之路。创新研发体系,是指建设最先进的飞机研制条件和研制流程。通过一大批大国重器的研制,我们建立了具有我国特色的数字化研发体系。建设卓越团队,是指通过型号研制,锤炼一支爱党爱国的研制队伍,这些拥有报国情怀、创新精神的优秀青年是航空事业未来发展的生力军。未来,我们将在战斗机的机械化、信息化、智能化发展征程上不断前行。
  </p>
  </body> 
  </html>

看着复杂,实际上主要都是些内容文字,简化后的代码如下:

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>文内链接</title>
  </head> 
  <body >
  <a>试飞进程</a>
  <a>研制情况</a>
  <a>服役动态</a>
  <a>总体评价</a>
  <p>
  <h2><a>试飞进程</a></h2>
    歼-20隐形........首次开展海上方向实战化训练"等。
  <h2><a>研制情况</a></h2>
    在2016年......"王牌部队"
  <h2><a>服役动态</a></h2>
    2骨干力量
  <h2><a>总体评价</a></h2>
    歼-20是眼下亚洲区域最先进的战机......不断前行。
  </p>
  </body> 
  </html>

就是在<body></body>中添加四个<a></a>标签来写入标题,并列写入一个<p></p>标签,并在<p></p>标签中添加文字内容和<h2></h2>标签。这时需要注意的是,<h2></h2>中还要用<a></a>标签夹住标题。

页面效果如下:

下面我们来添加文章内部链接

添加文章内部链接需要一前一后两个<a></a>标签。一个是目录中的<a></a>,如图:

一个是正文中的标题上的<a></a>,如图:

添加内部链接的办法非常简单,首先我们把目录中的标题<a></a>标签称为"召唤者"。把正文中的标题中的<a></a>标签称为"被召唤者"。如果您学过《》这篇教程就会知道,一个标签召唤或调用另一个标签需要能叫出被调用标签的名字!

所以先要给"被召唤者"起名字,起名字的方法有两种,一种是name="",还有一种是id="",建议大家都写上,因为有的浏览器不支持name属性。具体写法如下:

<h2><a name="chapter1" id="chapter1">试飞进程</a></h2>

在"召唤者"<a>标签中使用href属性来叫出"被召唤者"的名字!示例代码如下:需要在引号中添加#后再写名字。

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>文内链接</title>
  </head> 
  <body >
  <a href="#chapter1">试飞进程</a><!--看这里-->
  <a>研制情况</a>
  <a>服役动态</a>
  <a>总体评价</a>
  </body> 
  </html>

<a>标签有点懒,只叫名字的话它会假装听不见,所以还要具体描述它的特征,让它不好意思偷懒,也就是前后两个<a></a>标签中间夹的文字内容要一致,比如上文中的两个<a>中间的内容都是"试飞进程"。如果字不一样,休想叫得动"被召唤者"。

效果如下:

点击后,试飞进程标签跳到了视窗的最顶端,如图:这种顶在视窗顶端的显示的方式我们称之为"置顶"。

下面我们使用这个方法,为剩下的标题添加页面内链接。

打开外部页面中指定信息位置的方法

首先,我们复制一下这个页面文件命名为"打开外部页面文件指定位置.html",然后删掉<p></p>和其中内容。示例代码如下:

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>打开外部页面文件指定位置</title>
  </head> 
  <body >
  <a href="#chapter1">试飞进程</a>
  <a href="#chapter2">研制情况</a>
  <a href="#chapter3">服役动态</a>
  <a href="#chapter4">总体评价</a>
  </body> 
  </html>

方法非常简单,在href中添加外部页面路径即可!示例代码如下:

<a href="文内链接ceshi.html#chapter1">试飞进程</a>

依次添加后,页面效果如下:

点击其中一个标题"研制情况",页面跳转,如图:

这里,置顶的问题就出现了,如果我们的文章目录一直在视图的顶部,每次点击页面内链接时,顶部的目录就会和标题重叠,非常不美观,解决这个问题就要涉及到<div>布局的应用,我们以后再说。

OK!今天我们的内容结束了,下一次学习图片映射链接功能。

喜欢的朋友请关注我,点赞也会让我动力满满。

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>标签实现文本内链接——零基础自学网页制作