• 提升品牌形象
  • 最新HTML5+Css3网站制作技术
  • 完全区分与同行的震撼视觉体验
  • 自动适应平板、手机及电脑屏幕
  • 详细介绍
  • 企业网站入门首选
  • 强大丰富的系统功能
  • 超过1000种页面风格
  • 每年仅需¥1500元,两年仅需¥2000元
  • 详细介绍
  • 4000/4006两种开头选择
  • 智能占线、断线呼转
  • 高达300组可呼转号码
  • 智能语音导航
  • 详细介绍

If you have any question,please contact with us.

  • 昆明网站建设-在线客服

    蛋切刀 一指
    妖异眼瞳
  • 昆明网站设计-服务电话

    4000-555-94113099998627
  • 昆明网站建设-联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101

HTML5 实战-微设计创意工坊 为您提供 昆明网站制作 昆明网站建设 昆明网站设计 云南网站建设 昆明网络公司

  • Home
  • /
  • HTML5 实战
3.7 嵌入内容

3.7 嵌入内容

在页面中,除了显示文档或字符外,还需要放入一些其他元素,如图片<img>、页面<iframe>、多媒体<object>等,这些元素对于整个DOM文档来说,属于嵌入内容。在HTML5中,这些嵌入内容的有些属性不再被支持,下面我们通过实例逐个进行介绍。

3.7.1 img元素

<img>元素的功能是在页面中导入一幅图像,它是页面开发中使用较为频繁的一个元素。在HTML 5中,该元素的“border”、“align”、“hspace”、“vspace”属性不再被支持,这些功能需要通过CSS样式来实现。

例如,在新建的HTML页面中加人如下代码:

	...省略部分代码
	<styletype=11text/css">
	  img{
	    padding:5px;
	     border:solid lpx#666;
	     text-align:center
	  }
	</style>
	<a href="javascript:void(0)">
	   <imgsrc="Images/img_01.jpg"alt="HTML5下的图片”/>
	</a>
	...省略部分代码

上述代码中,元素<img>创建的图片可以被单击,通过CSS样式代码控制页面中该元素的效果。因为在页面的<style>元素中,定义了<img>元素的展示样式,包括图片元素4个方向的边距为“5px”,添加一个带颜色的边框,以及整个图片元素居中,实现方法见代码中加粗部分所示,这种做法比较符合HTML 5对元素<img>的支持。

3.7.2 iframe元素

<iframe>元素用于在页面中创建包含另一文档的框架。出于对页面安全性的考虑,HTML 5不再支持<frame>框架元素,包括<frameset>框架集元素,但仍然支持<iframe>元素,只是该元素的一些原有属性不再被支持,而仅仅支持“src”属性。

例如,在新建的HTML页面中加入如下代码:

	...省略部分代码
	<iframe src="3-l.html" sandbox="a11ow-forms"></iframe>
	...省略部分代码

在上述代码中,用到了“src”属性,HTML 5还设置了另外一个属性“sandbox”,该属性是<iframe>元素在HTML 5中新增加的属性。

众所周知,使用<iframe>元素时包含另一个页面,这一操作的安全性一直让开发者担忧。为了规避这一不足,HTML 5新增加了一个元素的属性“sandbox”,通过该属性的设置,可以避免私自访问父页面、执行异样脚本、通过脚本嵌入表单或控制表单。该属性有4个属性值可供选择,如表3-5所示。

表3-5 “sandbox”属性及描述

在设置时,根据实际需求选择允许的操作,从而有效避免<iframe>元素嵌入的文档有安全性问题。

3.7.3 object元素

<object>元素用于在页面中嵌入一个对象,这个对象包括视频、音频、Flash等多媒体文件。该元素在HTML 5中仍然被保留,只是有些原有的属性不再被支持。

在HTML 5中,元素<0bject>被支持的原有属性如表3-6所示。

表3-6 <object>元素在HTML 5中被支持的属性与描述

举个例子,在新建的HTML页面中加入如下代码:

	...省略部分代码
	<object data="Video/swf_01.swf" type="all"
	         width=”200px" height="20Opx">
	</object>
	...省略部分代码

上述代码按照HTML 5的支持特征,设置了<object>元素的关键属性“data”值。如果按照设置的多媒体路径找到了该对象,在支持HTML 5属性的浏览器中可以实现播放功能。

在HTML 5中,新增了专门用于播放多媒体文件的标签——<video>元素与<audio>元素。前者用于播放视频或影视,后者用于播放音频文件,这两个元素的使用方法将在第6章中详细介绍。<video>元素与<audio>元素将逐步取代<object>元素,从而真正展示HTML 5在处理视频或音频方面的强大优势。

本文由昆明网站建设,昆明微设计整理发布,转载请保留链接


  • If you have any question,please contact with us.

  • QQ在线客服

    蛋切刀
    可乐上瘾
    妖异眼瞳
  • 服务电话

    4000-555-94113099998627
  • 联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101