前端最最最基础的基础HTML基础

什么是HTML？

HTML就是超文本标记语言（HyperText Markup Language）的简写。

为什么说他是最最最基础的基础呢？

因为它定义了 Web网页 内容的含义和结构，可以说它就是构成 Web 的一砖一瓦。

为什么叫超文本？

"超文本"（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。 ------ MDN

这个 MDN 的解释说白了，白说了，给我都看懵了。

其实我们看字面意思就是它的功能超越了一般的纯文本。

纯文本大家都知道吧，简单的讲就是字符串，记事本文件编辑显示的就是纯文本，内容就是单纯的字符，没有格式、没有跳转、没有多媒体关联。

大家平常看到的网页肯定不是纯文本的，至少会有些图片、视频这些其他的资源。

那 HTML 是怎么做到了呢？

超文本 的超就体现在，它在文本的基础上，增加了 超出纯文本的关联能力 ------ 最核心的就是 超链接（Hyperlink），在 HTML 中我们能通过链接把不同位置的文本和资源关联起来，这些资源就包括图片、音频、视频、表格等内容。

标记语言？

别问我它为什么是标记语言，因为它就是设计成标记语言的。

如何创建HTML文档？

创建一个扩展名为 .html 的文本文件，我们就可以在里面编写HTML的内容了，下面就是一段简单的HTML代码（先不用管这些代码的含义，我们下面会拆解这段代码的）。

html 复制代码

<!-- hellohtml.html -->
<!DOCTYPE html>
<html lang="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文档必不可少的开头。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，这个元素用来关联 HTML 编写规范，以供自动查错等功能所用。而在当今，它作用有限，可以说仅用于保证文档正常读取。现在知道这些就足够了。

我们只有记下面这种写法就行了。

html 复制代码

<!DOCTYPE html>

文档类型声明的html后面可以添加可选的字段，我们一般开发是用不上的。

文档中也提到除非文档是由无法输出较短字符串的系统生成的，否则不应使用 DOCTYPE 保留字符串。

文档类型声明的编写规则，感兴趣的可以自己看看哈。

至于远古时期的 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 虽然也支持，但是很久很久很久以前的规范了，我甚至都不想写出来，初学者可以直接不看这一段（看了请马上忘掉）。

HTML元素

前面说 HTML 是构成 Web 的一砖一瓦，那么元素就是砖和瓦。

一个典型的元素包括一个具有一些属性的开始标签，中间的文本内容和一个结束标签。

这里的标签其实就是一种标记，标记语言（callback）

我们上面的HTML文档中就有很多的元素

html 复制代码

<html lang="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 template element）

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 大写字母组成。

属性值由文本和字符引用组成，但有一个额外的限制，即文本中不能包含易混淆的"&"符号。

属性可以通过以下四种方式来指定：

空属性语法：

该值实际上是空字符串。

html 复制代码

<input disabled>

未引号标识的属性值语法：

html 复制代码

<input value=yes>

单引号属性值语法：

html 复制代码

<input type='checkbox'>

双引号属性值语法（常用）：

html 复制代码

<input name="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`（异步加载）