HTML5是构建网页的标准语言，优化了语义化结构并增强多媒体支持。1. 基本结构包括<!DOCTYPE html>声明、<html>根元素、<head>元信息区（含字符编码、视口设置和标题）及<body>主体内容区。2. 语义化标签如<header>、<nav>、<main>、<article>、<section>、<aside>和<footer>提升结构清晰度，利于SEO与可维护性。3. 常用内容标签涵盖标题<h1>-<h6>、段落<p>、链接<a>、图片<img>、列表<ul>/<ol>/<li>及容器<div>/<span>。4. 表单新增类型如email、date、number、search及placeholder、required等属性，增强输入验证与用户体验。结合示例代码展示完整页面结构与表单应用，强调闭合标签、属性引号和alt文本等细节以提升代码健壮性。最终需配合CSS与JavaScript实现丰富效果。
HTML5 是构建网页的标准语言，它在原有 HTML 基础上进行了优化和扩展，支持更清晰的语义化结构和多媒体功能。要开始使用 HTML5，首先需要掌握其基本语法结构和常用标签的使用方法。
1. HTML5 文档的基本结构
每个 HTML5 页面都应包含一个标准的文档结构，确保浏览器能正确解析和显示内容。
<!DOCTYPE html><html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
</head>
<body>
<h1>欢迎使用 HTML5</h1>
<p>这是一个段落。</p>
</body>
</html>
说明：
- <!DOCTYPE html>：声明文档类型为 HTML5，必须放在第一行。
- <html>：根元素，lang 属性指定语言（如 zh 表示中文）。
- <head>：包含页面元信息，如编码、视口设置、标题等。
- <meta charset="UTF-8">：声明字符编码，避免乱码。
- <meta name="viewport">：用于响应式设计，适配移动设备。
- <title>：定义浏览器标签页上显示的标题。
- <body>：页面主体，所有可见内容放在这里。
2. 常用语义化标签
HTML5 引入了多个语义化标签，使结构更清晰，利于 SEO 和可维护性。
立即学习“前端免费学习笔记（深入）”；
- <header>：页面或区块的头部，常用于放置导航和标题。
- <nav>：导航栏，包含主要链接。
- <main>：页面主要内容，每个页面建议只有一个。
- <article>：独立的文章内容，如博客文章。
- <section>：文档中的一个区域或章节。
- <aside>：侧边栏，与主内容相关但可独立存在。
- <footer>：页脚，通常包含版权信息或联系方式。
示例：
<h1>我的网站</h1>
<nav>
<a href="#home">首页</a>
<a href="#about">关于</a>
</nav>
</header>
<main>
<article>
<h2>文章标题</h2>
<p>这是文章内容……</p>
</article>
</main>
<aside>
<p>推荐内容</p>
</aside>
<footer>
<p>© 2025 我的网站. 版权所有.</p>
</footer>
3. 常用内容标签
除了结构标签，HTML5 还提供了丰富的文本和媒体标签。
- <h1> 到 <h6>：标题层级，h1 最重要。
- <p>：段落文本。
- <a href="url">：超链接，href 指定跳转地址。
- <img src="图片路径" alt="描述">：插入图片，alt 提供替代文本。
- <ul>, <ol>, <li>：无序列表、有序列表和列表项。
- <div>：通用容器，用于布局或样式分组。
- <span>：行内容器，用于局部文本样式控制。
4. 表单与输入控件（HTML5 新增）
HTML5 扩展了表单功能，新增多种输入类型和属性。
- <input type="email">：邮箱输入，自动验证格式。
- <input type="date">：日期选择器。
- <input type="number">：数字输入框。
- <input type="search">：搜索框，部分浏览器显示清除按钮。
- <input placeholder="提示文字">：输入框提示信息。
- <input required>：必填字段，提交前校验。
示例：
<form action="/submit" method="post"><label>邮箱：
<input type="email" name="email" placeholder="请输入邮箱" required>
</label>
<br>
<label>生日：
<input type="date" name="birthday">
</label>
<br>
<button type="submit">提交</button>
</form>
基本上就这些。掌握以上结构和标签，就能写出规范、现代的 HTML5 页面。实际开发中结合 CSS 和 JavaScript 可实现更丰富的效果。不复杂但容易忽略细节，比如闭合标签、属性加引号、alt 文本等，注意这些能让代码更健壮。
