前端小白必看！HTML从入门到精通

cyx113
0 阅读22分钟

前端小白必看！HTML从入门到精通

什么是 HTML

HTML，全称超文本标记语言（HyperText Markup Language） ，它并非编程语言，而是一种标记语言。简单来说，HTML 通过一系列的标签（tag）来描述网页的结构和内容，就像是给网页搭建了一个基础框架。比如，你想在网页上展示一段文字，就可以使用<p>标签，像这样<p>这是一段文字</p>，浏览器在解析这段代码时，就会识别<p>标签，并将其中的文字以段落的形式展示在页面上。

常见的 HTML 标签还有很多，<h1> - <h6>标签用于定义不同级别的标题，<h1>是最大的一级标题，<h6>是最小的六级标题 ，比如<h1>我的个人网站</h1>，这会在网页上显示一个醒目的大标题。<a>标签用于创建超链接，通过href属性指定链接的目标地址，<a href="https://www.baidu.com">点击前往百度</a>，用户点击这段文字，就会跳转到百度的页面。<img>标签用于插入图片，<img src="image.jpg" alt="这是一张图片">，其中src属性指定图片的路径，alt属性则是在图片无法显示时，提供替代的文本描述，方便用户理解。

HTML 在网页中的角色：搭建页面骨架

如果把网页比作一座建筑物，那么 HTML 就像是这座建筑物的骨架 。它定义了网页的基本结构，划分出各个功能区域，比如头部、主体内容、侧边栏、底部等，让整个网页有了清晰的层次和布局。

下面通过一个简单的 HTML 页面代码示例，来更直观地感受 HTML 是如何搭建页面结构的：


<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的网页</title>
</head>
<body>
    <header>
        <h1>欢迎来到我的网站</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>最新消息</h2>
            <p>这里是最新的消息内容，巴拉巴拉。</p>
        </section>
        <section>
            <h2>产品介绍</h2>
            <p>我们的产品具有各种优势，巴拉巴拉。</p>
        </section>
    </main>
    <aside>
        <h3>热门推荐</h3>
        <ul>
            <li>推荐内容1</li>
            <li>推荐内容2</li>
            <li>推荐内容3</li>
        </ul>
    </aside>
    <footer>
        <p>&copy; 2024 我的网站. 版权所有.</p>
    </footer>
</body>
</html>

在这段代码中，<html>标签是整个页面的根元素，就像建筑物的地基，所有其他元素都包含在它内部。<head>标签包含了页面的元数据，比如字符编码<meta charset="UTF-8">，它确保页面能正确显示各种字符，不会出现乱码；<meta name="viewport" content="width=device-width, initial-scale=1.0">用于设置页面在移动端的适配，让页面能根据不同设备的屏幕宽度自动调整布局；<title>标签定义的标题会显示在浏览器的标签页上，方便用户识别页面内容。

<body>标签则是页面的主体部分，包含了所有可见的内容。<header>标签定义了页面的头部区域，其中<h1>标签显示了网站的标题，<nav>标签定义了导航栏，通过<ul>（无序列表）和<li>（列表项）标签组合，以及<a>标签创建的超链接，构成了网站的导航菜单。<main>标签包裹了页面的主要内容，其中又包含了两个<section>标签，每个<section>都有自己的标题和段落内容，用于展示不同主题的信息。<aside>标签定义了侧边栏，通常用于放置一些辅助信息，这里展示了热门推荐内容。<footer>标签定义了页面的底部区域，显示了版权信息。

通过这些 HTML 标签的组合和嵌套，一个完整的网页结构就搭建起来了，各个部分各司其职，共同构成了一个功能齐全、结构清晰的网页 。

HTML 的进化之路：从诞生到 HTML5

（一）HTML 的发展历程

