HTML 详解：从基础结构到语义标签
目录
- 一、HTML 是什么？
- 二、HTML 的基本结构
- ✅ 简要说明：
- 三、常见 HTML 标签讲解
- 3.1 标题标签 `<h1> ~ <h6>`
- 3.2 段落和换行
- 3.3 超链接
- 3.4 图像插入
- 3.5 列表
- 无序列表：
- 有序列表：
- 3.6 表格结构
- 四、HTML 语义化标签详解
- 五、HTML 表单基础
- 六、常见问题 Q&A
- Q: HTML 是否区分大小写？
- Q: `<div>` 和 `<section>` 有什么区别？
- Q: 页面打不开是为什么？
- 七、总结与学习建议
一、HTML 是什么？
HTML（HyperText Markup Language，超文本标记语言）是构建网页的基础。它并不是编程语言，而是一种标记语言，用于告诉浏览器页面内容和结构。
简单理解：HTML 负责“骨架”结构，CSS 负责“样式”，JavaScript 负责“交互”。
二、HTML 的基本结构
一个完整的 HTML 文档大致结构如下：
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><title>我的第一个网页</title></head><body><h1>欢迎来到我的网站</h1><p>这是一个段落。</p></body>
</html>
✅ 简要说明：
<!DOCTYPE html>：声明文档类型为 HTML5<html>：所有 HTML 内容的根节点<head>：放元信息（如编码、标题、引入样式）<body>：网页的可见内容区域
三、常见 HTML 标签讲解
3.1 标题标签 <h1> ~ <h6>
<h1>一级标题</h1>
<h2>二级标题</h2>
...
<h6>六级标题</h6>
3.2 段落和换行
<p>这是一个段落。</p>
<br /> <!-- 换行 -->
3.3 超链接
<a href="https://www.baidu.com" target="_blank">访问百度</a>
3.4 图像插入
<img src="https://cdn.example.com/logo.png" alt="网站 Logo" width="200" />
3.5 列表
无序列表：
<ul><li>苹果</li><li>香蕉</li>
</ul>
有序列表：
<ol><li>第一步</li><li>第二步</li>
</ol>
3.6 表格结构
<table border="1"><thead><tr><th>姓名</th><th>年龄</th></tr></thead><tbody><tr><td>小明</td><td>18</td></tr></tbody>
</table>
四、HTML 语义化标签详解
语义化标签能够让浏览器和开发者更好地理解页面结构，有利于 SEO 和可维护性。
| 标签 | 说明 |
|---|---|
<header> | 页眉区域 |
<footer> | 页脚区域 |
<nav> | 导航栏 |
<main> | 页面主体 |
<article> | 独立内容块 |
<section> | 内容分组区块 |
<aside> | 侧边栏 |
✅ 示例：
<main><article><h2>文章标题</h2><p>正文内容...</p></article>
</main>
五、HTML 表单基础
用于用户输入数据的场景：
<form action="/submit" method="POST"><label>用户名：<input type="text" name="username" /></label><br /><label>密码：<input type="password" name="password" /></label><br /><button type="submit">提交</button>
</form>
六、常见问题 Q&A
Q: HTML 是否区分大小写？
A: 标签名和属性名通常不区分大小写，但推荐小写写法以保持规范。
Q: <div> 和 <section> 有什么区别？
A: <div> 是无语义容器，而 <section> 表示有意义的内容分组。
Q: 页面打不开是为什么？
A: 常见问题包括：缺失 <html> 结构、拼写错误、路径不对、标签不闭合等。
七、总结与学习建议
- HTML 是前端开发的第一步，理解其结构是进阶的基础
- 建议配合 MDN HTML 文档 阅读更详细的说明
- 多练习写结构页面，加深理解标签的作用
到这里，这篇文章就和大家说再见啦！我的主页里还藏着很多 篇 前端 实战干货，感兴趣的话可以点击头像看看，说不定能找到你需要的解决方案～
创作这篇内容花了很多的功夫。如果它帮你解决了问题，或者带来了启发，欢迎：
点个赞❤️ 让更多人看到优质内容
关注「前端极客探险家」🚀 每周解锁新技巧
收藏文章⭐️ 方便随时查阅
📢 特别提醒：
转载请注明原文链接，商业合作请私信联系
感谢你的阅读！我们下篇文章再见～ 💕
