HTML（HyperText Markup Language，超文本标记语言）是构建 Web 页面的核心标记语言，
用于描述网页的结构与内容，是万维网（WWW）三大基础技术之一（HTML + CSS + JavaScript）。
HTML 不是编程语言，而是一种 标记语言（Markup Language）。
它通过一系列 标签（Tags） 来告诉浏览器如何展示内容：
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>这是一段普通文本。</p>
</body>
</html>
<!DOCTYPE html>：声明文档类型（HTML5）<html>：根元素<head>：页面元信息（标题、引用 CSS、SEO 等）<body>：页面可见内容| 版本 | 发布时间 | 关键变化 |
|---|---|---|
| HTML 1.0 | 1993 | 最初版本，极简 |
| HTML 2.0 | 1995 | 第一个正式标准 |
| HTML 3.2 | 1997 | 增加表格、脚本支持 |
| HTML 4.01 | 1999 | 样式与结构分离 |
| XHTML | 2000 | 严格 XML 语法 |
| HTML5 | 2014（正式） | 多媒体、语义化、API |
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>
<!-- 页面内容写在这里 -->
</body>
</html>
| 标签 | 用途 |
|---|---|
<h1> ~ <h6> |
标题（语义层级） |
<p> |
段落 |
<a href=""> |
超链接 |
<img src="" alt=""> |
图片 |
<div> |
块级容器 |
<span> |
行内容器 |
<ul> / <ol> / <li> |
列表 |
<table> / <tr> / <td> |
表格 |
<form> / <input> |
表单 |
<button> |
按钮 |
<header>头部</header>
<nav>导航栏</nav>
<main>主要内容</main>
<section>内容区块</section>
<article>独立文章</article>
<aside>侧边栏</aside>
<footer>页脚</footer>
<!-- 音频 -->
<audio controls>
<source src="music.mp3" type="audio/mpeg">
</audio>
<!-- 视频 -->
<video controls width="640">
<source src="video.mp4" type="video/mp4">
</video>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const ctx = document.getElementById('myCanvas').getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 150, 100);
</script>
// LocalStorage
localStorage.setItem('name', 'GuoyuanCode');
localStorage.getItem('name');
// SessionStorage
sessionStorage.setItem('token', 'abc123');
<form action="/submit" method="POST">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>
<label for="password">密码：</label>
<input type="password" id="password" name="password">
<button type="submit">提交</button>
</form>
| 类型 | 说明 |
|---|---|
text |
单行文本 |
email |
邮箱（自带校验） |
password |
密码（掩码显示） |
number |
数字 |
date |
日期选择器 |
file |
文件上传 |
checkbox |
复选框 |
radio |
单选按钮 |
┌───────────────────────────────┐
│ HTML（结构） │ ← 骨架
│ ┌─────────────────────┐ │
│ │ CSS（样式） │ │ ← 皮肤
│ └─────────────────────┘ │
│ ┌─────────────────────┐ │
│ │ JavaScript（行为） │ │ ← 肌肉
│ └─────────────────────┘ │
└───────────────────────────────┘
✅ 使用语义化标签（SEO 友好）
✅ 始终声明 <!DOCTYPE html>
✅ 设置 <meta charset="UTF-8">
✅ 图片添加 alt 属性（无障碍访问）
✅ 表单使用 label 关联 input
✅ 结构、样式、行为分离（HTML / CSS / JS 各司其职）
Q：HTML 和 XHTML 有什么区别？
A：XHTML 语法更严格，标签必须闭合、属性必须引号包裹、小写标签名。
Q：<script> 放在 <head> 和 <body> 底部有什么区别？
A：放在 <head> 会阻塞页面渲染；放在 <body> 底部可避免阻塞，提升加载体验。
Q：什么是语义化 HTML？
A：使用 <header>、<nav>、<main> 等标签表达内容含义，而非仅用 <div>，有利于 SEO 和无障碍。
果园编程工作室 · 用心每一作，发展每一天
© 2021–2026 果园编程®