HTTML多媒体标记与框架标记

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

多媒体标记

在html中可以使用多媒体标记来在网页上播放音频文件,或者显示一些好看的图片用来装饰网页。Flash文件也可以通过相应的标记显示在网页上,标签是用于在网页上播放视频文件的。

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基本上很少使用了,但是在论坛、贴吧等类型的网页可能会应用到。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,585评论 18 139
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,224评论 1 41
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,393评论 25 707
  • CSS和JS在网页中的放置顺序是怎样的? CSS以link方式放在头部,否则有可能出现白屏或者FOUC(无样式内容...
    咸吧阅读 540评论 1 0
  • 今天我们学校有一个教研活动,我是设备的负责人,到了最后还有一个人在演讲,这时候大屏幕忽然黑了。赶紧试着抢修...
    浪上头了阅读 277评论 0 0