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知识可以让您回到正轨。
要制作您的第一个网站？ 不妨尝试无代码网站构建器
有了像 Wix 的构建器，你无需任何编码技能创建网站。它配备 800 多个设计模板，让您通过移动设备管理网站 > 点击这里，免费试用 Wix
阅读更多
开始之前——HTML 基础
什么是HTML？
HTML是。的缩写 Hyper T分机 MArkupe Language。 它是标记Web浏览器内容的标准语言。
HTML由“元素”表示。 元素也称为“标签”。
为什么需要 HTML？
Web浏览器只能在用支持的语言编写时呈现网站。 HTML是最常用的标记语言，对Web浏览器的接受程度最高。
这就是你需要HTML的原因。
HTML 是否区分大小写？
HTML不区分大小写。 但最好的做法是用适当的案例编写HTML。
适合初学者的托管以托管您的 HTML 项目
如果您是初学者，我们推荐价格实惠且易于上手的托管服务提供商。 即时帐户激活、易于使用的控制面板、全面的用户指南以及随时准备提供帮助的有用技术支持是重要的要求。
| 托管公司 | 加入 | 比赛焦点 |
|---|---|---|
| A2 Hosting | 每月 2.99 美元 | 快速的虚拟主机，流畅的新用户入职流程（全面检讨). |
| Hostpapa | 每月 3.95 美元 | 环保主机，新用户大优惠（全面检讨). |
| Hostinger | 每月 1.99 美元 | 超低价托管，性能好（全面检讨). |
| GreenGeeks | 每月 2.95 美元 | 300%绿色托管，免费易管理 SSL (全面检讨). |
| InMotion Hosting | 每月 3.49 美元 | 非常可靠的托管； 还提供网页设计服务（全面检讨). |
创建第一个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>
在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>
输出：
格式化标签
可以使用许多格式标签格式化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格式的所有信息。
表单的输入有很多类型。 最基本的输入类型是文本。 它写为。 类型也可以是单选，复选框，电子邮件等。 底部应有一个提交类型输入，用于创建一个提交按钮。
标签用于创建标签和sso将他们与输入联系起来。 的规则ssociating labels with inputs 是在 for=” label 的属性和 id=” input 的属性中具有相同的值。
代码：
<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 2017 John Doe</p> </footer> </body> </html>
7. HTML验证
大多数网络专业人员在完成后验证他们的代码。 为什么在代码工作正常时验证代码是否必要？
验证代码有两种可能的原因：
- 它将帮助您使代码跨浏览器和跨平台兼容。 代码可能不会在您当前的浏览器中显示任何错误，但可能在另一个浏览器中显示。 代码验证将修复它。
- 如果您的页面有错误，搜索引擎和其他网络程序可能会停止抓取您的网页。 您可以通过验证确认您没有任何重大错误。
W3C验证 是最受欢迎的代码验证服务。 他们有几种验证代码的方法。 您可以上传文件或直接在其验证引擎中输入代码。
更多有用的资源
HTML是一个不断学习的主题。 更新版本的HTML可能会更快到来。 所以你必须保持更新并继续练习。 实践是什么aces HTML。
以下是一些有用的资源：
HTML 常见问题解答
是的，HTML 很容易学习。 您可以使用计算机上的记事本创建基本的 HTML 文件； 或者你可以使用 HTML编辑器 编写和更好地组织更长的页面。
您已经掌握了此页面的基础知识； 接下来你需要做的是边做边学。 这里有六个网站 您可以在其中编写和测试自己的 HTML 代码。
HTML 是超文本标记语言的缩写。 对于外行 - 您可以将 HTML 理解为网站的构建块。 它是用于构建网页及其内容的标准计算机语言。
是的，HTML 是最常见的标记语言，对 Web 浏览器的接受度最高。 它仍然是互联网上大多数网站的重要构建块（与 CSS 和 JavaScript 一起）。 如果您打算成为网络开发人员或 opera一个网站； 您最好至少具备基本的 HTML 知识。
