HTTML多媒体标记与框架标记

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。

多媒体标记

在html中可以使用多媒体标记来在网页上播放音频文件,或者显示一些好看的图片用来装饰网页。Flash文件也可以通过相应的标记显示在网页上,<v ideo>标签是用于在网页上播放视频文件的。
video里需要嵌套source标签来指定视频文件的路径,或者网址路径。source里有两个属性:src和type,前者是用于指定视频文件的地址,后者是指定视频文件的格式,例如mp4、wave、webm等等。
video里常用的属性有width:设置视频在页面上的宽度,height:设置视频在页面上的高度,autoplay:设置视频自动播放,也就是当网页打开就自动播放视频,loop:设置循环播放,controls:设置将视频的控制面板显示出来,src:也可以用来指定视频文件的地址。 示例:

运行结果:

这是Chrome浏览器上的效果,每个浏览器的控制面板会有区别。

思维导图:

< audio>是用于在网页上播放音乐文件的标签,和video一样需要嵌套source标签来指定音乐文件的路径,虽然可以在audio标签上使用src来指定,但是会覆盖source里的src,也就是说,会全局默认为audio里的src路径,audio标签里的source用法和video里标签的用法是一样的。 audio里也有autoplay、loop、autoplay属性,这些属性代表的意义和video里的属性是一样的。
示例:

运行结果:

思维导图:

接下来是< img>标签,这是用于在网页上显示图片的标签,其中的src属性不用说也知道是用来指定图片文件的路径的,img里也有width和height属性,但是在img里一般只设置其中一个。因为有一个特性:只设置其中一个浏览器就会自动调整图片宽高的比例,两个都一起设置的话就要计算好图片的比例,不然图片比例不对看起来就是扭曲的,不设置height和width属性就会按照图片原本的比例显示。
示例:

运行结果:

alt属性,此属性可以指定在图片加载失败的时候显示一些文字,例如我把图片路径弄错一下,实现这个效果:

运行结果:

align属性,这个属性之前也多次用到过,在img里将这个属性的值设置为left的话,文字就可以在图片旁边显示,可以使用vspace调整图片与文字的上下间隔,hspace则可以调整图片与文字的左右间隔。 示例:

运行结果:

像新闻或者某些有图片的文章就会用到这种效果。

热点标记:在img标签还有一个应用:设置图片热点,当你点击图片中的热点时就会跳转到指定的页面中。一个图片设置了热点的话,你鼠标移动到热点的位置就会变成一个小手。
给图片设置热点需要使用map和area标签,map需要设置一下name属性,然后img标签里的usemap属性指定map里name属性的值,usemap的值需要在前面加上一个#符号。
area是嵌套在map标签里的,area用于设置热点的形状、大小、跳转的页面等等,shape属性是用来设置热点的形状的,可以选择以下几种形状:

coords则是用来设置热点的大小,和超链接一样使用href来设置跳转页面,area里还可以使用target属性。
示例:

运行结果:

可以看到图片上有个正方形的形状,这是因为我点击了一下热点,所以显示出了形状,如果没有点击的话,是不会出现任何形状的,就好像什么都没有一样。

< applet>标签是用来插入Java的Applet程序的,让程序可以在浏览器中运行,但是有一个运行条件,就是需要有安装JVM虚拟机,不过这个标签已经淘汰了,几乎不再使用了,因为Java也放弃了Applet的开发,所以了解一下即可。

< embed>标签用来引入插件,例如Flash就可以使用这个标签引入,示例:

运行结果:

有使用过的网银的人都知道,在登录账户或者进行转账交易的时候,都会需要下载或更新一个安全控件,这个控件就是一个插件,也是使用< embed>标签来引入的。

思维导图:

多媒体标记思维导图总结:

框架标记

其实框架就在能够在一个窗口中嵌套几个网页显示,框架标记有iframe、frame、frameset,后面的两个基本上是淘汰了,只有iframe会用得。iframe是用来在网页中再嵌套一个网页的,我们其实经常看到这种应用,例如新闻网站或者其他网站上的那些广告,就是iframe的一个应用。例如:

iframe应用的比较多的原因,是因为需要把一些经常要更新的内容和几乎不怎么更新的内容分离开来,例如像图片上的文章就基本不会更新的,而旁边的广告则经常要更新,如果不分离开将这两种类型的页面放在一块的话,每次向服务器读取数据的时候都得读取不需要更新的内容,这样的话会浪费带宽资源、增大服务器的压力。
iframe使用src来指定网页地址,同样的也具备width和height属性,用来调整页面的宽高。
示例:

运行结果:

使用scrolling属性可以设置滚动条是否显示,值设置为no则是不显示,frameborder属性可以设置边框是否显示,设置为0或者no表示不显示。
示例:

运行结果:

iframe设置name属性后,可以结合超链接标签里的target属性来显示页面,点击一下超链接后将页面显示在iframe上,示例:

