HTML@4嵌入资源标签

作者 Jackie Anxis 日期 2016-08-07
HTML@4嵌入资源标签

常用标签

嵌入资源标签

图片 img

提示:img是没有闭合标签的,也就是没有</img>
img标签有很多属性,简单介绍几个,具体可以去W3School【HTML img标签】

  • src属性
    绝对地址指的就是这张图片的地址,可以直接将这个地址复制到浏览器中打开这张图。
    相对地址指的是,这张图相对于这个HTML文档的地址。
    比如文档结构是这样的:

    在”blog - 副本”文件夹下,有img文件夹和一个index.html文件,index.html文件需要访问到img文件夹中的icon.png文件时,应该写<img src="img/icon.png">
    又假如,你需要访问到上级文件夹,此时文件结构是这样的:

    你需要在index.html中访问icon.png文件,则要写成这样<img src="../icon.png">,要访问上级的上级的文档则需要写src="../../",以此类推。

  • alt属性:如果src中的图片无法显示,alt就会替代该图片显示。

    <img src="http://jackie-anxis.com/img/avatar.png" alt="封面">

  • width&height属性:用来规定图片大小。可以有两种单位,%和px(像素)。
    %也就是相对父元素的大小。px就是像素,也就是绝对大小。
    <div style="background-color:orange; width: 300px; height: 300px;">
    <img src="../icon.png" width="50%">
    </div>


显然这个50%指的是父元素的50%。

页面 iframe

也就是在页面中嵌入另一个页面,假如说我在google的搜索页<body>中添加一段

<iframe src="www.google.com"></iframe>

就能嵌入一个页面。

当然这是iframe标签最基础的功能,iframe标签还可以用来做很多强大的事。而且它还有很多属性,可以访问【HTML iframe标签】【深入理解iframe】(后面一篇可能需要有点JS基础)。

插件 object embed video audio canvas svg map area

这些都是用来嵌入一些插件的,但有些比较有难度,我只讲一些比较简单的,其他的,我会给出链接,你们可以参考别人的博客来帮助学习,我的观点是:这些标签你只要懂的它们的作用即可,而具体如何使用可以查看资料。
<object>标签
object标签可以用来嵌入一些插件(除了图片以外的多媒体),比如Flash,Java Applets,MP3,QuickTime Movies等。基本上主流浏览器都支持object标签的实现,故而object可以完全代替标准不赞成使用的applet,embed,bgsound标签。大概写法如下:

<object type="application/x-shockwave-flash">
<param name="movie" value="http://pdfReader.swf">
<!--播放器地址可以写进value中-->
<param name="flashvars" value="http://book.pdf">
</object>

其中,当object元素没有显示的时候,<object></object>之间的代码就会被执行。具体我也不再赘述,可以参考HTML object标签(梦之园)HTML object标签(大肥子猪)

<embed>标签
这个标签和object功能类似,但是<embed>标签是HMTL5推出的新特性。同样不支持嵌入图片媒体,不赞成使用这个标签,因为它有很多毛病,也不符合网页设计理念,对旧的浏览器也不支持。

<video>标签
用来加载视频资源,也是HTML5新支持的标签,和<img>标签类似,可以非常便捷的引入资源。
写法大概是:

<video src="media/butterfly.mp4" controls>
您的浏览器不支持 video 标签。
</video>

src是视频的路径,controls表示显示视频播放控件,默认是不显示的。标签之间的文字会出现在不支持video标签的浏览器中,作为后备内容出现,用来兼容不支持video标签的浏览器。具体属性可以查看HTML video标签

<audio>标签
基本和video属性一致,不再赘述。要了解详细信息可以看:HTML audio标签

<canvas>标签
可以用嵌入的脚本来绘制图形,后面讲JS的时候会提到,然后这里就简单贴一段代码,可以看看它是怎么工作的。

<canvas id="myCanvas">
your browser does not support the canvas tag
</canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');//找到canvas标签
var ctx=canvas.getContext('2d');//制定绘图模式是2d
ctx.fillStyle='#FF0000';//填充颜色
ctx.fillRect(0,0,80,100);//绘制长方形,参数是左上角和右下角的坐标
</script>

结果如下:

详情:HTML canvas标签

<map><area>标签
这两个标签要配合使用,area标签永远嵌套在map标签中,可以用来映射图像区域。

<img src="http://o6vut8vrh.bkt.clouddn.com/16-8-10/88534460.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="rect" coords="0,0,123,62" href="https://www.baidu.com" target ="_blank" alt="Mercury" />
<area shape="circle" coords="166,38,30" href ="https://www.google.com" target ="_blank" alt="Sun" />
</map>

效果可以直接点击试试看:
Planets


Mercury
Sun

具体参考:HTML map标签