HTML添加图像和超链接

最新推荐文章于 2025-06-01 14:40:20 发布

原创最新推荐文章于 2025-06-01 14:40:20 发布 · 8.5k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#html

HTML+CSS 专栏收录该内容

3 篇文章

订阅专栏

添加图像

<img src="图像的文件地址" alt="加载失败" height="350" width="350" border="1" title="示意图" align="top">

src：图片地址
alt：加载失败需要展示的信息
height：图片的高度
width：图片的宽度
border：边框(如果需要)
title：鼠标悬停至图片需要显示的提示
align：图片的对其方式

align取值	含义
top	把图像的顶部和同行的最高部分对齐(可能是文本的顶部，也可能是图像的顶部)
middle	把图像的中部和行的中部对齐(通常是文本行的基线，并不是实际行的中部)
bottom	把图像的底部和同行文本的底部对齐
texttop	由快到慢，也就是逐渐减速
absmiddle	把图像的中部和同行中最大项的中部对齐
baseline	把图像的底部和文本的基线对齐
absbottom	把图像的底部和同行中的最低项对齐
left	使图像和左边界对齐(文本环绕图像)
right	使图像和右边界对齐(文本环绕图像)

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>
<!--插入五子棋游戏的文字简介-->
<h2 align="center">五子棋游戏简介</h2>
<p>&nbsp;&nbsp;《五子棋》是由明日科技研发的一款老少皆宜的休闲类棋牌游戏。其起源于中国古代传统的黑白棋中之一，玩起来妙趣横生，引人入胜，不仅能增强思维能力，而且可以富含哲理，有助于修身养性。</p>
游戏规则：
<p>&nbsp;&nbsp;玩游戏时，既可以随机匹配玩家，也可以与朋友对弈，或者无聊时选择人机对弈。画面简单大方。游戏中，最先在棋盘的横向、纵向或斜向形成连续的相同的五个棋子的一方为胜。</p>
<!--插入五子棋的游戏图片，并且设置水平间距为180像素-->
<img src="img/wuzi.png" alt="" hspace="180" title="五子棋示意图">
</body>
</html>

执行结果：

超链接

<a href="https://www.baidu.com/" target="_blank"> 百度 </a>

href：点击后需要跳转到的链接
target：打开新窗口的方式
- _blank：新窗口打开
- _parent：在上一级窗口打开，常在分帧的框架页面中使用
- _self：在同一个窗口打开，默认值
- _top：在浏览器的整个窗口打开，将会忽略所有的框架结构

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商城导航</title>
</head>
<body>
<div class="mar-cont">
    <!-- img/jd2.png是京东图标 -->
  <img src="img/jd2.png" alt="京东图标" title="京东logo"><a href="https://www.jd.com/" target="_self">京东首页</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="https://search.jd.com/Search?keyword=%E6%89%8B%E6%9C%BA%E9%85%8D%E4%BB%B6&enc=utf-8&wq=%E6%89%8B%E6%9C%BA%E9%85%8D%E4%BB%B6&pvid=2f422585de90483ca78f3d2bf775aa55" target="_self">手机配件</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://blog.youkuaiyun.com/zha6476003" target="_blank"> 博客首页 </a>

    <img src="img/jd.png" alt="购机首页" border="1" title="购机首页"> <!-- img/jd.png是首页图片 -->
</div>

</body>
</html>

执行结果：

跳转至顶部

<a href="#top">点击跳转至顶部</a>

执行结果：
点击跳转至顶部

图片超链接

<a href="链接地址" target="打开窗口的方式"><img src="图像地址"> </a>