HTML 教程 / HTML 是什么？它在网页中起什么作用？

HTML（HyperText Markup Language，超文本标记语言）为网页的内容提供结构和意义。它标记标题、段落、列表、链接和文档的其他组成部分。CSS 主要决定外观和布局；JavaScript 可以添加响应用户输入的行为。

什么是 HTML？

HTML 是一种标记语言：使用的元素描述了文档中内容的功能。相同的词语可以是标题、普通段落或链接。HTML 元素明确这些内容的用途。链接还可以将网络上的文档互相连接。

计算和条件程序逻辑不是 HTML 的主要任务。重点是 结构和意义。 WHATWG HTML 标准入门 解释了语言及其元素的功能。

HTML 在网页上承担哪些功能？

一个网页可以包含标题、正文、导航、图片和表单。HTML 将这些内容分配给适当的元素，并描述它们之间的关系。下面的完整示例还展示了如何将这些元素嵌入到文档的基本结构中。

• 标记内容: h1 到 h6 标记标题，p 标记段落，ul 或 ol 标记列表。
• 组织文档: 元素可以区分头部、导航区域和主要内容。
• 连接页面并允许输入: a 创建链接。使用 form 和输入元素，用户可以提交信息。

该结构帮助浏览器和辅助技术（如屏幕阅读器）解释页面。因此，请根据内容的用途选择元素。仅凭元素的默认外观不足以作为选择标准。

HTML、CSS 和 JavaScript 有何不同？

HTML 定义内容及其意义。CSS（Cascading Style Sheets，层叠样式表）控制展示，例如颜色、字体、间距和布局。JavaScript 可以响应点击和输入，或者修改页面上的内容。

这种划分是一个有用的入门方法，但不是严格的界限。一些 HTML 元素已经自带交互功能，CSS 可以根据状态改变展示或执行动画。初学时，请先专注于使用合适的元素来标记内容。

浏览器如何呈现 HTML 代码？

在下面的代码片段中，h1 表示一个标题，p 表示一个段落，而 ul 与 li 表示一个列表。

<h1>当天笔记</h1>
<p>HTML 为内容赋予结构。</p>
<ul>
  <li>标题</li>
  <li>段落</li>
</ul>

浏览器解释这些元素并显示一个标题、一个段落，以及其下方带有项目符号的两个列表项。标签的尖括号不会作为普通页面文本显示。将这些元素与显示的内容进行比较。实际的字体和间距取决于浏览器和页面的 CSS。

创建一个简单的 HTML 文件

将片段补充为文档的基本结构。将以下完整示例复制到文本编辑器中，以 UTF-8 字符编码保存为 index.html 文件，然后在浏览器中打开。使用纯文本，而不是格式化的文本文档。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>当天笔记</title>
  </head>
  <body>
    <h1>当天笔记</h1>
    <p>HTML 为内容赋予结构。</p>
    <ul>
      <li>标题</li>
      <li>段落</li>
    </ul>
  </body>
</html>

head 包含文档标题和字符编码等信息。body 包含页面的主要内容。即使没有额外的 CSS，浏览器也会使用其默认样式显示内容。

在编辑器中，依次修改 title 元素中的文字、h1 标题和段落内容。每次更改后保存并重新加载页面。比较浏览器标签中的标题与可见内容：对title的更改不会自动改变文档中的标题。然后恢复原始示例代码。