傻瓜基本HTML指南

HTML 是当今互联网的支柱。 数以百万计的网站共同组成了互联网。 HTML 是所有这些网站的构建块。 二十年前，即使你只是一个爱好博主，你也必须了解一些网络 编码 保护您自己或为您的网站添加一个简单的功能。 但是现在有如此多的编辑器和插件可用，甚至不再需要了解 HTML 的基础知识。

The problem with this is that if you don't know a few basics, you can easily get into real trouble in your blog and have to hire a pricey developer to fix what may be a minor problem.这样做的问题是，如果您不了解一些基础知识，就很容易在博客中遇到真正的麻烦，而不得不雇用昂贵的开发人员来解决可能是一个小问题。 Not only that, but creating changes to your blog such as adding a custom text widget requires a little knowledge.不仅如此，而且要对博客进行更改（例如添加自定义文本小部件）需要一点知识。

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

适合初学者的虚拟主机

如果您是初学者，我们建议您 主机提供商 这是负担得起的，而且很容易开始。 即时帐户激活、易于使用的控制面板、全面的用户指南以及随时准备提供帮助的有用技术支持是重要的要求。

开始之前——HTML 基础

什么是HTML？

HTML是。的缩写 Hyper T分机 MArkupe Language。 它是标记Web浏览器内容的标准语言。

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

为什么需要 HTML？

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

这就是你需要HTML的原因。

HTML 是否区分大小写？

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

创建第一个HTML文件的步骤

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

你需要一个代码编辑器。 一个好的代码编辑器将使编写和组织大型代码变得更加容易。 我使用并推荐 记事本+ + （免费和开源）用于编写Web语言。 您可以使用其他编辑器 小组石灰文本, Atom 等等

这是你需要做的事情：

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

你准备好了！

另请阅读

• 20 多个网站建设者平台来创建网站
• 值得考虑的最佳 HTML 编辑器

1.世界您好！

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

HTML代码

我的第一个网页你好世界！

输出：

恭喜！ 您已经创建了第一个HTML文件。 此时您无需了解它。 我们将很快介绍它。

理解HTML结构

每个HTML文件都有一个共同的裸结构。 一切都在这里开始。 修剪后，每个大页面的代码都会进入这个结构。

因此，让我们尝试从“ Hello World！”中了解它。 码。 以下元素是每个HTML文件的必需部分。

• =向浏览器宣告这是HTML文件。 您必须在标签。
• =这是HTML文件的根元素。 您编写的所有内容都介于和。
• =这是浏览器的元信息部分。 此标记内的代码没有可视输出。
• =这是Web浏览器呈现的部分。 您在网站上确切看到的是代码之间的呈现和。

2. HTML标记

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

HTML标记通常有一个开始标记和一个结束标记。 开头标签的关键字由小于号（<）和大于号（>）包围。 结束标记具有相同的内容，但在小于（<）符号后面加一个正斜杠（/）。

头部标签

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

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

代码：

我的第一个网页

链接标记将您的HTML页面与外部资源链接在一起。 它的主要用途是将HTML页面与CSS样式表链接。 这是一个自动关闭的标签，不需要结尾。 rel表示与文件的关系，src表示源。

代码：

Meta是另一个自动关闭标记，它提供html文件的元信息。 搜索引擎和其他Web服务使用这些信息。 如果您想为搜索引擎优化页面，则必须使用元标记。

代码：

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

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

代码：

在Web浏览器中禁用脚本时，Noscript标记有效。 它使页面与不允许在其Web浏览器中使用脚本的用户兼容。

代码：

唉! 脚本被禁用。

身体标签

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

至

这些是标题标签。 最重要的标题标记为最不重要的是。 您应该在正确的层次结构中使用它们。

代码：

这是H1标题这是H1标题这是H1标题这是H2标题这是H2标题这是H2标题

输出：

格式化标签

可以使用许多格式标签格式化html文件中的文本。 当您想要突出显示内容中的单词或行时，将是必要的。

代码：

