HTML 基础 之 图像和超链接 学习笔记

版权声明:欢迎转载,如果转载,请注明转载地址,谢谢你啦!觉得文章不错的话右上角点个赞再走呀! https://blog.csdn.net/qq_40763929/article/details/86908616

一. 图像标签

语法:  <img src= "   " alt= "   "   .../>

img 属性:

HTML 路径:

1.相对路径    2. 绝对路径

绝对路径:从本地电脑盘符开始的地址

相对路径:相对于网页文件保存位置的地址

  •  alt 属性:当图片无法正常显示时,用alt 中的文字内容代替图片显示。
  • width 与 height 属性 : 可以写 像素 或者 百分数。

二 . 超链接标签

 语法: < a href="   " >内容</a>

href 是链接地址

点击 “内容”可以到达 href的链接,

“内容”可以是 文字 , 图片。href 的链接 可以是 网址 ,图片。

举例: 

  •    <a href = " xxx.jpg  "><img src = " xxxxx,jip"></a>                        点击名为“xxxxx.jpg”的图片到达名为“xxx.jpg”的图片。
  •   <a href = " www.4399.com  "><img src = " xxxxx,jip"></a>            点击名为“xxxxx.jpg”的图片到达4399小游戏网址。
  •  <a href = " www.4399.com  "><p>文字<p></a>                   点击“文字”这两个字,可以跳转到4399网址。
  • 空链接: <a href = " #  "><img src = " xxxxx,jip"></a>          在 href 属性中 放入 # , 那么点击图片会有链接,但是不跳转。

属性:

  • target 属性 

 <a href = " xxx.jpg  " target = " _self "><img src = " xxxxx,jip"></a>  点击xxxxx.jpg 在当前窗口 跳转到 xxx.jpg 图片。

 <a href = " xxx.jpg  " target = " _blank "><img src = " xxxxx,jip"></a>  点击xxxxx.jpg 在  新的窗口 跳转到 xxx.jpg 图片。

  •  title 属性

  <a href = " xxx.jpg  " title = " 文字内容 "><img src = " xxxxx,jip"></a>  当光标 停留在  xxxxx.jpg 时,会显示“文字内容”。如果点击,则跳转页面。  

  • name 属性 
  • 定义锚(统一页面)

就是说,当点击一个(图片 或 文字)时,会跳转到本页面的 其他内容,类似于文章目录功能。

语法: 

<a href=" # 锚名 ">操作的名字</a>

<a name=" 锚名"></a>                   (这个名字不会显示在网页中)

 

  • 定义锚(不同页面) 

 语法:

<a href=" 网页名称#锚名 ">操作的名字</a>

<a name=" 锚名"></a>                   (这个名字不会显示在网页中)

  •  电子邮件链接

<a href="mailto: 邮件地址">......</a> 

猜你喜欢

转载自blog.csdn.net/qq_40763929/article/details/86908616