课程

Web开发 

HTML 简介

欢迎来到网页开发的世界！本课程将向您介绍互联网的基本组成部分：HTML。HTML 代表超文本标记语言，它是创建网页的标准语言。将其视为网站的骨架——它提供结构和内容。

如果没有 HTML，网络浏览器将不知道如何显示文本、图像或链接。对于任何对构建网站感兴趣的人来说，无论是简单的个人页面还是复杂的网络应用程序，HTML 都至关重要。我们将从基础开始，逐步创建一个简单的网页布局。

HTML 结构：基本模板

每个 HTML 文档都遵循一个基本结构。此结构告诉浏览器它正在读取 HTML 文件，并为页面提供基本元素。这是一个最小的 HTML 模板：

            
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <!-- Page content goes here -->
</body>
</html>

让我们分解每个部分：

  • <!DOCTYPE html>：此声明告诉浏览器文档是 HTML5 文档。它应该始终是 HTML 文件中的第一项。
  • <html>：这是页面的根元素。所有其他内容都放在此标签内。
  • <head>：此部分包含有关 HTML 文档的元信息，例如标题、字符集和样式表链接。
  • <title>：指定 HTML 页面的标题（显示在浏览器的标题栏或选项卡中）。
  • <body>：这是您网页所有内容（文本、图像、链接以及用户看到的所有其他内容）所在的位置。

HTML 标签：元素和属性

HTML 使用标签来定义元素。大多数标签成对出现：一个开始标签和一个结束标签。例如，<p> 是段落的开始标签，而 </p> 是结束标签。

有些标签是自闭合的，这意味着它们不需要单独的结束标签。例如 <br> 标签，它会创建一个换行符。标签还可以有属性，提供有关元素的额外信息。例如，<img> 标签（用于图像）使用 src 属性来指定图像源。

标题：<h1> 到 <h6>

标题用于构建内容，使其更易于阅读。HTML 提供了六级标题，从 <h1>（最重要）到 <h6>（最不重要）。通常，<h1> 用于页面的主标题。

这是一个例子：

            
<h1>This is a Level 1 Heading</h1>
<h2>This is a Level 2 Heading</h2>
<h3>This is a Level 3 Heading</h3>

段落：<p>

段落用于显示文本块。<p> 标签定义一个段落。

例子：

            
<p>This is a paragraph of text.  It can contain multiple sentences and words.</p>
<p>This is another paragraph. Paragraphs are automatically separated by a blank line.</p>

列表：<ul> 和 <ol>

HTML 提供了两种类型的列表：无序列表 (<ul>) 和有序列表 (<ol>)。无序列表用于没有特定顺序的项，而有序列表用于需要特定顺序的项。列表项使用 <li> 标签定义。

以下是两者的示例：

            
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

链接：<a>

链接允许用户在不同的网页或同一页面内的不同部分之间导航。<a> 标签定义了一个超链接。最重要的属性是 href，它指定链接的 URL。

例子：

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

target 属性可用于指定在哪里打开链接文档。target="_blank" 在新标签页或窗口中打开链接。

图像：<img>

<img> 标签用于在网页中嵌入图像。src 属性指定图像文件的路径。alt 属性提供图像的替代文本，当图像无法加载时显示，并且对可访问性很重要。

例子：

            
<img src="image.jpg" alt="Description of the image">

构建简单的网页布局

现在，让我们结合所学知识来创建一个基本的网页布局。我们将包括一个标题、一个段落、一个列表、一个链接和一个图像。

这是完整的 HTML 代码：

            
<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Webpage!</h1>
    <p>This is a simple webpage created using HTML fundamentals.</p>
    <ul>
        <li>Learn HTML</li>
        <li>Practice coding</li>
        <li>Build awesome websites</li>
    </ul>
    <a href="https://www.google.com" target="_blank">Visit Google</a>
    <img src="placeholder.jpg" alt="A placeholder image">
</body>
</html>

请记住将“placeholder.jpg”替换为图像文件的实际路径。将此代码保存为 HTML 文件（例如，“index.html”），并在您的网络浏览器中打开它以查看结果。您现在拥有一个功能齐全的 HTML 页面了！



-/- ✔: 0, ✖: 0