HTML Tutorial

HTML 教程

Table of content

HTML 是一种标准的标记语言，代表 超文本标记语言。它是一种广泛用于创建网页的语言。HTML 由蒂姆·伯纳斯-李于 1991 年末发明，但其第一个版本“HTML 1.0”于 1993 年发布，“HTML 2.0”是第一个标准的 HTML 规范，于 1995 年发布。

本 HTML 教程涵盖了从基本的 HTML 基础概念和标签到高级技术，例如表单、模态框、多媒体和 HTML5 的所有内容。本教程旨在帮助初学者和经验丰富的设计师成为构建动态和响应式网站的专家。

什么是 HTML？

HTML（超文本标记语言）是一种标准的标记语言，用于设计网页的结构。HTML 是 超文本和 标记语言的组合。超文本定义了网页之间的内部链接，而 标记语言定义了文本和媒体的布局和呈现。

基本 HTML 结构

HTML 文档的基本结构包含一些必须使用的强制性标签，用于创建网页。创建任何类型的 HTML 文档都必须遵循此结构。

以下是 HTML 文档的基本结构：

<!DOCTYPE html>
<html>
<head>
   <title>Page title</title>
</head>
<body>
   <h1>Webpage's Heading</h1>
   <p>Content (Your first paragraph).</p>
</body>
</html>

HTML 基本结构的元素

以下是定义基本 HTML 结构的基本标签：

1. <!DOCTYPE html>

此元素将文档类型定义为 HTML。在编写任何 HTML 文档之前，都必须编写此元素。

2. <html>...</html>

<html> 标签是所有 HTML 元素的父标签。与创建 HTML 文档相关的所有内容都必须写在 <html> 标签内。CSS、JavaScript 和 jQuery 也必须在此标签内编写。

3. <head>...</head>

<head> 标签是所有那些不在网页上直接显示但页面功能所需的元素的容器标签。它包含元标签（用于 SEO 目的）、标题标签、脚本标签等。

4. <title>...</title>

<title> 标签用于定义您可以在浏览器选项卡、书签列表和搜索引擎结果中看到的网页标题。此标签对于 SEO 目的也很重要，可以帮助搜索引擎了解网页的内容。

5. <body>...<body>

<body> 标签是所有那些表示网页主要内容并在浏览器中显示的元素的容器标签。

6. <h1>...</h1>

<h1> 标签是标题标签之一。它是最重要的标题标签，用于定义网页的主要标题或标题。写在 <h1> 和 </h1> 之间的任何文本都是内容的顶级标题。

7. <p>...</p>

<p> 标签定义了一个段落，写在 <p> 和 </p> 之间的任何内容都将在网页上显示为一个段落。使用多个 <p> 标签在不同的段落中显示文本。

在 HTML 中编写 Hello World

通过使用上述基本的 HTML 结构，我们可以编写一个 HTML 文档，在网页上显示“Hello World”。

以下是用于在网页上的段落中显示 Hello World 的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
   <title>Hello World Example by TutorialsPoint</title>
</head>
<body>
   <h1>Hello, World!</h1>
</body>
</html>
</pre>

上面的示例将在浏览器中顶级标题 (h1) 内显示“Hello, World！”。

HTML 中的注释

就像其他编程语言一样，您可以在 HTML 文档中将任何文本保留为注释。要在 HTML 中创建注释，请使用 <!-- 和 -->。

写在 <!-- 和 --> 之间的任何文本都被视为注释，并且不会显示在网站上。

示例

以下是 HTML 注释的示例：

<!--<h1>Hello World Example</h1>-->

在线 HTML 编辑器

我们提供了一个 HTML 在线编辑器，它使您能够直接在 Web 浏览器中编辑和执行 HTML 代码。通过点击“编辑并运行”按钮，您可以查看其输出并编辑代码。

<!DOCTYPE html>
<html>
<head>
    <title>Online HTML Editor</title>
</head>
<body>
    <h1>Online HTML Editor</h1>
    <p>Hello World</p>
</body>
</html>

创建 HTML 文档

HTML 文档是一个包含 HTML 代码的文件，扩展名为“.htm”或“.html”。要创建 HTML 文档，您需要一个文本编辑器。并且，要显示它，您需要一个 Web 浏览器。

创建 HTML 文档的步骤如下：

  • 打开一个文本编辑器。
  • 编写 HTML 代码。
  • 将文件保存为“.htm”或“.html”扩展名。

