图像标签&&标签属性

图像是网页构成中最重要的元素之一，美观的图像会为网站增添生命力，同时也可以加深用户对网站风格的印象。

标签属性

使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

在上面的语法中，

1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。

2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

3.任何标签的属性都有默认值，省略该属性则取默认值。

采取键值对——key="value" 的格式

比如: <hr width="400" /> 表示：设置 属性：宽度 、值：400

图像标签img

HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签<img>。

其基本语法格式如下：

<img src="图像URL" />

img标签的几个常用属性、属性值及属性描述：

属性 属性值 描述
src URL 图像的路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时显示的内容
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 数字 设置图像边框的宽度

 

 1 <!--举个栗子-->
 2 <!DOCTYPE html>
 3 <html>
 4 <head>
 5 <meta charset="utf-8" />
 6 <title>Doument</title>
 7 </head>
 8 <body> 基本图像插入方式<br />
 9 <img src="img/logo.png"/><br />​
10 alt属性<br />
11 <img src="img/logo1.png" alt="这是我的小logo！"/><br />​
12 title属性<br />
13 <img src="img/logo.png" title="我是一个logo~~"/><br />​
14 width/height属性<br />
15 <img src="img/logo.png" width="300"/><br />​
16 border属性 <br />
17 <img src="img/logo.png" border="10"/><br />
18 </body>
19 </html>

 

 
 

注意：

    • src属性用于指定图像文件的路径和文件名，他是img标签的必备属性。
    • URL指存储图像的位置，可以是本地计算机上的图片地址，也可以是互联网上图片的地址。
    • 一般情况下由于图片会自动等比缩放，强行设置宽高会使页面失真，因此通常，宽和高设置一个就够了。
posted @ 2020-11-20 12:00  _jun_jun  阅读(804)  评论(0)    收藏  举报