本文详细介绍了HTML中的img标签，用于在网页中插入图片。讲解了img标签的基本用法，包括支持的图片格式如png、jpg和svg。强调了src、alt、width和height属性的作用，其中src指定图片路径，alt提供鼠标悬停提示，width和height定义图片尺寸。此外，文章还提及了像素单位px和如何通过URL引用远程图片。
插入文天祥的图片
查看代码第19行
前面将讲过其它的标签，这一节课再讲解一个有加载图像功能的img标签，html标准的制定尽可能丰富，封装底层的编程，即使没有学过编程的人，也能设计网页，
，这些标签也是技术和艺术沟通的桥梁。img标签支持png、jpg等位图格式，也支持svg矢量图格式。引入图片的方法就是你要先有一张图片，平时编程时图片一般放到本地，
src的属性值直接写图片所在的地址即可，如果在同一个文件夹下，直接写图片名字加图片扩展名即可，本代码案例你可以看到它的属性值写的是一个域名加一个地址，也就是说我把图片
部署在了我的博客网站服务器上，当然你可加载远程服务器任意位置的一张图片，只要你有图片地址，如果你熟悉计算机通信URL的概念，不用解释也可以明白，如果你不了解网络通信技术，
只要你从事的是艺术工作，不太理解URL也没关系。alt、width、height都是img元素的属性，都有相应的意义。
标签、元素、属性概念
第一个HTML案例中给大家提到了标签和元素的概念问题，但是没有深入讲解。
如果你没有编程基础，那就把HTML当成word去学习，不要问那么多为什么，标签就是代表
一个功能的符号，你只管写就行，标签和里面的内容就是元素，同时给元素引入了属性，比如img标签构建的元素，具有src属性，src的属性值就是图片所在的地址，alt属性的功能就是
一个鼠标事件，当鼠标移动到图片上时，界面显示提示文字，提示的文字就是alt里面的文字字符。
如果你有编程基础，还这样模糊不清，那就无形中给自己增加了学习成本。当浏览器解释HTML里面的代码时，读取到img标签，就会在内存上开辟一个区域存储相关的
数据，形成一个img对象，具体是什么，如果了解计算机图形学，可以去探究，没兴趣的话不用管，可以把元素类比为面向对象编程中的对象，既然img标签初始化后得到img对象，
对象自然就具有属性，有那些属性，那就查手册，看看浏览器支持哪些属性，编程可以自定义对象属性，对于html元素都是浏览器自动支持的。
像素单位px
大家可以看到定义图片宽高的时候，会使用一个符号px，你可以把图片的宽度属性width属性值设为1px，刷新浏览器观察效果，法线是一条细线。
如果你不太了解显示器硬件系统，你可你把显示器划分成网格状，一个网格宽高都是1px的单元，你至少买手机和电脑时总会有像素的概念，像素大小说的就是显示屏
宽高方向各有多少个像素单元。有兴趣的话去学习WebGL，了解显示器的内部显示原理，了解点距、刷新频率等概念。
属性格式
属性与属性值之间用等号连接，属性值用引号包裹，属性之间用空格间隔开
扫一扫
569
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
