HTML图片

html图片

<img>标签可以在网页上插入一张图片，它是独立使用的标签，通过“src”属性定义图片的地址，通过“alt”属性定义图片加载失败时显示的文字，以及对搜索引擎和盲人读屏软件的支持。

<img src="images/pic.jpg" alt="产品图片" />

绝对路径和相对路径

像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。

绝对地址：相对于磁盘的位置去定位文件的地址
相对地址：相对于引用文件本身去定位被引用的文件地址

绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。相对路径的定义技巧：

“ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。
“ ../ ” 表示当前文件所在目录下的上一级目录，比如：“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset='utf-8' />
 5         <title>这是段落标签</title>
 6     </head>
 7     <body>
 8         <!-- 这是p标签 开始-->
 9         <p>本手册由飘零雾雨编写。版权所有者为飘零雾雨。 
10                 您可以免费的使用、分发本手册。但未经飘零</p>
11                 
12                 
13         <p>雾雨的授权许可不得擅自进行篡改、反编译，及将其全部或部分用于商业用途。 
14            本手册受著作权法和国际公约的保护，</p><p>作者保留对本手册及本声明的最终修改权。 
15            本手册的部分内容参考了苏沈小雨版的CSS2.0手册及World Wide Web Consortium (W3C)公开的网络文档。</p>
16         <!--这是p标签 结束-->
17         
18         <!-- 这是 em... 有意思的标签 开始-->
19         <em>表示语气的强调词,使字体倾斜</em>
20         <i>表示专业词汇,字体也倾斜了 跟em没有很大的区别</i>
21         <b>表示文档中的关键字或产品名 字体加粗不倾斜</b>
22         <strong>表示非常重要的内容 字体加粗了</strong>
23         
24         <strong><del>原价:998元  del删除线</del></strong>
25         <strong>现价:98元 </strong>
26         H<sub>2</sub>o
27         10<sup>2</sup>=100
28         <pre>
29         原样输出
30         12+2
31         =12
32         </pre>
33         <center>
34             <p>本手册由飘零雾雨编写。版权所有者为飘零雾雨。 
35                 您可以免费的使用、分发本手册。但未经飘零</p><p>雾雨的授权许可不得擅自进行篡改、反编译，及将其全部或部分用于商业用途。 
36             本手册受著作权法和国际公约的保护，作者保留对本手册及本声明的最终修改权。 
37             本手册的部分内容参考了苏沈小雨版的CSS2.0手册及World Wide Web Consortium (W3C)公开的网络文档。</p>
38         </center>
39         <button>提交</button>
40         <marquee direction='right'>流动的标题 up 往上流动 down 往下流动 right 往右流动 默认是往左</marquee>
41         <!--这是em 有意思的标签 结束-->
42         <!--这是img 标签 开始-->
43         <img src='../HTML+CSS-01/imgs/23.jpg' alt='这是一张破坏了的图片' />
44         <img src='../HTML+CSS-01/imgs/30.jpg' alt='魅力的画面' title='鼠标放在图片上显示'>
45         <!--这是img 标签 结束-->
46     </body>
47 </html>