HTML中如何连接本地图片?

html-css019

HTML中如何连接本地图片?,第1张

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<body>标签中,输入html代码:<img src="small3.png" />。

3、浏览器运行index.html页面,此时添加的本地图片的路径是相对路径。

当然可以加了,前提看你在配置网站的时候,设置的路径按照相对于文档还是站点根目录,如果是文档,可以在写CSS或者用DreamweaverCSS面板中选择的时候,直接找到文档就可以了,如果是站点根目录,那就是/文件夹/图片,就可以了。

一般来说,选择相对于文档就可以,然后用CSS面板选择就可以了,不需要自己去写CSS代码。那样路径就可以自己填在你上面的括号里。

插入图片可以使用img标签来实现。

1、新建html文件,如图所示,在body标签中插入img标签,需要注意的是,img在html中没有结束标签,所以不需要添加“</img>”。给标签添加“src”属性,属性值填写想要添加图片的路径,这里以和html同一目录下的1.png为例,这样图片就插入完成了:

2、为了防止用户浏览网页时无法加载图片,可以给img标签添加“alt”属性,这个属性可以在图片加载失败时显示出来以告诉用户这里是张什么图片,还可以在用户将鼠标放在图片上是显示提示信息,这里以属性值“鹦鹉”为例:

3、img标签中插入的图片宽和高默认是图片自身的宽和高,如果想要自定义宽和高的话,可以用“width”和“height”来控制,这里以宽和高都是200为例,为width”和“height”设置属性值为“200”: