前端最最最基础的基础HTML基础
前端最最最基础的基础HTML基础
什么是HTML？
HTML就是超文本标记语言（HyperText Markup Language）的简写。
为什么说他是最最最基础的基础呢？
因为它定义了 Web网页 内容的 含义 和 结构，可以说它就是构成 Web 的一砖一瓦。
为什么叫超文本？
“超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。 —— MDN
这个 MDN 的解释说白了，白说了，给我都看懵了。
其实我们看字面意思就是它的功能超越了一般的纯文本。
纯文本大家都知道吧，简单的讲就是字符串，记事本文件编辑显示的就是纯文本，内容就是单纯的字符，没有格式、没有跳转、没有多媒体关联。
大家平常看到的网页肯定不是纯文本的，至少会有些图片、视频这些其他的资源。
那 HTML 是怎么做到了呢？
超文本 的 超 就体现在，它在文本的基础上，增加了 超出纯文本的关联能力 —— 最核心的就是 超链接（Hyperlink），在 HTML 中我们能通过链接把不同位置的文本和资源关联起来，这些资源就包括图片、音频、视频、表格等内容。
标记语言？
别问我它为什么是标记语言，因为它就是设计成标记语言的。
如何创建HTML文档？
创建一个扩展名为 .html 的文本文件，我们就可以在里面编写HTML的内容了，下面就是一段简单的HTML代码（先不用管这些代码的含义，我们下面会拆解这段代码的）。
<!-- hellohtml.html --><!DOCTYPEhtml><htmllang="en"><head><title>HelloHTML</title></head><body><p>Hello HTML</p></body></html>我们可以直接用浏览器中打开扩展名为 .html 的文本文件。
HTML的文档结构
下面是 WHATWG Living Standard 的 HTML 文档编写的规则
文件必须包含以下部分，并按照指定顺序排列：（可选）一个单个的 U+FEFF 字节序标记（BOM）字符。可以包含任意数量的注释和 ASCII 空格字符。一个文档类型声明。可以包含任意数量的注释和 ASCII 空格字符。该文档元素，以 html 元素的形式存在。可以包含任意数量的注释和 ASCII 空格字符。
我们就按这个规则出现的顺序来讲吧
注释
必须采用以下格式：
<!-- 注释内容 -->注意：注释内容不能破坏 <!-- --> 的结构，就是不能以字符串>开头，也不能以字符串->开头，不能包含字符串<!--、-->或--！>，并且不能以字符串<!-结尾。
文档类型声明
上面规则就可以看到，这是HTML文档必不可少的开头。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，这个元素用来关联 HTML 编写规范，以供自动查错等功能所用。而在当今，它作用有限，可以说仅用于保证文档正常读取。现在知道这些就足够了。
我们只有记下面这种写法就行了。
<!DOCTYPEhtml>文档类型声明的html后面可以添加可选的字段，我们一般开发是用不上的。
文档中也提到除非文档是由无法输出较短字符串的系统生成的，否则不应使用 DOCTYPE 保留字符串。
文档类型声明的编写规则，感兴趣的可以自己看看哈。
至于远古时期的 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 虽然也支持，但是很久很久很久以前的规范了，我甚至都不想写出来，初学者可以直接不看这一段（看了请马上忘掉）。
HTML元素
前面说 HTML 是构成 Web 的一砖一瓦，那么元素就是砖和瓦。
一个典型的元素包括一个具有一些属性的开始标签，中间的文本内容和一个结束标签。
这里的标签其实就是一种标记，标记语言（callback）
我们上面的HTML文档中就有很多的元素
<htmllang="en"><head><title>HelloHTML</title></head><body><p>Hello HTML</p></body></html>我可以看到元素是可以相互嵌套的，但是我们要注意每个元素的标签必须闭合。
元素类型
WHATWG Living Standard 中共有六种不同的元素类型：空元素、模板元素、纯文本元素、可转义纯文本元素、外部元素以及常规元素。
- 空元素（Void elements）
area,base,br,col,embed,hr,img,input,link,meta,source,track,wbr - 模板元素 （The
templateelement）template - 纯文本元素（Raw text elements）
script,style - 可转义纯文本元素（Escapable raw text elements）
textarea,title - 外部元素 （Foreign elements）来自 MathML 命名空间和 SVG 命名空间的元素。
- 常规元素 （Normal elements）所有其他被允许的 HTML 元素均为常规元素。
这些不同的元素有很多的特性（我不想总结了，因为我感觉不能搞太复杂了），把 HTML元素规范 放这，感兴趣的可以自行查看哈。
还有MDN里面的 HTML 元素参考 列出了所有使用标签创建的 HTML 元素。
元素属性
元素的属性是在该元素的起始标签内进行定义的。
属性具有名称和值，一般情况下格式：name="value"。
在 HTML 语法中，属性名称（即使是针对外部元素的名称）可以由任何组合的 ASCII 小写字母和 ASCII 大写字母组成。
属性值由文本和字符引用组成，但有一个额外的限制，即文本中不能包含易混淆的“&”符号。
属性可以通过以下四种方式来指定：
空属性语法：
该值实际上是空字符串。
<inputdisabled>未引号标识的属性值语法：
<inputvalue=yes>单引号属性值语法：
<inputtype='checkbox'>双引号属性值语法（常用）：
<inputname="be evil">MDN里面也有 HTML 属性参考 还有 全局属性 和 按元素划分的属性，需要时可以在文档中查找，另外元素的详情里面也有其对应标准属性及其属性值。
常见的HTML元素
下面整理了一些开发中常用的元素，详细的用法可以查看 MDN 的 HTML 元素参考 。
文档结构类
| 元素 | 核心作用 | 关键说明 |
|---|---|---|
<html> | 页面根元素 | 需指定 lang 属性（如 lang="zh-CN"） |
<head> | 页面元信息容器 | 不显示在页面，存 title/meta/link 等 |
<body> | 页面可视内容容器 | 所有可见内容都嵌套在此 |
<title> | 页面标题 | 影响 SEO 和浏览器标签显示 |
<meta> | 页面元数据 | 常用：编码、视口、SEO 描述 |
<link> | 引入外部资源 | 主要引入 CSS、图标、预加载资源 |
布局语义化类
| 元素 | 核心作用 | 使用场景 |
|---|---|---|
<header> | 页面 / 区块头部 | 网站导航、标题、logo 区域 |
<nav> | 导航栏 | 主导航、侧边导航 |
<main> | 页面核心内容（唯一） | 页面主要业务区域，避免重复 |
<section> | 逻辑区块 | 文章章节、功能模块 |
<article> | 独立完整内容 | 博客文章、评论、商品卡片 |
<aside> | 侧边栏 / 辅助内容 | 广告、目录、相关推荐 |
<footer> | 页面 / 区块底部 | 版权、联系方式、备案信息 |
<div> | 通用容器（无语义） | 无法用语义标签时的兜底选择 |
文本内容类
| 元素 | 核心作用 | 注意点 |
|---|---|---|
<h1>-<h6> | 标题（h1 唯一，层级递减） | 影响 SEO，不要单纯为样式用 |
<p> | 段落 | 自动换行，有默认上下间距 |
<span> | 行内通用容器 | 无默认样式，用于包裹行内文本 |
<strong> | 重要文本（粗体） | 语义 + 样式，比 <b> 更推荐 |
<em> | 强调文本（斜体） | 语义 + 样式，比 <i> 更推荐 |
<br> | 换行（自闭合） | 只用于文本换行，不要用它控制间距 |
<hr> | 分隔线（自闭合） | 分割不同主题内容 |
<blockquote> | 长引用 | 通常有默认缩进 |
<code> | 代码片段 | 行内代码，配合 <pre> 显示多行代码 |
列表类
| 元素 | 核心作用 | 示例 |
|---|---|---|
<ul> | 无序列表 | 导航菜单、选项列表（默认圆点） |
<ol> | 有序列表 | 步骤、排名（默认数字） |
<li> | 列表项（必须嵌套在 ul/ol 中） | 每个列表的子元素 |
<dl> | 定义列表 | 术语 + 解释的组合 |
<dt> | 定义术语 | 配合 dd 使用 |
<dd> | 定义解释 | 通常有默认缩进 |
表单类
| 元素 | 核心作用 | 关键属性 |
|---|---|---|
<form> | 表单容器 | action（提交地址）、method（请求方式） |
<input> | 输入框（多类型） | type（text/button/checkbox 等）、name、value |
<button> | 按钮 | type（button/submit/reset） |
<select> | 下拉选择框 | 配合 <option> 使用 |
<option> | 下拉选项 | value 为提交值，selected 默认选中 |
<textarea> | 多行文本框 | rows/cols 控制尺寸，placeholder 提示 |
<label> | 表单标签 | for 绑定 input 的 id，提升可访问性 |
<fieldset> | 表单分组 | 配合 <legend> 标注分组标题 |
多媒体 / 图形类
| 元素 | 核心作用 | 关键属性 |
|---|---|---|
<img> | 图片（自闭合） | src（地址）、alt（替代文本，必写）、loading="lazy"（懒加载） |
<picture> | 响应式图片 | 配合 <source> 适配不同设备 |
<audio> | 音频 | controls（控制栏）、autoplay（自动播放，需静音） |
<video> | 视频 | controls、muted（静音）、poster（封面） |
<canvas> | 像素绘图 | 需 JS 操作，动态生成图形 |
<svg> | 矢量图形 | 无损缩放，适合图标、简单图形 |
链接 / 嵌入类
| 元素 | 核心作用 | 关键属性 |
|---|---|---|
<a> | 超链接 | href（链接地址）、target="_blank"（新窗口）、rel="noopener noreferrer"（安全） |
<iframe> | 嵌入其他页面 | src、width/height、sandbox（安全限制） |
<script> | 引入 / 执行 JS | src（外部 JS）、defer/async（异步加载） |
