HELLO，这里是大熊学习前端开发的入门笔记。
本系列笔记基于 windows 系统。
截止发文，MDN 收录的 HTML 全量标签有 126 个，有 18 个标记已弃用。
名词解释：MDN --- MDN Web Docs （ 前身为 Mozilla Developer Network ） 是一个开源的、由 Mozilla 基金会创建和维护的 Web 开发者资源库。
HTML 常用标签
根据大数据统计，在开发中常用的标签有 60 个左右，按功能区分如下：
文档结构标签
：文档类型声明
：根元素
：文档头部（包含元数据）
：页面标题</p>
<p><body>：文档主体内容</p>
<p>元数据与资源标签</p>
<p><meta>：元信息（字符集、视口设置等）</p>
<p><link>：引入外部资源（CSS、图标）</p>
<p><style>：内联 CSS</p>
<p><script>：JavaScript 代码或引用</p>
<p>语义化标签（HTML5）</p>
<p><header>：页眉</p>
<p><footer>：页脚</p>
<p><nav>：导航栏</p>
<p><article>：独立内容</p>
<p><section>：内容区块</p>
<p><aside>：侧边栏</p>
<p><main>：主体内容</p>
<p><menu>：交互式无序列表内容</p>
<p><figure>、<figcaption>：图片/图表与说明</p>
<p>容器与布局标签</p>
<p><div>：通用块级容器</p>
<p><span>：通用行内容器</p>
<p>文本与段落标签</p>
<p><h1>-<h6>：标题</p>
<p><p>：段落</p>
<p><span>：行内文本容器</p>
<p><br>：换行</p>
<p><hr>：水平分割线</p>
<p><pre>：保留格式文本</p>
<p><strong>：强调（粗体）</p>
<p><em>：强调（斜体）</p>
<p><blockquote>：长引用</p>
<p>链接与媒体标签</p>
<p><a>：超链接</p>
<p><img>：图片</p>
<p><video>：视频</p>
<p><audio>：音频</p>
<p><source>：媒体资源（配合 video/audio 使用）</p>
<p>列表标签</p>
<p><ul>：无序列表</p>
<p><ol>：有序列表</p>
<p><li>：列表项</p>
<p><dl>、<dt>、<dd>：定义列表</p>
<p>表单与输入标签</p>
<p><form>：表单容器</p>
<p><input>：输入控件（文本、密码、按钮等）</p>
<p><textarea>：多行文本输入</p>
<p><select>、<option>：下拉选择</p>
<p><label>：表单标签</p>
<p><button>：按钮</p>
<p><fieldset>、<legend>：表单分组</p>
<p>表格标签</p>
<p><table>：表格</p>
<p><tr>：表格行</p>
<p><td>：单元格</p>
<p><th>：表头单元格</p>
<p><thead>、<tbody>、<tfoot>：表格结构</p>
<p>图形渲染</p>
<p><canvas>： 2D 、3D 图形及图形动画绘制</p>
<p>内嵌框架元素</p>
<p><iframe>：嵌入三方页面</p>
<p>总结</p>
<p>标签那么多，是不是光 HTML 都够喝一壶了？还学啥 css，js ？</p>
<p>说实话，除了功能性标签（1,2,4,6,8,10,11 中列出的标签，大约27个）无法替代，其他标签嘛...一言难尽！</p>
<p>就浏览器端渲染的 vue 项目来说，就一个 div 标签就可行走天下了。</p>
<p>推荐学习资源</p>
<p>MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a</p>
<p>w3school: https://www.w3school.com.cn/cssref/css_entities.asp</p>
<p>常用标签使用示例</p>
<p><!DOCTYPE html></p>
<p><html lang="zh-CN"></p>
<p><head></p>
<p><meta charset="UTF-8"></p>
<p><meta name="viewport" content="width=device-width, initial-scale=1.0"></p>
<p><title>HTML 常用标签一览
3. 语义化标签（HTML5）
独立内容
主体内容
alt="Elephant at sunset" />
图片/图表与说明
4. 容器与布局标签
通用块级容器
通用行内容器
5. 文本与段落标签
1级标题
2级标题
3级标题
4级标题
5级标题
6级标题
段落
行内文本容器
换行
水平分割线
保留格式文本
强调（粗体）
强调（斜体）
长引用
6. 链接与媒体标签
超链接
alt="Elephant at sunset">图片
视频
音频
7. 列表标签
- 有序列表项
- 有序列表项
- 定义列表 dt
- 定义列表 dd
- 定义列表 dt
- 定义列表 dd
8. 表单与输入标签
9. 表格标签
| 序号 |
姓名 |
年龄 |
城市 |
| 1 |
张三 |
28 |
北京 |
| 2 |
李四 |
34 |
上海 |
| 3 |
王五 |
22 |
广州 |
| 总计人数: 3 |
10. 图形渲染
2D 、3D 图形及图形动画绘制(需要JS能力)
11. 内嵌框架元素
参考资料：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a
