1、文本内容标签（网页的“文字内容”）

    •    <h1> 到 <h6>：标题标签，<h1>是最大的标题（比如文章大标题），<h6>是最小的（比如小标题的小标题），数字越大字体越小。

    •    <p>：段落标签，把文字分成一段一段，就像作文里的自然段，段落之间会自动空一行。

    •    <br>：换行标签，在一段文字里强制换行（比如“你好世界”会显示成“你好”在上，“世界”在下），注意这个标签不用写结尾（没有</br>）。(单标签)

    •    <hr>：水平线标签，在页面上显示一条横线（用来分隔内容，比如文章不同部分之间），不用结尾标签（没有</hr>）。

    •    <strong> 或 <b>：加粗标签，让文字变粗（比如<strong>重要</strong>会显示成“重要”），<strong>更强调“重要性”，<b>只单纯加粗。

    •    <em> 或 <i>：斜体标签，让文字变斜（比如<em>强调</em>显示成“强调”），<em>强调语气，<i>只单纯斜体。

2、媒体标签（网页的“图片和链接”）

•    <img>：图片标签，用来插入图片。src 属性是必须的，它包含了你想嵌入的图片的路径。alt 属性包含一条对图像的文本描述，这不是强制性的，但对无障碍而言，它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。如果由于某种原因无法加载图像，普通浏览器也会在页面上显示 alt 属性中的备用文本：例如，网络错误、内容被屏蔽或链接过期。

•    <a>：链接标签，用来做“点击跳转”的链接。href属性指定跳转地址。

3、容器标签（网页的“内容分组”）

•    <div>：块级容器，单独占一整行，就像一个“大盒子”，可以装文字、图片、其他标签，适合分组大内容（比如“头部”“正文”“底部”）。

•    <span>：行内容器，不单独占一行，像一个“小盒子”，适合给一行文字里的部分内容分组（比如给一句话里的某个词加颜色：<p>我喜欢<span style="color:red">红色</span></p >）。

css：span.ingredient{ color:red }

4、列表标签（网页的“清单”）

•    <ul> + <li>：无序列表，列表项前有圆点。（可以设置list-style-type: circle...）

•    <ol> + <li>：有序列表，列表项前有数字

5、表单标签（网页的“填写区域”）

•    <form>：表单的“大容器”，所有输入框、按钮等都要放在里面。表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。

•    <input>：最常用的输入标签，通过type属性变成不同的输入形式。

...还有许多，可以自行去MDN上查看

•    <textarea>：多行文本框（比如输入留言、备注），可以输入多行文字

补充：关联标签<label>点击文字也能选中对应的输入框

•    <select> + <option>：下拉选择框（比如选择省份），<select>是容器，<option>是选项。

6、HTML5新增的一批更语义化的标签

•    <header>：网页的“头部”，通常放logo、导航栏、标题等（比如网站最上面的“某某官网”和菜单）。

•    <nav>：“导航区域”，专门放链接集合（比如顶部的“首页/新闻/关于我们”这些可点击的导航项）。

•    <main>：网页的“主要内容区”，一个页面只建议用一个，放核心内容（比如文章正文、商品列表）。

•    <article>：“独立文章”，比如一篇博客、一条新闻、一个论坛帖子（可以单独拿出来看懂的内容）。

•    <section>：“区块”，把相关内容分成一块（比如文章里的“第一章”“第二章”，每个章节用<section>包起来）。

•    <footer>：网页的“底部”，通常放版权信息、联系方式、备案号等（比如页面最下面的“©2023 某某公司 版权所有”）。

•    <canvas>：“画布”标签，用来绘制图形、动画（比如用代码画个圆、做简单的游戏画面），需要配合JavaScript使用（相当于提供一块“画板”，JS负责“画画”）。

•    <progress>：进度条标签，显示任务进度（比如下载进度、表单填写进度）。