前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第二天0605下午——超链接<a>与图片<img>

第二天0605下午——超链接<a>与图片<img>

作者头像
二十三年蝉
发布2018-02-27 18:10:16
1.2K0
发布2018-02-27 18:10:16
举报
文章被收录于专栏:闻道于事闻道于事闻道于事

今天下午学习了超链接<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>图片。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-06-05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • <img align=#> #=top, middle, bottom
  • 图象和文字的对齐,用来控制文字在图像的什么位置显示。
    • <img vspace=# hspace=#> #=value
      • vspace和hspace用来增加图片周围的空白。
        • border=#
        相关产品与服务
        内容识别
        内容识别(Content Recognition,CR)是腾讯云数据万象推出的对图片内容进行识别、理解的服务,集成腾讯云 AI 的多种强大功能,对存储在腾讯云对象存储 COS 的数据提供图片标签、图片修复、二维码识别、语音识别、质量评估等增值服务。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档