今天下午学习了超链接<a>标签和图片<img>标签,以下面代码为例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
  </head>

<body>
  <a href="#end">跳转底部</a><br />
  <a href="https://www.baidu.com/">这是一个跳转到百度的超链接</a><br>
  <a href="../../动态壁纸/壁纸2/preview.jpg">这是指向一个图片</a><br>
  <a href="../../清华 html教程.rar">这是一个压缩包</a><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <a href="https://www.taobao.com/">
    这是跟在 a 标签中,img 图片前的一段文字。
    <img src="../../动态壁纸/壁纸1/最终幻想13雷霆归来 隐藏CG/preview.jpg" width="1080" height="1880" alt="图片加载不粗来显示" title="图片名称" align=middle vspace=10     hspace=10 border=10>
    这是跟在 a 标签中,img 图片后的一段文字。
  </a>
  <a name="end"></a>
</body>
</html>

<a>标签——超链接和下载

<a>标签作为超链接必须有两个要素,内容和指向。

<a href="https://www.baidu.com/">这是一个跳转到百度的超链接</a>

其中href属性后面是超链接的指向地址,中间是内容。

<a>标签主要有三种用法:

  1.跳转网页

  <a href="https://www.baidu.com/">这是一个跳转到百度的超链接</a>

  这是<a>标签最常用的用法,href后面双括号中写网页地址。

  2.指向文件

  href后面双括号中写一个文件的地址,如果这个文件是图片,txt文档,html等浏览器可以打开的文件,浏览器会默认打开;

  注意:如果打开的文本文档是乱码,是编码问题,换一下编码方式,换浏览器的编码方式就可以。

  如果是浏览器无法识别的文件,比如压缩包,点击链接浏览器会下载。

  3.做锚点

  锚点有两个<a>标签构成

  <a href="#end">跳转底部</a>

  <a name="end"></a>

  一个<a>标签里用来定位,用name定义一个名字,另一个<a>标签用来跳转,标签里href=“#定义的名称”,在href里,#代表当前页面,点击就可以跳转到那个<a>标签所在的位置。

<img>图片标签

<img src="../../动态壁纸/壁纸1/最终幻想13雷霆归来 隐藏CG/preview.jpg" width="1080" height="1880" alt="图片加载不粗来显示" title="图片名称">

<img>标签标签中有图片的地址,而不是通过在代码中直接添加图片,所以代码占空间不会很大。

<img>标签是一个单标签,主要属性有:

  src:图片的地址

  width:图片宽度

  height:图片高度

  alt:图片加载不出来显示的名称

  title:图片标题,鼠标移到图片上显示的名称

  其中,高度和宽度是都是以像素为单位的,如果只是设置了宽度或者高度,会根据原本的长宽比例来自动缩放大小,如果同时设置了长度和宽度,会根据设置的长度和宽度来拉伸。

  另外,如果网速较慢,会加载不出图片,但是后面的文字不影响。这是因为浏览器在解析执行代码时,一行一行代码解析执行,解析到图片时,他会分开,相当于再找一个人一边来根据地址照图片,另一边继续执行下面的代码。

拓展:

如果<a>标签中同时放了图片和文字,那点击他们都是相同的效果,指向相同的页面或者文件。

<img align=#> #=top, middle, bottom

图象和文字的对齐,用来控制文字在图像的什么位置显示。

<img vspace=# hspace=#> #=value

vspace和hspace用来增加图片周围的空白。

border=#

用来控制图片的边框宽度。

图片超链接

  

  <a href="https://www.taobao.com/">
    <img src="../../动态壁纸/壁纸1/最终幻想13雷霆归来 隐藏CG/preview.jpg" width="1080" height="1880" alt="图片加载不粗来显示" title="图片名称">
  </a>

  在<a>标签中嵌套一个<img>图片。

