今天下午学习了超链接<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. SSH框架搭建 详细图文教程

    转载请标明原文地址 一.什么是SSH? SSH是JavaEE中三种框架(Struts+Spring+Hibernate)的集成框架,是目前比较流行的一种Java Web开源框架. SSH主要用于Jav ...

  2. J2EE struts2MVC应用在线书签1

    序:之前花了一天研究了一下filter,虽然是实现了MVC模式开发了 WebBookmark,但是代码过于冗长,集中在filter中使用if语句不易阅读,为了体现两份作业的不同点,我决定学习 Java ...

  3. linux 内核的futex

    futex是linux内核为用户空间实现锁等同步机制而设计的同步排队(队列queueing)服务.在futex.c的注释中,futex起源于"Fast Userspace Mutex&quo ...

  4. linux下python+pycharm安装

    安装环境: vmware 12 centos 6.8   一.安装python3.5 默认情况下,linux下是默认使用2.x版本的,现在我们要安装3.x版本,具体操作如下 1.去官网下载安装包.(这 ...

  5. 【跑会指南】2017年3-5月IT技术会议大合集

    2016年各类大会让人应接不暇,技术圈儿最不缺的就是各种大会小会,有的纯干货,有的纯广告.作为一名技术开发者,参加了几场大会,你是不是也开始思忖:究竟哪些会议才值得参加?下面活动家为你推荐几场2017 ...

  6. 中美HTML5市场发展的简单对比

    1. HTML5的中美发展与应用对比 2014年下半年,HTML5在中国火了.个人用它开展自媒体,散播鸡汤:广告公司靠它做市场营销,从中获利:还有大公司的广告部.企业新媒体部或转型的媒体,利用它进行各 ...

  7. springboot(十二):springboot如何测试打包部署

    有很多网友会时不时的问我,spring boot项目如何测试,如何部署,在生产中有什么好的部署方案吗?这篇文章就来介绍一下spring boot 如何开发.调试.打包到最后的投产上线. 开发阶段 单元 ...

  8. IDEA下使用maven构建web项目(SpringMVC+Mybatis整合)

    需求背景:由于最近总是接到一些需求,需要配合前端团队快速建设移动端UI应用或web应用及后台业务逻辑支撑的需求,若每次都复用之前复杂业务应用的项目代码,总会携带很多暂时不会用到的功能或组件,这样的初始 ...

  9. 用户交互式命令:read

    read命令从键盘读取变量的值,通常用在shell脚本中与用户进行交互的场合.该命令可以一次读取多个变量的值,变量和输入的值都需要使用空格隔开. 语法 read [option]... [name . ...

  10. ajax返回json数据示例

    前端发送请求与接收数据: $.ajax({        type : "post",        url : "/queryStudent",       ...