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文件。 但是编写许多代码行会很痛苦。
你需要一个代码编辑器。一个好的代码编辑器可以让你更轻松地编写和组织大型代码。我推荐使用 Notepad++（免费开源）来编写 Web 语言。你也可以使用其他编辑器，例如 Sublime Text、Atom 等。
这是你需要做的事情：
- 安装代码编辑器
- 打开它
- 创建一个新文件
- 将其另存为.html文件
1.世界您好！
将以下代码复制并粘贴到新的HTML文件中并保存。 现在在您的Web浏览器上运行它。
HTML代码
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
输出：
恭喜！您已经创建了第一个 HTML 文件。现在您无需理解它的含义。我们稍后会讲解。
理解HTML结构
每个HTML文件都有一个共同的裸结构。 一切都在这里开始。 修剪后，每个大页面的代码都会进入这个结构。
那么，让我们尝试从“Hello World！”代码来理解它。以下元素是每个 HTML 文件的必需部分。
- =向浏览器宣告这是HTML文件。 您必须在标签。
- =这是HTML文件的根元素。 您编写的所有内容都介于和。
- =这是浏览器的元信息部分。 此标记内的代码没有可视输出。
- =这是Web浏览器呈现的部分。 您在网站上确切看到的是代码之间的呈现和。
2. HTML标记
HTML是数百种不同标签的协作。 你需要了解它们的工作原理。 您还必须确保他们以正确的方式使用它们。
HTML标记通常有一个开始标记和一个结束标记。 开头标签的关键字由小于号（<）和大于号（>）包围。 结束标记具有相同的内容，但在小于（<）符号后面加一个正斜杠（/）。
头部标签
所有的头部标签之间和。 它们包含用于Web浏览器和搜索引擎的元信息。 他们基本上没有视觉输出。
标题标签定义在浏览器选项卡上可见的网页标题。 该信息由Web程序和搜索引擎使用。 每个HTML文件可以拥有最高的一个标题。
代码:
<title>My first web page</title>
链接标记将您的HTML页面与外部资源链接在一起。 它的主要用途是将HTML页面与CSS样式表链接。 这是一个自动关闭的标签，不需要结尾。 rel表示与文件的关系，src表示源。
代码:
<link rel="stylesheet" type="text/css" src="style.css">Meta是另一个自动关闭标记，它提供html文件的元信息。 搜索引擎和其他Web服务使用这些信息。 如果您想为搜索引擎优化页面，则必须使用元标记。
代码:
<meta name="description" content="This is the short description that search engines show"脚本标记用于包括服务器端脚本或链接到外部脚本文件。 它在开始标记中可以有两个属性。 一个是类型，另一个是源（src）。
代码:
<script type="text/javascript" src="scripts.js"></script>Noscript 标签在 Web 浏览器中禁用脚本时起作用。它使页面与 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>输出：
格式化标签
可以使用许多格式标签格式化html文件中的文本。 当您想要突出显示内容中的单词或行时，将是必要的。
代码:
<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>输出：
您可以使用comment标记将某些代码与rending区分开来。 代码将显示在源代码中，但不会呈现。 此标记的主要用途是创建html文件的文档以供将来参考。
计费示例：
<!-- <p>You can comment out any code by surrounding them in this way</p> -->其他重要的 HTML 标签
Anchor是一个无价的标签，几乎无处不在。 没有至少一个锚链接，您将不会在线看到任何网页。
结构相同。 它有一个开合部分。 您要定位的文字介于和之间。
有一些属性可以定义用户点击后的位置和方式。
- ahref =”“ =它定义目标链接。 链接在双引号之间。
- 目标=”“ =定义URL是在新的浏览器选项卡中还是在同一选项卡中打开。 target =“ _ blank”用于新标签，而target =“ _ self”用于在同一标签中打开。
- rel =”“ = 定义当前页面与链接页面的关系。如果不信任链接页面，可以定义 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>输出：
图像标记是另一个重要的标记，没有它，您无法想象许多基于图像的网站。
是一个自闭合标签。它不需要像。在正确使用它之前，您需要了解一些属性。
- src =”“ =这用于定义图像的源链接。 将链接放在双引号之间。
- alt =“” =它代表替代文字。 当您的图像未加载时，此文本将为用户提供有关丢失图像的信息。
- 宽度=”“ =它以像素为单位定义图像的宽度。
- 身高=”“ =它以像素为单位定义图像的高度。
<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" />输出：
提示：是否要插入可点击的图片？ 用标签包装图像代码。 看看情况如何。
要么
列表标签用于创建项目列表。 代表有序列表（编号列表），并且代表无序列表（项目符号）。
里面的清单项目要么被标记为。 李代表名单。 你可以有很多如你所愿要么标签。
代码:
<p>This is an ordered list:</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<p>This is an unordered list:</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>输出：
表标记用于创建数据表。 有一些内部级别标签定义表头，行和列。
是外部父代码。 在这个标签中代表表格行， 代表表格栏和代表表头。
代码:
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
<tr>
<td>Jo
<td>27</td>
<td>Businessman</td>
</tr>
<tr>
<td>Carol</td>
<td>26</td>
<td>Nurse</td>
</tr>
<tr>
<td>Simone</td>
<td>39</td>
<td>Professor</td>
</tr>
</table>输出：
注意：第一个中的值是标题。 所以，我们用将粗体文本效果应用于文本。
表分组
您可以使用表分组元素扩展表的功能。 有时您需要创建分成多个页面的大型表。
将表数据分组到页眉，正文和页脚中，您可以允许独立滚动。 标题和正文部分将打印到表格所跨越的每个页面。
表分组标签是：
- =用于包裹桌子的标题。 它打印到表的每个拆分页面。
- =用于包装表的主要数据。 你可以有很多根据需要。 一种标签表示一组单独的数据。
- =用于包装表的页脚信息。 它打印到表的每个拆分页面。
请注意，使用分组不是强制性的。 您可以使用它来使更大的表更具可读性。 虽然一些特殊的开发人员明显使用这些标签作为CSS选择器。
这是我们如何将示例表分组为， 和：
代码:
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>27</td>
<td>Businessman</td>
</tr>
<tr>
<td>Carol</td>
<td>26</td>
<td>Nurse</td>
</tr>
<tr>
<td>Simone</td>
<td>39</td>
<td>Professor</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total Persons:</td>
<td>3</td>
</tr>
</tfoot>
</table>输出：
表单元素用于创建网页的交互式表单。 HTML表单包含几个连续的元素。 例如：， ， 等等
表单中的action属性非常重要。 它指向用于处理信息的服务器端或第三方页面。 对于处理，您需要首先定义方法。
您可以使用两种方法之一，获取或发布。 获取发送邮件在邮件正文中发送信息的URL格式的所有信息。
表单的输入有很多类型。 最基本的输入类型是文本。 它写为。 类型也可以是单选，复选框，电子邮件等。 底部应有一个提交类型输入，用于创建一个提交按钮。
tag 用于创建标签并将其与输入框关联。标签与输入框关联的规则是，标签的 for=” ” 属性和输入框的 id=” ” 属性的值必须相同。
代码:
<form action="#">
<label for="firstname">First Name: </label>
<input type="text" id="firstname"><br>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname"><br>
<label for="bio">Short Bio: </label>
<textarea id="bio" rows="10" cols="30" placeholder="Enter your bio here..."></textarea><br>
<label>Gender:</label><br>
<label for="male">Male</label>
<input type="radio" name="gender" id="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female"><br>
<input type="submit" value="Submit">
<form>输出：
注意：我已将操作指向null值，因为它未连接到任何服务器来处理信息。
3. HTML属性
属性是HTML标记的一种修饰符。 他们为HTML标记添加了新配置。
属性看起来像attributename =””，位于开头的HTML标记中。 该属性的值位于双引号之间。
id =””和class =“””
id和class是HTML标记的标识符。 使用标识符将不同的名称指定给不同的HTML元素。 您可以为多个元素使用一个类标识符。 但是你不能为多个元素使用一个id标识符。
代码:
<h1 class="heading">This is the main title</h1>href =””
href代表超文本引用。 他们将用户指向参考链接。 锚标记使用href将用户发送到目标URL。
代码:
<a href="https://www.google.com/">Google</a>src =””
src代表来源。 它定义了您在HTML文件中使用的媒体或资源的来源。 源可以是本地或第三方URL。
代码:
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />alt =””
alt代表替代方案。 它是在无法加载HTML元素时使用的备份文本。
代码:
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt="Google's Headquarter" />样式=””
style属性通常用于HTML标记。 它在HTML标记中完成CSS的工作。 您的样式属性介于双引号之间。
代码:
<h2 style="color:red">This is another title</h2>4.代码显示：块与内联
有些元素总是从新行开始，并占据全部可用宽度。 这些是“块”元素。
例如： ， ， -- ，表格等。
有些元素只占用所需的空间，并且不另起一行。这些元素被称为“内联”元素。
例如： 、、 ， 等等
当您使用CSS样式时，您需要将块元素与内联区分开来。 在本HTML指南中，它不是非常必要的。
代码:
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h2>This is a H2 heading. It has Block display.</h2>
<h2>This is <u>another</u> H2 heading. Here the underline tag has Inline display.</h2>
</body>
</html>输出：
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结构如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first web page</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>This is the title of the article</h2>
<p>Posted by John Doe</p>
</header>
<p>Content of the article goes here</p>
</article>
</main>
<footer>
<p>Copyright 2025 John Doe</p>
</footer>
</body>
</html>7. HTML验证
大多数网络专业人员在完成后验证他们的代码。 为什么在代码工作正常时验证代码是否必要？
验证代码有两种可能的原因：
- 它将帮助您使代码跨浏览器和跨平台兼容。 代码可能不会在您当前的浏览器中显示任何错误，但可能在另一个浏览器中显示。 代码验证将修复它。
- 如果您的网页存在错误，搜索引擎和其他网络程序可能会停止抓取。您可以通过验证来确认网页是否存在重大错误。
W3C Validator 是最受欢迎的代码验证服务。它提供多种代码验证方法。您可以上传文件，也可以直接在验证引擎中输入代码。
迈出下一步：从编写 HTML 到构建和托管您的网站
现在，您已经对 HTML 基础知识有了扎实的理解，可以顺利创建功能齐全、结构良好的网页了。无论您是继续手动编码，还是更喜欢更精简的方法，都有大量工具可以帮助您实现项目。
如果您希望在不深入代码的情况下构建网站，请考虑探索 我们的最佳无代码网站建设者列表。这些平台允许您使用直观的拖放界面轻松设计和启动专业网站 - 非常适合在不牺牲灵活性的情况下快速将您的想法变为现实。
对于准备上线 HTML 项目的用户来说，选择合适的托管服务至关重要。查看一些 本指南中最好的静态网站托管提供商 找到可以完美补充您手工编码的网站的经济实惠的选项。
无论你选择哪条路，将你的 HTML 技能与合适的工具和托管解决方案相结合，就能为你的在线形象奠定坚实的基础。祝你编程愉快！
