HTML 基础知识以及您需要了解的一切

HTML 是用于构建和呈现万维网上内容的标记语言。它与 CSS 和 JavaScript 结合，使我们能够创建美观且交互性强的网站。

HTML 是 Web 的基础，因此它也是任何 Web 开发职业道路上最重要的语言。在本文中，我将教你 HTML 的基础知识。

好吧，在我们深入探讨 HTML 之前，我想先简单介绍一下 Web 的架构。这有助于我们更好地理解 HTML 的作用。

基本网络架构：

网站开发完成后，您需要将其托管在服务器上，以便万维网上的访问。所有服务器都有一个 IP 地址（例如 149.56.240.169），您可以将其想象成电话号码。我们通常会在该 IP 地址上添加一个域名（例如 scrimba.com），以便于记忆。

当你在浏览器中输入该域名时，它会向服务器发出请求。然后，服务器会发送一堆 HTML、CSS 和 JavaScript 文件，如下所示：

什么是 HTML？

我们把网站想象成一个人。我们会用这个比喻来理解我们的网站。HTML 最好被描述为网站的骨架：

任何 Web 开发人员都应该知道的 10 个常见 HTML 标签

标题：

HTML 标题是您想要在网页上显示的标题或副标题。

您可以选择<h1>最重要的标题和<h6>最不重要的标题。

句法：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <h1> This is a level 1 Heading Tag created using H1 Tag</h1>
  <h1>Heading level 1</h1>
  <h2>Heading level 2</h2>
  <h3>Heading level 3</h3>
  <h4>Heading level 4</h4>
  <h5>Heading level 5</h5>
  <h6>Heading level 6</h6>
</body>
</html>

输出：

2.段落标签：

标签<p>定义一个段落（一些文本）

<p>浏览器会自动在每个元素前后添加一个空行。

句法：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
</body>
</html>

输出：

3.锚标签：

该<a>标签定义超链接，用于从一个页面链接到另一个页面。

该元素最重要的属性<a>是 href 属性，它指示链接的目的地。

句法：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <a href="https://hashnode.com/">Visit Hashnode</a>
</body>
</html>

输出：

4.无序列表：

无序列表以<ul>标签开头。每个列表项都以<li></li>标签开头。

列表项默认以项目符号（小黑圆圈）标记。

句法：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
</body>
</html>

输出：

5.有序列表：

有序列表以<ol>标签开头。每个列表项都以<li></li>标签开头。

列表项默认会用数字标记。

句法

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ol>
</body>
</html>

输出：

6.图像标签：

该<img>标签用于将图像添加到网站。

它通常与“src”属性一起使用，该属性指定我们要使用的图像的路径。

句法：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
    <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1592977386906/ovfhUTMtA.png?auto=compress" alt="Hashnode" width="300" height="300">
</body>
</html>

输出：

7.输入标签：

该<input>标签指定一个输入字段，用户可以在其中输入数据，它也是最重要的表单元素。

它可以以多种方式显示，具体取决于类型属性（按钮、复选框、提交等）

句法：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</body>
</html>

输出：

8. 部门标签：

该<div>标签定义 HTML 文档中的分区或部分。

它用作 HTML 元素的容器 - 然后使用 CSS 设置样式或使用 JavaScript 进行操作。

标签内可以放入任何类型的内容<div>！

句法：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <div>
    <p>Hashnode is a free developer blogging platform that allows you to publish articles on your own domain</p>
    <p>It helps you stay connected with a global developers across the world</p>
  </div>
</body>
</html>

输出：

9.标签标记：

该<label>标签为几个输入元素定义一个标签。

在这个标签内，我们通常把想要显示的文本放在输入框旁边

要工作的属性<label>必须等于输入的 id 属性。

句法：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <form>
    <!-- Starts label tags from here -->
    <label for="student">
      Student
    </label>
    <input type="radio" name="Occupation" id="student" value="student"><br>
    <label for="business">Business</label>
    <input type="radio" name="Occupation" id="business" value="business"><br>
    <label for="other">Other</label>
    <!-- Ends label tags here -->
    <input type="radio" name="Occupation" id="other" value="other">
  </form>
</body>
</html>

输出：

10.Span标签：

标签<span>是一个内联容器，用于标记文本的一部分或文档的一部分。

它很像<div>元素，但是<div>是一个块级元素并且<span>是一个内联元素。

句法：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <p><span>Hash Node</span></p>
</body>
</html>

输出：

结束

希望你觉得这篇文章有价值。如果觉得有价值，请在评论区留言告诉我😊

如果你有任何问题，请随时在Twitter上联系我

现在您可以通过给我买一杯咖啡来表示您的支持。😊👇

给我买杯咖啡

感谢阅读😊

文章来源：https://dev.to/muthuannamalai12/basics-of-html-and-everything-you-need-to-know-about-it-369j