HTML网页制作:[1]插入图片
1、首先,通过TXT文档,创建一个网页的基本框架。
也就是html、head、body。
当然,用dw创建一个网页文档,会自动写入这些代码。
这里,小编使用的是dw.
![HTML网页制作:[1]插入图片](https://exp-picture.cdn.bcebos.com/ab966c6b0ce265e77de4f2cb9f23beb9773eb742.jpg)
2、图片的格式通过有3种:
1)GIF
2)JPEG
3)PNG
GIF最大的好处是可以制作动态图片。
具体选择何种格式,看你自己。
3、OK,请看笔者目录下的资源。
其中,.html文件,是我已经创建并保存好的网页
test.jpg是即将要插入的图片。
其实,最好的目录架构,是单独创建一个文件夹,比如img等,将图片资源放入其中。
笔者之所以这样,是为了截图方便。
![HTML网页制作:[1]插入图片](https://exp-picture.cdn.bcebos.com/777f3fc2bbd6e1d03c030cd20d254193cfe8af42.jpg)
4、那么如何插入图片呢?
非常简单,插入图片的标记值有一个:“img”标记!
请在body中加入如下一行:
<img src="./test.jpg">
由src指示图片的位置
![HTML网页制作:[1]插入图片](https://exp-picture.cdn.bcebos.com/cfa9ae04541bd10fabcd9b29ba0e1799e82aa742.jpg)
5、双击该网页运行,便可看到网页中的图片了
![HTML网页制作:[1]插入图片](https://exp-picture.cdn.bcebos.com/e86ba4b842406afea2ff67761eee41c1b6279f42.jpg)
1、如果感觉插入的图片太大,想更改图片的尺寸?
输入如下代码:
<img src="./test.jpg
width表示宽度
height表示高度
![HTML网页制作:[1]插入图片](https://exp-picture.cdn.bcebos.com/07c98f2ca5cadce8fba3964ffcf7980e5e209542.jpg)
2、入下图所示,我将图片的宽和高通通缩小,可以看到,图片的尺寸果然按照我的意愿进行了改变。
![HTML网页制作:[1]插入图片](https://exp-picture.cdn.bcebos.com/994f412043715fdb44cb2f89468920c5270f8c42.jpg)
3、那如果想给图片加上边框呢?
输入以下代码:
<img src="./test.jpg" border="5">
border为边框的宽度,默认为黑色
![HTML网页制作:[1]插入图片](https://exp-picture.cdn.bcebos.com/2184380f8835dd8a2035d3b403013870d4418742.jpg)
4、看,这里图片外围,出现了黑色边框
![HTML网页制作:[1]插入图片](https://exp-picture.cdn.bcebos.com/444696013870d541446730bb2e0f94fc518c8042.jpg)
5、网页中插入图片很简单,但是使用起来很复杂,不仅涉及到排版,还有颜色搭配、盒子模型等等。
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
阅读量:96
阅读量:194
阅读量:42
阅读量:99
阅读量:137