运行结果:

以上是iframe的基本使用方式。
最后是frameset和frame,这两个是结合在一起使用的,frameset用来制定页面显示的方式,frame用来指定显示的页面。frameset有个cols属性用来设置网页为左中右的显示方式,示例:

运行结果:

rows属性则是设置网页为上中下的显示方式,示例:

运行结果:

虽然frameset和frame基本上很少使用了,但是在论坛、贴吧等类型的网页可能会应用到。

时间: 2024-10-08 09:46:10

HTTML多媒体标记与框架标记的相关文章

html标记语言 --框架

html标记语言 --框架 六.框架 1.什么是框架 框架将浏览器划分成不同的部分,每一部分加载不同的网页 实现同一浏览器窗口中加载多个页面的效果. 语法格式<frameset>.......</frameset> 2. 属性 2.1 cols 使用"像素数"和%分割左右窗口,"*" 表示剩余部分 如果使用 "*" ,"*" 表示框架平均分成2个 如果使用 "*" ,"*&

Word 2003中编辑标记与格式标记大讨论

问题 Word 2003中编辑标记与格式标记是不是一回事? 我花费了很多时间在网络上查询,看到有一个论坛上有一个提到,这两个说法是一回事.更奇怪的是,不少WORD大师级人物,也没有解释好这两个说法. 我在WORD 2003帮助系统下输入搜索关键字"编辑标记",得到的结论如下: 显示或隐藏格式标记 单击"常用"工具栏上的"显示/隐藏编辑标记" . 提示 通过单击"工具"菜单上的"选项",再单击"视图

HTML布局标记与列表标记

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权:凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记. 布局标记 首先要介绍的布局标记是div标记,div可以做网页的层也可以做网页的分区.当div做网页的层时可以实现漂浮在网页上的效果,就像我们经常可以在网站里看见的那些漂浮广告.div做网页的分区时,则是可以布置网页的格局,把一个网页分为多个模块,由这些模块结构来构建出一个网页.div里有一个style属性这个属性是用来控制样式的,比如可以调整背景颜色.组件的

学习HTML第二天 学习格式标记和文本标记

<html> <head>  <title>  第二节学习格式标记和文本标记  </title>  <meta charset="UTF-8"> </head> <body> 开始学习格式标记 flash bird<br/>换行学习! <P> flash bird 段落学习 </P> <P> flash bird 段落学习  <p>  flas

阿里面试题---------关于html标签中物理标记和逻辑标记区别

关于html标签中物理标记和逻辑标记区别因为两者所达到的效果一样,所以人们就没有太在意这两个到底有什么区别,那么今天我来告诉大家,是有区别的. 它们的区别就再于一个是物理标记(实体标记),一个是逻辑标记. 什么是物理标记?什么是逻辑标记? 物理元素所强调的是一种物理行为,比如说我把一段文字用b标记加粗了,我的意思是告诉浏览器应该给我加粗了显示这段文字,从单词的语义也可以分析得出,b是Bold(加粗)的简写,所以这个B标记所传达的意思只是加粗,没有任何其它的作用. 而Strong我们从字面理解就可

html标记语言 --图像标记

html标记语言 --图像标记 三.图像标记 1.使用方法 <img src="路径/文件名.格式" width="属性值" height="属性值" border="属性值" alt="属性值"> 2.注意:<img>为单标记 3.标记的属性 3.1 src属性 指定我们要加载的图片的路径和图片的名称以及图片格式 3.2 width 指定图片的宽度 3.3 height 指定图片的

html标记语言 --文本标记

html标记语言 --文本标记 二.文本标记 1.h1-h6 标题标记,h1最大 2.font 字体设置标记 2.1 size字体大小.<font size="3"> 取值范围1-7,默认3 2.2 color 颜色 <font color="red"> 2.3 face 字体 <font face="楷体"> 3.b 粗字体 4.i 斜字体 5.sub 下标 6.sup 上标 7.tt 打印机字体标记 8.c

用p标记 包括div标记 最后浏览器渲染出来的 却没在里面

思宜企鹅:33257946没想到之前犯了这种低级错误 在学习html语言的之后就说过  标签可以嵌套 但是 有些标记是不能嵌套的 书写HTML结构的时候,对于标签的嵌套问题,在我发现这个问题之前,都不在自己的考虑之中,还傻傻的以为标签之间是可以进行百搭的! 比如 a标签再嵌套a标记就会不生效 (1)a标签不能嵌套a标签(链接嵌套)  不可以 <a href="###">父元素<a href="###">子元素</a></a&

HTML多媒体标记之字幕标记

在HTML中,可以向页面中插入字幕,水平或垂直滚动显示文字信息,字幕标记的格式如下: <marquee 属性="值"...>滚动的文字信息</marquee> <!DOCTYPE html -> <html> <head> - </head> <body> - <marquee bgcolor="silver" direction="left" scroll