目录
一、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 文档 阅读更详细的说明
- 多练习写结构页面，加深理解标签的作用
到这里，这篇文章就和大家说再见啦！我的主页里还藏着很多 篇 前端 实战干货，感兴趣的话可以点击头像看看，说不定能找到你需要的解决方案～
创作这篇内容花了很多的功夫。如果它帮你解决了问题，或者带来了启发，欢迎：
点个赞❤️ 让更多人看到优质内容
关注「前端极客探险家」🚀 每周解锁新技巧
收藏文章⭐️ 方便随时查阅
📢 特别提醒：
转载请注明原文链接，商业合作请私信联系
感谢你的阅读！我们下篇文章再见～ 💕
