《HTML5 开发实例大全》——1.23 在网页中显示一幅图片-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

《HTML5 开发实例大全》——1.23 在网页中显示一幅图片

简介:

本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章,第1.23节,作者: 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.23 在网页中显示一幅图片


4941f5ccfc30b7efeef16efe8cb19fc7f0155717

实例说明

在HTML 5页面中,除了显示文档或字符外,还经常需要放入一些其他元素,例如图片< img >、页面< iframe >和多媒体< object >等。这些元素对于整个DOM文档来说,属于嵌入内容。其中< img >元素的功能是在页面中导入一幅图像,它是页面开发中使用较为频繁的一个元素。在HTML 5中,该元素的"border”、“align”、“hspace”、“vspace”属性不再被支持,这些功能需要通过CSS样式来实现。

在 HTML 4.01 中,不赞成使用以下布局属性:align, border, hspace、vspace。在 HTML5 中不支持这些属性。< img >元素的主要属性如表1-11所示。


d9b953d6e87dc56ab3bf500a9fd8976a96723cff

本实例的功能是,使用< img >元素在网页中显示一幅图片,本实例的图片素材是123.jpg。

具体实现

使用Dreamweaver创建一个名为“023.html”的文件,具体代码如下所示:

<!DOCTYPE html>
<html>
<body>
<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" width="400" height="266" />
</body>
</html>

执行效果如图1-42所示。


4a95cd63b1b60f8ae6398181227325fed6cfae9c

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章