课程
开始
开始学习
CodeGym /Java 课程 /Python SELF ZH /HTML 入门

HTML 入门

Python SELF ZH
第 29 级 , 课程 0
可用

1. HTML 标签

HTML 是什么？

HTML (HyperText Markup Language) 是一种标记语言，用来创建和结构化网页。 通过 HTML，我们可以使用不同的标签和属性来组织页面内容，让浏览器知道如何显示信息。 在这节课里，我们会讨论 HTML 的核心概念，例如标签、标签树、属性、单个标签和 HTML 文档结构。

在 HTML 中，标签是一些关键的元素，可以用来标记内容。它们包裹文字和其他元素，帮助浏览器理解要如何呈现它们。 例如，<h1> 和 <p> 标签告诉浏览器，它们内部的内容是一个标题或者段落。

标签写在尖括号 <> 里。大多数标签需要一个开始标签和一个结束标签，例如：

HTML
                      
                        <h1>这是标题</h1>
                        <p>这是一段文字。</p>

在这里，<h1> 是开始标签，</h1> 是结束标签。

标签树

一个 HTML 文档有层次结构，标签嵌套在一起，形成一个树状结构。这种“标签树”定义了页面上的元素之间的关系以及它们的显示顺序。

以下是一个简单的标签树例子：

Python

<html>
<head>
  <title>页面示例</title>
</head>
<body>
  <h1>页面标题</h1>
  <p>这里是段落的文字。</p>
</body>
</html>

在这个例子中，<html> 是根元素，里面包含 <head> 和 <body>。 <body> 内包含 <h1> 和 <p> 标签。 这种结构使得页面内容能够有逻辑地排序。

属性

属性用来为 HTML 标签添加额外的信息。它们写在开始标签内，由名称和值组成。例如：

HTML

<a href="https://example.com">网站链接</a>
<img src="image.jpg" alt="图片描述">
  • href 指定链接的地址。
  • src 是图片的路径。
  • alt 是替代文本，当图片无法加载时会显示它。

属性允许为元素添加额外的特性，例如 id (id)，类名 (class)，样式 (style) 等等。

单个标签

有些 HTML 标签没有内容，不需要结束标签。这种标签被称为单个标签。例如， <img> 用来插入图片，它的结构如下：

CSS
  
    <img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e"
src="https://cdn.javarush.com/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="图片描述">
HTML
  
    <img src="image.jpg" alt="图片描述">

其他一些单个标签的例子：

  • <br> 用来换行。
  • <hr> 用来插入水平线。

2. HTML 文档入门

一个 HTML 文档以声明 <!DOCTYPE html> 开头，这告诉浏览器这是 HTML5 文档。 接着是根标签 <html>，它包含 <head> 和 <body> 标签。<head> 包含文档的元信息（标题、样式、脚本），而 <body> 包含页面的主要内容。

HTML 文档示例

Python
      
        <!DOCTYPE html>
        <html lang="zh-CN">
        <head>
          <meta charset="UTF-8">
          <title>我的第一个页面</title>
        </head>
        <body>
          <h1>欢迎光临！</h1>
          <p>这是一个 HTML 文档的例子。</p>
          <a href="https://example.com">访问我们的网站</a>
        </body>
        </html>
  • <!DOCTYPE html> 告诉浏览器这是 HTML5 文档。
  • <html lang="zh-CN"> 指定文档的语言。
  • <meta charset="UTF-8"> 定义字符编码，帮助正确显示字符。
  • <title> 设置页面的标题，显示在浏览器窗口的标题栏。

<head> 中的额外标签

<head> 包含的信息不会直接显示在页面上，但对网站的功能很重要。 在 <head> 中可以添加这些标签：

  • <meta name="description" content="页面描述"> — 为搜索引擎提供页面的简短描述。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> — 让网站对移动设备自适应。
  • <link rel="stylesheet" href="styles.css"> — 引入 CSS 样式表文件。
  • <script src="script.js"></script> — 引入外部 JavaScript 文件。

这些标签有助于提升用户体验，优化页面的搜索引擎表现，并引入必要的资源。

评论
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION