添加图像

<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. 清除redis缓存

    redis-cli -p 6379(指定进入端口号为6379的redis数据库)1.清空当前redis数据库缓存flushdb 2.清空整个redis缓存flushall

  2. Css - 浮动布局

    Css - 浮动布局 浮动布局 float 取值:left | right | none 利用float属性可设置元素的浮动,虽然浮动主要是应用于块元素,但行内元素其实也可以浮动,但行内元素本来就是一 ...

  3. pytorch1.0 用torch script导出模型

    python的易上手和pytorch的动态图特性,使得pytorch在学术研究中越来越受欢迎,但在生产环境,碍于python的GIL等特性,可能达不到高并发.低延迟的要求,存在需要用c++接口的情况. ...

  4. NOIP2018D1T1 铺设道路

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

  5. 用户态驱动--UIO机制的实现【转】

    转自:https://blog.csdn.net/u013982161/article/details/51584900 1 uio理论部分   1.1为什么出现了UIO? 硬件设备可以根据功能分为网 ...

  6. Qt学习之路

      Qt学习之路_14(简易音乐播放器)   Qt学习之路_13(简易俄罗斯方块)   Qt学习之路_12(简易数据管理系统)   Qt学习之路_11(简易多文档编辑器)   Qt学习之路_10(Qt ...

  7. 关于VC工程编译不过去这件事

    刚开始接触VC的时候,很大一部分时间是在对付编译链接错误,因为经验不足的原因,这些编译链接总让人很沮丧.比如: 1.fatal error LNK1104: 无法打开文件“LIBC.lib”错误 这个 ...

  8. latex中的希腊字母

    原文地址:http://blog.csdn.net/xxzhangx/article/details/52778539 希腊字母,我们从小学开始认识它,但对它的读音我依旧靠蒙(说蒙真的感觉好羞愧啊). ...

  9. 010_mac常用docker维护命令

    一. ➜ ~ docker search rabbitmq #搜索 NAME DESCRIPTION STARS OFFICIAL AUTOMATED rabbitmq RabbitMQ is an ...

  10. RF运行脚本报错：WebDriverException: Message: unknown error: call function result missing

    原因:浏览器驱动与浏览器版本不对应