理解基本html代码的5个步骤
HTML是web的重要组成部分。虽然很少有网页设计师通过手工输入HTML来创建网页，但了解一点HTML仍然很方便。
我们将了解该语言的一些基础知识，包括什么是HTML，一些基本概念，以及它如何与其他语言交互。把这当成一个“傻瓜的HTML”速成班。
什么是html格式(html)？
HTML代表超文本标记语言。虽然它有时会与编程语言结合在一起，但这并不准确。
作为一种标记语言，HTML只允许您创建页面的显示布局。真正的编程语言，如java或C++，包含逻辑和命令。
虽然它很简单，但HTML是web上每个页面的主干。它负责将文本显示为粗体、添加图像和链接到其他页面。我们有一个HTML常见问题解答，解释更多。
您可以在浏览器中的大多数网页上单击鼠标右键，然后选择“查看页面源代码”或类似选项以查看它们背后的HTML。这可能还包含许多非HTML的代码，但您可以进行筛选。
即使您对标记或编程语言没有任何经验，学习一点HTML也会使您成为一个更明智的web用户。让我们通过五个基本步骤来帮助您了解HTML的工作原理。我们将在此过程中提供示例。
步骤1：理解标签的概念
HTML使用标签系统对文档的不同元素进行分类。
大多数标记成对出现，将受影响的文本包装在其中。下面是一个简单的例子
<strong>标记使文本加粗；我们稍后将详细讨论。）
<strong>This is some bold text</strong>.注意结束标记是如何以正斜杠（/）开头的。这表示结束标记，这很重要。如果不关闭标记，则从开始起的所有内容都将具有该属性。
然而，并不是所有的标签都有一对。一些HTML元素，称为空元素，没有内容并且独立存在。一个例子是
<br>标记，这是换行符。您可以通过添加斜杠（例如
<br />)但这不是绝对必要的。
步骤2：框架html布局
一个正确的HTML文档必须定义某些标记，这样才能正确地布局。这些是基本部分：
- Every HTML document must begin with <!DOCTYPE html>to declare itself as such. Thus, its closing tag, </html>, is the last item in an HTML file.
- Next, the <head>section includes information like the page title, various scripts that run on the page, and similar. As the name suggests, this typically comes right after the initial <html>tag. The end user doesn't see much of the content in these tags.
- Finally, the <body>tag holds the text of the page that the reader sees (plus much more). Here you'll find images, links, and more.
自从
<body>节构成了HTML文档的大部分，本演练的其余部分将查看与其相关的元素。
步骤3：格式化的基本html标记
接下来，让我们看看组成HTML文档的一些常见标记。当然，不可能涵盖所有元素，因此我们将回顾一些最重要的元素。如果您不满意，我们已经介绍了更多的HTML示例。
如果这些标签看起来很基本，请记住HTML是在1993年创建的。网络在早期阶段是非常基于文本的。
简单文本格式
HTML支持Microsoft Word中的基本文本样式：
- <strong>tags make text bold.
- <em>tags (which stands for "emphasis") will italicize text.
HTML还支持旧的
<b>标记为粗体和
<i>斜体字。但是，最好使用上面的方法。
总之，
<strong>和
<em>显示应该如何理解某些内容，而后面的标签只告诉您应该如何理解。这些以前的标签对于视障人士使用的屏幕阅读器来说更容易使用。
段落和其他部分
HTML的
<div>标记用于定义文档的一部分。通常，这与CSS（见下文）配合使用，以某种方式格式化节。
这个
<p>标记允许您将文本划分为段落。浏览器会自动在这些之前和之后放置一些空间，让您自然地分解文本。
您可以向文档中添加标题，并使用
<h1>通过
<h6>标签。H1是最重要的标题，而H6是最不重要的。几乎每一篇MakeUseOf文章都使用H2和H3标题来组织信息。
按Enter键在HTML文档中添加换行符实际上不会显示它们。相反，你可以使用
<br>添加换行符。
下面是一个使用所有这些的示例：
<div class="example"><h2>Example Heading</h2><p>This is one paragraph.</p><p>This is a second<br>paragraph split between two lines.</p></div>步骤4：**图像
图像是大多数网页的重要组成部分。您可以使用HTML轻松地添加它们，甚至可以为它们设置不同的属性。
使用
<img>标签。把这个和
src属性用于指定要从何处加载图像。
另一个重要的属性
<img>标签是
alt. Alt text允许您为屏幕阅读器描述图像，或者在图像加载不正确的情况下描述图像。您可以将鼠标移到图像上以查看其alt文本。
使用
width和
height元素来指定图像显示的像素数。
把它们放在一起，图像标签如下所示：
<img src="https://img.drphil.com/wp-content/uploads/2016/04/DrPhil-1280x720px-Shareimage.jpg" alt="Dr. Phil" width="1280" height="720">第5步：添加链接
如果没有其他网页的链接，万维网就不可能是一个大网站。使用
<a>标签，您可以链接到任何文本上的其他页面。
内部
<a>标签，标签
href属性指示链接的位置。简单地粘贴URL就可以了。你可以用
title元素添加当有人将鼠标悬停在链接上时出现的一点文本。
基本链接如下所示：
<a href="https://www.google.com/" title="Click here to search the web">Visit Google</a>这个
<a>tag还有许多其他可能的元素，但我们在这里不深入讨论。
html如何与css和javascript连接
我们已经了解了HTML的基本原理以及它是如何建立网页的。但是你可以想象，HTML本身并不能满足现代网络的需求。在“Web1.0”时代，简单的HTML网页很常见，那时大多数网站只不过是静态文本。
但现在，我们还有很多。CSS（层叠样式表）是一种用来描述用HTML编写的文本外观的语言。还记得吗
<div>我们讨论过的标签？在这个（和其他标记）中，可以定义
class属性。然后，在附带的CSS文档中，您可以编写说明如何实现这一点
class你应该看看。
您可以在HTML代码中内联定义这些样式元素，但这被认为是一种糟糕的做法，因为维护起来要困难得多。通过这些简单的CSS示例了解更多信息。还可以查看如何优化CSS文件。
javascript语言
我们已经看到HTML定义了内容，CSS决定了外观。JavaScript是对web至关重要的三者中的最后一个成员，它允许web页面响应人们的行为，而无需每次加载新页面。
例如，JavaScript允许网站在您尝试提交密码之前警告您输入的密码不符合其要求。网页设计师可以使用JavaScript在幻灯片中循环浏览图像或提示用户输入。
这些只是几个基本的例子。JavaScript是一种脚本语言，它能够做很多事情，而且比HTML和CSS复杂得多。更多信息，请参阅我们的JavaScript概述。
查看网页设计的完整范围超出了本文的讨论范围，但只需说HTML与其他语言交互来创建我们今天所知道的网页就足够了。
html的发展
需要注意的是，HTML不是静态的。HTML经历了几次修改，最近的是HTML5。值得注意的是，该标准支持本地视频嵌入，而不是依赖adobeflash等专有格式。
新的HTML迭代还声明某些过时的标记不时被弃用。这些包括可怕的标签，如
<marquee>和
<blink>（分别是卷轴和flash文本）常见于20世纪90年代的网站设计。所以请记住，标准会随着时间的推移而改变。
一点html知识会大有帮助
我们已经简单地了解了HTML文档的工作原理。现在您了解了网页是如何构造的基本原理。即使你不继续建立网页，你也会对你每天使用的网页有一点了解。
要了解更多信息，请使用必要的工具升级您的web开发技能，然后查看我们关于如何设计您的第一个网站的指南。
图片来源：Belyaevsky/存款照片
- 发表于 2021-03-21 16:54
- 阅读 ( 259 )
- 分类：编程
你可能感兴趣的文章
最适合新手的ruby互动介绍
...级有六个挑战。每一个挑战都将使您更接近于对web开发的理解。以下是六个具有多重挑战的级别，可帮助您完成第一步： ...
如何通过3个简单的步骤构建javascript幻灯片
...ipt很有信心，但从未使用过jQuery，那么请查看我们的jQuery基本指南。 ...
7所有网站开发人员都应该知道的编程技巧
...本控制是一组构造代码更改的实践。版本控制解决了无法理解代码库的哪个更改创建了成功还是失败的问题。通过跟踪分支图中代码的变化，网站程序员可以了解代码何时中断以及中断的原因。 ...
通过我的5门顶级课程真正学习javascript
... javascript：理解奇怪的部分 ...
什么是刮网？如何从网站收集数据
... 要理解web scraper，我们首先需要了解web是如何工作的。要访问此网站，请键入“makeuseof.com网站“或者您单击了另一个网页的链接（告诉我们在哪里，说真的，我们想知道）。...
网站的英雄：理解dom
... 尽管DOM很重要，但很多人并不理解它。事实上，你可以为网站编程多年而不必对它有太多了解。但是随着前端技术的进步，理解DOM变得越来越重要。 ...
7个最好的免费在线html编辑器来测试你的代码
... HTML编码是理解编程和开发的一个可访问的、直接的途径。你需要不断地测试你的HTML代码——还有什么比在你的浏览器窗口中实时显示结果更好的呢？ ...
如何在iphone上创建可视快速拨号文件夹
...恰好是这样。虽然视频将引导您完成整个过程，但以下是基本步骤：下载这些文件开始你。您将发现两个文档：html\u prep.html和autodial.php。HTML准备文档基本上只是一个非常简单的HTML页面，带有一张照片和一个链接。你会想用这个...
2021年ipad的5个最佳html编辑器
...用程序那么多的功能，但这个简单的编辑器很好地涵盖了基本内容，而且价格也无可争议。 该应用程序具有语法突出显示和代码自动完成功能，支持在“横向模式”下使用，这是许多开发人员的首选。包括预览功能、安全网以...
使用xml的5个基本原因
...打开(an xml file and how do you open one)？ 简单 XML很容易理解。您可以创建标记并开发文档的总体设置。还有什么比这更简单的呢？用XML编写页面时，元素标记是您自己创建的。您可以根据自己的需要自由开发系统。另外，当您...
0 篇文章
