3school 知识点随笔记录（HTML图像）

最新推荐文章于 2024-01-30 14:11:56 发布

weixin_30920853

最新推荐文章于 2024-01-30 14:11:56 发布

阅读量195

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/1231-y/p/10701669.html

本文详细介绍了HTML中的关键元素和属性，包括链接、图像、背景设置、图像对齐、图像作为链接、图像映射等，提供了丰富的示例帮助理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

taeget _blank // 链接会在新窗口打开

示例：

<html>

<body>

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

<p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p>

</body>

</html>

alt // 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

示例：

设置图像背景

示例：

<html>

<p>gif 和 jpg 文件均可用作 HTML 背景。</p>

<p>如果图像小于页面，图像会进行重复。</p>

</body>
</html>

align // 设置图像的对齐方式及图像显示左右两侧

示例：

<html>

<body>

<h2>未设置对齐方式的图像：</h2>

<h2>已设置对齐方式的图像：</h2>

<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p> // 文字与图像最下方对齐

<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p> // 文字与图像中上方对齐

<p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p> // 文字与图像最上方对齐

<p>请注意，bottom 对齐方式是默认的对齐方式。</p>

<p>
<img src ="/i/eg_cute.gif" align ="left">
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p>

<p>
<img src ="/i/eg_cute.gif" align ="right">
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
</p>

</body>
</html>

把图像作为链接来使用

示例：

<html>

<body>
<p>
您也可以把图像作为链接来使用：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>

</body>
</html>

map name=" " id = " " 创建图像的映射（name和id的值一样）

示例：

开启图像映射
给<img>标签设置usemap属性从而开启一张图片的映射功能。

设置映射区域
图片开启了映射后，应该给图片定义若干个映射区域。我们用<map>标签来包裹这些映射区域。<map>标签的id值必须和图片的usemap属性值对应。

<area>标签必须嵌套在<map>内部，用来定义映射区域。

其中：

shape属性定义映射区域的形状
rect为矩形

circle为圆形

poly为多边形

coords定义了形状的坐标与半径

href映射到图片或者页面
你可以把你的映射区域映射到不同的页面或者图片。

href = "index.html"href = "image.jpg"

另外<area>标签也可以设置target属性，用来设置在新窗口或者本窗口打开新页面。

target = "_blank"target = "_self"

示例：

<p>请点击图像上的星球，把它们放大。</p>

<img
src="/i/eg_planets.jpg" // 主体图像路径
border="0" // 设置边距为0
usemap="#planetmap" // 映射主体的ID
alt="Planets" /> // 图片未打开显示的文字

<map name="planetmap" id="planetmap"> // 开启映射

<area
shape="circle" // 定义映射为圆形
coords="180,139,14" // 圆形中心点坐标和半径
href ="/example/html/venus.html" // 点击映射区域跳到新的链接
target ="_blank" // 打开新的网页，而不是在原网页打开
alt="Venus" /> // 图片未正常打开显示的文字