HTML5 全面知识点总结
一、HTML 基础概念
-
HTML：超文本标记语言，用于创建网页和 Web 应用的结构。
-
超文本：可以包含文字、图片、音频、视频、链接等多种媒体。
-
标记语言：通过标签标记网页的各个部分。
二、HTML5 的新特性（区别于 HTML4）
-
新的结构标签：提升语义化
-
<header>：页眉 -
<nav>：导航 -
<main>：主要内容 -
<article>：文章 -
<section>：区域 -
<aside>：侧边栏 -
<footer>：页脚
-
-
新的表单控件类型：增强表单体验
<input type="email" /> <input type="url" /> <input type="number" /> <input type="range" /> <input type="date" /> <input type="color" /> -
新的表单属性：
-
required：必须填写 -
autofocus：页面加载时自动聚焦 -
placeholder：占位文本 -
pattern：正则验证 -
autocomplete：是否自动补全
-
-
多媒体标签：
<audio controls><source src="sound.mp3" type="audio/mpeg"> </audio><video controls width="400"><source src="movie.mp4" type="video/mp4"> </video> -
本地存储：
-
localStorage：永久存储（关闭浏览器也不会清除） -
sessionStorage：会话级存储（关闭浏览器清除）
-
-
Canvas 画布绘图：
<canvas id="myCanvas" width="200" height="100"></canvas>const c = document.getElementById("myCanvas"); const ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 150, 75); -
SVG 图形支持：
<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg>
三、HTML 标签分类
1. 元信息标签
| 标签 | 说明 |
|---|---|
<meta> | 元数据（关键词、作者、编码） |
<title> | 页面标题 |
<link> | 外部样式表 |
<style> | 内部 CSS |
<script> | JavaScript 脚本 |
2. 文本内容标签
| 标签 | 说明 |
|---|---|
<p> | 段落 |
<h1>~<h6> | 标题 |
<blockquote> | 引用 |
<abbr> | 缩写 |
<code> | 代码 |
<mark> | 高亮 |
<strong> / <em> | 加重语气 |
3. 编辑类标签
| 标签 | 功能 |
|---|---|
<b> / <i> / <u> | 粗体 / 斜体 / 下划线 |
<sup> / <sub> | 上标 / 下标 |
<del> / <ins> | 删除 / 插入 |
四、表单相关
常见控件
| 类型 | 示例 |
|---|---|
| 文本 | <input type="text"> |
| 密码 | <input type="password"> |
| 单选 | <input type="radio" name="x"> |
| 复选 | <input type="checkbox"> |
| 文本域 | <textarea> |
| 下拉 | <select> |
| 提交 | <button type="submit">提交</button> |
表单属性
-
action：提交地址 -
method：提交方式（GET/POST） -
enctype：编码类型（上传文件时用multipart/form-data）
五、语义化标签的优势
-
提升 SEO 友好度
-
结构清晰、可读性强
-
更便于无障碍访问（如读屏软件）
六、布局方式简介
| 方式 | 说明 |
|---|---|
| 表格布局 | 使用 <table> 实现（已过时） |
| 浮动布局 | float+clear |
| 定位布局 | position: absolute/fixed |
| Flex布局 | 弹性盒子，现代主流方式 |
| Grid布局 | 网格布局，更适用于二维结构 |
七、HTML 与 JavaScript、CSS 的关系
-
HTML 负责 结构
-
CSS 负责 样式
-
JavaScript 负责 行为与交互
三者共同组成 Web 前端三大核心技术。
八、响应式设计基础
-
使用
<meta name="viewport" content="width=device-width, initial-scale=1.0">控制移动端缩放 -
使用媒体查询（Media Query）
-
使用百分比、vw/vh 等相对单位替代 px
-
尽量使用弹性布局（Flex 或 Grid）
九、HTML5 API 简介（JavaScript）
| API | 功能 |
|---|---|
| Geolocation | 获取地理位置 |
| Web Storage | 本地数据存储 |
| Drag and Drop | 拖拽功能 |
| WebSocket | 实时通信 |
| Web Worker | 多线程计算 |
| File API | 文件读取上传 |
十、开发与调试工具推荐
-
浏览器开发者工具（F12）
-
在线编辑器如 CodePen、JSFiddle
-
VS Code + Live Server 插件
-
HTML 校验工具：W3C Validator