添加图像

<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. Core Mvc传值ViewData、ViewBag和return view(model)

    先定义一个Model类Student namespace Lession.Models { public class Student { public string Name { get; set; ...

  2. 20165221 2017-2018-2《Java程序设计》课程总结

    20165221 2017-2018-2<Java程序设计>课程总结 一.作业连接汇总 每周作业链接 预备作业一: 20165221我期望的师生关系 预备作业二: 20165221学习基础 ...

  3. Linux下查询文件的md5,sha1值

    验证下载下来的文件包是不是一致 ··· 验证md5值 #md5sum filename 验证shal值 #sha1sum filename ···

  4. 【转】python 面向对象（进阶篇）

    [转]python 面向对象(进阶篇) 上一篇<Python 面向对象(初级篇)>文章介绍了面向对象基本知识: 面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 ...

  5. NLog类库使用探索——详解配置

    1 配置文件的位置(Configuration file locations) 通过在启动的时候对一些常用目录的扫描,NLog会尝试使用找到的配置信息进行自动的自我配置. 1.1 单独的*.exe客户 ...

  6. 解决：fatal error LNK1104: 无法打开文件“libc.lib”

    今天使用VS2017编译比较老的VC++项目,出现了[fatal error LNK1104: 无法打开文件“libc.lib”]的链接器问题,解决方法如下: 项目->属性中->配置属性- ...

  7. <pre>标签的基本样式设置

    断行 在html中,换行符无法在一般标签内作为布局控制显示,包括xml实体 和 均表现为white-space,仅用于断字[1]. 一般情形下,可使用<br>标签断行:但需要从原始xml文 ...

  8. iperf3 不支持双工模式

    iperf 2.05的时候,客户端可以使用参数"-d"来进行双工测试,先测试发送,client向server发送数据,等到测试时间结束后(默认为10s,可以通过-t选项来更改),然 ...

  9. $Django 路由层(有,无名分组、反向解析、总路由分发、名称空间、伪静态)

    1 简单配置 -第一个参数是正则表达式(如果要精准匹配:'^publish/$')  -第二个参数是视图函数(不要加括号)  -url(r'^admin/', admin.site.urls), 注: ...

  10. 【算法】二分查找法&大O表示法

    二分查找 基本概念 二分查找是一种算法,其输入是一个有序的元素列表.如果要查找的元素包含在列表中,二分查找返回其位置:否则返回null. 使用二分查找时,每次都排除一半的数字 对于包含n个元素的列表, ...