最后，通过键入带有完整路径的文件名或右键单击并使用浏览器打开来在浏览器中打开文件。

为什么要学习 HTML？

最初，HTML 的开发目的是定义文档的结构，例如标题、段落、列表等，以方便研究人员之间共享科学信息。现在，HTML 被广泛用于借助 HTML 语言中提供的不同标签来格式化网页。

对于学生和工作专业人士来说，HTML 是成为优秀软件工程师的必备技能，尤其是在从事 Web 开发领域时。

学习 HTML 的优势

以下是学习 HTML 的一些主要优势：

  • 创建网站 - 如果你精通 HTML，你可以创建一个网站或自定义现有的网站模板。
  • 成为网页设计师 - 如果你想开始职业生涯，成为一名专业的网页设计师，HTML 和 CSS 设计是必备技能。
  • 理解网络 - 如果你想优化你的网站，提高其速度和性能，了解 HTML 可以获得最佳效果。
  • 学习其他语言 - 一旦你理解了 HTML 的基础知识，那么其他相关的技术，如 JavaScript、PHP 或 Angular 就更容易理解了。

HTML 的应用

如前所述，HTML 是 Web 上使用最广泛的语言之一。以下是 HTML 的一些应用：

  • 网站开发 - HTML 用于创建在 Web 上呈现的网页（网站）。几乎每个网页都包含 html 标签，以便在浏览器中呈现其详细信息。
  • 互联网导航 - HTML 提供用于从一个页面导航到另一个页面的标签，并在互联网导航中得到广泛使用。
  • 响应式 UI - 如今，HTML 页面在所有平台（移动设备、平板电脑、台式机或笔记本电脑）上都能良好运行，这得益于响应式设计策略。
  • 离线支持 - HTML 页面一旦加载，就可以在机器上脱机使用，无需互联网。
  • 游戏开发 - HTML5 原生支持丰富的体验，现在也适用于游戏开发领域。
  • 移动应用程序开发 - HTML 结合 CSS3 和 JavaScript 可用于开发跨平台移动应用程序。
  • 多媒体和视频流 - HTML5 支持视频和音频等多媒体元素，可以直接在 Web 浏览器中无缝播放媒体。

受众：谁可以学习 HTML？

本HTML 教程专为有志于成为网页设计师和开发人员的人员设计，这些人需要深入了解 HTML，同时也要了解其简单概述和实际示例。本教程将为您提供开始学习 HTML 的充分素材，您可以由此将自己的技能提升到更高的水平。

学习 HTML 的先决条件

在继续学习本HTML 教程之前，您应该具备 Windows 或 Linux 操作系统的基本工作知识；此外，您必须熟悉以下内容：−

  • 使用任何文本编辑器，如记事本、Notepad++或Edit Plus等。
  • 如何在计算机上创建目录和文件。
  • 如何在不同的目录之间导航。
  • 如何在文件中键入内容并将其保存到计算机上。
  • 了解 JPEG、PNG 等不同格式的图像。

HTML 职业

HTML 是网页开发的基础。良好的 HTML 知识可以帮助您在以下领域发展职业：−

  • 前端开发人员
  • 网页设计师
  • 全栈开发人员
  • 邮件开发人员
  • 网页设计审阅员

HTML 实践和准备

完成 HTML 教程后，您可以通过以下方式准备面试并练习 HTML：−

HTML 完整参考

以下是元素、属性、颜色名称、颜色代码等的完整 HTML 参考。

HTML 文章

浏览我们 2000 多篇 HTML 文章，查找解决您网页设计和开发相关问题的方案。访问：HTML 文章

关于 HTML 的常见问题

1. HTML 的全称是什么？

HTML 的全称是超文本标记语言。它是开发网页的标准标记语言。

2. 为什么网页中使用 HTML？

出于以下原因，网页中使用 HTML：−

  • 它用于为网页提供基本结构。
  • HTML 标签帮助搜索引擎理解网页内容。
  • HTML 表单支持用户交互，并包含号召性用语按钮、文本字段、复选框等等。
  • 使用 HTML，我们可以将各种类型的媒体（如图像、音频、视频等）嵌入到网页中。
  • 它还用于创建超链接，这些超链接可以指向其他网页、同一页面的不同部分或网络上的其他资源。

3. 如何保存 HTML 文件？

