前端学习02——HTML常用标签（1）（pink老师笔记）

目录

HTML常用标签

标题标签

段落标签

换行标签

文本格式化标签

标签和标签

 图像标签

路径

相对路径

绝对路径

超链接标签

外部链接

内部链接

空链接

下载链接

网页元素超链接

锚点链接

 注释

特殊字符

---

HTML常用标签

有技巧，要记住标签的语义

标题标签

有<h1>-<h6> 一共六个等级

语义：作为标题使用，按照重要性递减

特点：单行显示

段落标签

语义：分段显示<p></p>

<p>我是一个段落</p>

特点：

1. 文本在一个段落中会随着浏览器窗口的大小自动换行

2. 段落和段落之间会有一定的间隔

换行标签

单标签<br/>

语义：强制换行

文本格式化标签

 语义：突出重要性

语义	标签	说明
加粗	<strong></strong>或者<b></b>	推荐使用<strong></strong>
倾斜	<em></em>或者<i></i>	推荐使用<em></em>,语义更强烈
删除线	<del></del>或者<s></s>	推荐使用<del></del>
下划线	<ins></ins>或者<u></u>	推荐使用<ins></ins>

<div>标签和<span>标签

没有语义，只是盒子，用来布局

div(divison):分割、分区（竖向）——大盒子

span:跨度、跨距（横向）——小盒子

 图像标签

<img scr="图像URL" alt="替换文本" title="提示文本"/>

scr是图像标签的必须属性。

属性	属性值	说明
scr	图片路径	必须属性
alt	文本	替换文本，图像无法显示时显示该文本
title	文本	提示文本，鼠标放到图片上提示的文本
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框大小

宽度和高度一般修改其中的一个，图片会等比缩放。

border一般通过css来设置。

注意：

1. 属性要放在标签名的后面

2. 属性之间没有前后次序，中间以空格分开

3. 属性采取键值对的格式，key="value"

路径

文件不能随便乱放，需要用文件夹来管理，以便快速查找

目录文件夹：存放了我们所需要的素材

根目录：目录文件夹的第一层

VScode可以打开目录文件夹，也可以直接把文件夹拖拽到VScode中。

相对路径

引用文件相对于html文件的位置

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

绝对路径

通常是从盘符开始的路径

如:D:\web\img\logo.jpg或者完整的网络地址“http://www.itcast.cn/images/logo.jpg”

通常不使用绝对路径

注意：相对路径“/” 绝对路径“\”

超链接标签

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

属性	作用
href	用于指定链接目标的URL地址
target	用于指定链接页面的打开方式，_self(默认值):当前页面跳转；_blank:在新的窗口打开。

外部链接

完整的网络地址（如：http://www.XXX.com ）

内部链接

在目录文件夹中的两个html网站跳转，网站内部页面之间的相互链接，href的值只要写名字即可。

空链接

在网站开发前期,href的值为“#”

<a href="#">未开发的页面</a>

下载链接

如果href里面是一个文件（.exe）或者压缩包(.zip或.rar)，会下载这个文件

网页元素超链接

网页中的各种网页元素：文本、图像、视频、音频、表格等都可以添加超链接。

例：给图片添加超链接

<a href="#"><img src="1.jpg" alt="图片"></a>

锚点链接

点击链接时，可以快速定位到页面中的某个位置

实现：

1. 链接文本的href属性的属性值为”#名字“

2. 目标位置标签除添加id属性，属性值为”名字“

<a href="#跳转部位">重点内容</a>
<h4 id="跳转部位">重点内容：。。。。。。。。此处省略一万字</h4>

 注释

<!--注释内容-->

在VScode中，ctrl+/就可以添加注释

特殊字符

特殊字符	描述	字符的代码
	空格符	 
<	小于号	&lt;(less than)
>	大于号	&gt;(greater than)
&	和号	&amp;
￥	人民币	&yen;
©	版权	&copy;
®	注册商标	&reg;
°	摄氏度	&deg;
±	正负号	&plusmn;

记住常用的，其余的用到了再查阅