HTML5插入图片的过程记录

    科技2022-07-17  109

    插入图片的过程记录


    看完书上对于图片的插入之后感觉还是有点迷迷糊糊的,所以就在网上找了一些具体的方法,以及自己的摸索,来实现插入图片。 我感觉可以分成两种方法,一种傻瓜式的使用dw进行插入,一种就是对于任何编辑器都适用的插入。

    首先是使用dw进行插入图片: 你可以在dw中的工具栏中找到插入这一个选项,点击插入,插入图片,之后你可以自己选择插入的图片,它会提示你,是不是要将你需要插入的图片和你的代码放到一起,你选择是就可以实现插入图片了,这就给了我们一个提示,网站中需要使用到的图片要和网站的代码需要放到一个文件夹中,在之前也提到过,一般写网站的人都会将网站中需要用到的图片放到一个文件夹中,这样你就可以在你的网站的代码的文件夹下,专门建立一个网站图片的文件夹(名称最好为英文),使用的时候直接写它的路径就可以了,以上就是使用dw在网页中插入图片的一般操作。

    再是对于任何编辑器都使用的: 其实我感觉,我这个也就是从上面那个傻瓜式的方法中总结出来的

    首先在你的代码的文件夹下新建一个文件夹,作为专门存储图片的文件夹。然后就是写代码了,html5插入图片的代码格式一般为 <img src="存储图片的文件夹名称/图片名称" alt="对图片的描述" /> 这样完成了在网页中插入图片,在代码的不同地方写上插入图片的代码会有不同的影响,这里就不多说了。在这个的后面为网页设计背景图案的方法,知道怎么插入图片之后可以看看怎么给自己的网页弄一个好看的背景。

    现在讲的是设置网页的背景,设置网页的背景,你需要在网页代码的body标签中加上background="图片地址",

    <body background="images/background.jpg">

    之后再使用css进行设置,以下是使用css对网页背景图片进行设置的代码(虽然现在还没有学到,但也是可以用的呀)

    <style type="text/css"> body { background-image: url("images/background.jpg"); /*加载背景图片*/ background-position: center; /*设置图片的位置*/ background-repeat: no-repeat; /*设置图片不平铺*/ background-size: cover; /*让背景图基于容器大小伸缩*/ background-attachment: fixed; /*定义图片背景是否滚动*/ </style>

    以上就是使用css设置背景图片的代码,在将html和css一起使用时,需要注意它们注释的格式不同,html的注释为<!-- -->而css的注释为/* */它们并不是通用的,如果随便用则会产生错误。

    网页背景图片的设置参考自: https://blog.csdn.net/u011846249/article/details/78283844

    Processed: 0.009, SQL: 8