Skip to content

html.md

Latest commit

 

History

History
240 lines (184 loc) · 5.8 KB

html.md

File metadata and controls

240 lines (184 loc) · 5.8 KB
Raw
title HTML
date 2025-07-04
tags
前端
category 技术
summary 回顾 HTML 从 1.0 到 HTML5 的发展历程，并介绍文档结构、文本、列表、链接、图片、表格、表单、语义化等常用标签的使用方法。

HTML

HTML（HyperText Markup Language，超文本标记语言）是构建 Web 页面的基石。本文将带你回顾 HTML 的发展历程，并系统梳理常用标签的使用方法。

一、HTML 发展历程

1. 早期阶段

版本 年份 主要特点
HTML 1.0 1993 仅有基础文本标签，无样式支持
HTML 2.0 1995 引入表单（form），首个标准规范
HTML 3.2 1997 增加表格、图片对齐、字体控制
HTML 4.01 1999 引入 CSS 分离样式，支持脚本

2. XHTML 时代（2000）

XHTML 1.0 基于 XML 重新定义 HTML，要求更严格的语法：

  • 标签必须闭合：<br /> 而非 <br>
  • 属性必须有值：<input disabled="disabled" />
  • 标签必须小写

XHTML 过于严格，开发者接受度不高，最终被 HTML5 取代。

3. HTML5（2014 至今）

HTML5 是一次重大升级，带来了：

  • 语义化标签：<header>、<nav>、<article>、<section>、<footer>
  • 多媒体原生支持：<video>、<audio>、<canvas>
  • 表单增强：date、email、range 等新 input 类型
  • Web API：地理定位、本地存储、WebSocket、Web Workers
  • 更宽松的语法：不再基于 XML，容错性更强

HTML5 至今仍是 Web 的标准，由 WHATWG 持续维护，采用"Living Standard"（活标准）模式演进。

二、HTML 文档基本结构

一个标准的 HTML5 文档结构如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
</head>
<body>
    <!-- 页面内容写在这里 -->
    <h1>Hello, World!</h1>
</body>
</html>
  • <!DOCTYPE html> — 声明文档类型为 HTML5
  • <html lang="zh-CN"> — 根元素，lang 属性指定语言
  • <head> — 元信息区域（编码、标题、引入资源）
  • <body> — 页面可见内容区域

三、常用标签

1. 文本标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

<p>这是一个段落。</p>

<strong>加粗（语义强调）</strong>
<em>斜体（语义强调）</em>
<mark>高亮文本</mark>
<small>小号文本</small>

<blockquote>这是一段引用文字</blockquote>

<code>console.log('行内代码')</code>

2. 链接与图片

<!-- 超链接 -->
<a href="https://example.com" target="_blank">外部链接</a>
<a href="#section-id">页内锚点</a>

<!-- 图片 -->
<img src="photo.jpg" alt="描述文字" width="400" />
  • target="_blank" — 在新标签页打开
  • alt 属性对 SEO 和无障碍访问非常重要

3. 列表

<!-- 无序列表 -->
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

<!-- 有序列表 -->
<ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

4. 表格

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>城市</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>上海</td>
        </tr>
    </tbody>
</table>

5. 表单

<form action="/submit" method="POST">
    <label for="name">姓名：</label>
    <input type="text" id="name" placeholder="请输入姓名" />

    <label for="email">邮箱：</label>
    <input type="email" id="email" required />

    <label for="password">密码：</label>
    <input type="password" id="password" minlength="6" />

    <label>
        <input type="checkbox" /> 同意用户协议
    </label>

    <button type="submit">提交</button>
</form>

HTML5 新增的 input 类型：

<input type="date" />       <!-- 日期选择 -->
<input type="number" />     <!-- 数字输入 -->
<input type="range" />      <!-- 滑块 -->
<input type="color" />      <!-- 颜色选择 -->
<input type="search" />     <!-- 搜索框 -->

6. 语义化标签（HTML5）

<header>
    <nav>
        <a href="/">首页</a>
        <a href="/about">关于</a>
    </nav>
</header>

<main>
    <article>
        <h2>文章标题</h2>
        <p>文章内容...</p>
    </article>

    <aside>
        <h3>侧边栏</h3>
    </aside>
</main>

<footer>
    <p>© 2026 My Blog</p>
</footer>

语义化标签的优势：

  • 可读性 — 代码结构更清晰
  • SEO — 搜索引擎更好地理解页面结构
  • 无障碍 — 屏幕阅读器能更准确地导航

7. 多媒体（HTML5）

<!-- 视频 -->
<video src="movie.mp4" controls width="640">
    您的浏览器不支持 video 标签
</video>

<!-- 音频 -->
<audio src="music.mp3" controls>
    您的浏览器不支持 audio 标签
</audio>

<!-- 画布 -->
<canvas id="myCanvas" width="400" height="300"></canvas>

四、最佳实践

  1. 始终声明 DOCTYPE — 确保浏览器以标准模式渲染
  2. 使用语义化标签 — 避免全篇 <div>
  3. alt 属性不可省略 — 图片必须提供替代文本
  4. 正确嵌套 — 标签应正确闭合和嵌套
  5. 结构与样式分离 — 样式交给 CSS，HTML 只负责结构

总结

HTML 从 1993 年诞生至今，经历了从简单标记语言到现代 Web 平台的演变。HTML5 带来了语义化、多媒体、丰富的 API，使浏览器成为一个强大的应用平台。掌握 HTML 是前端开发的第一步，也是最基础的一步。