下面给你整理一篇 HTML 总结大全,涵盖基础语法、标签分类、表单、语义化、常见属性以及现代 HTML5 特性,非常适合前端入门复习、笔记整理或面试备考。
HTML 总结
一、HTML 基础概念
- HTML(HyperText Markup Language)是 超文本标记语言
- 作用:用于描述网页结构和内容
- 浏览器根据 HTML 渲染页面
- HTML 是 标记语言,而非编程语言
HTML 文档结构示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML 示例</title>
</head>
<body>
<h1>标题</h1>
<p>段落内容</p>
</body>
</html>
二、常用 HTML 标签分类
1️⃣ 文本标签
| 标签 | 作用 |
|---|
<h1> ~ <h6> | 标题 |
<p> | 段落 |
<span> | 行内文本容器 |
<strong> / <b> | 加粗,语义不同 |
<em> / <i> | 斜体,语义不同 |
<br> | 换行 |
<hr> | 水平线 |
2️⃣ 列表标签
| 标签 | 说明 |
|---|
<ul> | 无序列表 |
<ol> | 有序列表 |
<li> | 列表项 |
<dl> / <dt> / <dd> | 定义列表(描述列表) |
3️⃣ 超链接与多媒体
| 标签 | 说明 |
|---|
<a> | 超链接,href 指定目标 |
<img> | 图片,src 属性指定图片路径 |
<audio> | 音频播放 |
<video> | 视频播放 |
<iframe> | 内嵌网页 |
4️⃣ 表格标签
| 标签 | 说明 |
|---|
<table> | 表格容器 |
<tr> | 表格行 |
<td> | 表格单元格 |
<th> | 表头单元格 |
<caption> | 表格标题 |
5️⃣ 表单标签
| 标签 | 说明 |
|---|
<form> | 表单容器 |
<input> | 输入控件(text, password, radio, checkbox, submit…) |
<textarea> | 多行文本输入 |
<select> / <option> | 下拉选择 |
<button> | 按钮 |
<label> | 标签关联输入控件 |
三、HTML 属性总结
- 全局属性(可用于任意标签):
id:唯一标识
class:样式类
style:内联样式
title:鼠标悬停提示
hidden:隐藏元素
data-*:自定义数据属性
- 常用事件属性:
onclick、onmouseover、onchange、oninput 等
- 表单相关属性:
name:表单控件名
value:控件值
placeholder:占位提示
checked:选中状态(radio/checkbox)
disabled:禁用
四、HTML5 新特性标签
1️⃣ 语义化标签
| 标签 | 说明 |
|---|
<header> | 页眉 |
<footer> | 页脚 |
<nav> | 导航 |
<section> | 区块 |
<article> | 独立文章 |
<aside> | 侧边栏 |
<main> | 主要内容 |
2️⃣ 表单新控件
<input type="email">、<input type="url">、<input type="date">
<datalist>:下拉建议列表
<output>:表单计算结果
3️⃣ 多媒体
<audio>、<video>、<source>
<canvas>:绘图、游戏、可视化
4️⃣ 本地存储
localStorage、sessionStorage 配合 JS 使用
五、HTML 语义化原则
- 用 语义化标签 表示页面结构,增强可读性
- 有利于 SEO 和 辅助设备访问(屏幕阅读器)
- 例子:
<header>网站头部</header> <nav>导航</nav> <main> <article>文章内容</article> <aside>侧边栏</aside> </main> <footer>页脚信息</footer>
六、常见注意事项
- 标签必须正确嵌套
<p><a>text</a></p> ✅
<a><p>text</p></a> ❌
- 图片必须有 alt 属性(无障碍设计)
- 避免滥用
<div> 与 <span>,尽量使用语义化标签
- HTML 与 CSS / JS 分离
七、总结
- HTML 是 网页结构核心,CSS 负责样式,JS 负责行为
- 掌握 基础标签 + 属性 + HTML5 语义化标签
- 对应现代开发:
- 响应式布局 → HTML + CSS
- 交互行为 → HTML + JS / Ajax
- SEO & 可访问性 → HTML 语义化
如果你需要,我可以帮你整理一份 “HTML 标签速查表 + 语义化图示 + 属性大全 PDF”,便于 收藏和面试快速复习。
你希望我整理吗?