HTML 自 1993 年诞生以来，经历了多次重要的版本迭代，每一次更新都为网页开发带来了新的能力和特性，推动着互联网的发展。1993 年，HTML 1.0 版本首次发布 ，作为 HTML 的首个版本，它的功能十分有限，主要用于简单的文本显示，仅能满足最基本的网页内容展示需求，像是在网页上呈现一段文字、一个标题等，不过它却奠定了 HTML 的基础架构。

到了 1995 年，HTML 2.0 版本推出，它在 HTML 1.0 的基础上增加了表单支持 ，这一特性使得用户可以通过网页提交数据，比如常见的登录表单、注册表单等，大大增强了用户与网页之间的交互性，让网页不再只是静态的信息展示平台。

1997 年，HTML 3.2 版本发布，引入了表格、脚本和样式表支持 ，表格的出现让网页布局更加灵活，开发者可以通过表格来组织页面元素，实现更复杂的页面结构。脚本的支持则为网页带来了动态交互的能力，配合 JavaScript 等脚本语言，网页能够实现更多动态效果，如点击按钮触发某个操作、页面元素的动态变化等。样式表的支持则为网页的样式设计提供了更多可能，虽然还不如后来的 CSS 强大，但已经朝着网页结构和样式分离的方向迈出了重要一步。同时，HTML 3.2 还增加了对框架的支持，允许开发者将网页分割为多个部分，每个部分可以独立加载内容，这在当时对于一些大型网站的页面布局和功能实现提供了很大的便利 。

1999 年，HTML 4.01 版本成为 HTML 发展中的一个重要里程碑 ，它进一步完善了对 CSS（层叠样式表）的支持，使得网页的结构和样式能够更好地分离。开发者可以将网页的样式定义在 CSS 文件中，通过链接或嵌入的方式应用到 HTML 页面上，这样不仅使得代码的维护更加方便，也提高了网页的加载速度和性能。此外，HTML 4.01 还增加了对无障碍访问的支持，通过一些语义化标签和属性，让残障用户能够更方便地使用辅助工具访问网页内容，体现了对用户体验的关注和提升 。

2000 年，XHTML（可扩展超文本标记语言）诞生，它是 HTML 4.0 的扩展版本，基于 XML（可扩展标记语言）的语法 。XHTML 要求开发者严格遵循 XML 的规则，例如标签必须正确闭合、属性值必须用引号包裹等，这使得网页更加规范和可维护，有利于不同系统和设备之间的交互与数据交换。然而，由于其语法过于严格，在实际开发中增加了一定的开发难度和工作量，随着 HTML5 的发展，XHTML 逐渐不再被广泛使用。

（二）HTML5 的革新

