添加图像

<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.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添加图像和超链接的更多相关文章

  1. 给OCR文字识别软件添加图像的方法

    ABBYY FineReader 12是一款OCR图片文字识别软件,而且强大的它现在还可使用快速扫描窗口中的快速打开.扫描并保存为图像或任务自动化任务,在没有进行预处理和OCR的ABBYY FineR ...

  2. 教你ABBYY FineReader 12添加图像的技巧

    ABBYY FineReader 12是一款OCR图片文字识别软件,而且强大的它现在还可使用快速扫描窗口中的快速打开.扫描并保存为图像或任务自动化任务,在没有进行预处理和OCR的ABBYY FineR ...

  3. Unit01： Web概述 、 HTML概述 、 文本处理 、 图像和超链接 、 表格 、 表单

    Unit01: Web概述 . HTML概述 . 文本处理 . 图像和超链接 . 表格 . 表单 demo1.html <!-- 声明网页的版本(文档类型) --> <!doctyp ...

  4. [HeadFrist-HTMLCSS学习笔记]第五章认识媒体：给网页添加图像

    [HeadFrist-HTMLCSS学习笔记]第五章认识媒体:给网页添加图像 干货 JPEG.PNG.GIF有何不同 JPEG适合连续色调图像,如照片:不支持透明度:不支持动画:有损格式 PNG适合单 ...

  5. HTML基础（三）图像和超链接

    图像 img 元素向网页中嵌入一幅图像. 语法 <img src="" alt="" /> img标签常用属性 src 跳转的url alt 图片不 ...

  6. C#word（2007）操作类--新建文档、添加页眉页脚、设置格式、添加文本和超链接、添加图片、表格处理、文档格式转化

    转:http://www.cnblogs.com/lantionzy/archive/2009/10/23/1588511.html 1.新建Word文档 #region 新建Word文档/// &l ...

  7. CComboBoxEx添加图像CImageList无法正常显示

    <1>给控件 CComboBox绑定变量 .cpp中 DDX_Control(pDX, IDC_COMBO_PHOTO_IMG, m_ComboBoxPhotoImg); CComboBo ...

  8. centos7添加图像化桌面并设置中文

    我前面是使用的centos6.最近才最小化安装了一个centos7.4(最小化安装有很多命令都没有,所以不建议这样干).完了装了图形化界面和设置中文,感觉和centos6有些区别,所以记录一下过程. ...

  9. 图像添加到ABBYY 文档有什么方法

    ABBYY FineReader 12作为一款功能全面的OCR图文识别软件,我们自是可以在其中将图像添加到FineReader文档中去,且添加在文档尾部,否则将会创建一个新的FineReader文档. ...

随机推荐

  1. UVA315 Network 连通图割点

    题目大意:有向图求割点 题目思路: 一个点u为割点时当且仅当满足两个两个条件之一: 1.该点为根节点且至少有两个子节点 2.u不为树根,且满足存在(u,v)为树枝边(或称 父子边,即u为v在搜索树中的 ...

  2. shell编程 之 函数

    1 函数基本格式 个人认为,编程中的函数基本上有3种,第一种是糖葫芦函数,一根棒棒串起来,执行一次就是走个过场,吃完了糖葫芦就没别的事了,第一种基本就是这样的: 它没有参数,没有返回值. demoFu ...

  3. kali linux 安装virtualbox报错(rc=-1908)

    解决步骤: apt-get install dkms # 如何安装了dkms就跳过这步 apt-get install linux-headers-`uname -r` # 这个符号是TAB上方的符号 ...

  4. About me & OI这一年

    1 最近碰到一些 OIers 问我学 OI 的经历 回忆了一下,我做的第一道题是A+B Problem,时间:2018年2月15日 呀,正好一年了 2 我是来自 HB 的 OIer 一枚 现在高一,就 ...

  5. NOIP2018D1T1 铺设道路

    原题:NOIP2013D1T1 积木大赛 题目地址:P5019 铺设道路 思路:玄学瞎搞 将每块区域插入一个小根堆,这里的小根堆用优先队列实现,即运用一个 \(pair\) , \(first\) 为 ...

  6. SpringBoot单元测试示例2

    package cn.coreqi.security.controller; import org.junit.Before; import org.junit.Test; import org.ju ...

  7. 必须要学会webpack打包，并到特别精通的程度

    必须要学会webpack打包,并到特别精通的程度

  8. Python os.remove() 删除文件

    概述 os.remove() 方法用于删除指定路径的文件.如果指定的路径是一个目录,将抛出OSError. 在Unix, Windows中有效 语法 remove()方法语法格式如下: os.remo ...

  9. java.lang.StackOverflowError 解决方法

    ♦ java.lang.StackOverflowError : 由于深度递归,抛出此错误以指示应用程序的堆栈已耗尽. 在递归中,一个方法在执行期间调用自己.递归被认为是一种强大的通用编程技术,但必须 ...

  10. 【OpenCV】SIFT原理与源码分析：DoG尺度空间构造

    原文地址:http://blog.csdn.net/xiaowei_cqu/article/details/8067881 尺度空间理论   自然界中的物体随着观测尺度不同有不同的表现形态.例如我们形 ...