HTML5 全面知识点总结

一、HTML 基础概念

• HTML：超文本标记语言，用于创建网页和 Web 应用的结构。

• 超文本：可以包含文字、图片、音频、视频、链接等多种媒体。

• 标记语言：通过标签标记网页的各个部分。

---

二、HTML5 的新特性（区别于 HTML4）

1. 新的结构标签：提升语义化

   • <header>：页眉

   • <nav>：导航

   • <main>：主要内容

   • <article>：文章

   • <section>：区域

   • <aside>：侧边栏

   • <footer>：页脚

2. 新的表单控件类型：增强表单体验

   <input type="email" />
   <input type="url" />
   <input type="number" />
   <input type="range" />
   <input type="date" />
   <input type="color" />
   

3. 新的表单属性：

   • required：必须填写

   • autofocus：页面加载时自动聚焦

   • placeholder：占位文本

   • pattern：正则验证

   • autocomplete：是否自动补全

4. 多媒体标签：

   <audio controls><source src="sound.mp3" type="audio/mpeg">
   </audio><video controls width="400"><source src="movie.mp4" type="video/mp4">
   </video>
   

5. 本地存储：

   • localStorage：永久存储（关闭浏览器也不会清除）

   • sessionStorage：会话级存储（关闭浏览器清除）

6. 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);
   

7. 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