添加图像
<img src="图像的文件地址" alt="加载失败" height="350" width="350" border="1" title="示意图" align="top">
1
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> 《五子棋》是由明日科技研发的一款老少皆宜的休闲类棋牌游戏。其起源于中国古代传统的黑白棋中之一，玩起来妙趣横生，引人入胜，不仅能增强思维能力，而且可以富含哲理，有助于修身养性。</p>
游戏规则：
<p> 玩游戏时，既可以随机匹配玩家，也可以与朋友对弈，或者无聊时选择人机对弈。画面简单大方。游戏中，最先在棋盘的横向、纵向或斜向形成连续的相同的五个棋子的一方为胜。</p>
<!--插入五子棋的游戏图片，并且设置水平间距为180像素-->
<img src="img/wuzi.png" alt="" hspace="180" title="五子棋示意图">
</body>
</html>
执行结果：
超链接
<a href="https://www.baidu.com/" target="_blank"> 百度 </a>
1
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>
<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>
<a href="https://blog.csdn.net/zha6476003" target="_blank"> 博客首页 </a>
<img src="img/jd.png" alt="购机首页" border="1" title="购机首页"> <!-- img/jd.png是首页图片 -->
</div>
</body>
</html>
执行结果：
跳转至顶部
<a href="#top">点击跳转至顶部</a>
1
执行结果：
点击跳转至顶部
图片超链接
<a href="链接地址" target="打开窗口的方式"><img src="图像地址"> </a>
1
---------------------
作者：炜w
来源：CSDN
原文：添加图像
<img src="图像的文件地址" alt="加载失败" height="350" width="350" border="1" title="示意图" align="top">
1
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> 《五子棋》是由明日科技研发的一款老少皆宜的休闲类棋牌游戏。其起源于中国古代传统的黑白棋中之一，玩起来妙趣横生，引人入胜，不仅能增强思维能力，而且可以富含哲理，有助于修身养性。</p>
游戏规则：
<p> 玩游戏时，既可以随机匹配玩家，也可以与朋友对弈，或者无聊时选择人机对弈。画面简单大方。游戏中，最先在棋盘的横向、纵向或斜向形成连续的相同的五个棋子的一方为胜。</p>
<!--插入五子棋的游戏图片，并且设置水平间距为180像素-->
<img src="img/wuzi.png" alt="" hspace="180" title="五子棋示意图">
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
执行结果：
超链接
<a href="https://www.baidu.com/" target="_blank"> 百度 </a>
1
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>
<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>
<a href="https://blog.csdn.net/zha6476003" target="_blank"> 博客首页 </a>
<img src="img/jd.png" alt="购机首页" border="1" title="购机首页"> <!-- img/jd.png是首页图片 -->
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
执行结果：
跳转至顶部
<a href="#top">点击跳转至顶部</a>
1
执行结果：
点击跳转至顶部
图片超链接
<a href="链接地址" target="打开窗口的方式"><img src="图像地址"> </a>
1
---------------------
作者：炜w
来源：CSDN
原文：https://blog.csdn.net/zha6476003/article/details/83037539
版权声明：本文为博主原创文章，转载请附上博文链接！
版权声明：本文为博主原创文章，转载请附上博文链接！
HTML添加图像和超链接
最新推荐文章于 2024-02-19 10:59:53 发布
1616
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
