傻瓜基本 HTML 指南

傻瓜基本 HTML 指南


HTML 代码 - 示例
HTML“代码”。

二十年前,即使你只是一个爱好博主,你也必须知道一些网络编码来保护自己或为你的网站添加一个简单的功能。 但是现在有这么多可用的编辑器和插件,甚至不再需要了解 HTML 的基础知识。

这样做的问题是,如果您不了解一些基础知识,您很容易在您的博客中遇到真正的麻烦,并且不得不聘请昂贵的开发人员来解决可能是一个小问题。 不仅如此,对您的博客进行更改(例如添加自定义文本小部件)也需要一些知识。

如果您遇到内容布局看起来不正确,HTML 知识可以让您重回正轨。

以下是我们为博主和非技术在线企业主准备的 HTML 指南版本。

HTML 是当今互联网的支柱。 数以百万计的网站共同组成了互联网。 HTML 是所有这些网站的构建块。

在我们开始之前……

1.什么是HTML?

HTML是的缩写 H分机 阿尔库普 大号语言。 它是用于标记 Web 浏览器内容的标准语言。

HTML 由“元素”表示。 元素也称为“标签”。

2. 为什么需要 HTML?

Web 浏览器只能在网站以支持的语言编写时呈现网站。 HTML 是最常见的标记语言,对网络浏览器的接受度最高。

这就是您需要 HTML 的原因。

3. HTML 是否区分大小写?

HTML 不区分大小写。 但最好的做法是用适当的案例编写 HTML。

创建第一个 HTML 文件的步骤

记事本++

您可以使用计算机上的记事本创建基本的 HTML 文件。 但是写很多行代码会很痛苦。

你需要一个代码编辑器。 一个好的代码编辑器将使编写和组织大型代码变得更加容易。 我使用并推荐 Notepad++(免费和开源)来编写网络语言。 您可以使用其他编辑器,例如 Sublime Text、Atom 等。

这是您需要做的:

  1. 安装代码编辑器
  2. 打开它
  3. 创建一个新文件
  4. 将其保存为 .html 文件

你准备好了!

1.世界你好!

将以下代码复制并粘贴到新的 HTML 文件中并保存。 现在在您的网络浏览器上运行它。

HTML 代码

<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>

输出:

HTML 代码 - Hello World

恭喜! 您已经创建了您的第一个 HTML 文件。 在这一点上你不必理解它。 我们将很快介绍它。

了解 HTML 结构

每个 HTML 文件都有一个共同的裸结构。 这是一切开始的地方。 并且每一大页的代码在剪裁后都会来到这个结构。

所以让我们试着从“Hello World!”来理解它。 代码。 以下元素是每个 HTML 文件的必需部分。

  • = 这是向浏览器声明这是一个 HTML 文件。 您必须在 标记之前指定它。
  • = 这是 HTML 文件的根元素。 您编写的所有内容都介于 和 之间。
  • <头> = 这是浏览器的元信息部分。 此标签内的代码没有视觉输出。
  • <正文> = 这是 Web 浏览器呈现的部分。 您在网站上看到的正是 和 之间的代码呈现。

2. HTML 标签

HTML 是数百个不同标签的协作。 你需要了解它们是如何工作的。 您还必须确保他们以正确的方式使用它们。

HTML 标签通常有一个开始标签和一个结束标签。 开始标签的关键字由小于 (<) 和大于 (>) 符号包围。 结束标签的所有内容都相同,但在小于 (<) 符号后多了一个正斜杠 (/)。

头部标签

所有的 head 标签都在 和 之间。 它们包含 Web 浏览器和搜索引擎的元信息。 它们基本上没有视觉输出。

<标题>

标题标签定义在浏览器选项卡上可见的网页标题。 此信息由网络程序和搜索引擎使用。 每个 HTML 文件最多可以有一个标题。

代码:

<title>My first web page</title>
标题标签 - HTML 示例
标题标签出现在浏览器的顶部。

<链接>

链接标签将您的 HTML 页面与外部资源链接起来。 它的主要用途是链接 HTML 页面和 CSS 样式表。 它是一个自闭合标签,不需要结尾。 这里 rel 代表与文件的关系, src 代表源。

