前端学习——HTML初学__5 HTML常用标签（2）

龙蛋蛋啊

已于 2022-07-01 09:48:42 修改

阅读量119

点赞数 1

分类专栏： HTML 文章标签：前端 html5 css3 html 学习

于 2022-06-30 10:40:19 首次发布

本文链接：https://blog.csdn.net/m0_53428059/article/details/125528807

版权

HTML 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

继续学习HTML常用标签哈

一、图像标签（很重要！！!）

<img>用于定义HTML页面中的图像，是遇见的第二个单标签！！！使用格式如下：

<img src="图像URL" />

src是<img>标签的必须属性，用以指定图像文件的路径和文件名。

注：把图片放入网页的前提是必须将图片和网页文件放在一起（同一文件夹）。

试验一下，将图片t.png放在网页文件身边，输入代码：

<body>
    <img src="t.png" />
</body>

结果为：

完美成功！总结一下图像标签的属性：

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图片不能显示时转为显示的文字
title	文本	提示文本，鼠标放在图片上显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像边框的粗细

注：属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开；属性采取键值对的格式，即key="value"的格式

代码设置如下：

<body>
    <img src="t.png" /><br />
    <img src="t1.png" alt="图片加载错误" /><br />
    <img src="t.png" title="这是提示的话哦" width="100" border="15" /><br />
</body>

注意在设置宽度与高度时一般只设置一个就行，剩下一个会等比缩放。这个就不演示了，自己玩哈哈哈。

二、路径

目录文件夹：就是个文件夹，存放我们做页面需要的各种素材。

根目录：打开目录文件夹的第一层就是根目录。

VS code可以选择打开文件夹！操作起来十分方便！

页面中图片很多的情况下，可以新建一个文件夹专门存放这些图片，这时候就需要采用路径的方式来查找这些图片进行使用了。

路径分为：相对路径和绝对路径

相对路径：以引用文件所在的位置为参考基础而建立的目录路径，就是图片相对于HTML页面的位置。

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级，<img src="1.jpg" />
下一级路径	/	图像文件位于HTML文件下一级，<img src="images/1.jpg" />
上一级路径	../	图像文件位于HTML文件上一级，<img src="../1.jpg" />

绝对路径：指目录下的绝对路径，直接到达目标位置，通常为从盘符开始的路径或者为网络地址。

<img src="所用图片的绝对路径\1.jpg" />

三、超链接标签

<a>标签用于定义超链接，作用为从一个页面链接至另一个页面。

超链接的语法格式：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性	作用
href	指定链接目标的url地址，（必须属性）
target	指定链接页面的打开方式，_self为默认值，_blank为在新窗口中打开

链接分类：

1.外部链接：

<a href="http://www.baidu.com" target="_blank">百度</a>

2.内部链接：网站内部之间的相互链接，直接链接内部页面名称即可

<a href="sadx.html" target="_blank">内部链接</a>

3.空连接:如果当时没有确定链接目标时

<a href="#">不确定</a>

4.下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件

<a href="1.zip">下载文件</a>

5.网页元素链接：网页中的各种元素都可以添加超链接！

<a href="http://www.baidu.com"><img src="1.jpg"></a>

6.锚点链接：点击链接可以快速定位到页面的某个位置

首先在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">二</a> ,然后找到目标位置标签，里面添加id属性=设置的名字，如<h3 id="two">二的位置</h3>

内容太多不做演示啦

四、注释标签

如果需要在HTML文档中添加一些方便阅读又不需要显示在页面中的注释文字，可以使用注释标签。就是写代码时常写的注释嘛，格式如下：

<!--注释内容-->

快捷键ctrl＋/也可以将目标语句自动添加成注释。

五、特殊字符

HTML页面中，一些特殊符号很难或者不方便直接使用，需要用字符代替。

特殊字符	描述	字符的代码
	空格	&nbsp；
<	小于号	&lt；
>	大于号	&gt；
&	和号	&amp；
￥	人民币	&yen；
©	版权	&copy；
®	注册商标	&reg；
°	度	&deg；
±	正负号	&plusmn；
×	乘号	&times；
÷	除号	&divide；
²	平方	&sup2；
³	立方	&sup3；