2014 年，HTML5 正式发布，它带来了众多令人瞩目的革新，为现代网页开发奠定了坚实的基础，使得开发者可以更轻松地创建复杂的 Web 应用，无需依赖大量第三方插件。

  1. 语义化标签：HTML5 引入了一系列语义化标签，如<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>等 。<header>标签用于表示页面或一个区块的头部区域，通常包含标题、导航、搜索框等内容，例如网站的头部，会包含网站的 logo、网站名称、主导航菜单等。<nav>标签专门定义主导航链接区域，用于包裹主要的导航链接组，无论是顶部导航栏还是侧边栏菜单，都可以使用<nav>标签来清晰地标识，让浏览器和搜索引擎能够更好地理解网页的导航结构 。<main>标签表示页面主要内容区域，每个页面应只有一个 main 标签，且不嵌套在<article>、<aside>、<footer>等内部，明确了页面的核心内容所在。<article>标签表示一篇独立的内容，如博客文章、新闻、评论等，它可以被复用或单独发布，甚至评论中的回复也可以用<article>标签来包裹，体现其独立性和完整性 。<section>标签用于对内容进行分组，通常包含一个标题，它更偏向于结构划分，比如将一篇文章按照不同的主题段落划分为多个<section>。<aside>标签表示与主内容相关但可独立存在的侧边内容，像侧边栏、广告、作者简介等都可以放在<aside>标签内。<footer>标签定义页面或区块的底部信息，常用于版权信息、联系方式、返回顶部链接等，既可以出现在页面底部，也可用于<article>或<section>内部。这些语义化标签的使用，极大地提升了代码的可读性，让开发者能够更直观地理解网页的结构和内容，同时也有助于搜索引擎优化（SEO） ，搜索引擎可以更好地识别页面的关键信息，从而提高网页在搜索结果中的排名。

  2. 多媒体支持：HTML5 引入了<video>和<audio>标签 ，极大地简化了多媒体内容嵌入网页的过程。在 HTML5 之前，要在网页上播放视频或音频，通常需要依赖第三方插件，如 Flash 等，这不仅增加了用户安装插件的麻烦，还可能存在兼容性问题。有了<video>和<audio>标签后，开发者可以直接在 HTML 中嵌入视频和音频文件，例如<video width="320" height="240" controls><source src="movie.mp4" type="video/mp4">您的浏览器不支持video标签。</video>，通过简单的代码，就可以在网页上展示一个视频播放器，用户无需额外安装插件即可播放视频，并且支持多种视频格式。<audio>标签的使用也类似，<audio controls><source src="audio.mp3" type="audio/mpeg">您的浏览器不支持audio标签。</audio>，让音频播放变得更加便捷，这大大提升了用户体验，丰富了网页的内容展示形式 。

  3. Canvas 绘图：<canvas>元素是 HTML5 的一大亮点 ，它提供了一个可以通过 JavaScript 进行绘制的区域。通过<canvas>，开发者可以绘制各种基本图形，如线条、矩形、圆形、多边形等，还能创建复杂的动画效果，甚至开发网页游戏。例如，要在<canvas>上绘制一个红色的矩形，可以使用以下代码：


<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = 'red';
    ctx.fillRect(0, 0, 150, 75);
</script>

这段代码首先获取了<canvas>元素，然后通过getContext('2d')方法获取了 2D 绘图上下文，接着设置填充颜色为红色，最后使用fillRect方法绘制了一个矩形。<canvas>的强大之处在于它的灵活性和可编程性，开发者可以根据实际需求，利用 JavaScript 编写复杂的绘图逻辑，实现各种创意性的图形和动画效果 。

  1. 本地存储：HTML5 引入了localStorage和sessionStorage，为客户端存储数据提供了更便捷的方式 。localStorage提供的是一种持久化的存储机制，数据一旦存入，除非显式地被清除，否则会一直保留在用户的浏览器中，即使浏览器关闭再打开，数据依然存在。它非常适合存储那些需要长期保留的用户偏好设置，比如用户设置的网站主题模式（深色 / 浅色）、字体大小等，或者是一些不敏感的 “记住我” 状态信息。例如，存储用户选择的主题模式：localStorage.setItem('theme', 'dark');，获取时const userTheme = localStorage.getItem('theme'); 。sessionStorage则提供的是会话级别的存储，它的数据仅在当前浏览器标签页或窗口的生命周期内有效，当标签页或窗口关闭时，数据会随之被清除。每一个标签页或窗口都有独立的sessionStorage空间，互不干扰。这使得sessionStorage非常适合存储那些只在当前会话中有效的数据，比如多步骤表单的临时数据，用户在填写一个多步骤表单时，每一步的数据可以临时存储在sessionStorage中，确保在当前会话中数据的完整性，当用户完成提交或关闭页面时，这些临时数据就会自动清理 。

  2. 其他新特性：除了上述特性外，HTML5 还引入了 Web Workers、WebSocket 等特性 。Web Workers 允许在后台线程中运行脚本，而不会影响主线程的运行，这对于处理一些耗时的任务非常有用，比如复杂的数据计算、文件读取等，能够提升网页的性能和响应速度，避免页面在执行这些任务时出现卡顿现象。WebSocket 则实现了浏览器与服务器之间的全双工通信，使得实时通信变得更加高效和便捷，以往 HTTP 协议的请求 - 响应模式在实现实时通信时存在一定的局限性，而 WebSocket 可以让服务器主动向客户端推送消息，无需客户端频繁地发起请求，这在实时聊天、在线游戏、实时数据监控等场景中得到了广泛应用 。

