终极 HTML 教程 — 在 24 分钟内学习 HTML {& CSS}
终极 HTML 教程 — 在 24 分钟内学习 HTML
在 24 分钟内成为 HTML 向导
基本
在世界各地，有数百种语言，如英语、汉语、俄语、阿拉伯语、印地语、葡萄牙语和其他各种语言。这些是人类语言，即只有人类才能理解它们。
就像人类一样，几乎每一种动物都有自己的语言来相互交流。计算机也有自己的语言。
计算机不懂我们的语言。如果你想和他们交谈，你必须用他们的语言说话。
Photo by Towfiqu barbhuiya on 不飞溅
HTML 是计算机可以理解的各种语言之一。您可以使用 HTML 与您的 Web 浏览器进行通信并为其提供说明。
网络是如何工作的？
这 全球资讯网 或者 网络 是一个全球信息系统。您可以通过互联网访问其中的任何内容。 Web 经常与 Internet 混淆。但两者完全不同，却又非常相互依存。
简而言之， 网络 是由无限量的信息组成的信息系统，从简单的文档和图像到高度复杂的软件系统。只需点击互联网，即可访问网络上所有这些大量可用信息。
鉴于， 互联网 是互连的计算机网络的全球系统。
搜索引擎 像 Google 一样，您可以通过 Internet 搜索网络上可用的信息。
网络服务器 （主要是像谷歌这样的网站的服务器。远离你，但通过互联网与你相连）存储所有这些信息。它们是 24/7 不间断工作的计算机。
服务器在需要时向客户端提供资源。任何从服务器请求资源的设备都称为 客户 （主要是你）。但是您需要专门设计用于通过 Internet 与服务器通信的特殊软件。这个特殊的软件被称为 网页浏览器 .
简而言之，浏览器是一种使您能够访问网络的软件。
HTML——超文本标记语言
您在网络浏览器中看到的所有内容都是 HTML，无论是任何设备上的任何浏览器 - 移动设备、平板电脑、笔记本电脑、台式机等。
市场上有多种浏览器，例如 Google Chrome、Mozilla Firefox、Safari、Internet Explorer、Microsoft Edge、Opera、Brave 和其他各种浏览器。谷歌浏览器是开发人员的热门选择。但是你可以自由选择任何你喜欢的人。
HTML 被广泛用于创建网站、Web 应用程序和网页以及可通过 Web 浏览器访问的其他内容。
Facebook、Twitter、YouTube、Instagram、亚马逊、谷歌、维基百科等网站以及您在网络上访问的几乎所有其他网站都是使用 HTML 构建的。
这就是为什么如果你想在网络上构建任何东西，你必须学习 HTML。
什么是 HTML
HTML **** 代表 超文本标记语言。 它是创建网页的标准语言。 HTML 用于告诉 Web 浏览器如何显示内容。
一个典型的 HTML 网页由 元素 , 元素由 标签 和标签包含 内容 .这些元素一起创建了一个功能齐全的网站或网页。
有许多用于多种用途的 HTML 标记（例如添加段落、标题、列表、表格等）。您将在接下来的部分中了解它
HTML 5 是最新版本的 HTML。
HTML、CSS 和 JS
HTML 是其中之一 Web 开发中的 3 种主要语言 .这3种语言是：
HTML
超文本标记语言 是一种标记语言。 HTML 就像我们的骨架一样，它为网页提供基本的形状和结构。
CSS
层叠样式表 是一种样式语言。您可以使用 HTML 创建网页，但要使其更具视觉吸引力和吸引力，您将使用 CSS。
就像我们的皮肤给裸露的骨骼和肌肉增添了一层美感一样，CSS是用来美化HTML页面的。
JS
JavaScript 是一种脚本语言。它处理网页的所有逻辑（移动）部分。骨架 (HTML) 和皮肤 (CSS) 不能自行移动，它们需要肌肉的帮助才能移动，而 JavaScript 就像肌肉一样。它用于向网页添加逻辑，例如单击按钮时要执行的操作。
HTML、CSS 和 JS 一起用于创建网站或网页的功能齐全的前端。
后端和前端
网站的功能分为两部分，它们是-
前端
顾名思义，它是用户在浏览网站时会看到的网站的前端部分，任何具有前端编程知识的人都被称为 前端开发人员 .
前端开发人员可以使用 HTML、CSS 和 JS（以及其他常用语言和技术，例如 引导程序 ）。
后端
后端主要是指网站的服务器端，即网站或网页中用户无法看到或与之交互的部分。
在创建网站的前端以添加更多特性、功能和逻辑后，您将不得不使用 PHP、Python、Ruby 和 Java 等真正的编程语言作为其后端。任何具有后端编程知识的人都被称为 后端开发人员 .
全栈： 一个 全栈开发人员 是一个既了解后端又了解前端的人。全栈程序员可以处理网站的两面。
要成为一名全栈程序员，您应该了解前端（HTML、CSS 和 JS）、后端（PHP、Python 等）以及处理和开发数据库、框架和使用的最新 Web 技术的知识创建一个网站。
返回 HTML
HTML 不是一种编程语言，它是一种 标记语言 即它将告诉网络浏览器如何显示内容（构建网页）而不是如何执行特定任务。
例如，当您使用计算器时，编程语言可以指示您的计算机如何执行诸如计算数字和显示输出之类的操作，而像 HTML 这样的标记语言不能完成所有这些操作，它只会指示如何显示（结构）内容。
页面结构
每个 HTML 文档都必须以基本结构开始，该结构称为 HTML 骨架 或者 HTML 样板。 这是它的外观：
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body> <h1>完美平衡，一切都应该如此</h1> </body>
</html>
您需要将其放入您创建的每个 HTML 文档中。这是您以 HTML 格式构建自己的网页或网站的基础。
您也可以将其复制粘贴到您的 HTML 文档中以开始使用。
上述语法的进一步细分
** <!DOCTYPE html>** 声明定义此文档是 HTML 5 文档。
** <html>** element 是 HTML 页面的根元素。您将使用此标记声明一个 HTML 文档。
** <head>** **** 包含有关 HTML 页面的元信息。
** <title>** 您在此元素中写入的任何内容都将被视为 HTML 页面的标题。并且将显示为 Web 浏览器选项卡上的标题。
** <body>** 无论你在这个元素中做什么，都会被浏览器渲染并且对用户可见。您将在此元素中编写大部分 HTML 代码。
区分大小写
HTML 不是区分大小写的语言。您可以根据需要编写 HTML。
你可以使用 小写 （如示例 1 所示）或 大写 （示例 2）甚至 混合案例 （示例 3）。
示例 1- 小写
<a href=“[ https://website.xyz](https://website.xyz) ”> 点击这里
示例 2- 大写
<A HREF=“[ https://website.xyz](https://website.xyz) "> 点击这里
示例 3- 混合情况
<A HREF=“[ https://website.xyz](https://website.xyz) "> 点击这里
或者
<a HrEf=“[ https://website.xyz](https://website.xyz) "> 点击这里
HTML 是一种非常灵活且易于使用的语言。您可以使用任何大小写编写 HTML，如上所示。 但我建议您始终使用小写字母。
如何以及在何处编写 HTML
您可以在一个 IDE——集成开发环境 （也称为 代码编辑器 ) 但如果你不知道那是什么，那么默认的文本编辑器就像 记事本 将是您的最佳选择。
IDE 是专门为编程而创建的软件。虽然记事本是 文本编辑器 .开始使用 HTML 时，您可以使用任何文本编辑器，例如记事本。但是您可以稍后切换到 IDE 以更有效地编写代码。
大多数程序员更喜欢使用 IDE 而不是像记事本这样的文本编辑器。但建议初学者从记事本入手。让自己熟悉 HTML，然后切换到 IDE。
下面，我列出了 3 个流行的代码编辑器，您可以使用它们来编写 HTML 代码（以及到他们的官方网站的链接，您可以从中下载它们）：
你也可以试试 这个 随时随地进行编码的 Android 应用程序。
保存 HTML 文档
完成 HTML 编码后，您必须保存它。如果您使用记事本，请单击 **Ctrl+s** 保存您的文档。永远记得添加 .html HTML 文档的文件扩展名。如果以任何其他文件扩展名保存，则不会将其视为 HTML 文档。
成功保存文件后，您可以通过任何网络浏览器查看它。
标签
标签是 HTML 中预定义的魔法咒语，用于执行各种任务，例如添加段落或标题。几乎所有东西都有标签 <p> 为了 段落 , <h1> 为了 标题 , <title> 为了 标题， 和许多其他人。
打开标签
** <h1>** 现实往往令人失望</h1> **打开标签** -<h1>粗体字
结束标签
<h1>现实可以是我想要的任何东西 ** </h1>** **结束标签** -</h1>粗体字
元素
这是一个 HTML 元素的样子：
<tag>内容</tag>
第一的 ** <tag>** 是开始标签。
最后的 ** </tag>** 带有正斜杠的是结束标签。
开始和结束标签之间的一切都是 内容 .
一起一个 开始标签 和一个 结束标签 和一些 内容 它们之间构成一个 HTML 元素 .
示例 1- 元素
<h1>我是钢铁侠</h1> **打开标签** -<h1> **内容** - 我是钢铁侠 **结束标签** -
示例 2- 元素
<p>我是格鲁特</p> **打开标签** -<p> **内容** - 我是格鲁特 **结束标签** -</p>
示例 3- 元素
<b>我是不可避免的</b> **打开标签** - **内容** - 我是不可避免的 **结束标签** -
没有必要在之间添加空格 标签 和 内容 .在上面的示例中，添加了空格以提高可读性。如果您愿意，您可以删除空间，但其他所有内容都必须与上图相同。
容器标签和空标签
大多数 HTML 标记都是成对出现的（同时具有开始标记和结束标记），例如：
** <p>** 一些内容 ** </p>**
这些标签被称为 容器标签 .
但是 HTML 中有一些讨厌的标签没有结束标签，例如：
一些内容 ** <br>** 一些内容
在这个例子中 <br> 定义换行符的标签是一个空标签，因为它没有任何结束标签。每个有开始标签但没有结束标签的标签称为 空标签 .
属性
HTML标签也可以有 属性。 属性用于修改标签。您可以使用不带属性的标签，但不能使用不带标签的属性。
属性具有以下语法：
<tag attribute=“value of attribute”>内容</tag>
示例 1- src 属性
<img src=“image-location.jpg”>
标签 - <img>
属性和价值 - src="图像位置.jpg"
内容 - 我是最好的
功能 - 它指定要显示的图像的路径。
示例 2- 类属性
<p class=“paragraph”>我是最好的</p>
标签 - <p>
属性和价值 - 类=“段落”
功能 - 为 HTML 元素定义类以使用 CSS 或 JS 对其进行修改。
示例 3- 链接 属性
<a href=“[ https://](https://website.xyz) 网站.xyz”>点击这里
标签 - <a>
属性和价值 - 链接=“[ https://](https://website.xyz) 网站.xyz”>
功能 - 它指定网页链接指向的 URL。
HTML中有无数的属性。记住它们中的每一个都是一项乏味的任务。这就是为什么我创建了一个包含所有常用 HTML 属性的备忘单。
您可以将其保存在桌面上，或者您甚至可以打印这个设计精美的备忘单并将其挂在墙上。这样您就可以在编码、撰写文章或创建网站时随时潜入高峰。
赶快， 点击这里 获取您的 HTML 属性备忘单 完全免费。
标题
标题是 HTML 中非常重要的一部分。它们非常简单但非常有用。在 HTML 中添加标题 <h> 使用标签， <h> 是“标题”一词的缩写。
但是你不能使用 <h> 单独使用它时，您应该将它与代表 HTML 中标题级别（大小）的数字一起使用。
HTML有六级标题-
<h1>标题 1</h1> <h2>标题 2</h2> <h3>标题 3</h3> <h4>标题 4</h4> <h5>标题 5</h5> <h6>标题 6</h6>
这是上面的代码在浏览器中的样子
在哪里 <h1> 是最重要的标题，而 <h6> 是最不重要的一个。
每个标题都有一个默认大小（h1 最大，h6 最小）。但是，如果您不喜欢默认值，也可以使用 CSS 更改它们的大小。
段落
在标题之后，您应该知道如何在 HTML 中添加（和使用）段落。段落非常重要。你不能把所有的东西都写在标题里。 HTML 有一个专门为段落制作的不同标签。
<p> 标签用于添加段落。 ** <p>** 代表“段落”。
这是在 HTML 中添加段落的方法：
<p>这是一个 HTML 段落</p>
输出：
图片
图像是任何网页的灵魂。在 HTML 中添加图像 <img> 使用标签。它是一个空标签。有几个属性可以与 <img> 标签。修改图像的大小、位置和边框等各种参数。
语法 - 图像
要将图像添加到 HTML 网页，您需要使用以下代码：
<img src=“image_location.jpeg” alt="“图片" xyz” width=“100px” height=“100px”>
这里， <img> 标签用于声明图像。
在那之后 源代码 属性允许您指向您的图像文件。
文本输入 alt 当图像无法显示时（由于互联网连接速度慢或文件损坏或丢失等任何原因），将显示属性。
这 高度 和 宽度 属性声明图像的高度和宽度。
这是上述代码的示例以及浏览器将如何显示它。
HTML 代码：
<img src=“/home/test00113/Downloads/GoldDSide.jpeg” alt="“狗狗币”" width=“359px” height=“269px”>
结果：
替代文字：
我从上面的示例中更改了图像的位置，以演示 alt 属性的工作原理。
您可以通过创建 HTML 页面并在其中插入图像来自行测试。正确声明 alt 属性。首先，加载页面以检查图像是否显示。然后更改图像的位置或将其从计算机中删除，而无需对代码进行任何修改。现在在浏览器中重新加载页面，以便能够看到 alt 属性的作用。
手风琴
手风琴是您可以在 HTML 中创建的最简单但最酷的东西。
这就是手风琴的样子
Accordion content hidden (Left) | Accordion content visible (Right)
语法 - 手风琴
<details>
<summary>手风琴</summary>
<p>手风琴琴身</p>
</details>
它们主要用于网站的常见问题解答部分。
您还可以使用手风琴创建如下所示的常见问题解答页面。
您还可以像这样使用 CSS 进一步设置样式
链接
链接是网页不可分割的一部分。它们帮助用户在网络上从一个页面导航到另一个页面。
链接非常有用，可用于各种不同的目的。 HTML 链接是 超链接 .
语法 - HTML 链接
要创建超链接，请使用以下语法：
<a href=“url”>点击这里</a>
链接由 <a> 标签。它被称为 锚 标签。
这 链接 属性定义链接的目的地。
带下划线的文字是内容。它将对用户可见。
示例 - 超链接
在这个例子中，我创建了一个指向 Wikipedia.org 的链接：
<a href=“[ https://](https://google.com) wikipedia.org”>点击这里
以下是浏览器显示的方式：
目标
默认情况下，HTML 中的所有链接都将显示在当前浏览器选项卡中。但是，如果您不希望您的链接显示在同一个选项卡中怎么办。这里是哪里 目标 属性会派上用场。
Target 属性指定打开链接的位置。
它可以具有以下值：
_自己— 链接将在同一选项卡中打开。它也是所有链接的默认目标值。_最佳— 链接将在整个窗口中打开_空白的— 链接将在新标签页中打开_父— 将在父框架中打开
示例 - 目标
要创建在新浏览器选项卡中打开的 Wikipedia 链接，请使用以下代码：
<a href=”https://www.wikipedia.org/" target=”_blank”>带我去维基百科</a>
浏览器预览：
注释
您可以在 HTML 代码中添加注释。它们不会出现在浏览器中。他们习惯于采取 笔记 或者 注释 您的代码供以后参考。
语法 - 注释
要在 HTML 代码中添加注释，您应该使用以下语法：
<!-- This is a comment -->
之间的一切 <!-- 和 --> 将被视为评论。
注释可以是单行的：
<!-- This is a comment -->
或多行：
<!--comments are very useful to add information for later reference in your HTML code. You can also use them to hide elements temporarily -->
它们在浏览器中不可见，但用于记录您的 HTML 代码。
示例 - 评论
<!--This is Page Title-->
<h2>宇宙需要修正</h2> <!--This is a paragraph -->
<p>这个宇宙是有限的，它的资源是有限的……如果生命不受控制，生命将不复存在。</p> <!--This is another paragraph -->
<p>这是另一段</p>
浏览器预览：
文本格式
HTML 有各种元素来格式化文本，例如 粗体、斜体、下标、上标、 和更多。
以下是 HTML 中可用的各种文本格式选项：
<b>- 此标签用于显示粗体文本（没有任何额外的重要性）。<i>- 斜体<strong>- 此标签将显示具有额外重要性的文本（通常以粗体显示）。<em>- 强调文字<sub>- 下标<sup>- 上标<del>- 删除的文字<mark>- 标记文本<ins>- 插入文本<small>- 较小的文字
示例 - 文本格式
HTML 代码：
**大胆的：** <p> ** <b>** 氧 ** </b>** 是带有符号的化学元素 ** <b>** ○ ** </b>** 和原子序数 8。</p> **斜体：** ** <i>** 氧是地球上最丰富的元素，仅次于氢和氦。 ** </i>** **强的：** <p>它是 ** <strong>** 第三丰富 ** </strong>** 宇宙中的元素。</p> **强调：** ** <em>** 氧气以氧化物的形式几乎占地壳的一半。 ** </em>** **下标：** <p>另一种形式的氧气，臭氧（O ** <sub>** 3 **)** 强烈吸收紫外线UVB辐射。</p> **上标：** <p>氧气的热导率为26.58×10 ** <sup>** -3 ** </sup>** W/(m·K)</p> **标记：** <p>大多数生物体的质量是 ** <mark>** 氧 ** </mark>** 作为水的成分。</p> **删除：** <p>氧气是一种 ** <del>** 放射性的 ** </del>** 非金属。</p> **插入：** <p>氧气是一种高度<del>放射性的</del> ** <ins>** 反应式 ** </ins>** 非金属。</p> **小的：** ** <small>** 臭氧是氧的同素异形体。 ** </small>**
输出：
表
表格是在 HTML 中学习的最有用的东西之一。它们允许您按行和列排列数据。您还可以使用表格进行布局。
这是 HTML 表格的样子：
创建表
这是创建简单 HTML 表格的方法：
<table border=“1px”> <tr>
<th>表头</th>
</tr> <tr>
<td>表数据</td>
</tr> </table>
表由 <table> 标签。内 桌子 您可以拥有各种元素，例如表格标题、表格行和列。
表头由 <th> 标签。
要将一行添加到您的表中，您需要使用 <tr> 标签。之间的一切 <tr> 和 </tr> 是一个表格行。
在表格行内，需要添加表格数据或内容，可以由 <td> 标签。
示例 - 表
<table border=“1px”> <tr>
<th>国家</th>
<th>首都</th>
<th>货币</th>
</tr> <tr>
<td>塞浦路斯</td>
<td>尼科西亚</td>
<td>欧元</td>
</tr> <tr>
<td>斐济</td>
<td>苏瓦</td>
<td>斐济元</td>
</tr> <tr>
<td>芬兰</td>
<td>赫尔辛基</td>
<td>欧元</td>
</tr> </table>
这是上面的例子在浏览器中的样子：
您可以使用 CSS 以及将您的表格转换为以下内容：
HTML Table with default styling (Left) and Table styled using CSS (Right)
表格可以包含各种数据，例如文本、图像、链接和按钮。
越线
<br> 当您需要在 HTML 中添加换行符时，标记非常有用。
这就是它的工作原理
<p>第一行<br>第二行<br>三线</p>
这就是上面的例子在没有任何换行符的情况下的样子
您可以使用 <br> 在任何 2 个 HTML 元素之间添加换行符。
列表
HTML 具有用于以列表形式呈现数据的特定标签。
无序列表
<ul> tag 定义一个无序列表。列表中的每个项目都以 <li> 标签。
<ul>
<li>夏天</li>
<li>秋天</li>
<li>冬天</li>
<li>春天</li>
</ul>
有序列表
<ol> 标签定义了一个有序列表。列表中的每个项目都以 <li> 标签。
<ol>
<li>夏天</li>
<li>秋天</li>
<li>冬天</li>
<li>春天</li>
</ol>
描述列表
这 <dl> 标签定义了一个描述列表。
描述列表中的每个项目（术语）都以 <dt> 标签。
这 <dd> 标签描述描述列表中的每个术语。
<dl>
<dt>夏天</dt>
<dd>- 四个温带季节中最热的。</dd> <dt>秋天</dt>
<dd>- 树木在秋天落叶。</dd> <dt>冬天</dt>
<dd>- 冬天是一年中最冷的季节。</dd> <dt>春天</dt>
<dd>- 春天的天气非常宜人。</dd>
</dl>
学习 HTML 可能很容易，但记住它拥有的所有组件肯定不是开玩笑。有时，即使是专业的开发人员或 HTML 书呆子中最呆板的人也无法记住所有这些东西，因为它他妈的太庞大了。
特别是，如果您是初学者，您的 a*s 可能还没有准备好处理所有这些信息过载。这就是为什么我创建了一个简单（但非常有用）的备忘单，其中包含所有常用标签及其描述。
而且您知道交易中最好的部分是什么，它绝对是免费的。
赶快， 点击这里 获取您的 HTML 标签备忘单 完全免费。
项目一
恭喜你已经学会了足够的 HTML 来创建基本的东西。
但是，到目前为止，您还没有用所学的任何东西创造任何东西。
这就是为什么这里有一个有趣且简单的项目供您自己用 HTML 创建。该项目旨在测试您的实践知识。
您还将使用我在上面教给您的大部分内容来完成这个项目。这非常简单，但仍然是一个具有挑战性的项目（尤其是对于初学者）。
这就是您将在此项目中创建的内容
你明白了吗？
如果你没有，别担心，我在这里为你解决问题。
这个项目的核心基本上是一个 HTML 描述列表。您需要将 4 个季节作为术语添加到列表中。然后描述它们。它应该是这样的：
每个术语都应该是一个 3 级标题，并带有下划线。像这样：
提示：查看文本格式部分以了解如何获得下划线。
现在添加表情符号，你可以简单 复制粘贴 将它们添加到您的 HTML 代码中。这就是一切应该如何处理的：
现在进行描述 大胆的 .像这样：
成功完成这一切之后。您将在列表中添加子描述。在描述和子描述之间添加换行符。利用 <small> 子描述文本的标签。一切都应该像这个图像（如果正确完成）：
最后，添加一个来源。将其链接到每个季节的相应维基百科页面。
如果您正确完成了以上所有步骤，最终的结果应该是这样的
我不会向您展示 HTML 代码，因为上面已经教过您创建此项目所需的任何内容。您将自己创建它。完成后，它应该与上图相同。
恭喜，如果您第一次正确完成。到目前为止，您已经成功地实施了我教给您的任何内容。你可以继续你的 HTML 征服 .
但是如果你无法完成这个项目（没有任何帮助）。我建议您返回并正确理解基础知识。然后继续前进。
分区
这 <div> 标签定义 HTML 文档中的一个部分。它充当 HTML 元素的容器。
Div 通常使用 CSS 设置样式或使用 JavaScript 进行修改。
Div 可以用作任何 HTML 元素的容器。
语法 - div
<div>内容</div>
示例 - div
一个使用 CSS 样式的 div 容器。
<!DOCTYPE html> <html>
<head> <style>
.div1 {
背景颜色：浅绿色；
边框：2px 纯红色；
文本对齐：居中；
}
</style> <title>页面标题</title>
</head>
<body> <div class=“div1”>
<h3>Div 内的标题</h3>
</div> </body>
</html>
浏览器会在前后自动添加换行符 div 元素。这就是为什么每个 div 都会从一个新行（而不是同一行）开始。
跨度
您可以将其用作 HTML 元素的容器或在元素内（例如 <p> ) 更改或控制它的一部分（使用 CSS 或 JS）。
Span 与 div 非常相似。两者都充当容器。两者大多与 CSS 或 JS 一起使用。
但是跨度是一个 排队 元素同时 div 是块级元素。
语法 - 跨度
<span>内容</span>
示例 - 跨度
在这个例子中，我演示了如何使用 span 来改变元素一部分的外观（使用 CSS）。
HTML
<p><span class “span1”>互联网</span>是互连的计算机网络的全球系统。</p>
CSS
.span1{
红色;
}
结果：
CSS
到目前为止，我已经教了你很多 HTML。但仅 HTML 不足以创建一个真正的、功能齐全的网站。因为 HTML 只是一种标记语言。它只会形成网站（或网页）的非常基本的结构。
为了使您的网站看起来很棒，您需要使用 CSS 对其进行样式设置。
但在我们深入研究 CSS 之前，我想让你看看这里——
这是使用 HTML 创建的基本计算器的外观：
这是与上面相同的 HTML 页面，具有完全相同的 HTML 代码，但带有 CSS：
注意他们两个看起来完全不同。即使它们都具有相同的 HTML 代码。第二个看起来好多了。那是因为第二个是使用 CSS 设置样式的。
这两个例子都展示了带有和不带有 CSS 的 HTML 的能力。没有 CSS，它是功能性的，但不是很赏心悦目。
级联样式表或 CSS 是一种样式语言。它用于使无聊的 HTML 页面看起来很酷。
CSS 用于（与 HTML 一起）设置 HTML 元素的样式。使用 CSS，您可以控制元素外观的各个方面。
您可以使用 CSS 更改和控制颜色、大小、字体、格式、间距、位置、对齐方式等等。
CSS 3 是 CSS 的最新版本。
如何使用 CSS？
有多种选项可以将 CSS 添加到 HTML 文档中。但我不想浪费你的时间。这就是为什么我们将只专注于 外部 CSS .因为这是最常用的 CSS 使用方法。
使用外部 CSS 时，您将拥有不同的 CSS 文件（与您的 HTML 文件完全分开）。
CSS 文件不应包含任何 HTML 代码。您可以在任何文本编辑器中编写 CSS，但请记住使用 “.css” 文件扩展名。
正确保存后，您需要将其添加到 HTML 文件中。
这是将 CSS 添加到 HTML 文档的方式：
<link rel=“stylesheet” href=“style.css”>
在 HTML 文档的 head 标记中添加上述代码。将 style.css 替换为文件的位置。
它应该是这样的：
<!DOCTYPE html>
<html>
<head> ** <link rel=“stylesheet” href=“style.css”>** <title>页面标题</title>
</head>
<body> <h1>完美平衡，一切都应该如此</h1> </body>
</html>
顺便说一句，这是 CSS 文件的外观：
使用外部 CSS 文件，您只需更改文件即可更改整个网站的外观。
类属性
HTML 元素在 CSS 的帮助下使用 CSS 设置样式 班级 属性。
这 班级 属性定义 HTML 元素的类。稍后可以在以下帮助下使用 CSS 或 JS 修改该元素 班级名称 .
要声明 HTML 元素的类，您应该使用以下语法：
<tag class=“class_name”>内容</tag>
您可以为文档中的任何 HTML 元素声明一个类，例如：
**标题：**
<h2 **类=“页面标题”** > 世界你好！</h2> **关联：**
<a href=“[ https://wikipedia.org](https://wikipedia.org) ” **类=“我的链接”** >点击这里 **桌子：**
<table **类=“表1”** 边框=“1px”> <tr>
<th>表头</th>
</tr> <tr>
<td>表数据</td>
</tr> </table>
声明 HTML 元素的类后，您需要在 CSS 中对其进行样式设置。
CSS 样式
您可以使用以下语法使用 CSS 修改 HTML 元素 -
选择器 {
适当的价值;
另一个属性：值；
}
你可能想知道这里发生了什么。让我为你简化一下。
CSS 语法有两部分，一个选择器和一个声明块。
选择器指向要设置样式的 HTML 元素。
声明块具有用分号 (😉 分隔的声明。
声明块由 CSS 属性名称及其值组成。属性和值用冒号 (😃 分隔。
声明块被花括号包围。
这就是典型 CSS 块的语法。
示例 - CSS 语法
在此示例中，我将向您展示如何在 CSS 中设置 HTML 标题的样式。我将更改它的颜色、对齐方式和字体。
.myheading{
红色;
文本对齐：居中；
font-family：时代新罗马；
}
这是没有任何样式的标题的样子：
这是应用一些 CSS 魔法后的样子：
笔记：
- 您可以使用声明一个类
班级任何 HTML 元素的属性。 - 类名不能以数字开头。
- 相同的样式将应用于具有相同类名的所有元素。
- 类名区分大小写。
CSS 属性
颜色
要更改 CSS 中元素的颜色，您应该使用以下语法：
.选择器{
红色;
}
Color of HTML heading changed using CSS (Right) and without any styling (Left)
颜色可以是名称（例如红色、黄色、绿色）、RGB 值或十六进制值。
使用 CSS 你也可以改变背景颜色，像这样
.选择器{
背景颜色：绿色；
}
Background color of HTML heading changed using CSS (Right) and without any styling (Left)
结盟
控制文本的对齐方式。
.选择器{
文本对齐：居中；
}
Text alignment of an HTML heading changed using CSS (Right) and without any styling (Left)
文本对齐 还可以具有以下值：
剩下正确的中央
字体
.选择器{
字体系列：Times New Roman；
字体大小：40px；
}
Font and size of an HTML heading changed using CSS (Right) and without any styling (Left)
字体系列 可用于更改字体。
字体大小 定义文本的大小。
边界
在 CSS 中创建边框。
.选择器{
边框：2px 纯红色；
}
这是分别声明边框大小、样式和颜色的简写属性。
这就是它在浏览器中的显示方式
Border of an HTML heading with CSS (Right) and without any styling (Left)
把它们放在一起
HTML 是一种健壮、轻量级且面向未来的语言。事实上，第一个 HTML 网页是 1991 年由万维网的发明者创建的， 蒂姆·伯纳斯·李， 和 **** 它仍然可以在所有现代浏览器上完美运行。这展示了 HTML 的面向未来的特性。顺便说一句，您可以检查该网页 这里 .
在本教程中，我已尽力涵盖与 HTML 和 CSS 相关的所有重要主题。但是 HTML 很庞大，CSS 也很庞大。这就是为什么没有一篇文章可以在这么短的时间内教你完整的 HTML（或 CSS）。还有很多东西要学。但希望你现在有了基础。
您现在可以更深入地了解 HTML 和 CSS。起初可能看起来令人生畏。但请记住，每当学习新事物时，它总是如此。您应该从创建简单的网页开始练习 HTML。
我写这篇文章的目的是简单地介绍 Web 开发的基础知识，并用一种简单易懂的语言将它们传授给每个人（尤其是初学者）。这就是为什么我尽可能避免使用技术术语。
如果你还在这意味着你已经完成了本教程（恭喜，如果是的话），现在你知道了 HTML（和 CSS）的基础知识，你现在可以用 HTML 创建基本的网页或简单的网站了。
在掌握了 HTML 和 CSS 基础知识之后，您还应该考虑学习 JavaScript (JS)。因为这些是 Web 开发中的 3 种主要语言。它们共同赋予您在网络上创造任何您能想象的东西的能力。
这就是本文的全部内容 大家 .我希望你喜欢它并学到新的东西。下期见。
学习 HTML 可能很容易，但记住它拥有的所有组件肯定不是开玩笑。有时，即使是专业的开发人员或 HTML 书呆子中最呆板的人也无法记住所有这些东西，因为它他妈的太庞大了。
特别是，如果您是初学者，您的 a*s 可能还没有准备好处理所有这些信息过载。这就是为什么我创建了简单（但超级有用） 备忘单 在一个地方包含所有常用的标签和属性以及它们的描述。
您可以在您的桌面（或智能手机）上下载这些备忘单以供快速参考。它们还可以打印，这意味着您甚至可以打印并将它们挂在墙上，以便在有疑问时偷看。您可以随时随地离线访问它。
属性备忘单 — 点击这里 完全免费。
标签备忘单 — 点击这里 完全免费下载。
更多内容在 ** 纯英语.io** .注册我们的 ** 免费每周通讯** .跟着我们 ** 推特** , ** 领英** , ** YouTube** ， 和 ** 不和谐** .
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通