📄 HTML

概述：HTML（HyperText Markup Language，超文本标记语言）是构建网页内容的基石，是 Web 开发最基础、核心的标记语言。HTML 通过标签定义网页结构和内容，与 CSS 样式层和 JavaScript 行为层共同构成现代 Web 前端三大支柱。

概述

HTML 属于 前端与客户端语言 分类。HTML5 是最新标准，引入了语义化标签、Canvas、Web Storage、WebSocket 等现代特性。

语言特点

标记语言：通过标签描述文档结构，不是编程语言
语义化：HTML5 语义标签增强可访问性和 SEO
跨平台：任何浏览器都能解析 HTML 文档
超文本：支持链接、多媒体嵌入等超文本特性
标准演进：WHATWG Living Standard 持续更新

Hello World

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

基础语法

文档结构

html

<!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>                       <!-- 页面内容 -->
    <!-- 页面可见内容写在这里 -->
</body>
</html>

常用标签

html

<!-- 标题 -->
<h1>一级标题</h1>
<h2>二级标题</h2>

<!-- 段落与文本 -->
<p>这是一个段落</p>
<strong>加粗</strong>
<em>斜体</em>

<!-- 链接 -->
<a href="https://example.com" target="_blank">链接文字</a>

<!-- 图片 -->
<img src="photo.jpg" alt="图片描述" width="300">

<!-- 列表 -->
<ul>
    <li>无序列表项</li>
</ul>
<ol>
    <li>有序列表项</li>
</ol>

<!-- 表格 -->
<table>
    <thead>
        <tr><th>姓名</th><th>年龄</th></tr>
    </thead>
    <tbody>
        <tr><td>张三</td><td>25</td></tr>
    </tbody>
</table>

语义化标签（HTML5）

html

<header>页面头部</header>
<nav>导航栏</nav>
<main>
    <article>独立内容</article>
    <aside>侧边栏</aside>
</main>
<section>内容分区</section>
<footer>页面底部</footer>

表单

html

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

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

    <select name="city">
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
    </select>

    <textarea name="message" rows="4"></textarea>

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

多媒体

html

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

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

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

应用领域

网页结构：定义网页的内容和语义结构
Web 应用：单页应用和多页应用的基础骨架
邮件模板：HTML 格式的邮件内容
渐进式 Web 应用：PWA 的基础结构
移动端页面：H5 活动页和内嵌页面
文档展示：在线文档和帮助系统

开发环境搭建

浏览器：Chrome / Firefox（内置开发者工具）
编辑器：VS Code + HTML Snippets 扩展
调试：F12 → Elements 面板
在线练习：CodePen、JSFiddle

学习路线

入门阶段：文档结构 → 常用标签 → 属性 → 表单
进阶阶段：语义化 → 多媒体 → Canvas → Web Storage
实战阶段：响应式页面 → 无障碍访问 → SEO 优化
高级阶段：Web Components → 性能优化 → PWA 开发

返回首页 | 查看所有语言

📄 HTML ​

概述 ​

语言特点 ​

Hello World ​

基础语法 ​

文档结构 ​

常用标签 ​

语义化标签（HTML5） ​

表单 ​

多媒体 ​

应用领域 ​

开发环境搭建 ​

学习路线 ​

📄 HTML

概述

语言特点

Hello World

基础语法

文档结构

常用标签

语义化标签（HTML5）

表单

多媒体

应用领域

开发环境搭建

学习路线