代码:

<link rel="stylesheet" type="text/css" src="https://www.webhostingsecretrevealed.net/blog/web-design/basic-html-guide-for-dummies/style.css">

<元>

Meta 是另一个自闭合标签,提供 html 文件的元信息。 搜索引擎和其他网络服务使用这些信息。 如果您想针对搜索引擎优化您的页面,元标记是必须的。

代码:

<meta name="description" content="This is the short description that search engines show"

<脚本>

script 标签用于包含服务器端脚本或链接到外部脚本文件。 它可以在开始标签中有两个属性。 一个是类型,另一个是源(src)。

代码:

<script type="text/javascript" src="https://www.webhostingsecretrevealed.net/blog/web-design/basic-html-guide-for-dummies/scripts.js"></script>

当在 Web 浏览器中禁用脚本时,Noscript 标签会起作用。 它使页面与不允许在其 Web 浏览器中使用脚本的用户兼容。

代码:

<noscript><p>Alas! Scripts are disabled.</p></noscript>

身体标签

所有的正文标签都在 和 之间。 他们有视觉输出。 这是完成最多工作的地方。 您必须使用这些标签来构建您的主页内容。

这些是标题标签。 最重要的标题用

标记,最不重要的标题用

标记。 您应该在正确的层次结构中使用它们。

代码:

<h1>This is  a h1 heading</h1>
<h2>This is  a h2 heading </h2>
<h3>This is  a h3 heading </h3>
<h4>This is  a h4 heading </h4>
<h5>This is  a h5 heading </h5>
<h6>This is  a h6 heading </h6>

输出:



<h1></h1>
<p> 到 </p>
<h6> </h6>
<p>” class=”wp-image-25378 lazyload”  src=”https://allwewell.com/wp-content/uploads/2022/03/html-output-3.jpg” decoding=”async”  loading=”lazy”/><noscript><img loading=<p>You can highlight your text in many ways.</p> <p>You can <strong>bold</strong>, <u>underline</u>, <em>italic</em>, <mark>mark</mark>, <sub>subscript</sub>, <sup>superscript</sup> and more!</p>

输出:

格式化标签

您可以使用评论标签使某些代码偏离渲染。 代码将显示在源代码中,但不会呈现。 此标记的主要用途是创建 html 文件的文档以供将来参考。

例子:

<!-- <p>You can comment out any code by surrounding them in this way</p> -->

其他重要的 HTML 标签

锚是一个无价的标签,几乎无处不在。 如果没有至少一个锚链接,您将看不到任何在线网页。

结构是一样的。 它有一个开头和一个结尾部分。 您要锚定的文本位于 之间。

有一些属性定义了用户点击后去哪里以及如何去。

  • ahref=”” = 它定义了目标链接。 链接在双引号之间。
  • 目标=“” = 它定义 URL 是在新的浏览器选项卡中还是在同一选项卡中打开。 target=”_blank” 用于新选项卡,target=”_self” 用于在同一选项卡中打开。
  • 相对=“” = 它定义了当前页面与链接页面的关系。 如果您不信任链接页面,您可以定义 rel=”nofollow”。

代码:

<p><a target="_blank" href="https://www.google.com/">Click here</a> to go to Google. 
It will open in a new tab.</p>

<p><a target="_self" href="https://www.google.com/">Click here</a>. 
It will also take you to Google but will open in the current tab.</p>

输出:

<a></a>” class=”wp-image-25381 lazyload”  src=”https://allwewell.com/wp-content/uploads/2022/03/html-output-5.jpg” decoding=”async”  loading=”lazy”/><noscript><img loading=<p>This is the Googleplex in August 2014.</p> <p>This image has a width of 500 pixels and a height of 375 pixels.</p> <img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt="Google's Headquarter in August 2014" width="500" height="375" />

输出:

<图像宽度=

提示:想要插入可点击的图像? 用 标记包装图像代码。 看看情况如何。

列表标签用于创建项目列表。

    代表有序列表(编号列表),

Leave a Comment