小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
【详细+超基础】前端之旅
软件工程专业学生的前端之旅，记录自己对三件套（HTML、CSS、JavaScript）、Node.js、Vue、小程序开发（uniapp）以及各种UI组件库、前端框架的学习。
二、HTML常用标签 🔥
排版标签 ： 主要和CSS 搭配使用，显示网页结构的标签，是网页布局最常用的标签。
- 标题标签
<h> - 段落标签
<p> - 水平线标签
<hr/> - 换行标签
<br/> - div 与span标签：没有语义，是我们用于网页布局的2个常用的盒子。
标签属性(行内式) ：我们使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。
<标签名 属性1="属性值1" 属性2="属性值2" > 内容 </标签名>
1.标题标签
<body>
<h1> 一级标题</h1>
<h2> 二级标题</h2>
<h3> 三级标题</h3>
<h4> 四级标题</h4>
<h5> 五级标题</h5>
<h6> 六级标题</h6>
</body>
- 标题标签下的文字会变的加粗，字号也会根据标签等级依次变大，并且一个标题独占一行。
2.段落标签
<p>
这是一个段落。
</p>
- 写在一个段落标签里的文字，会根据浏览器窗口的大小进行自动换行，并且段落和段落之间保有空隙。
3.换行标签与水平线标签
<br/>
<hr/>
<br/>是个单标签，作用是进行换行，不会产生垂直的间距。<hr/>自动生成一条100%宽的水平线。
4.盒子标签
<div></div>:一行只能放一个大盒子<span></span>: 一行可以放多个小盒子
<div>这是一个div</div>
<span>这是一个span</span>
5.文本格式化标签
- 为文字设置粗体、斜体、下划线等效果
- b和strong 文字以粗体显示
- i和em 文字以斜体显示
- s和del 文字以加删除线显示
- u和ins 文字以加下划线显示
6.图像标签
<body>
<img src="" alt="" title="" />
</body>
-
src是
<img>标签的必须属性，用来指定图像文件的路径与文件。属性 属性值 说明 src 图片路径 必须属性 alt 文本 替换文本（当图片不能显示时候显示的文字） title 文本 提示文本（鼠标放到图像上，显示的文字）
7.路径问题
在引入静态资源时（比如图片、音频等）需要通过文件路径进行引入，这里主要涉及到绝对路径与相对路径。
- 绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
- 相对路径：
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图形文件位于 HTML 文件同一级 如<img src="demo.png"> | |
| 下一级路径 | / | 图形文件位于 HTML 文件下一级 如 <img src="images/demo.png"> |
| 上一级路径 | …/ | 图形文件位于 HTML 文件上一级 如 <img src="../demo.png"> |
