HTML常用元素使用练习2

---

NO.3:<!--注释-->

注释标签是为代码添加注释使用的，它的内容不会显示在页面中。几乎每种编程语言都有自己注释的写法。对于一些复杂代码标注注释对团队合作非常重要，即使自己若干年后打开以前写的代码，也能通过注释快速回忆起曾经的思路。当然，HTML很少用到注释，因为它太简单了。

<!--这里是注释-->代码示例：

---

因为页面中没有显示，就不给大家截图了。

NO.4:<img>

<img>可以用来显示图片元素，但是写法和之前的元素不太一样，这个元素没有结尾标签。它是通过改变标签的src属性向页面导入图片。

在做这个练习之前我们需要做一个准备工作，

step1：找一张图片，例如：下面这张美女

step2：右键-另存为

step3：选择路径，我们在之前的篇章中已经带领大家在自己的某个盘上建立了一个叫做"零基础自学网页制作"的文件夹，图片保存到这个文件夹中！

step4：图片命名为 image1.jpg

step5：确定你的"第一个页面.html"文件和"image1.jpg"在一个文件夹中。

<img src="image1.jpg"/> 示例代码如下：

页面效果如图所示：

HTML元素中除了有向首尾标签中间添加文字来显示内容的元素，也有通过src属性导入信息的元素。

NO.5:<a></a>

<a></a>标签是用来添加超链接的元素，这个元素的写法比较有趣。

<a href="https://www.toutiao.com/i6785149184245760516/?group_id=6785149184245760516?group_id=6785149184245760516?group_id=6785149184245760516">零基础自学网页制作——序章（学习目的、对象、基本概念）</a>代码示例：

第一个网页

页面效果如图：

通过点击"零基础自学网页制作——序章（学习目的、对象、基本概念）"可以跳转到相应页面。

通过观察发现，a标签是在首尾标签之间添加要显示的文字内容，通过为href属性添加网址完成超链接设置。

大家思考一下，如果把文字换成图片，超链接还会起作用吗？

示例代码如下：

使用"<img src="image1.jpg"/>"代替"零基础自学网页制作——序章（学习目的、对象、基本概念）"。

看起来似乎没有变化，但是鼠标移动到图片上时，箭头变成了小手的图标。

点击后打开目标链接。

今天的内容到这里就结束了，通过这几个元素的学习，大家对html元素的使用建立了基本概念。

下一期我们将详细讲解html元素中的属性，在练习中再次介绍几个常用元素，并为大家讲解"绝对路径"与"相对路径"的区别。

喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！