No.5 HTML5--图片标签

引言

图片是网站中最多的元素。

一、图片标签<img>（单标签）

1. 输入img,回车，就会显示 <img src="" alt="">

2.代码示例

<body>
    <h1 align="center">我的第一个网页</h1>
    <h2>照片</h2>
    <p>衡阳旅游</p>
    <img src="hu.jpg">  
</body>

运行：

问题：照片过于的大了。。。。。

注意：代码和照片在一个文件夹下

 

3.图片标签属性

 3.1 alt:

当图片无法正常显示的时候，显示图像的替代文字

<img src="h.jpg" alt="湖面">

 3.2  width=" " height=" " title=" "

<img src="hu.jpg" alt="湖面" width="500px" height="400px" title="这是一张南岳景区湖面的图片">

　　运行：

4. 多张图片

<body>
    <h1 align="center">我的第一个网页</h1>
    <h2>照片</h2>
    <p>衡阳旅游</p>
    <img src="hu.jpg" alt="湖面" width="200px" height="160px" title="这是一张南岳景区湖面的图片">
    <p>成都旅游</p>
    <img src="大熊猫.jpg" alt="大熊猫图片" width="200px" height="160px" title="这是一张大熊猫的图片">
    <img src="大熊猫博物馆.jpg" alt="大熊猫博物馆" width="200px" height="160px" title="这是一张大熊猫博物馆的图片">

</body>

　　运行

 

二、图片路径详解

图片标签<img>的属性src=" "的详细介绍

2.1绝对路径

电脑的盘符存储与访问的具体地址。

<img src="D:\web\RAWCode\hu.jpg" alt="湖面" width="200px" height="160px" title="这是一张南岳景区湖面的图片">

　　

2.2相对路径

1.同级:"./"可以省略

2.父级: "../" 返回上一级

3.子级 : "/" 

2.3网络路径

 

posted @ 2025-02-25 11:56  百里屠苏top  阅读(31)  评论(0)    收藏  举报