主题
💡HTML 理论知识点详解
更新: 9/18/2025字数: 0 字 时长: 0 分钟
HTML（HyperText Markup Language，超文本标记语言）是构建网页内容的基础语言。它通过一系列“标签”来描述网页结构，是前端三大核心技术之一（HTML、CSS、JavaScript）中的第一步。
一、HTML 是什么？
- HTML 是一种标记语言（markup language），不是编程语言；
- 用来描述网页的结构和内容；
- 浏览器读取 HTML 文档并将其渲染成用户可见的网页。
二、HTML 基本结构
一个标准的 HTML 页面结构如下：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>我的第一个网页</title>
</head>
<body>
<h1>Hello, HTML!</h1>
<p>欢迎学习 HTML。</p>
</body>
</html>各部分说明：
<!DOCTYPE html>：声明当前文档是 HTML5 规范。<html>：网页的根元素。<head>：文档头部，用于放置元信息（meta）、标题、样式表等。<meta charset="UTF-8">：声明字符编码为 UTF-8，支持中文。<title>：浏览器标签上的标题。<body>：网页主体内容，展示给用户的内容。
三、常用标签分类
1. 文本标签
| 标签 | 作用 |
|---|---|
<h1>-<h6> | 标题标签（等级从大到小） |
<p> | 段落 |
<br> | 换行（单标签） |
<hr> | 水平分隔线 |
<strong> | 强调（加粗） |
<em> | 语义强调（斜体） |
<span> | 行内容器 |
<div> | 块级容器 |
2. 超链接和图像
| 标签 | 说明 |
|---|---|
<a href="URL"> | 超链接，跳转到其他页面或网站 |
<img src="路径"> | 插入图片（必须使用 src 属性） |
3. 列表标签
| 标签 | 类型 |
|---|---|
<ul> | 无序列表 |
<ol> | 有序列表 |
<li> | 列表项 |
<dl> | 定义列表 |
<dt>/<dd> | 术语与定义 |
4. 表格标签
| 标签 | 含义 |
|---|---|
<table> | 表格 |
<tr> | 表格行 |
<td> | 单元格 |
<th> | 表头单元格 |
<thead> / <tbody> / <tfoot> | 表格结构化部分 |
5. 表单标签
| 标签 | 功能 |
|---|---|
<form> | 表单容器 |
<input> | 输入框（文本、密码等） |
<textarea> | 多行文本输入 |
<select> | 下拉菜单 |
<button> | 按钮 |
<label> | 表单标签，关联输入元素 |
四、HTML 属性
HTML 标签通常带有属性，用来设置标签的行为或外观。
常见属性：
id：唯一标识符；class：类名，可用于 CSS/JS；src：资源路径（如图片）；href：链接地址；alt：图片的替代文本；title：鼠标悬停提示；disabled、readonly：控制输入行为；
示例：
html
<img src="logo.png" alt="网站LOGO" width="100" /> <a href="https://example.com" target="_blank">访问官网</a>五、HTML 语义化
HTML5 强调**语义化（semantic）**标签，它们能更好地表达网页结构，也利于 SEO 和辅助技术（如屏幕阅读器）。
常见语义化标签：
| 标签 | 作用 |
|---|---|
<header> | 页眉 |
<footer> | 页脚 |
<nav> | 导航栏 |
<article> | 独立的内容块（如一篇文章） |
<section> | 页面区域或小节 |
<aside> | 侧边栏内容 |
<main> | 页面主要内容 |
六、HTML 与 CSS、JavaScript 的关系
HTML：结构层 CSS：样式层（美化页面） JavaScript：行为层（交互与动态功能）
这三者构成了前端开发的三大基石。
七、HTML5 新特性简述
- 新语义化标签（见上文）；
- 支持本地音频/视频：
<audio>、<video>； - 表单控件增强：
<input type="date">等； - 本地存储：
localStorage、sessionStorage； - 离线缓存和地理定位；
- Canvas 和 SVG 图形支持。