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元素并将其翻译到屏幕上。
自行浏览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个以前的工作,以上各列均已填写
接下来要学什么
恭喜!您已经正式自己制作了一个简单的网页。您正准备成为前端Web开发人员。还有很多东西需要学习,但是HTML是一个非常重要的垫脚石。您的Web开发旅程的下一步是:
- 进阶HTML
- CSS(用于添加样式)
- JavaScript(用于交互)
- 库和框架(预写代码)
- 先进的Web开发概念
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » HTML初学者教程:使用HTML从头开始构建网页
常见问题FAQ
- 没有金币/金币不足 怎么办?
- 本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
- 所有资源普通会员都能下载吗?
- 本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。