前端之HTML常用标签（二）

目录

1.图像标签和路径

1.1图像标签

1.2目录文件夹和根目录

1.3.路径

1.3.1相对路径

1.3.2绝对路径

2.超链接标签

2.1语法格式

2.2链接分类

3.注释标签和特殊字符

3.1注释

3.2特殊字符

---

1.图像标签和路径

1.1图像标签

在HTML标签中，<img>标签用于定义页面中的图像。

语法格式：<img src="图像URL" />

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

图像标签的属性

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

1.2目录文件夹和根目录

目录文件夹：即普通文件夹，里面只不过存放了我们做网页所需要的相关素材，比如html文件、图片等。

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

1.3.路径

1.3.1相对路径

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

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

1.3.2绝对路径

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的。如：D:\web\img\logo.gif 或完整的网络地址。

2.超链接标签

2.1语法格式

在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。

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

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能。
target	用于指定链接页面的打开方式，其中_self为默认值（即在当前窗口打开），_blank为在新窗口打开方式。

2.2链接分类

（1）外部链接：必须以http开头，eg:<a href="http://www.qq.com">

（2）内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可。eg:<a href="demo.html"></a>

（3）空链接：如果当时没有确定链接目标时，用空链接代替，<a href="#"></a>

（4）下载链接：当地址链接的是文件.exe或是zip压缩包形式时，则会下载这个文件。

（5）网页元素的链接：在网页中的各种网页元素，如图片、文本、表格、音频、视频等都可添加超链接。eg:<a href="http://www.baidu.com"><img src="img.jpg"  /></a>

（6）锚点链接：当我们点击链接时，可以快速定位到页面中的某个位置

①在链接文本的href属性中，设置属性值为#名字的形式，eg:<a href="#two">第二集</a>

②找到目标位置标签，里面添加一个id属性=刚才的名字，eg：<h3 id=“two”>第二集介绍</h3>

3.注释标签和特殊字符

3.1注释

<!--注释语句-->，快捷键：Ctrl+/（问号那个键）

3.2特殊字符

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