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

曾经终败给现在 2022-03-20 03:47 268阅读 0赞

**一. 图像标签**

> **语法：  <img src= "   " alt= "   "   .../>**

img 属性：

![20190210154359853.png][]

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 属性中 放入 \# ， 那么点击图片会有链接，但是不跳转。

属性：

![20190210162616879.png][]

*  **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>   **                (这个名字不会显示在网页中)

![20190210193220143.png][]

*  **定义锚（不同页面）**

语法：

> **<a href=" 网页名称\#锚名 ">操作的名字</a>**
> 
> **<a name=" 锚名"></a>   **                (这个名字不会显示在网页中)

*   电子邮件链接

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

[20190210154359853.png]: /images/20220320/92cd456beb0d4cfd941e16d94ac3cb37.png?
[20190210162616879.png]: /images/20220320/52006d69b5e648e58385a0384e2c3cf1.png?
[20190210193220143.png]: /images/20220320/b5f1e7bf8c874c83930e833ac5216b37.png?