浏览器如何读懂 HTML：渲染原理入门

当你在浏览器地址栏中输入一个网址并按下回车键后，背后发生了一系列复杂而有序的过程，最终将 HTML 等资源转化为你眼前看到的网页 。这个过程主要包括从输入 URL 到页面展示的网络通信阶段，以及浏览器渲染页面的渲染阶段 。

（一）从输入 URL 到页面展示的过程

  1. DNS 解析：你在浏览器地址栏输入的通常是一个域名，如www.example.com，而计算机之间通信需要使用 IP 地址 。DNS（Domain Name System，域名系统）解析就是将域名转换为对应的 IP 地址的过程。浏览器首先会在自己的缓存中查找该域名对应的 IP 地址，如果找到了，就直接使用，这是最快的情况 。若浏览器缓存中没有，它会接着检查操作系统的缓存，在 Windows 系统中，缓存信息存储在C:\Windows\System32\drivers\etc\hosts文件中，开发者有时会在这里进行域名映射，比如将localhost指向127.0.0.1 。如果操作系统缓存也未命中，路由器的缓存会被查询，路由器也保存了一些近期访问过的域名和 IP 地址映射信息 。若还是没有找到，浏览器就会向本地 DNS 服务器发起请求，本地 DNS 服务器一般由你的网络服务提供商（ISP）提供，如电信、联通等 。本地 DNS 服务器会按照根域名服务器、顶级域名服务器、权威域名服务器的层级顺序进行递归查询 ，最终获取到该域名对应的 IP 地址，并将其返回给浏览器。例如，当你访问www.baidu.com时，本地 DNS 服务器先向根域名服务器询问.com域名服务器的地址，再向.com顶级域名服务器询问baidu.com权威域名服务器的地址，最后从baidu.com权威域名服务器获取到www.baidu.com的 IP 地址 。

  2. 建立连接：获取到 IP 地址后，浏览器会与服务器建立 TCP（Transmission Control Protocol，传输控制协议）连接 。TCP 连接通过三次握手来建立可靠的通信通道 。首先，浏览器向服务器发送一个 SYN（同步）包，告诉服务器它想建立连接，并携带一个初始序列号（比如x） 。服务器接收到 SYN 包后，会返回一个 SYN-ACK（同步 - 确认）包，其中包含服务器的初始序列号（比如y），同时确认收到了浏览器的 SYN 包，即对序列号x进行确认，回复x + 1 。最后，浏览器收到 SYN-ACK 包后，再发送一个 ACK（确认）包，对服务器的序列号y进行确认，回复y + 1，至此，TCP 连接建立成功 ，双方可以进行数据传输 。

  3. 发送请求与接收响应：连接建立好后，浏览器会向服务器发送 HTTP（HyperText Transfer Protocol，超文本传输协议）请求 。请求报文包含请求方法（常见的有 GET、POST 等）、请求路径（如/index.html）、协议版本（如 HTTP/1.1）、请求头（包含 User-Agent、Accept、Cookie 等信息，User-Agent 用于标识浏览器类型和版本，Accept 用于告诉服务器浏览器支持接收的内容类型，Cookie 用于传递用户的会话信息等） 。例如，一个简单的 GET 请求可能是这样：


GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Cookie: username=John; session_id=123456

服务器接收到请求后，会根据请求内容进行处理，如读取相关的 HTML 文件、查询数据库获取数据等 。处理完成后，服务器会返回 HTTP 响应 。响应报文包含状态码（如 200 表示成功，404 表示未找到页面，500 表示服务器内部错误等）、响应头（包含 Content-Type、Cache-Control 等信息，Content-Type 用于指定响应内容的类型，如text/html表示 HTML 页面，Cache-Control 用于控制缓存策略）和响应体（即请求的 HTML 内容） 。例如，一个成功的响应可能是这样：


