[HTML5]嵌入内容

简介: [HTML5]嵌入内容

目录


1、嵌入图像

    1.1在超链接里嵌入图像

    1.2创建客户端分区响应图

2、嵌入另一种html文档

3、通过插件嵌入内容

    3.1、使用embed元素

    3.2、使用object和param元素

    指定备用内容

4、object元素的其他用途

    4.1、使用object元素嵌入图像

    4.2、使用object元素创建分区响应图

    4.3、将object元素作为浏览器上下文环境

5、嵌入数字表现形式

    5.1、显示进度

    5.2、显示范围里的值

6、其他嵌入元素

    6.1、嵌入音频和视频

    6.2、嵌入图像



1、嵌入图像

img元素允许我们在html文档里嵌入图像


image.png

要嵌入一张图像需要使用src和alt属性。

<img src="triathlon.png" alt="triathlon image" width="200" height="67"/>

src属性:指定欲嵌入图像的URL。


⚠️width和height属性告诉浏览器图像尺寸有多大,而不是你希望它有多大。


1.1在超链接里嵌入图像

结合a元素创建一个基于图像的超链接。


<a  href="otherpage.html">        
  <img src="triathlon.png"ismapalt="Triathlon Image"   width="200" height="67"/>
</a>


1.2创建客户端分区响应图

创建一个客户端分区响应图,通过点击某张图像上的不同区域让浏览器导航到不同的URL上。


客户端分区响应图的关键元素:map

image.png

map元素包含一个或多个area元素,它们各自代表了图上可被点击的一块区域。

image.png

area元素的属性分为两类:


1、处理area所代表的图像区域被用户点击后浏览器会导航到的URL。


与目标地址相关的area元素类型:

image.png

2、包含了更有意思的属性:shape和coords属性。可以用这些属性来标明用户可以点击的各个图像区域。

image.png

<map name="mymap">
<area href="swimpage.html" shape="rect" coords="3,5,68,62" alt="Swimming"/>
<area href="cyclepage.html" shape="rect" coords="70,5,130,62" alt="Running"/>
<area href="otherpage.html" shape="default" alt="default"/>     
</map>

⚠️在制作客户端分区响应图时,无需使用a元素来显式创建超链接。


2、嵌入另一种html文档

iframe元素:允许在现有的html文档中嵌入另一张文档

image.png

<iframe name="myframe" width="300" height="100"></iframe>

 

html5引入了两个新的iframe元素属性。


(1)seamless:指示浏览器把iframe的内容显示得像主html文档的一个整体组成部分。默认情况下会有一个边框,如果内容比width和height属性所指定的尺寸要大,还会出现一个滚动条。


(2)sandbox:对html文档进行限制。脚本、表单、插件、指向其他浏览器上下文的链接会被禁用。


<iframe name="myframe" width="300" height="100"></iframe>

 

 ⚠️iframe的内容被视为与html文档的其余部分来源不同,这样会引发额外的安全措施。


iframe的sandbox属性所接受的allow值:

image.png


3、通过插件嵌入内容

html5添加了对embed元素的支持


3.1、使用embed元素

image.png

<embed src="http://www.youtube.com/v/qzA60hHca9s? version=3"  
type="application/x-shockwave-flash" width="560" height="349" 
allowfullscreen="true"/> 
<!--src属性指定了内容的地址,type属性指定了内容的mime类型,
width和height属性决定嵌入内容接在屏幕上占据的空间大小。
allowfullscreen属性可以启用全屏观看-->


3.2、使用object和param元素

object元素实现的效果和embed元素一样,工作方式稍有不同,带有一些额外的功能。

image.png

<object width="560" height="349"data="http://www.youtube.com/v/qzA60hHca9s? 
version=3"type="application/x-shockwave-flash">
<param name="allowFullScreen" value="true"/>
</object>
  • data属性:提供内容的地址;type属性指定了内容的mime类型;
  • width和height属性决定嵌入内容接在屏幕上占据的空间大小;
  • param元素:定义将要传递给插件的参数,每个需要定义的参数都各自使用一个param元素。


image.png

指定备用内容

object元素可以包含备用内容,在指定内容不可用时显示出来。


<object width="560" height="349" data="http://titan/myimaginaryfile">         
 <param name="allowFullScreen" value="true"/>
 <b>Sorry! </b> We can't display this content     
 </object>

让data属性引用一个不存在的文件,浏览器会尝试载入这个不存在的内容,如果失败了,就会转而显示object元素中的内容,parame元素会被忽略,只剩下短语和流内容会被显示出来。


4、object元素的其他用途

form属性让object元素可以关联html表单


