HTML 基础

HTML 基本示例

让我们看看一个 HTML 文档的基本构建块。

如果你看到尚未学到的标签（tag），不用担心；我们将在后续章节中介绍它们。

基本的 HTML 文档结构

每个 HTML 文档都应该以文档类型声明（document type declaration）开头：<!DOCTYPE html>。这会告诉浏览器页面是使用 HTML5 编写的。

核心结构由 <html> 元素（element）组成，它包裹着整个内容。在 <html> 内部，你会发现 <head>（用于元数据 metadata）和 <body>（用于可见内容）。

显示给用户的内容位于 <body> 和 </body> 标签之间。

最小的 HTML 文档：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Web Page</title>
</head>
<body>

  <h1>My First Heading</h1>
  <p>My first paragraph.</p>

</body>
</html>

HTML 标题

如前所述，HTML 标题（<h1> 到 <h6>）定义了内容的结构和层级。

标题示例：

<h1>Level 1 Heading</h1>
<h2>Level 2 Heading</h2>
<h3>Level 3 Heading</h3>
<!-- ... 最多到 h6 -->

HTML 段落

文本段落使用 <p> 标签定义。

段落示例：

<p>This is a paragraph of text.</p>
<p>This is another paragraph. Browsers automatically add some space between paragraphs.</p>

HTML 链接（锚点）

链接，也称为锚点标签（anchor tag），使用 <a> 标签创建。它们允许用户在页面或资源之间导航。

链接示例：

<a href="https://www.example.com">Visit Example.com</a>

目标 URL 在 href 属性（attribute）中指定。属性提供了关于 HTML 元素的附加信息，并且总是包含在开始标签中。

常用链接属性：

• href：指定链接指向的 URL。
• target="_blank"：在新的浏览器标签页中打开链接。
• rel="noopener noreferrer"：常与 target="_blank" 一起使用，用于安全目的。
• 链接文本（<a> 和 </a> 之间的内容）：这是用户点击的部分。

HTML 图像

图像使用 <img> 标签嵌入。这是一个空标签（empty tag），意味着它没有结束标签。

图像的重要属性包括：

• src：指定图像文件的路径（URL）。
• alt：提供图像的替代文本。这对于可访问性（accessibility，屏幕阅读器会朗读它）至关重要，并在图像无法加载时显示。

图像示例：

<img src="images/logo.png" alt="Company Logo">

可选属性（optional attribute）如 width 和 height 可用于指定图像的像素尺寸。然而，对于响应式设计（responsive design）（使图像适应不同的屏幕尺寸），通常最佳实践是使用 CSS 来控制图像尺寸。

随着教程的深入，你将学习更多关于属性和其他 HTML 元素的知识。