要保存 HTML 文件，请按照以下简单步骤操作：−

  • 在您的系统上打开一个文本编辑器（如记事本、Sublime Text、Atom 等）。
  • 编写您的 HTML 代码。
  • 单击文本编辑器中的“文件”菜单。
  • 单击“另存为”。
  • 在对话框中，选择要保存文件的路径。
  • 为您的文件键入名称，后跟 .html 扩展名，以便浏览器将其解释为 HTML 文件。例如，index.html。
  • 单击“保存”。

4. 谁在什么时候发明了 html？

HTML 由欧洲核子研究组织（CERN）的物理学家蒂姆·伯纳斯-李于 1991 年末发明。但是，第一个 HTML 标准规范于 1995 年发布。

5. HTML 的主要功能是什么？

HTML 具有以下几个关键功能：−

  • 简单性 − HTML 易于学习和使用。它具有清晰简单的语法，即使是初学者也更容易理解。
  • 灵活性 − HTML 允许开发人员创建各种各样的 Web 文档，从简单的静态网页到复杂的 Web 应用程序。
  • 平台独立性 − HTML 是一种标准，所有现代 Web 浏览器都支持它。这意味着 HTML 文档可以在任何操作系统的任何 Web 浏览器中显示。
  • 链接 − HTML 的关键功能之一是能够创建指向其他网页的链接。
  • 嵌入媒体 − 它还允许将各种类型的媒体（如图像、音频、视频等）嵌入到网页中。
  • 交互性 − HTML 提供用于创建交互式表单的元素，允许用户输入数据。这对于用户注册、提交搜索查询等任务至关重要。
  • 语义化 − HTML5 引入了语义元素，这些元素将内容的含义传达给浏览器和开发人员。例如，<header>、<footer>、<article> 和 <section>。
  • 集成 − HTML 与 Web 开发中常用的其他语言（如 CSS（层叠样式表）和 JavaScript）配合良好。CSS 用于网页的样式和布局，而 JavaScript 用于交互性。

6. HTML 的最新版本是什么？

HTML 的最新版本是 HTML 5，它于 2008 年起草，并于 2014 年由万维网联盟 (W3C) 接受。

7. HTML 是一种编程语言吗？

不，HTML 不是一种编程语言。它是一种标记语言，用于构建 Web 上的内容。它代表超文本标记语言。

8. 什么是 HTML Web 存储？

HTML Web 存储（DOM 存储）是 HTML5 的一项功能，它允许 Web 应用程序在用户的浏览器本地存储数据。它以键值对的形式存储数据。

Web 存储有两种类型：−

  • localStorage − 此对象存储的数据没有过期日期。关闭浏览器后，数据不会被删除，并且在下一次会话中仍然可用。
  • sessionStorage − 此对象存储一个会话的数据。关闭浏览器选项卡时，数据会丢失。

9. 如何在浏览器中运行 HTML 文件？

要在浏览器中运行 HTML 文件，首先，将 HTML 文件保存为 .html 扩展名。例如，index.html。然后，找到您的文件并双击以在默认浏览器中打开它。

10. 什么是 HTML 组件？

HTML 组件，也称为 HTML 元素，是 HTML 页面的构建块。它们表示网页的各个部分，并由 HTML 标签定义。以下是一些主要组件：−

  • DOCTYPE 声明 − HTML 文档以 <!DOCTYPE html> 声明开头，后跟 <html> 标签。
  • 标题 − HTML 提供六级标题，从 <h1> 到 <h6>，其中 <h1> 是最高（或最重要）级别，<h6> 是最低级别。
  • 段落 − <p> 标签定义一个段落。
  • 链接 − <a> 标签定义超链接，用于从一个页面链接到另一个页面。
  • 图像 − <img> 标签用于在 HTML 页面中嵌入图像。
  • 列表 − HTML 支持有序列表、无序列表和定义列表。
  • 表格 − <table> 标签在 HTML 中定义一个表格。
  • 表单 − <form> 标签用于创建 HTML 表单以供用户输入。
  • 分区和部分 − <div> 标签是一个容器单元，它封装其他页面元素并将 HTML 文档划分为各个部分。HTML5 引入了语义元素，如 <section>、<article>、<header>、<footer>、<nav> 等，它们具有类似的功能，但提供了额外的语义信息。
  • 媒体元素 − HTML5 引入了媒体元素，如 <video> 和 <audio>，它们可用于在 HTML 文档中嵌入视频和音频文件。
打印页面
上一页
下一页
广告