HTTP/1.1 200 OK
Content-Type: text/html
Cache-Control: max-age=3600
Content-Length: 10240

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个示例页面。</p>
</body>
</html>

浏览器接收到响应后，就开始对其中的 HTML 内容进行解析和渲染 。

（二）浏览器渲染流程

  1. 解析 HTML 生成 DOM 树：浏览器拿到服务器返回的 HTML 内容后，会通过词法分析和语法分析来构建 DOM（Document Object Model，文档对象模型）树 。词法分析阶段，浏览器将 HTML 字符串拆分成一个个最小的语法单元，即 Token，比如<div>（开始标签 Token）、</div>（结束标签 Token）、文本内容（文本 Token）、属性键值对（属性 Token）等 。例如，对于<div class="box">Hello</div>这段 HTML 代码，会被拆分为START_TAG(div)、ATTRIBUTE(class, box)、TEXT(Hello)、END_TAG(div)这些 Token 。语法分析阶段，浏览器根据 Token 序列的嵌套关系，构建 DOM 树节点，遵循 “栈式结构” 处理嵌套 。遇到开始标签时，创建一个节点并将其压入栈中，遇到结束标签时，将栈顶节点弹出 。文本内容则作为文本节点挂载到当前节点下 。最终形成的 DOM 树是一个层次化的节点树，反映了 HTML 文档的结构 。例如，对于以下 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>我的页面</title>
</head>
<body>
    <h1>标题</h1>
    <p>这是一段文字。</p>
</body>
</html>

其对应的 DOM 树结构大致如下：


html
├── head
│   └── title -> "我的页面"
└── body
    ├── h1 -> "标题"
    └── p -> "这是一段文字。"

DOM 树的作用非常重要，它为 JavaScript 操作 HTML 元素提供了接口，通过 DOM API，我们可以方便地获取、修改、添加或删除 HTML 元素 。比如使用document.getElementById('id')可以获取指定id的元素，使用element.innerHTML可以修改元素的内容等 。 2. 解析 CSS 生成 CSSOM 树：在解析 HTML 的同时，浏览器也会对 CSS 样式进行解析，生成 CSSOM（CSS Object Model，CSS 对象模型）树 。首先，浏览器会收集页面中所有的 CSS 规则，包括内联样式（通过style属性定义在 HTML 元素上的样式）、<style>标签内的样式以及外部 CSS 文件中的样式 。然后进行词法分析，将 CSS 字符串拆分为 Token，如selector（选择器 Token）、property（属性名 Token）、value（属性值 Token）、{}（分隔符 Token）等 。例如，对于.box { color: red; font-size: 16px; }这段 CSS 代码，会被拆分为SELECTOR(.box)、PROPERTY(color)、VALUE(red)、PROPERTY(font-size)、VALUE(16px) 。最后，通过语法分析将 Token 组合为 “选择器 - 样式属性” 的键值对，构建 CSSOM 树 。CSSOM 树的根节点是html，子节点继承父节点的样式 。例如，对于以下 CSS 代码：


body {
    font-family: Arial, sans-serif;
    background-color: lightblue;
}
h1 {
    color: red;
}

其对应的 CSSOM 树结构简化表示如下：


CSSOM
-- body
    -- font-family: Arial, sans-serif
    -- background-color: lightblue
-- h1
    -- color: red

