HTML学习记录2

HTML：超文本标记语言

HTML的骨架结构

html标签	网页的整体
head标签	网页的头部
body标签	网页的身体
title标签	网页的标题

html标签的结构

分为单标签和双标签（当需要确定范围时用双）

html标签与标签之间的关系可分为：

父子关系（嵌套关系）

兄弟关系（并列关系）

排版标签

1.1.1标题标签

<h1></h1>

1-6级标题，重要程度依次递减

特点：

文字都有加粗

文字都有变大

独占一行

1.2.1段落标签

<p></p>

特点：

段落之间存在间隙

独占一行

1.3.1换行标签

<br>

特点：

单标签

让文字强制换行

1.4.1水平线标签

<hr>

特点：

单标签

在页面中显示一条水平线

文本格式化标签

2.1.1

序号	标签1	标签2	说明
1	b	strong	加粗
2	u	ins	下划线
3	i	em	倾斜
4	s	del	删除线

标签2用在突出重要性的强调语境

图片标签

3.1.1图片标签

<img src=" ",alt=" ">

特点：

单标签

img标签需要展示对应的效果，需要借助标签的属性进行设置。

标签属性（src(属性名)=""(属性值)）

属性注意点：

标签的属性写在开始标签内部

标签上可以同时存在多个属性

属性之间以空格隔开

标签名与属性之间必须以空格隔开

属性之间没有顺序之分

属性名：alt

属性值：替换文本

注意点：

当图片加载失败时，才显示alt的文本

当图片加载成功·时，不会显示alt文本

属性名：title

属性值：提示文本

注意点：

当鼠标悬停时，才会显现的文本

title属性不仅仅可以用于图片属性，还可以用于其他标签

属性名：width height

属性值：宽度和高度（数字）

注意点：

如果只设置width height 中的一个，另一个没有设置的会自动等比例缩放（此时图片不会变形）

如果同时设置width height两个，若设置不当此时图片可能会变形。

路径

场景：页面需要加载图片，需要先找到对应的图片

路径分类：绝对路径与相对路径

绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径

相对路径：从当前文件开始出发找目标文件的过程

相对路径分类：

• 同级目录（当前文件和目标文件在同一目录中，代码实现：直接写目标文件的名字即可）

方法1：<img src="目标图片.gif">

方法2：<img src="./目标图片.gif">

• 下级目录
• 上级目录