添加图像

<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. python(三)@staticmethod和@classmethod使用和区别

    转载自[1] 一般要用某个类的方法,先要实例这个类. 但是可以通过@staticmethod和@classmethod,直接用“类.方法()”来调用这个方法. 而 @staticmethod和@cla ...

  2. Tip：什么是JavaBean

    可视化JavaBean  非可视化JavaBean(分:值JavaBean和工具JavaBean) JavaBean是一个遵循特定写法的Java类,它通常具有如下特点: 这个Java类必须具有一个无参 ...

  3. python小练习---TCP服务器端

    针对于上一篇分享python小练习---TCP客户端 http://www.cnblogs.com/zhaijiahui/p/6926197.html我继续按书中内容,向下进行这里需要强调一个事py3 ...

  4. Android视频压缩

    最推荐(使用方便,默认压缩为原来视频大小的1/4左右): https://blog.csdn.net/qq_35373333/article/details/79564991  https://git ...

  5. 【Java编程思想笔记】-集合2

    详细的接口API转自博客:https://blog.csdn.net/jyg0723/article/details/80498840#collection-api-%E8%AF%A6%E8%A7%A ...

  6. [TensorFlow笔记乱锅炖] tf.multinomial(logits, num_samples)使用方法

    tf.multinomial(logits, num_samples) 第一个参数logits可以是一个数组,每个元素的值可以简单地理解为对应index的选择概率,注意这里的概率没有规定加起来的和为1 ...

  7. 发布逸出 java this 逸出【转】

    转自:http://blog.csdn.net/joker_zhou/article/details/7322801 (1)发布:发布是指将一个对象,使其引用储存到一个其他代码可以访问到的地方,在一个 ...

  8. Python学习笔记-转义字符

    Python转义字符同C语言的转义字符

  9. 向量的L2范数求导

    回归中最为基础的方法, 最小二乘法. \[ \begin{align*} J_{LS}{(\theta)} &= \frac { 1 }{ 2 } { \left\| A\vec { x } ...

  10. python中“*”、"*args"、"kwargs"三种用法

    参考链接:https://www.cnblogs.com/cwind/p/8996000.html 注意的是: (1)"*"符号的用法很类似C++中的指针,针对列表; (2)&qu ...