HTML初学者教程：使用HTML从头开始构建网页
如果您是Web开发的新手，并且想开始使用令人兴奋的Web设计世界，那么您可能已经听说过HTML，它是每个在线Web页面的基础。任何成功的Web开发人员或设计师都必须对HTML有深刻的了解。
今天，我们将学习有关HTML的初学者教程，并逐步构建网页。大多数Web开发教程都立即谈论CSS和JavaScript，但是在继续下一步之前，我们希望确保您对HTML有扎实的了解。
我们将讨论您将在整个Web开发人员职业中使用的HTML基础知识。不需要具备编程方面的先决知识，但是要使本文成功，对编程有一个基本的了解是很有帮助的。
今天我们将介绍：
- 什么是HTML？
- 重要的HTML术语和格式
- 如何用HTML构建自己的网页
- 接下来要学什么
成为前端开发人员。
作为前端开发人员开始您的旅程的理想场所。无需任何先验知识，您将精通HTML，CSS和JavaScript。
什么是HTML？
超文本标记语言（HTML）是我们用于制作网页的标记语言。它是您在互联网上遇到的每个网站的基础。HTML想象成砖块，你需要为网络构建什么。编写HTML代码后，我们可以向页面添加其他语言，例如CSS和JavaScript，以添加交互性，样式等。
想象一下您将在文字处理器中创建的文档。该文档通常将使用不同的字体大小来指示文本的各个部分，例如页眉，主要内容，页脚，目录等。HTML是构建该文档并设置文本大小的过程。
HTML提供了网站的结构和布局。我们使用各种元素定义该结构。但是，为了使浏览器显示出我们想要的样子，必须明确告知它每个内容是什么。HTML是我们交流和告诉计算机如何呈现的方式。计算机可以解释我们的HTML元素并将其翻译到屏幕上。
自行浏览HTML。
您可以通过右键单击渲染页面并选择“查看源代码”来查看任何网站的HTML源代码。这将打开一个页面，其中详细说明了该站点的HTML基础。通过本文尝试一下！
重要的HTML术语和格式
既然我们知道HTML是什么，那么在逐步指导之前，我们先简要介绍一些关键术语。您将在整个Web开发生涯中使用这些基础知识！
标签和元素
一个元件是代表页的语义的HTML文档的单独的组件。例如，该title元素转换为页面标题。
要创建元素，我们使用标签。可以将它们视为页面上每个内容的描述符。大多数标签都是不言自明的。
<p>：用于描述一个段落<img>：添加图片<h1>：将文本设置为最大尺寸的标题<a>：锚点将创建指向其他HTML文件的超链接
要使用标签，我们将内容包装在开始标签和结束标签之间。结束标记使用正斜杠/，而开始标记不使用正斜杠。HTML标记不区分大小写，因此<P>与相同<p>。
<p> This is a paragraph element. </p>
当您想应用多个标签时，可以嵌套HTML元素。假设您想创建一个也大胆的段落。您可以编写以下HTML代码：
<p><strong>These tags are nested properly.</strong></p> <p>This tag is not nested.</p>
属性和超链接
HTML 属性提供有关元素的其他信息。可以将它们视为元素的属性。将属性放置在开始标记中，使用=符号，然后将属性值括在引号中" "。
<tagName attribute_name="attribute_value"></tagName>
属性可以对我们的元素进行各种处理，例如嵌入图像，添加颜色，声明页面语言或添加标题。例如，我们可以使用以下格式在文本中添加颜色。
<h1 style="color:green">Hello, World!</h1>
注意：您可以使用十六进制颜色代码（用于特定颜色）或HTML内置的140种文本颜色名称之一添加颜色。
属性的最常见用途之一是超链接。我们可以使用锚标记将任何HTML页面连接到另一个HTML页面。该href属性将在两个站点之间创建连接。
<a href="http://www.google.com">Google</a>
标题和清单
标题是我们指定主标题和子标题之间的区别的方式。HTML标准具有六个文本标题元素，分别命名为h1（最大）到h6（最小）。
注意：标头用于在语义上表示文本。这与指定字体大小不同。我们使用CSS更改字体大小。
<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>
如果我们要列出项目（作为编号列表的项目符号），则可以使用<li>标签。我们可以创建无序列表（项目符号）或有序列表（编号）。
- 无序列表以
<ul>标签和示<li>教项目的嵌套标签开始。 - 有序列表从
<ol>标签和示<li>教项目的嵌套标签开始。<h1>Grocery Items</h1> <ul> <li>Eggs</li> <li>Apples</li> <li>Carrots</li> <li>Noddles</li>
<h1>Shopping Instructions</h1>
<ol>
<li>Go to the store.</li>
<li>Locate eggs, apples, carrots, and noodles.</li>
<li>Go to checkout counter.</li>
<li>Scan and purchase items.</li>
带<ol>标记的有序列表
添加图像：<img>标签
我们可以使用<img>标签将图像添加到我们的网页。我们需要添加一个src属性，其中包含该图像的文件路径。您还将包括一个alt属性，该属性在图像未加载的情况下提供备用的文本描述。
在下面的示例中，我们还定义了两个class属性。class属性用于使用标识符标识特定元素。这样就可以在代码的后面部分使用元素。元素可以具有多个类值，例如标题和标题，如下所示。
注意： image标签不使用结束标签。
<h1>Waterfall Photography 101</h1> <div class="imgContainer"> <img src="/udata/DErqVR5q0Pv/longexposurewaterfall1.jpg" alt="Long Exposure Waterfall"> <h4 class="caption">Learn how to take stunning waterfall pictures!</h4>
我们可以通过将表的数据转换为行和列来将表添加到网页。每个行/列对将具有与其关联的一块数据，称为表单元格。那么，我们如何在HTML中建立表格？
首先，我们使用<table>标签声明一个HTML表。然后，我们使用<tr>标记将行添加到表中。从那里，我们用<td>标签指定单元格。
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</table>
请看下面的示例，但是请注意，该表完全没有样式化。它只会列出提供的数据。如果要向表格添加样式（背景颜色，填充，边框等），则必须使用CSS语言。
<table>
<tr>
<th>Name</th>
<th>Date of Birth</th>
<th>Weight</th>
</tr>
<tr>
<td>Khalid</td>
<td>12/13/1994</td>
<td>130</td>
</tr>
</table>
格式化HTML文档
现在我们知道了HTML的术语，让我们讨论格式化的基本知识。在讨论下面的每个部分之前，我们将看一个基本的HTML文件。
<DOCTYPE! html>
<html>
<head>
<title>A Basic Web Page</title>
</head>
<body>
<h1>First HTML File</h1>
<p>Congratulations! You're learning how to create a webpage.</p>
</body>
</html>
第一行<DOCTYPE! html>称为doctype声明。这向浏览器指示文件写入的HTML版本。此文件指示文件以HTML5编写。
在第二行中，我们编写了开始<html>标记以指示根元素。从那里，我们分支成树状结构中的其他元素。要正确定义HTML文件，我们必须在根目录中放置<head>和<body>元素。
- 该
<head>元素包含有关文件的支持信息。我们称此为元数据。必须<title>在<head>元素正下方提供页面标题。 - 该
<body>元素包含我们的文件，该文件会被浏览器呈现的主要内容。只能有一个<body>元素。您编写的大多数HTML代码都将存在于此。 body然后，在元素内，跳转到最高级别的标题<h1>和一个段落<p>。
从该示例中可以看到，一些元素是内联的，而其他元素是块级的。块级HTML元素占据网页的整个宽度，并从新的一行开始。其中一些元素包括标题，列表和段落。内联元素不采用完整宽度，而是与文本内容内联。一些示例包括锚点，图像和粗体文本。
免费成为前端开发人员。
这是开始作为前端开发人员的理想之地。无需任何先验知识，您将精通HTML，CSS和JavaScript，从而使您自己可以构建美观，实用的网站和Web应用程序。
如何使用HTML构建自己的网页
好了，现在我们知道了HTML的基本术语以及如何正确格式化HTML文件。但是您实际上是如何制作网页的呢？让我们通过逐步指南来学习如何完成。我们将制作一个简单的“关于我”网页，其中包括以下内容：
- 标题和你的名字
- 一段中对自己的描述
- 您的技能清单
- 超链接到您喜欢的网站（或个人网站）
- 工作经历表
1.下载并打开HTML编辑器
网页是使用HTML编辑器创建的。可以将其视为文字处理器，但专门用于创建HTML文件。文本编辑器有许多选项，其复杂性和健壮性各不相同。如果您只是入门，建议您使用简单的文本编辑器，例如TextEdit（Mac），Notepad（PC）或Atom。大多数文本编辑器都可以免费下载。
在这里，我们将使用Educative的内置文本编辑器小部件，您无需下载任何内容即可浏览HTML。您还可以跟随自己选择的编辑器。
2.编写基本的HTML文件
打开编辑器后，启动一个新文件并编写HTML页面的基本结构。尝试使用上面我们学到的内容，在下面的代码小部件中自己编写基本结构。如果遇到问题，可以在下面找到答案。您应该包括：
- 文件类型声明
- 页面标题为“我的HTML网页：（您的名字）”
- 标头（
h1）“关于我：（您的名字）” - 关于您的1-2个句子的段落
- 正确的结束标签
3.超链接到您喜欢的网站（或个人网站）
现在，让我们向您的个人网站或您选择的网站添加链接。复制您上面编写的代码，然后在下面继续添加。在检查解决方案之前，请先尝试一下。我们将在您的个人描述下方添加此内容。它应包括：
- 您链接到的页面的标题
- 链接到该站点的URL
4.添加您的技能列表
现在，让我们添加您的技能的无序列表。复制上面的代码，然后继续添加HTML代码的下一步。尝试使用上面我们学到的知识，自己在下面的代码小部件中编写代码。如果遇到问题，可以在下面找到答案。您应该包括：
- 标头（
h3）称为“我的技能” - 5种技能的项目符号列表
- 列表的正确结束标记
5.添加一张工作经历表
现在，让我们添加您的工作经验表。复制上面的代码，然后继续添加HTML代码的下一步。尝试使用上面我们学到的知识，自己在下面的代码小部件中编写代码。如果遇到问题，可以在下面找到答案。您应该包括：
- 列标题：雇主，职称，年份
- 3个以前的工作，以上各列均已填写
6.完成并保存您的网页
完成所有这些步骤后，您将需要将HTML文件保存在计算机上。在记事本或其他文本编辑器菜单中选择文件>另存为。命名文件your_name.html，并将编码设置为UTF-8（HTML文件首选）。
保存文件后，可以在浏览器中打开它，方法是右键单击该文件，单击“ 打开方式”，然后选择浏览器。您将看到基本的HTML页面！
接下来要学什么
恭喜！您已经正式自己制作了一个简单的网页。您正准备成为前端Web开发人员。还有很多东西需要学习，但是HTML是一个非常重要的垫脚石。您的Web开发旅程的下一步是：
- 进阶HTML
- CSS（用于添加样式）
- JavaScript（用于交互）
- 库和框架（预写代码）
- 先进的Web开发概念
1. 本站资源转自互联网，源码资源分享仅供交流学习，下载后切勿用于商业用途，否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议，可自由转载、引用，但需署名原版权作者且注明文章出处
3. 未登录无法下载，登录使用金币下载所有资源。
IT小站 » HTML初学者教程：使用HTML从头开始构建网页
常见问题FAQ
- 没有金币/金币不足 怎么办？
- 本站已开通每日签到送金币，每日签到赠送五枚金币，金币可累积。
- 所有资源普通会员都能下载吗？
- 本站所有资源普通会员都可以下载，需要消耗金币下载的白金会员资源，通过每日签到，即可获取免费金币，金币可累积使用。
