HTML-01-HTML 基础框架 - 详解

HTML 基础框架

本章目的

学会搭建网页的"骨架"，理解 HTML 文档的基本结构，能够创建一个标准的 HTML5 页面。

什么是 HTML？

HTML（HyperText Markup Language，超文本标记语言）是构建网页的基础语言。你可以把它想象成网页的"骨架"，它定义了网页的结构和内容。

通俗理解

如果把网页比作一栋房子：

  • HTML 就是房子的框架结构（墙壁、屋顶、门窗）
  • CSS 就是房子的装修装饰（颜色、家具、布局）
  • JavaScript 就是房子的功能设施（电路、水管、智能设备）

HTML 使用"标签"来标记不同类型的内容，就像给房子的不同房间贴上标签：“这里是客厅”、“那里是卧室”。

HTML 文档的基本结构

一个完整的 HTML 文档就像一本书，有固定的结构：

     ← 告诉浏览器：这是 HTML5 文档
              ← 整个网页的开始
              ← 网页的"头部信息"（不给用户看，但浏览器需要）
              ← 元数据（编码、视口设置等）
             ← 网页标题（显示在浏览器标签页上）
  </head>           ← 头部信息结束
  <body>            ← 网页的"主体内容"（用户看到的部分）
    <h1>            ← 一级标题（章节标题）
    <p>             ← 段落（正文内容）
  </body>           ← 主体内容结束
</html>             ← 整个网页的结束</code></pre>
<p>每个 HTML 页面都遵循这个基本结构，确保浏览器能够正确解析和显示内容。</p><hr/><h3><a id="_45"></a>逐行讲解</h3><h4><a id="1__47"></a>1. 文档类型声明</h4>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important;"><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span></code></pre>
<p><strong>作用</strong>：告诉浏览器这是一个 HTML5 文档。</p><p><strong>说明</strong>：这个声明必须是 HTML 文件的第一行，告诉浏览器用什么标准来解析后面的代码。</p><hr/><h4><a id="2_HTML__59"></a>2. HTML 根元素</h4>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important;"><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zh-CN<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<p><strong>作用</strong>：包裹整个网页的根标签，所有内容都写在它里面。</p><p><strong>属性说明</strong>：</p><ul><li><code>lang="zh-CN"</code>：声明页面使用简体中文</li><li>这有助于搜索引擎理解页面语言，也有助于浏览器进行翻译和语音朗读</li></ul><hr/><h4><a id="3_head_73"></a>3. 头部区域（<code><head></code>）</h4>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important;"><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>HTML 基础<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span></code></pre>
<p>头部区域包含网页的元数据，这些信息不会直接显示在页面上，但浏览器和搜索引擎会读取。</p><p><strong>3.1 字符编码</strong></p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important;"><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<p><strong>作用</strong>：告诉浏览器网页使用 UTF-8 编码，可以正确显示中文和各种符号。</p><p><strong>说明</strong>：如果不设置或设置错误，中文会显示成乱码。</p><hr/><p><strong>3.2 视口设置</strong></p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important;"><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<p><strong>作用</strong>：让网页在手机和平板上正确显示，不会出现字体太小或需要左右滚动的问题。</p><p><strong>参数说明</strong>：</p><ul><li><code>width=device-width</code>：宽度等于设备宽度</li><li><code>initial-scale=1.0</code>：初始缩放比例为 1.0（不缩放）</li></ul><hr/><p><strong>3.3 页面标题</strong></p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important;"><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>HTML 基础<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span></code></pre>
<p><strong>作用</strong>：设置网页标题，显示在浏览器标签页上。</p><p><strong>说明</strong>：这是用户看到网页的第一印象，也会影响搜索引擎排名，建议简洁明确。</p><hr/><h4><a id="4_body_123"></a>4. 主体区域（<code><body></code>）</h4>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important;"><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>欢迎来到 HTML 学习之旅！<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>这是你第一次写的 HTML 页面。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span></code></pre>
<p><strong>作用</strong>：包含网页的所有可见内容，用户在浏览器中看到的所有内容都写在这里。</p><p><strong>常用标签</strong>：</p><ul><li><code><h1></code>：一级标题，页面主标题（还有 h2-h6 共 6 级标题）</li><li><code><p></code>：段落标签，用于包裹一段文字</li></ul><hr/><h3><a id="_140"></a>最佳实践</h3><ol><li><strong>使用 UTF-8 编码</strong>：支持中文和多语言显示，这是现代网页的标准编码</li><li><strong>设置 viewport</strong>：确保在移动设备上正确显示，提升用户体验</li><li><strong>指定语言属性</strong>：<code>lang="zh-CN"</code> 有助于搜索引擎和辅助技术</li><li><strong>使用小写标签</strong>：HTML5 不区分大小写，但小写是行业规范</li><li><strong>缩进对齐</strong>：保持代码层次清晰，便于阅读和维护</li></ol><hr/><h3><a id="_150"></a>文件说明</h3><ul><li><code>index.html</code> - 基础 HTML 页面示例，包含完整的 HTML5 标准结构</li></ul><hr/><h3><a id="_156"></a>使用方法</h3><p>直接在浏览器中打开 <code>index.html</code> 文件即可查看效果。</p><hr/><h3><a id="_162"></a>练习题</h3><h4><a id="_164"></a>基础练习</h4><p>创建一个新的 HTML 文件 <code>practice.html</code>，要求：</p><ol><li>使用 UTF-8 编码和正确的 viewport 设置</li><li>设置页面标题为"我的第一个网页"</li><li>包含一级标题"你好，世界！"</li><li>包含两段文字，介绍你自己</li></ol><h4><a id="_171"></a>进阶练习</h4><ol><li>尝试修改 <code>index.html</code> 的内容，改成一个简单的"自我介绍"页面</li><li>在浏览器中查看效果，然后尝试修改标题和内容</li><li>思考：如果把 <code>lang="zh-CN"</code> 改成 <code>lang="en"</code> 会有什么影响？（提示：浏览器翻译功能）</li></ol><hr/><h3><a id="_178"></a>学习目标检查</h3><ul><li class="task-list-item"><input class="task-list-item-checkbox" disabled="disabled" type="checkbox"/> 理解 HTML 文档的基本结构</li><li class="task-list-item"><input class="task-list-item-checkbox" disabled="disabled" type="checkbox"/> 掌握 <code><head></code> 和 <code><body></code> 的作用</li><li class="task-list-item"><input class="task-list-item-checkbox" disabled="disabled" type="checkbox"/> 能够创建一个标准的 HTML5 页面</li><li class="task-list-item"><input class="task-list-item-checkbox" disabled="disabled" type="checkbox"/> 理解 meta 标签的作用（编码和视口）</li><li class="task-list-item"><input class="task-list-item-checkbox" disabled="disabled" type="checkbox"/> 能够设置正确的页面标题和语言属性</li></ul><h2><a id="_187"></a>参考</h2><p>项目在<a href="https://github.com/tao355667/frontend-journey">https://github.com/tao355667/frontend-journey</a>，借助 OpenCode 内置的 GLM 4.7 与 Kimi 2.5 模型生成内容，并结合学习进度对项目内容进行针对性修改与润色</p></div>
posted @ 2026-03-07 12:11  clnchanpin  阅读(10)  评论(0)    收藏  举报