#【博学谷学习记录】超强总结，用心分享|前端HTML基础知识总结

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

一、HTML

1、基础认知

2、标签结构

3、标签大全

1. 排版标签

2. 文本格式化标签

3. 媒体标签       

4. 链接标签

5.列表标签

6. 表格标签 

7. 表单标签

总结

---

前言

随着科学技术的发展，互联网全面进入移动时代，前端逐渐成为互联网行业中的重要角色。前端要做的就是将产品的UI设计稿在用户终端上实现，网站的“前端”是与用户直接交互的部分，包括你在浏览网页时接触的所有视觉内容--从字体到颜色，以及下拉菜单和侧边栏。这些视觉内容，都是由浏览器解析、处理、渲染相关HTML、Css等文件后呈现而来。本篇文章将为大家罗列HTML的基础知识。

---

一、HTML

1、基础认知

HTML (Hyper Text Markup Language）中文译为:超文本标记语言，它专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述。

2、标签结构

1.标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名。

2.常见标签由两部分组成，我们称之为:双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容

3.少数标签由一部分组成，我们称之为:单标签。自成一体，无法包裹内容。

3、标签大全

1. 排版标签

1.1 标题标签： <h1>1级标题</h1>

                         <h2>2级标题</h2>

                         <h3>3级标题</h3>

                        <h4>4级标题</h4>

                        <h4>4级标题</h4>

                        <h4>4级标题</h4>

特点：1~6级标题，重要程度依次递减、文字都有加粗变大且1~6逐渐减小、独占一行。

1.2段落标签：<p>我是一段文字</p>

特点：段落之间存在间隙、独占一行。

1.3换行标签：<br>

特点：单标签、让文字强制转行。

1.4水平线标签：<hr>

特点：单标签、在页面中显示一条水平线。

2. 文本格式化标签

场景：需要让文字加粗、下划线、倾斜、删除线等效

标签	标签	说明
b	strong	加粗
u	ins	下划线
i	em	倾斜
s	del	删除线

3. 媒体标签       

3.1图片标签：

特点：单标签、img标签需要展示对应的效果，需要借助标签的属性进行设置!

图片标签的常见属性：

3.2路径：绝对路径和相对路径

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

例如：从盘符开始 :F:\VSCode\case-study\images\1.jpg

相对路径:从当前文件开始出发找目标文件的过程（常用），分为三类：同级目录、下级目录、上级目录

注：开发工具VScode中相对路径的快捷操作，同级和下级目录:./之后选择即可、上级目录: ../之后选择即可

3.3音频标签： 

音频标签常见属性：

 

 3.4视频标签：

 视频标签常见属性：

 4. 链接标签

特点：双标签，内部可以包裹内容、如果需要a标签点击之后去指定页面，需要设置a标签的href属性。

显示特点：a标签默认文字有下划线、a标签从未点击过，默认文字显示蓝色、a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色)。

链接标签的属性：

注：空链接<a href="#">空链接</a>

 5.列表标签

5.1无序列表：ul>li

场景：在网页中表示一组无顺序之分的列表，如∶新闻列表。

标签组成：

注： ul标签中只允许包含li、标签li标签可以包含任意内容

 5.2有序列表：ol>li

场景：在网页中表示一组有顺序之分的列表，如：排行榜。

标签组成：

注：ol标签中只允许包含li、标签li标签可以包含任意内容

 5.3自定义列表：dl>dt/dd

 场景：在网页的底部导航中通常会使用自定义列表实现。

标签组成：   注：dl标签中只允许包含dt/dd标签 、dt/dd标签可以包含任意内容

6. 表格标签 

6.1表格标签及相关属性：table>tr>td

表格的基本标签：

场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表

基本标签：

 常见相关属性：

 表格标题和表头单元格标签：

 表格的结构标签：

注：表格结构标签内部用于包裹tr标签 、表格的结构标签可以省略

 6.2 合并单元格：跨行合并（rewspan）、跨列合并（colspan）

合并原则： 通过左上原则，确定保留谁删除谁：上下合并→只保留最上的，删除其他；

左右合并→只保留最左的，删除其他。

7. 表单标签

7.1 input系列标签：

场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页。

 input标签可以通过type属性值的不同，展示不同效果

 type属性值：

 文本框：场景：在网页中显示输入单行文本的表单控件

type属性值:text

常用属性：placeholder（占位符，提示用户输入的内容）

7.2 button按钮标签：

场景：在网页中显示用户点击的按钮

type属性值（同input的按钮系列）不再赘述

7.3 select下拉菜单标签：select>option

场景：在网页中提供多个选择项的下拉菜单表单控件

标签组成：  select标签：下拉菜单的整体

                    option标签：下拉菜单的每一项

                

常见属性： selected：下拉菜单的默认选中

7.4 textarea文本域标签：

场景：在网页中提供可输入多行文本的表单控件

常见属性： cols：规定了文本域内可见宽度  rows：规定了文本域内可见行数

7.5 label标签：

场景：常用于绑定内容与表单标签的关系

使用方法①：

1. 使用label标签把内容（如：文本）包裹起来

2. 在表单标签上添加id属性

3. 在label标签的for属性中设置对应的id属性值

使用方法②：

1. 直接使用label标签把内容（如：文本）和表单标签一起包裹起来

2. 需要把label标签的for属性删除即可

7.6 字符实体

场景：在网页中展示特殊符号效果时，需要使用字符实体替代

常用：空格 &nbsp

---

总结

HTML中的各类标签及其使用是构建网页布局的重要因素，一定要熟练掌握，现在就开始学起来吧，加油！