文章目录
HTML5基础入门
什么是HTML5
HTML5是构建网页内容的骨架标准。它不仅仅是HTML的简单升级，而是一套完整的Web应用技术栈。其核心优势在于：
- 语义化：通过明确的标签告诉浏览器"这是什么"（如页眉、导航），而非仅仅"长什么样"。
- 原生多媒体 ：无需Flash插件，直接通过
<audio>和<video>标签播放音视频。 - 本地存储 ：提供
localStorage和sessionStorage，让网页能记住用户数据。 - 绘图能力 ：
<canvas>标签允许通过JavaScript绘制图形和动画。
HTML5文档的基本骨架
每一个标准的HTML5页面都必须以以下结构开头：
html
<!DOCTYPE html>
<!-- 声明语言为中文，便于搜索引擎和浏览器识别 -->
<html lang="zh-CN">
<head>
<!-- 字符编码声明，必须放在<head>的最顶部 -->
<meta charset="UTF-8">
<!-- 兼容性视口设置，移动端开发必备 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
</head>
<body>
<!-- 这里是页面的可见内容 -->
</body>
</html>核心语法规范
- 标签 ：由尖括号包围的关键字，如
<div>。 - 属性 ：为元素提供额外信息，如
<img src="图片地址" alt="替代文本">。 - 注释 ：
<!-- 这是一段注释，不会在浏览器中显示 -->。
语义化标签详解
HTML5引入了大量语义化标签，目的是让网页结构更清晰，利于SEO和无障碍访问。
页面结构标签
| 标签 | 描述 | 使用场景 |
|---|---|---|
<header> |
页眉 | 通常包含网站标志、主导航或介绍性内容。 |
<nav> |
导航 | 包含主要的导航链接（注意：不是页面中所有链接都要放在这里）。 |
<main> |
主体 | 包含页面独占的核心内容（一个页面只能有一个<main>）。 |
<article> |
独立文章 | 可独立于页面其余部分被分发或重用的内容（如博客文章、新闻报道）。 |
<section> |
章节 | 用于定义文档中的节或段（通常包含标题）。 |
<aside> |
侧边栏 | 包含与内容相关但可分离的信息（如广告、相关文章链接）。 |
<footer> |
页脚 | 包含版权信息、联系方式或相关文档链接。 |
语义化结构示例
html
<body>
<header>
<h1>我的博客</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>文章标题</h2>
<p>发布日期: <time datetime="2023-10-27">2023年10月27日</time></p>
</header>
<p>这里是文章的正文内容...</p>
<footer>
<p>作者: 张三</p>
</footer>
</article>
<aside>
<h3>推荐阅读</h3>
<ul>
<li><a href="#">相关文章一</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2023 我的博客. 保留所有权利.</p>
</footer>
</body>文本与内容标签
- 标题 ：
<h1>到<h6>，<h1>级别最高，一个页面建议只有一个<h1>。 - 段落 ：
<p>。 - 格式化 ：
<strong>：表示重要强调（通常显示为加粗）。<em>：表示强调（通常显示为斜体）。<mark>：高亮显示文本（黄色背景）。<small>：旁注（如版权信息、法律条款）。
- 分组 ：
<div>：块级容器，用于布局分组。<span>：行内容器，用于包裹文字。
表单与用户交互
HTML5极大地增强了表单功能，提供了原生验证和更丰富的输入类型。
新增输入类型
这些类型在移动端会自动切换键盘，且支持原生表单验证。
html
<form action="/submit" method="post">
<!-- 邮箱输入，自动验证格式 -->
<input type="email" placeholder="请输入邮箱" required>
<!-- 数字输入，可设置范围 -->
<input type="number" min="1" max="100" value="10">
<!-- 搜索框，输入时通常会有清除按钮 -->
<input type="search" placeholder="搜索...">
<!-- 电话，移动端弹出数字键盘 -->
<input type="tel" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}" placeholder="格式: 123-4567-8901">
<!-- 颜色选择器 -->
<input type="color">
<!-- 日期选择器 -->
<input type="date">
<input type="time">
<input type="week">
<input type="month">
<!-- 进度条 -->
<progress value="70" max="100">70%</progress>
<!-- 度量衡 -->
<meter value="3" min="0" max="10" low="3" high="7">中</meter>
<!-- 提交按钮 -->
<button type="submit">提交</button>
</form>表单属性
- placeholder：输入框的提示文本，获得焦点时消失。
- required：必填字段，提交时若为空会提示。
- autofocus：页面加载时自动获得焦点。
- autocomplete ：
on或off，控制是否记录输入历史。 - pattern：使用正则表达式进行自定义验证。
数据列表
允许用户在输入时看到预定义的选项列表，同时保留手动输入的自由。
html
<label for="browser">选择浏览器:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>多媒体与图形
音频与视频
HTML5通过<audio>和<video>标签原生支持媒体播放。
html
<!-- 视频示例 -->
<video width="640" height="360" controls autoplay muted loop poster="poster.jpg">
<!-- 提供多种格式备用，浏览器会选择它支持的第一个 -->
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<!-- 降级文本 -->
您的浏览器不支持 video 标签。
</video>
<!-- 音频示例 -->
<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
您的浏览器不支持 audio 标签。
</audio>属性说明：
- controls：显示播放、音量等控件。
- autoplay：自动播放（现代浏览器通常禁止有声音的自动播放）。
- muted：静音。
- loop：循环播放。
- poster：视频加载前显示的图片。
Canvas绘图
<canvas>是一个位图绘图区域，需要通过JavaScript来绘制图形。
html
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;">
</canvas>
<script>
// 获取画布上下文
var ctx = document.getElementById('myCanvas').getContext('2d');
// 绘制一个红色的矩形
ctx.fillStyle = '#FF0000';
ctx.fillRect(10, 10, 150, 80);
// 绘制文字
ctx.font = '20px Arial';
ctx.fillStyle = '#000000';
ctx.fillText('Hello Canvas!', 20, 50);
</script>内联SVG
与Canvas不同，SVG是矢量图，可缩放且不失真，可以直接写在HTML中。
html
<svg width="100" height="100">
<!-- 绘制一个圆 -->
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>API与高级功能
虽然API主要通过JavaScript调用，但它们是HTML5标准的重要组成部分。
本地存储
替代了传统的Cookie，提供更大的存储空间（通常5MB以上）。
javascript
// 存储数据
localStorage.setItem("username", "JohnDoe");
// 读取数据
let name = localStorage.getItem("username");
// 删除数据
localStorage.removeItem("username");
// 清空所有
localStorage.clear();注意：sessionStorage的数据在关闭浏览器标签页后会被清除。
地理定位
获取用户的地理位置信息（需用户授权）。
javascript
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(position) {
console.log("纬度: " + position.coords.latitude);
console.log("经度: " + position.coords.longitude);
},
function(error) {
console.log("定位失败: " + error.message);
}
);
} else {
console.log("您的浏览器不支持地理定位");
}拖放API
允许用户拖动元素。
html
<div id="draggable" draggable="true" ondragstart="dragStart(event)">
拖动我
</div>
<div id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)">
放在这里
</div>
<script>
function allowDrop(ev) {
ev.preventDefault(); // 允许放置
}
function dragStart(ev) {
ev.dataTransfer.setData("text", ev.target.id); // 设置被拖数据的数据类型和值
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>优化
SEO优化
- 语义化：使用正确的标签描述内容。
- Meta标签 ：完善
description和keywords（虽然keywords权重降低，但仍有用）。 - 图片优化 ：永远不要忘记
alt属性。
无障碍访问
- ARIA ：使用
role和aria-*属性辅助屏幕阅读器。 - 键盘导航：确保所有交互元素都能通过Tab键访问。
性能优化
-
懒加载 ：对于长页面，给图片加上
loading="lazy"属性。html<img src="image.jpg" loading="lazy" alt="描述"> -
资源预加载 ：在
<head>中使用<link rel="preload">提前加载关键资源。
附录与速查
常用字符实体
<：小于号<>：大于号> ：空格©：版权符号 ©️
全局属性
所有HTML元素都可用的属性：
id：元素的唯一标识。class：元素的类名，用于CSS和JS选择。style：内联CSS样式。title：额外的提示信息（通常显示为工具提示）。hidden：隐藏元素。data-*：自定义数据属性（如data-id="123"）。
浏览器兼容性
虽然HTML5已被广泛支持，但针对老版本IE浏览器，可以使用html5shiv脚本：
html
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->作为一个成熟的前端开发师，一定要善于使用AI帮助实现项目