这是我参与「第五届青训营」伴学笔记创作活动的第 4 天。

一、介绍

大家好，欢迎来到 HTML 进阶笔记。在这门课程中，我们将深入探讨 HTML，包括它的历史、基础语法以及如何使用 HTML 创建动态和互动的网页。

二、HTML 简史

HTML（超文本标记语言）是一种用于创建网页的语言。它最早被开发出来用于 CERN（欧洲核子研究组织）的网络，后来被广泛用于万维网上。自从 1989 年 Tim Berners-Lee 发明 HTML 以来，它已经发展成为万维网最重要的基础技术之一。

三、HTML 基础语法

HTML 的语法是非常简单的。它使用标签来描述网页的内容。下面是一个简单的 HTML 文档示例：

<!DOCTYPE html>
<html>
<head>
  <title>My First HTML Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first HTML page.</p>
</body>
</html>

上面的代码中，<!DOCTYPE html> 是文档类型声明，告诉浏览器这个文档使用的是 HTML5。<html> 标签是整个文档的根元素，它包含了整个文档的其他所有元素。

<head> 标签是文档的头部，它包含了一些关于文档的元数据，如标题，关键字等。<title>标签用于指定网页的标题，它是网页在浏览器标签页上显示的标题。

<body>标签是文档的主体，它包含了网页显示的内容。在这个示例中，我们使用了<h1>和<p>标签来分别表示一个标题和一段段落。

四、HTML 元素

HTML 元素是用标签表示的网页元素，如标题、段落、图像等。下面是一些常见的 HTML 元素：

<h1>到<h6>：表示标题。

<p>：表示段落。

<a>：表示链接。

<img>：表示图像。

<ul>：表示无序列表。

<ol>：表示有序列表。

<li>：表示列表项。

<table>：表示表格。

<tr>：表示表格行。

<th>：表示表头单元格。

<td>：表示数据单元格。

下面是一个使用多个 HTML 元素的示例：

上述代码的显示效果如下

My Favorite Foods

Here is a list of my favorite foods:

Pizza
Tacos
Sushi

And here is a table of my favorite drinks:

Drink	Type
Coffee	Hot
Tea	Hot
Lemonade	Cold

五、HTML 属性

HTML 属性是用来扩展 HTML 元素的特定特性的。例如，src 属性可用来指定图像的 URL。

下面是一个使用了属性的图像元素的示例：

<img src="https://www.example.com/images/图片.jpg" alt="这是一个图片">

在这个示例中，我们使用了 src 属性指定了图像的 URL，并使用了 alt 属性提供了图像的描述性文字。

六、HTML 样式

HTML 样式是用来给 HTML 元素添加样式（例如颜色、字体、大小等）的。

在 HTML 中，可以通过三种方式来添加样式：

内联样式：使用style属性在 HTML 元素上添加样式。内部样式表：使用<style>标签在 HTML 文档内部定义样式。外部样式表：使用<link>标签引用外部的 CSS 文件。下面是一个使用内联样式的示例：

<p style="color: blue;">This is a blue paragraph.</p>

总结

在前面的文章中，我们学习了 HTML 基本语法、元素以及如何使用它们来构建网页。那么，在明天的笔记中，我们将深入学习 HTML 的进阶知识，包括布局、样式以及页面优化等。

我们将通过详细的讲解和代码实例，帮助大家了解 HTML 的各种进阶知识，并在文章结束后，拥有足够的能力去开发出具有高可用性和高可读性的网页。

【总结】HTML进阶笔记（上）|青训营笔记