HTML添加图像和超链接
添加图像
<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> 《五子棋》是由明日科技研发的一款老少皆宜的休闲类棋牌游戏。其起源于中国古代传统的黑白棋中之一，玩起来妙趣横生，引人入胜，不仅能增强思维能力，而且可以富含哲理，有助于修身养性。</p>
游戏规则：
<p> 玩游戏时，既可以随机匹配玩家，也可以与朋友对弈，或者无聊时选择人机对弈。画面简单大方。游戏中，最先在棋盘的横向、纵向或斜向形成连续的相同的五个棋子的一方为胜。</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> <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>
执行结果：
点击跳转至顶部
图片超链接
<a href="链接地址" target="打开窗口的方式"><img src="图像地址"> </a>
HTML添加图像和超链接相关推荐
- R语言使用cowplot包的plot_grid函数将两个ggplot2可视化结果并排组合起来并添加图像标签A、B、设置组合图像使用共享的图例（shared legend in cowplot）
R语言使用cowplot包的plot_grid函数将两个ggplot2可视化结果并排组合起来并添加图像标签A.B.设置组合图像使用共享的图例(combine two plots side by sid ...
- R语言ggplot2可视化并自定义配置图例的位置到可视化图像的顶部、配置折叠成两行显示图例、并添加图像形状的子图（ggplot2 legend in two rows with guides fill
R语言ggplot2可视化并自定义配置图例的位置到可视化图像的顶部(legend position in top).并且配置折叠成两行显示图例.并添加图像形状的子图(ggplot2 legend in ...
- R语言使用gt包和gtExtras包优雅地、漂亮地显示表格数据：使用gt包可视化表格数据，使其易于阅读和理解、使用gtExtras包添加一个图，显示表中某一列中的数字、并为类型数据添加图像符号标签
R语言使用gt包和gtExtras包优雅地.漂亮地显示表格数据:使用gt包可视化表格数据,使其易于阅读和理解.使用gtExtras包添加一个图,显示表中某一列中的数字.并为类型数据添加图像符号标签 目 ...
- OpenCV添加图像轨迹轨迹条 Adding Images Trackbar的实例(附完整代码)
OpenCV添加图像轨迹轨迹条 Adding Images Trackbar的实例 OpenCV添加图像轨迹轨迹条 Adding Images Trackbar的实例 OpenCV添加图像轨迹轨迹条 ...
- android studio点击图片,如何在Android Studio中的模拟器图库中添加图像？
如何在Android Studio中的模拟器图库中添加图像? 我正在开发图像过滤器应用程序. 但是,如果我没有任何图像,就无法真正尝试. 我知道我可以在电话中对其进行测试,但这并不相同,因为我需要错误 ...
- react js 添加样式_如何在React JS Application中添加图像？
react js 添加样式 Hello! In this article, we will learn how to add images in React JS? I remember when I ...
- html表格里的超链接点不了,Excel如何添加和取消超链接 Excel超链接打不开是怎么回事...
很多用户在制作excel表格的时候都会添加一些超链接,在制作完成后发布到网页,阅读者可以通过超链接打开指引的网页或者文件,超链接对制作excel表格的用户有非常大的帮助,虽然添加超链接的步骤非常简单, ...
- zabbix专题：第七章 添加图像Graphs，添加聚合图形Screens
zabbix专题:第七章 添加图像Graphs,添加展示屏Screens 对Linux有兴趣的朋友加入QQ群:476794643 在线交流 本文防盗链:http://zhang789.blog.51c ...
- 值得使用的CSS库添加图像悬停效果！
一个悬停效果简单来说可以定义为在颜色,产生的效果文字的大小或形状或任何其他形式的变化发生,当你把鼠标光标移动到图像.这可以通过CSS编码容易实现.这里我们介绍国外8个CSS库添加图像悬停效果,提高网站 ...
最新文章
- JavaScript模式读书笔记 第3章 字面量和构造函数
- mysql for update_mysql SELECT FOR UPDATE语句使用示例
- Java-ServiceLoader类
- Linux中shell编程的for循环用法
- 打印快递面单pdf_如何开通使用拼多多电子面单？
- python3字典列表_python3_列表、元组、集合、字典
- PySpark-Recipes : I/O操作（txt, json, hdfs, csv...）
- 通俗易懂的通用excel导出
- 开关电源Buck电路CCM和DCM工作模式
- 微信支付V3版商家转账到零钱
- 搭建网站要多少钱？自助建站制作网站要花多少钱？
- 【笔记】SSH服务：基本概述、相关命令“ssh、scp、sftp”、验证方式、场景实践、安全优化
- MATLAB | 经典力学框架下的三体运动数值模拟软件
- Qt动态图表更新实现
- uniapp使用高德地图微信小程序SDK生成地图轨迹
- on java读书笔记
- 如何在 Ubuntu 20.04 上安装 Wine 6.0
- rk3288_5.1_BOX 调整HDMI屏幕满屏
- 最近比较火的古风姓氏头像小程序源码
- 给DataTable中添加一行数据