4.1、使用object元素嵌入图像

用object元素在html文档里嵌入图像。

<object data="triathlon.png" type="image/png"></object>


4.2、使用object元素创建分区响应图

用object元素来创建客户端分区响应图,usemap属性可以用来关联map元素和object元素。


<map name="mymap">
<area href="swimpage.html" shape="rect" coords="3,5,68,62" alt="Swimming"/>
<area href="cyclepage.html" shape="rect" coords="70,5,130,62" alt="Running"/>
<area href="otherpage.html" shape="default" alt="default"/>
</map>

 

⚠️不是所有的浏览器都支持用object元素创建客户端分区响应图。


4.3、将object元素作为浏览器上下文环境

可以用object元素来将一张html文档嵌入到另一张文档之中,就像用iframe元素一样。

<object type="text/html" name="frame" width="300" height="100"></object>       
<!--这个功能仅仅在把type属性设置为text/html时可用。-->


5、嵌入数字表现形式

5.1、显示进度

progress元素:用来表现某项任务逐渐完成的过程。

image.png

value属性:定义了当前的进度,它位于0和max属性的值所构成的范围之间。当Max属性被省略时,范围是0至1 。用浮点数来表示进度,比如0.3=30%

<progress id="myprogress" value="10" max="100"></progress>


5.2、显示范围里的值

meter元素:显示了某个范围内所有可能值中的一个。

image.png

min和max属性设定了可能值所处范围的边界,它们可以用浮点数来表示。


meter元素的显示可以分为:过低、过高、最佳。


  • low属性:设定一个值,在他之下的所有值都被认为是过低。
  • high属性:设定一个值,在他之上的所有属性都被认为是过高。
  • optimum属性:指定最佳值。
<meter id="mymeter" value="90"min="10" max="100" low="40" high="80"  optimum="60"></meter>

将meter元素的value属性设置成过低和过高范围内的值,以及最佳值。


6、其他嵌入元素

6.1、嵌入音频和视频

audio、video、source、track


6.2、嵌入图像

canvas


目录
相关文章
|
6月前
|
监控 JavaScript 前端开发
JavaScript与HTML关系及其嵌入方式:新手常犯错误与规避策略
【4月更文挑战第1天】本文介绍了JavaScript与HTML的关系,强调了理解它们的分工和协作对于初学者的重要性。文中列举了新手在嵌入JavaScript时常见的错误,如嵌入位置不当、异步与延迟属性混淆、内联脚本与HTML混杂、忽略浏览器兼容性以及缺乏错误处理。提供了避免这些错误的策略,包括合理安排script标签、使用事件监听器、关注浏览器兼容性、学习调试技巧,并提倡遵循“结构-样式-行为”分离原则和使用错误处理机制。遵循这些最佳实践,有助于提高代码质量和开发效率。
104 1
|
JavaScript 大数据 BI
Superset图表通过iframe嵌入Html网页展示一文详解
Superset图表通过iframe嵌入Html网页展示一文详解
1809 0
Superset图表通过iframe嵌入Html网页展示一文详解
|
JavaScript
Vue中 使用 iframe 嵌入本地 HTML 页面 并 相互通信
Vue中 使用 iframe 嵌入本地 HTML 页面 并 相互通信
1781 0
Vue中 使用 iframe 嵌入本地 HTML 页面 并 相互通信
|
2月前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(10)嵌入Table
本文介绍了如何在Twaver HTML5中嵌入表格(Table),并设置表格的列(Column)和样式。通过示例代码展示了如何在React组件中创建表格并添加数据,以及如何通过样式设置表格元素的颜色。
39 2
Twaver-HTML5基础学习(10)嵌入Table
|
1月前
|
移动开发 HTML5
在HTML5中嵌入视频和音频
【10月更文挑战第5天】在HTML5中嵌入视频和音频。
36 3
|
3月前
|
JavaScript C#
Winform 嵌入html,数据交互
Winform 嵌入html,数据交互
52 0
|
6月前
|
移动开发 定位技术 UED
《HTML 简易速速上手小册》第7章:HTML 多媒体与嵌入内容(2024 最新版)
《HTML 简易速速上手小册》第7章:HTML 多媒体与嵌入内容(2024 最新版)
82 0
|
6月前
|
JavaScript
Vue中嵌入原生HTML页面的方法
Vue中嵌入原生HTML页面的方法
2067 0
|
数据采集
正则表达式匹配html标签,获取标签内容
正则表达式匹配html标签,获取标签内容
|
前端开发 Java
将图片的base64编码直接嵌入到html文件的css中
将图片的base64编码直接嵌入到html文件的css中
509 0