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添加图像和超链接的更多相关文章
- 给OCR文字识别软件添加图像的方法
ABBYY FineReader 12是一款OCR图片文字识别软件,而且强大的它现在还可使用快速扫描窗口中的快速打开.扫描并保存为图像或任务自动化任务,在没有进行预处理和OCR的ABBYY FineR ...
- 教你ABBYY FineReader 12添加图像的技巧
ABBYY FineReader 12是一款OCR图片文字识别软件,而且强大的它现在还可使用快速扫描窗口中的快速打开.扫描并保存为图像或任务自动化任务,在没有进行预处理和OCR的ABBYY FineR ...
- Unit01： Web概述 、 HTML概述 、 文本处理 、 图像和超链接 、 表格 、 表单
Unit01: Web概述 . HTML概述 . 文本处理 . 图像和超链接 . 表格 . 表单 demo1.html <!-- 声明网页的版本(文档类型) --> <!doctyp ...
- [HeadFrist-HTMLCSS学习笔记]第五章认识媒体：给网页添加图像
[HeadFrist-HTMLCSS学习笔记]第五章认识媒体:给网页添加图像 干货 JPEG.PNG.GIF有何不同 JPEG适合连续色调图像,如照片:不支持透明度:不支持动画:有损格式 PNG适合单 ...
- HTML基础（三）图像和超链接
图像 img 元素向网页中嵌入一幅图像. 语法 <img src="" alt="" /> img标签常用属性 src 跳转的url alt 图片不 ...
- C#word（2007）操作类--新建文档、添加页眉页脚、设置格式、添加文本和超链接、添加图片、表格处理、文档格式转化
转:http://www.cnblogs.com/lantionzy/archive/2009/10/23/1588511.html 1.新建Word文档 #region 新建Word文档/// &l ...
- CComboBoxEx添加图像CImageList无法正常显示
<1>给控件 CComboBox绑定变量 .cpp中 DDX_Control(pDX, IDC_COMBO_PHOTO_IMG, m_ComboBoxPhotoImg); CComboBo ...
- centos7添加图像化桌面并设置中文
我前面是使用的centos6.最近才最小化安装了一个centos7.4(最小化安装有很多命令都没有,所以不建议这样干).完了装了图形化界面和设置中文,感觉和centos6有些区别,所以记录一下过程. ...
- 图像添加到ABBYY 文档有什么方法
ABBYY FineReader 12作为一款功能全面的OCR图文识别软件,我们自是可以在其中将图像添加到FineReader文档中去,且添加在文档尾部,否则将会创建一个新的FineReader文档. ...
随机推荐
- netty长链接保存方案
架构 client router server zk redis 对于router: 保存客户端和服务器对 redis clientid : serverip & port 对于server ...
- zabbix系列~ 监控模式
一 简介:讲讲监控相关的东西 二 监控模式 Active(主动式)agent —>常用 在Active agent模式下,Zabbix agent启动后,由agent端初始化和Zabbix ...
- Css - 精灵图
Css - 精灵图css sprite 一个页面文档上总是会有N多的图标小图片,它们都是以背景图的方式嵌入文档,每个小图片需要一个url的css属性,每个url都指向一个服务器地址的链接,每个链接都代 ...
- 设置eclipse代码自动补全功能
1.选择Eclipse菜单条中的Windows菜单下的Preferences项 2.在左侧找到“Java” -> “Editor” -> “Content Assist” 3.在右侧“Au ...
- Network Architecture Search Survey
- 使用grep排除空行和注释行
grep的排除选项为 -v排除空行的命令是:grep -v '^$' filename排除以#注释的命令是:grep -v '^#' filename 结合起来就是,既排除空行又排除注释行的命令gre ...
- 读Java并发编程实践中，向已有线程安全类添加功能--客户端加锁实现示例
在Java并发编程实践中4.4中提到向客户端加锁的方法.此为验证示例,写的不好,但可以看出结果来. package com.blackbread.test; import java.util.Arra ...
- Tomcat安装7.0.91
版本升级,JDK 1.7,Tomcat从7.0.73升级到7.0.91 为什么升级?解决安全漏洞! 升级就正常流程,下载*.tar.gz ,解压,改配置. 但碰到神奇的坑: 1.server.xml中 ...
- sumafan:python爬虫多线程爬取数据小练习（附答案）
抓取 https://www.cnbeta.com/ 首页中新闻内容页网址, 抓取内容例子: https://hot.cnbeta.com/articles/game/825125 将抓取下来的内容页 ...
- c++不定参数函数
不定参数当年做为C/C++语言一个特长被很多人推崇,但是实际上这种技术并没有应用很多.除了格式化输出之外,我实在没看到多少应用.主要原因是这种技术比较麻烦,副作用也比较多,而一般情况下重载函数也足以替 ...