HTML5 全面知识点总结

news2025/6/2 6:12:20

一、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	文件读取上传