这是全网最精简、最实用、可直接开发项目的 HTML5 教程，无废话、全干货，学完就能做网页。
一、HTML5 基础认知
HTML5 = 超文本标记语言，负责网页结构（内容、图片、按钮、布局）
不是编程语言，是标签语言，由
<标签>组成所有现代浏览器（Chrome/Edge/火狐）完美支持
核心优势：语义化标签、多媒体、表单增强、本地存储、Canvas
二、最简 HTML5 模板（必背）
所有网页都从这个结构开始，复制即用：
<!DOCTYPE html> <!-- HTML5文档声明，必须写在第一行 --> <html> <head> <meta charset="UTF-8"> <!-- 移动端适配，必备！ --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网页标题</title> </head> <body> <!-- 页面所有可见内容都写在这里 --> 你好，HTML5！ </body> </html>
三、HTML5 核心标签（最常用 30 个）
1. 排版与文本标签
<!-- 标题 h1~h6，h1更大最重要 --> <h1>一级标题</h1> <h2>二级标题</h2> <!-- 段落 --> <p>这是一个段落</p> <!-- 换行 / 水平线 --> <br> <hr> <!-- 文本样式 --> <strong>加粗</strong> <em>斜体</em> <u>下划线</u> <del>删除线</del>
2. HTML5 语义化布局标签（最重要！）
代替传统 div，让代码更清晰，SEO 更友好：
<header>页头</header> <nav>导航栏</nav> <main>页面主体（）</main> <section>内容区域</section> <article>文章/帖子</article> <aside>侧边栏</aside> <footer>页脚</footer>
3. 链接与图片
<!-- 链接：target="_blank" 新窗口打开 --> <a href="https://www.baidu.com" target="_blank">百度</a> <!-- 图片：src=路径 alt=描述（必填） --> <img src="图片.jpg" alt="图片说明" width="300">
4. 列表标签
<!-- 无序列表 --> <ul> <li>列表项1</li> <li>列表项2</li> </ul> <!-- 有序列表 --> <ol> <li>第一项</li> <li>第二项</li> </ol>
5. 表格标签
<table border="1"> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>20</td> </tr> </table>
6. HTML5 多媒体（不用 Flash）
<!-- 音频 --> <audio controls src="music.mp3"></audio> <!-- 视频 --> <video controls width="400" src="video.mp4"></video>
四、HTML5 表单（超级重要）
1. 基础表单
<form action=""> <!-- 普通输入框 --> 用户名：<input type="text" placeholder="请输入用户名"> <br> <!-- 密码框 --> 密码：<input type="password"> <br> <!-- 按钮 --> <button type="submit">提交</button> <button type="reset">重置</button> </form>
2. HTML5 新增表单类型（强大）
<input type="email"> <!-- 邮箱验证 --> <input type="url"> <!-- 网址 --> <input type="number"> <!-- 数字 --> <input type="date"> <!-- 日期选择器 --> <input type="color"> <!-- 颜色选择器 --> <input type="file"> <!-- 文件上传 --> <input type="range"> <!-- 滑动条 -->
3. 表单常用属性
required <!-- 必填项 --> disabled <!-- 禁用 --> readonly <!-- 只读 --> placeholder <!-- 提示文字 --> maxlength <!-- 更大长度 -->
五、HTML5 全局属性（所有标签都能用）
id="标识" class="类名（用于CSS/JS）" style="行内样式" title="鼠标悬浮提示" data-*="自定义属性"
六、HTML5 新特性（面试/开发必考）
语义化标签：header/nav/main/footer/article/section
多媒体：audio / video
Canvas：2D绘图、游戏、图表
本地存储：localStorage / sessionStorage
表单增强：email/date/number/required
地理定位：navigator.geolocation
拖拽功能：drag & drop
七、完整实战案例（可直接运行）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5 完整页面</title> </head> <body> <header> <h1>我的个人主页</h1> <nav> <a href="#">首页</a> | <a href="#">博客</a> | <a href="#">关于</a> </nav> </header> <main> <section> <h2>自我介绍</h2> <p>正在学习 <strong>HTML5</strong>，一篇足矣！</p> <img src="https://picsum.photos/300/200" alt="随机图片"> </section> <section> <h2>联系我</h2> <form> <input type="text" placeholder="姓名" required> <br> <input type="email" placeholder="邮箱" required> <br> <button type="submit">发送</button> </form> </section> </main> <footer> <p>© 2025 我的网站</p> </footer> </body> </html>
八、速记口诀
结构固定：
html > head + body语义优先：少用 div，多用
header/main/footer图片必须加
alt，链接注意_blank表单用
required，体验更友好移动端必须加：
<meta name="viewport">
总结
这篇覆盖 HTML5 100% 常用知识点，没有冗余内容：
✅ 基础结构 ✅ 语义布局 ✅ 链接图片 ✅ 表单大全
✅ 多媒体 ✅ 新特性 ✅ 实战案例
你背完+复制案例运行，就等于完全掌握 HTML5！
我们凭借多年互联网深耕经验，始终以助力中小企业实现全网营销为服务宗旨，已累计为全国 2000+家企业提供高品质线上服务，收获广大客户一致好评与信赖。可承接网站建设、官网改版升级、移动端建站、小程序定制开发、GEO 优化推广、品牌软文宣发等核心业务，同时配套提供域名注册、云主机空间、网站备案、网站托管等一站式全流程互联网服务，全方位满足企业数字化发展需求...
如有合作意向，欢迎立即在线咨询或拨打服务热线： 15668412335，我们将一对一为您答疑解惑，定制专属解决方案。项目经理在线
如有合作意向，欢迎立即在线咨询或拨打服务热线： 15668412335，我们将一对一为您答疑解惑，定制专属解决方案。项目经理在线
鲁公网安备 37018102000898号
674018178