CSSOM 树用于控制页面元素的样式，浏览器会根据 CSSOM 树中的样式规则来渲染 DOM 树中的元素 ，确定每个元素的颜色、字体、大小、布局等样式属性 。 3. 构建渲染树：当 DOM 树和 CSSOM 树都构建完成后，浏览器会将它们合并成渲染树 。渲染树只包含需要显示的节点，像设置了display: none的元素不会出现在渲染树中 ，因为它们不需要显示在页面上 。而visibility: hidden的节点会进入渲染树，虽然它们不可见，但仍然占据空间 。浏览器遍历 DOM 树的所有节点，判断节点是否可见 。对于可见节点，在 CSSOM 树中查找匹配的样式规则，从具体到通用，依次考虑内联样式、ID 选择器、类选择器、标签选择器、通配符等，计算出元素的最终样式 。例如，对于一个<div class="box" id="myDiv" style="color: green;">内容</div>元素，会先应用内联样式color: green;，如果还有其他匹配的 CSS 规则，会根据优先级进行合并和覆盖 。最终生成的渲染树节点包含了元素的几何信息（如位置、大小）以及样式信息（如颜色、字体） 。 4. 布局（Layout）：布局阶段，也称为回流（Reflow），浏览器会根据渲染树来计算每个元素在屏幕上的精确位置和大小 。这是一个计算密集型操作，涉及盒模型、浮动、定位等复杂规则 。浏览器从根元素开始，递归遍历渲染树中的每个节点 。对于每个节点，根据其包含的内容、应用的样式以及父元素的布局，计算出自身的宽度、高度、边距、边框等盒模型属性，从而确定在页面中的位置 。例如，对于一个设置了width: 50%; margin: 10px;的<div>元素，浏览器会根据其父元素的宽度计算出该<div>的实际宽度，再加上外边距，确定其在页面中的水平位置 。如果页面结构或元素样式发生改变，如修改元素的宽度、高度、边距等，或者添加、删除元素，都会触发重新布局 ，浏览器需要重新计算相关元素的位置和大小 。 5. 绘制（Painting）：布局完成后，浏览器进入绘制阶段 。在这个阶段，浏览器将渲染树的各个元素绘制到屏幕上，展示出页面的最终效果 。绘制过程是按顺序进行的，需要考虑元素的遮挡关系和透明度 。浏览器将每个元素拆分成多个图层，每个图层包含了该元素的不同绘制信息，如背景色、文字、边框、阴影等 。对于每个图层，浏览器会生成绘图指令，然后调用图形库将这些指令转化为实际的像素点，填充到屏幕上 。例如，先绘制背景图层，再绘制文字图层，最后绘制边框和阴影图层等 。如果只是元素的样式发生改变，如修改颜色、背景等，而不影响布局，会触发重绘（Repaint） ，浏览器只需要重新绘制受影响的元素，而不需要重新计算布局 。但如果布局发生改变，如修改元素的宽度、高度等，会触发回流和重绘，因为重新布局后，元素的绘制信息也需要更新 。

总结

HTML 作为超文本标记语言，是前端开发的基石，通过一系列标签搭建起网页的基本结构，就如同为建筑物构建骨架一般，定义了网页中各个部分的角色和层次，从页面的头部、主体内容到侧边栏、底部，都离不开 HTML 的精心布局。

回顾 HTML 的发展历程，从 1993 年诞生时的简单文本展示，到如今 HTML5 时代丰富的语义化标签、强大的多媒体支持、便捷的本地存储以及众多其他新特性，它始终在不断演进，以满足日益增长的网页开发需求，推动着互联网应用的蓬勃发展。

而浏览器渲染 HTML 的过程，从输入 URL 后的 DNS 解析、建立连接、发送请求与接收响应，到解析 HTML 生成 DOM 树、解析 CSS 生成 CSSOM 树，再到构建渲染树、进行布局和绘制，每一个环节都紧密相扣，共同将 HTML 等资源转化为我们眼前丰富多彩的网页。

对于前端开发者来说，深入理解 HTML 的定义、作用、发展以及浏览器渲染原理，是掌握前端开发技术的关键。它不仅能帮助我们编写更高效、更易维护的代码，还能让我们在开发过程中更好地优化网页性能，提升用户体验。希望本文能为你打开前端开发的大门，激发你对 HTML 及前端技术的探索热情，让我们一起在前端的世界里不断学习、不断进步。

avatar
文章
阅读
粉丝