前端开发系列（四）HTML教程（4）

妖狐艹你老母 2021-09-28 02:16 333阅读 0赞

# 一、认识标签（第三部分） #

## 1.1、使用 a 标签，链接到另一个页面 ##

>  使用 `<a>` 标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。  
> **语法**：`<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>`  
> **注意**：只要为文本加入a标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色），颜色很难看吧，不过没有关系后面我们学习了css样子就可以设置过来 , 后面会详细讲解。

代码示例：

<!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>火影忍者</title>
    </head>
    <body>
        <p><a href="http://www.baidu.com" title="Click Here">百度一下</a> </p>
    </body>
    </html>

> 运行结果：  
> ![在这里插入图片描述][20190107135416932.png]

## 1.2、在新建浏览器窗口中打开链接 ##

> `<a>`标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。

代码示例：

<!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>了不起的盖茨比</title>
    </head>
    <body>
        <p>1922年的春天，一个想要成名名叫尼克•卡拉威（<a href="http://www.m1905.com/mdb/star/3316/" target="_blank">托比•马奎尔Tobey Maguire </a>饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>
        <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
    </body>
    </html>

> 运行结果：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgzNTkxNg_size_16_color_FFFFFF_t_70]

## 1.3、认识 img 标签，为网页插入图片 ##

> 在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用`<img>`标签来插入图片。  
> **语法**：`<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">`  
> 1、**src**：标识图像的位置；  
> 2、**alt**：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；  
> 3、**title**：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；  
> 4、图像可以是**GIF，PNG，JPEG**格式的图像文件

代码示例：

<!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>你看见了我的小熊吗</title>
    </head>
    <body>
    	<h1>你看见了我的小熊吗</h1>
    	 <img src="http://file03.16sucai.com/2016/03/2016eztyv4dfpat.jpg" title="电影介绍"> 
    </body>
    </html>

> 运行结果：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgzNTkxNg_size_16_color_FFFFFF_t_70 1]

--------------------

**此篇博客代码下载地址：[HTML教程4代码下载][HTML_4]  
博主的所有博客目录如下：[博客文章目录汇总][Link 1]  
Java面试部分的博客目录如下：[Java笔试面试目录][Java]**

> **转载请标明出处，原文地址：[https://blog.csdn.net/weixin\_41835916][https_blog.csdn.net_weixin_41835916] 如果觉得本文对您有帮助，请点击顶支持一下，您的支持是我写作最大的动力，谢谢。  
> ![这里写图片描述][70]**

[20190107135416932.png]: /images/20210923/bd13bf9a1b234e83a5bd8840a15ad281.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgzNTkxNg_size_16_color_FFFFFF_t_70]: /images/20210923/6f310a60c8744381a1d37283b84cd396.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgzNTkxNg_size_16_color_FFFFFF_t_70 1]: /images/20210923/37f649fb77ed49efb589352911f8f8cf.png
[HTML_4]: https://github.com/longjiahao666/Web/tree/master/Code1/html/html4
[Link 1]: https://blog.csdn.net/weixin_41835916/article/details/81879208
[Java]: https://blog.csdn.net/weixin_41835916/article/details/81413498
[https_blog.csdn.net_weixin_41835916]: https://blog.csdn.net/weixin_41835916
[70]: /images/20210923/d9261e16088e4c1b8a68325c0ce9d081.png