第二天0605下午——超链接<a>与图片<img>的更多相关文章

  1. 第二天(就业班) html的引入、html常用标签、实体标签、超链接标签、图片标签、表格、框架标签、表单[申明:来源于网络]

    第二天(就业班) html的引入.html常用标签.实体标签.超链接标签.图片标签.表格.框架标签.表单[申明:来源于网络] 第二天(就业班) html的引入.html常用标签.实体标签.超链接标签. ...

  2. 【POI】使用POI处理xlsx的cell中的超链接 和 插入图片 和 设置打印区域

    使用POI对xlsx中插入超链接和 插入图片 package com.it.poiTest; import java.awt.image.BufferedImage; import java.io.B ...

  3. html标签,格式控制标签,内容容器标签,超链接标签,图片标签,表格

    打开DREAMWEAVER,新建HTML,如下图: body的属性: bgcolor 页面背景色 background  背景壁纸.图片 text  文字颜色 topmargin  上边距 leftm ...

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

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

  5. (第二章第二部分)TensorFlow框架之读取图片数据

    系列博客链接: (第二章第一部分)TensorFlow框架之文件读取流程:https://www.cnblogs.com/kongweisi/p/11050302.html 本文概述: 目标 说明图片 ...

  6. Webpack4教程 - 第二部分,使用loader处理scss,图片以及转换JS

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://wanago.io/2018/07/16/webpack-4-course-par ...

  7. Html中如何让超链接a、图片img居中

    一.问题来源 修改博客页面时,突然想到 二.解决办法 2.1原来办法 在img和a中加入align="center",发现不行 2.2百度答案 <div align=&quo ...

  8. Python之路【第二十二篇】:轮播图片CSS

    轮播代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  9. Android简易实战教程--第二十九话《创建图片副本》

    承接第二十八话加载大图片,本篇介绍如何创建一个图片的副本. 安卓中加载的原图是无法对其修改的,因为默认权限是只读的.但是通过创建副本,就可以对其做一些修改,绘制等了. 首先创建一个简单的布局.一个放原 ...

随机推荐

  1. Python-一些实用的函数

    一,返回值为bool类型的函数 1.any()函数 any(iterable)->bool 当迭代器中有一个是Ture,则返回Ture:若interable=NUll,则返回False. > ...

  2. pt-online-schema-change的原理解析与应用说明

          PERCONA提供了若干管理维护MySQL的小工具,集成在 PERCONA Toolkit工具中,有慢查询分析.主从差异对比.主从差异修复及在线表结构修改等工具,个人觉得挺好用的.本文简单 ...

  3. Python数据处理——numpy_1

    python中数据处理最基础的一个包--numpy.它能很好的进行数据准备,类似与R语言中的数据框(DataFrame)一样.今天,就来从最基础的开始学习. import numpy as npdat ...

  4. CentOS编译安装emacs并配置

    Liunxs中CentOS系列一向以稳定为目标,然而也会存在版本太旧的问题,emacs就是其中的一个,目前emacs都发行到25.2了,而CentOS上的emacs版本却还是23.1.所以需要下载源代 ...

  5. Expression表达式树动态查询

    在进行数据列表的查询中,我们通常会使用两种方式进行查询: linq查询 数据库sql语句查询 这样固然可以实现查询,本人之前也都是这么做的,因为查询的条件很少.使用linq,可以将所有的查询条件的属性 ...

  6. openlayers3应用一:显示百度地图

    在项目中使用百度地图,最直接的方式是使用百度api,但是使用百度api需要申请key,并且某些功能调用有次数限制. 本文讲述在openlayers3中使用百度地图的方法.调用百度地图,也是经过了几番周 ...

  7. 设计模式的征途—5.原型(Prototype)模式

    相信大多数的人都看过<西游记>,对孙悟空拔毛变出小猴子的故事情节应该都很熟悉.孙悟空可以用猴毛根据自己的形象复制出很多跟自己一模一样的小猴兵出来,其实在设计模式中也有一个类似的模式,我们可 ...

  8. OC—NSDictionary和NSMutabelDictionary 可变字典和不可变字典

  9. Linux 安装 apache2.4.23

    Apache安装要求 必须安装APR.APR-Util.PCRE,gcc-c++等包 Apache httpd: http://mirrors.cnnic.cn/apache//httpd/httpd ...

  10. servlet的执行原理与生命周期

    先从servlet容器说起:大家最为熟悉的servlet容器就是Tomcat ,Servlet 容器是如何管理 Servlet?先看一下tomcat的容器模型:从上图可以看出 Tomcat 的容器分为 ...