HTML初学者教程:使用HTML从头开始构建网页

作者 : IT 大叔 本文共5095个字,预计阅读时间需要13分钟 发布时间: 2020-08-13

如果您是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基础。通过本文尝试一下!

重要的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>
 带<ul>标记的无序列表
<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表格

我们可以通过将表的数据转换为行和列来将表添加到网页。每个行/列对将具有与其关联的一块数据,称为表单元格。那么,我们如何在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页面!

HTML初学者教程:使用HTML从头开始构建网页插图(2)

接下来要学什么

恭喜!您已经正式自己制作了一个简单的网页。您正准备成为前端Web开发人员。还有很多东西需要学习,但是HTML是一个非常重要的垫脚石。您的Web开发旅程的下一步是:

  • 进阶HTML
  • CSS(用于添加样式)
  • JavaScript(用于交互)
  • 库和框架(预写代码)
  • 先进的Web开发概念
免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » HTML初学者教程:使用HTML从头开始构建网页

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论