文档章节

图片简介

 会娟
发布于 2017/08/03 11:13
字数 452
阅读 4
收藏 0

1、网页中的图像

    1.1 img:引入图像(产品图像)、icon图像、背景图像

    1.2 img图像的属性:

属性 描述
alt text 定义有关图像的短描述
src URL 要显示的图像的URL
height px/rem/%等 定义图像的宽度
width px/tem/%等 定义图像的宽度
align top/middle/bottom 图片对齐方式

    1.3 图片格式:jpg/jpeg/png/gif/svg/bmp等

2、HTML5中图片引入

    2.1 figure:包含img标签和figcaption标签

    2.2 figcaption:描述图片的,图片下方的描述文字

    2.3 img:

    例:<h2>HTML5 figure和figcaption</h2>

        <img src=" #" alt="美女"><figcaption>是一位美女</figcaption>

3、图片路径src

    3.1 相对路径(引入本地路径)<img src="../" /><!--根目录--><!--强烈建议使用相对路径-->

    <img src="../../"><!--父级图片-->

    3.2 绝对路径(引入服务器路径)<img src="http://www.okay686.cn/img.png><!--不能轻易的更换图片,如果更换图片,需要上传图片到服务器上,如果是http那就更不好办了,因为最终的项目是需要发送到服务器上面的,如果发送后,和本地的路径是不一样的-->

4、图片的尺寸和提示文字

    4.1 width/height:<img src="#" width="300"><!--只设置宽度或者高度属性,这样图片会自动调整图片尺寸-->

    4.2 alt:<img src="#" alt="美女" title="美少女"><!--title标签,鼠标移动到图片上,显示美少女字样-->

5、图片的对齐方式<!--align:top,middle,bottom-->

    例:<h2>图片对齐方式</h2>

<div>默认底部对齐:<img src="#" alt="美女" title="美少女" align="bottom">这是一位美女</div>

<div>居中对齐:<img src="#" alt="美女" title="美少女" align="middle">这是一位美女</div>

<div>顶部对齐:<img src="#" alt="美女" title="美少女" align="top">这是一位美女</div>

 

 

© 著作权归作者所有

上一篇: 表格案例1
下一篇: HTML5文字与排版
粉丝 1
博文 8
码字总数 4638
作品 0
无锡
私信 提问
【码云周刊第 44 期】有哪些实用且堪称神器的 Chrome 插件

chrome 的简洁快速以及丰富的插件种类使得它在国内日益盛行,帮助了我们很多 chrome 用户提升了工作效率,而今天小编要给大家推荐9款实用甚至堪称神器的 chrome 插件,希望对提升大家的工作效...

码云Gitee
2017/10/27
0
29
工具类汇总

工具类已封装成lib,代码地址:http://git.oschina.net/SRain215/DesignModeApp的SCUtilsLib中。 一、AppUtils: 简介:获取APP的信息的辅助工具类。 获取版本信息 安装、卸载 打开、退出 二...

SRain215
2016/09/12
56
3
HTML前端开发之路——多列布局

利用多列布局的属性可以轻松的为文字或者图片添加瀑布流效果; 首先看一下多列布局的属性总览: column-width属性简介 2.column-count属性简介 3.column属性简介 4.column-gap属性简介 5.co...

LeslieMay
2016/02/12
88
0
怎么实现类似QQ发送新闻链接 然后出现图片和简介

尝试了用jsoup实现抓取Description提供简介,但是图片不好抓取。有没有大神能提供一个可用的方法。我看腾讯客服的回复,网页只要添加了就可以被腾讯的服务器解析,并形成类似这种带图片、标题...

KrizeChan
2016/04/15
140
0
MAImagePickerController

简介: 扫描王,InstaPDF之类的软件都实现了拍照后编辑图片,可以拉动边框,选取提取的图片的部分,如果拉动后的形状为不规则的,会自动将不规则图片转化为规则的图形。 这份代码就实现了类似...

23Code.com
2013/01/23
222
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring AOP之同一个对象方法内部自调用导致事务失效问题

对于像我这种喜欢滥用AOP的程序员,遇到坑也是习惯了,不仅仅是事务,其实只要脱离了Spring容器管理的所有对象,对于SpringAOP的注解都会失效,因为他们不是Spring容器的代理类,SpringAOP,就切入不...

xiaomin0322
32分钟前
1
0
Linux learn(七)

例行工作安排(定时任务)at,cron at 由atd服务提供,at指令所产生的的要运作的工作都以文本文件的方式写入 /var/spool/at/目录内,该工作便能等待at的这个服务取用与执行了。 权限限制相关...

lazy~
39分钟前
2
0
Vim与clang-format

前一段时间因工作需要参与了一个开源项目,在向github提交代码后提示格式校验失败。 项目的管理者告知,要想修改的代码能入库需要使用Clang-Format校验。 需要使用下面的命令对上次的修改重新...

DB_Terrill
41分钟前
1
0
Kafka写入数据保证不丢失

Kafka写入数据保证不丢失: 每个partition至少有一个follower在ISR列表中,跟上了Leader的数据同步 每次写入数据时,都要求至少写入partition leader成功,还至少一个ISR里的follower写入成功...

春哥大魔王的博客
48分钟前
1
0
git仓库删除所有提交历史记录,成为一个干净的新仓库

把旧项目提交到git上,但是会有一些历史记录,这些历史记录中可能会有项目密码等敏感信息。如何删除这些历史记录,形成一个全新的仓库,并且保持代码不变呢? 1.切换到新的分支 git check...

dragon_tech
50分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部