HTML中的元素使用方法2——零基础自学网页制作

gaoyangw 2024-11-13 10:35 15 浏览 0 评论

HTML常用元素使用练习2

NO.3:

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

代码示例：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一个网页</title>
</head> 
<body>
  <h1>第一个网页</h1><hr>
<p>千里之行始于足下<br>值得注意的是我们没有必要一一讲解HTML中的所有元素以及每个元素的各个属性，<br>
  因为每个元素的使用都是大同小异，我们完全可以通过几个常用案例对HTML全部元<br>
  素及属性的指定形成一个整体认识，以后可以根据需求通过查询手册来自己学习其他<br>
  元素及其属性的用法。</p><hr><!--这里是注释-->
</body> 
</html>

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

NO.4:<img>

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

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

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

step2：右键-另存为

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

step4：图片命名为 image1.jpg

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

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

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一个网页</title>
</head> 
<body><h1>第一个网页</h1><hr>
<img src="image1.jpg"/>
  </body> 
</html>

页面效果如图所示：

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>代码示例：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一个网页</title>
</head> 
<body>
  <h1>第一个网页</h1>
<hr><a href="https://www.toutiao.com/i6785149184245760516/?group_id=6785149184245760516?group_id=6785149184245760516?group_id=6785149184245760516"> 零基础自学网页制作——序章（学习目的、对象、基本概念）</a></body> </html>

页面效果如图：

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

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

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

示例代码如下：

<a href="https://www.toutiao.com/i6785149184245760516/?group_id=6785149184245760516?group_
id=6785149184245760516?group_id=6785149184245760516"><img src="image1.jpg"/></a>

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

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一个网页</title>
</head> 
<body>
  <h1>第一个网页</h1><hr>
<a href="https://www.toutiao.com/i6785149184245760516/?group_id=6785149184245760516?group
_id=6785149184245760516?group_id=6785149184245760516"> <img src="image1.jpg"/></a>
  </body> 
  </html>

效果如下：

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

点击后打开目标链接。

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

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

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