HTML常用标签1.0——HTML5学习笔记（2）

目录

4.1快捷键

4.2标题标签

4.3段落标签和换行标签

4.4文本格式化标签：粗/斜/删/下划

4.5div和span标签

4.6图像标签和路径

---

 

4.1快捷键

• alt+z 自动换行
• shift+alt+↓ 直接粘贴到下一行

4.2标题标签

<h1>一级标题</h1>

特点：

• 标题标签h1-h6，重要性依次递减，从大到小，加粗。
• 标题标签是一行显示。

4.3段落标签和换行标签

<p>段落</p>

特点：

• 在一个段落中的文字会根据浏览器窗口大小自动换行。
• 段落和段落之间有空隙。

---

<br /> //换行标签

原意：

break 强制换行。

用法：

在段落文字内插入<br />即可换行。

特点：

单标签。

4.4文本格式化标签：粗/斜/删/下划

1. <strong>加粗文字</strong>           或<b></b>
2. <em>倾斜文字</em>                     或<i></i>
3. <del>加删除线的文字</del>           或<s></s>
4. <ins>加下划线的文字</ins>           或<u></u>

4.5div和span标签

没有语义，盒子，用来布局/装内容。

1.<div></div>

原意：

division分区

特点：

一行只能放一个<div>大盒子。

联想：

和标题一样一行显示。

---

2.<span></span>

原意：

跨度、跨距

特点：

一行可以放多个<span>小盒子。

4.6图像标签和路径

1.图像标签

<img src="图像URL" />

原意：

image

用法注意：

• src是必须属性，用于指定图像文件的路径和文件名。
• 把图像文件和html放在同一个文件目录下，URL直接写图像文件名即可。

其他属性：

• alt:替换文本——图像因某些原因无法显示时，显示的提示文本
• title:提示文本——鼠标放在图像上显示的文字
• width/height:像素——设置图像宽/高 一般设置其中一个就行另一个会自动等比例缩放
• border:像素——设置图像的边框粗细 一般后期用CSS设定

   

---

2.路径

（1）目录文件夹和根目录

目录文件夹：存放做页面的相关素材比如html文件图片等。

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

 

（2）vscode打开目录文件夹：

方式一：文件---打开文件夹----选择目录文件，便于管理（建议）。

方式二：直接把目录文件夹拖到vscode中即可。

 

（3）路径

存放图像文件：新建一个文件夹images存放。

相对路径：图片相对于HTML页面的位置。

•  同一级（同一个文件夹内）：直接写文件名，如baidu.gif
•  下一级（图像文件位于HTML文件的下一级，比如HTML文件和images文件夹处于同一级时）：如images/baidu.gif
•  上一级（图像文件位于HTML文件的上一级，如图像文件与HTML文件所在的文件夹处于同一级）：如../baidu.gif   多个上一级就../../../

绝对路径：   

1. 从盘符开始C:\User\.....（很少使用，因为每个人的电脑文件不一样）
2. 完整的网络地址：如一个网络上找到的图片的网络地址。