您可以通过多种方式突出显示文本。 您可以加粗，下划线，斜体， 标记，下标，上标等等！

输出：

您可以使用comment标记将某些代码与rending区分开来。 代码将显示在源代码中，但不会呈现。 此标记的主要用途是创建html文件的文档以供将来参考。

例如：

You can comment out any code by surrounding them in this way -->

其他重要的 HTML 标签

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

结构相同。 它有一个开合部分。 您要定位的文字介于和之间。

有一些属性可以定义用户点击后的位置和方式。

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

代码：

点击此处转到Google。 它将在新选项卡中打开。 请点击这里。 它还会带您到Google，但会在当前标签中打开。

输出：

图像标记是另一个重要的标记，没有它，您无法想象许多基于图像的网站。

是一个自动关闭标签。 它不需要像。 在正确使用它之前，您需要了解一些属性。

• src =”“ =这用于定义图像的源链接。 将链接放在双引号之间。
• alt =“” =它代表替代文字。 当您的图像未加载时，此文本将为用户提供有关丢失图像的信息。
• 宽度=”“ =它以像素为单位定义图像的宽度。
• 身高=”“ =它以像素为单位定义图像的高度。

这是2014年500月的Googleplex。 该图像的宽度为375像素，高度为0像素。

输出：

提示：是否要插入可点击的图片？ 用标签包装图像代码。 看看情况如何。

要么

列表标签用于创建项目列表。 代表有序列表（编号列表），并且代表无序列表（项目符号）。

里面的清单项目要么被标记为。 李代表名单。 你可以有很多如你所愿要么标签。

代码：

这是一个有序列表： 项目1 项目2 项目3 这是一个无序列表： 项目1 项目2 项目3

输出：

表标记用于创建数据表。 有一些内部级别标签定义表头，行和列。

是外部父代码。 在这个标签中代表表格行， 代表表格栏和代表表头。

代码：

名称年龄职业乔27 商人颂歌26 护士西蒙妮39 教授

输出：

注意：第一个中的值是标题。 所以，我们用将粗体文本效果应用于文本。

表分组

您可以使用表分组元素扩展表的功能。 有时您需要创建分成多个页面的大型表。

将表数据分组到页眉，正文和页脚中，您可以允许独立滚动。 标题和正文部分将打印到表格所跨越的每个页面。

表分组标签是：

• =用于包裹桌子的标题。 它打印到表的每个拆分页面。
• =用于包装表的主要数据。 你可以有很多根据需要。 一种标签表示一组单独的数据。
• =用于包装表的页脚信息。 它打印到表的每个拆分页面。

请注意，使用分组不是强制性的。 您可以使用它来使更大的表更具可读性。 虽然一些特殊的开发人员明显使用这些标签作为CSS选择器。

这是我们如何将示例表分组为， 和：

代码：

名称年龄职业约翰27 商人颂歌26 护士西蒙妮39 教授总人数： 3

输出：

表单元素用于创建网页的交互式表单。 HTML表单包含几个连续的元素。 例如：， ， 等等

表单中的action属性非常重要。 它指向用于处理信息的服务器端或第三方页面。 对于处理，您需要首先定义方法。

您可以使用两种方法之一，获取或发布。 获取发送邮件在邮件正文中发送信息的URL格式的所有信息。

表单的输入有很多类型。 最基本的输入类型是文本。 它写为。 类型也可以是单选，复选框，电子邮件等。 底部应有一个提交类型输入，用于创建一个提交按钮。

标签用于创建标签并将其与输入相关联。 将标签与输入相关联的规则是在标签的for =””属性和输入的id =””属性中具有相同的值。

代码：

名字： 姓： 简短的简历： 性别： 男女

输出：

注意：我已将操作指向null值，因为它未连接到任何服务器来处理信息。

3. HTML属性

属性是HTML标记的一种修饰符。 他们为HTML标记添加了新配置。

属性看起来像attributename =””，位于开头的HTML标记中。 该属性的值位于双引号之间。

id =””和class =“””

