添加图像

<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. 第六天-request response\04-response实现文件下载.avi--本人测试失败

    package cn.itcast.response; import java.io.FileInputStream;import java.io.IOException;import java.io ...

  2. MongoDB 学习手册 - 安装(windwos 环境)

  3. view类初探（一）

    /*************************************************************************************************** ...

  4. 异常:已引发: "设置 connectionId 时引发了异常。" (System.Xaml.XamlObjectWriterException) 引发了一个 System.Xaml.XamlObjectWriterException: "

    项目中,引用一个富文本编辑器,SmithHtmlEditor,进入页面的时候异常. 在View和ViewModel所在的类库引用. 还需要在Main中引用.

  5. 一个是EF内联多表查询，一个是EF中写SQL文。

    public IList<MenuModel> GetAllMenu() { using (IMMEntities context = new IMMEntities()) { var m ...

  6. “指定的参数已超出有效值的范围”在【 parameterUpdate.Add(new OracleParameter("STATUS", 0));】报错

    改成:parameterUpdate.Add()); 就不报错,并不能知道为什么,有知道为什么的,评论告诉我. /// <summary> /// 插入数据 /// </summar ...

  7. Linux中error while loading shared libraries错误解决办法

    默认情况下,编译器只会使用/lib和/usr/lib这两个目录下的库文件,通常通过源码包进行安装时,如果不指定--prefix,会将库安装在/usr/local/lib目录下:当运行程序需要链接动态库 ...

  8. hibernate框架学习之二级缓存

    缓存的意义 l应用程序中使用的数据均保存在永久性存储介质之上,当应用程序需要使用数据时,从永久介质上进行获取.缓存是介于应用程序与永久性存储介质之间的一块数据存储区域.利用缓存,应用程序可以将使用的数 ...

  9. 专题2:最长上升子序列LIS

        A HDU 1025 Constructing Roads In JGShining's Kingdom     B POJ 3903 Stock Exchange     C OpenJ_B ...

  10. 【原创】大数据基础之Hive（5）性能调优Performance Tuning

    1 compress & mr hive默认的execution engine是mr hive> set hive.execution.engine;hive.execution.eng ...