id和class是HTML标记的标识符。 使用标识符将不同的名称指定给不同的HTML元素。 您可以为多个元素使用一个类标识符。 但是你不能为多个元素使用一个id标识符。

代码：

这是主标题

href =””

href代表超文本引用。 他们将用户指向参考链接。 锚标记使用href将用户发送到目标URL。

代码：

谷歌

src =””

src代表来源。 它定义了您在HTML文件中使用的媒体或资源的来源。 源可以是本地或第三方URL。

代码：

alt =””

alt代表替代方案。 它是在无法加载HTML元素时使用的备份文本。

代码：

样式=””

style属性通常用于HTML标记。 它在HTML标记中完成CSS的工作。 您的样式属性介于双引号之间。

代码：

这是另一个标题

4.代码显示：块与内联

有些元素总是从新行开始，并占据全部可用宽度。 这些是“块”元素。

例如： ， ， -- ，表格等。

有些元素仅占用所需的空间，而不是从新行开始。 这些是“内联”元素。

例如： 、、 ， 等等

当您使用CSS样式时，您需要将块元素与内联区分开来。 在本HTML指南中，它不是非常必要的。

代码：

我的第一个网页这是H2标题。 它具有块显示。 这是另一个H2标题。 下划线标签具有内联显示。

输出：

5. HTML中的双引号与单引号

这个问题非常明显。 你应该在HTML中使用什么？ 单引号还是双引号？ 人们似乎同时使用哪一个，但哪一个是正确的？

在HTML中，单引号和双引号是相同的。 它们对输出没有任何影响。

你可以使用你喜欢的任何人。 但是在一页代码中混合两者被认为是一种不好的做法。 你应该与他们中的任何一个保持一致。

6.语义HTML与非语义HTML

语义HTML是HTML的最新版本，也称为HTML5。 它是非语义HTML和XHTML的开发版本。

为什么HTML5更好？ 在以前的版本中，HTML元素由ID /类名称标识。 例如： 被视为文章。

在HTML5中， 标签将自己表示为商品，而无需任何id / class标识符。

为了HTML5，现在搜索引擎和其他Web应用程序可以更好地理解网页。 事实证明，语义网站对SEO做得更好。

以下是一些流行的HTML5标记列表：

• =这是用于包装要向观看者显示的主要内容。
• =这用于标记内容的标题部分，例如title或author meta。
• =它为您的观众指定用户定义或独立的内容。
• =它可以对任何代码进行分组，例如页眉，页脚或侧边栏。 你可以说，它是div的语义形式。
• =这是您的页脚内容，免责声明或版权文本所属的地方。
• =它使您可以插入音频文件，而不会有任何插件问题。
• =喜欢，您可以使用此标签插入视频而不会出现插件问题。

一个简单的HTML5结构如下所示：

我的第一个网页菜单8 菜单1 这是文章的标题约翰·杜（John Doe）发表文章内容在这里版权所有2 John Doe

7. HTML验证

大多数网络专业人员在完成后验证他们的代码。 为什么在代码工作正常时验证代码是否必要？

验证代码有两种可能的原因：

1. 它将帮助您使代码跨浏览器和跨平台兼容。 代码可能不会在您当前的浏览器中显示任何错误，但可能在另一个浏览器中显示。 代码验证将修复它。
2. 如果您的页面有错误，搜索引擎和其他网络程序可能会停止抓取您的网页。 您可以通过验证确认您没有任何重大错误。

W3C验证 是最受欢迎的代码验证服务。 他们有几种验证代码的方法。 您可以上传文件或直接在其验证引擎中输入代码。

8.其他有用的资源

HTML是一个不断学习的主题。 更新版本的HTML可能会更快到来。 所以你必须保持更新并继续练习。 实践是什么aces HTML。

以下是一些有用的资源：

• W3Schools HTML教程
• TutorialsPoint电子书
• 代码学院HTML指南
• Code Burst让我们建立一个[HTML]网站
• Mozila的HTML备忘单

了解更多

• 经销商网络托管计划解释
• 网络托管客户入职流程