如何学习 HTML

内容

脚步
第 1 部分（共 2 部分）：学习 HTML 基础知识
第 2 部分（共 2 部分）：高级 HTML
提示
警告
你需要什么

HTML 是英文的缩写 超文本标记语言 （超文本标记语言）。这是创建网站基本标记的代码或语言。如果您从未编程过，学习可能看起来令人生畏，但实际上，您开始所需的只是一个基本的文本编辑器和 Internet 浏览器。您甚至可能认识一些您在 Internet 论坛、自定义自定义页面或 wikiHow 文章中遇到的 HTML 标记示例。 HTML 是任何互联网用户的有用工具，学习基础知识所需的时间比您想象的要少。

脚步

第 1 部分（共 2 部分）：学习 HTML 基础知识

1 打开一个 HTML 文档。 大多数文本编辑器（Windows 的 Notepad 或 Notepad ++、Mac 的 TextEdit、GNU / Linux 的 gedit）都可以用来生成 HTML 文件。创建一个新文档并使用文件 → 另存为网页格式保存，或将文件扩展名更改为 .html 或 .htm 而不是 .doc、.rtf 或其他扩展名。
- 您可能会收到一条警告，指出文件将保存为“纯文本”而不是 RTF 格式，或者格式和图像将不会保存。这可以;对于 HTML，不需要这些选项。
2 在浏览器中打开生成的文件。 保存空白文件，在您的计算机上找到它并双击打开它。应该在浏览器中打开一个空白页面。如果没有，请将文件拖到浏览器的地址栏中。在编辑 HTML 文件时，您可以刷新此页面以查看更改。
- 请注意，这样您并不是在 Internet 上创建网站。其他人将无法访问此页面，并且您不需要 Internet 连接来测试您的本地页面。浏览器只是解释 HTML 代码，“阅读”它就好像它是一个网站。
3 了解什么是标记标签。 与常规文本不同，标签不会出现在页面上。相反，它们告诉浏览器如何显示页面及其内容。 “开始”标签包含说明。例如，它可以告诉浏览器文本应该显示为胆大...它还需要一个“结束”标签来向浏览器显示指令结束的位置。在此示例中，开始和结束标记之间的文本将以粗体显示。标签写在不等号内，但结束标签以正斜杠开头。
- 开始标记写在不等号之间：打开标签>
- 在结束标记中，在标记描述符（名称）之前放置一个正斜杠： /结束标签>
- 继续阅读以了解如何使用不同的标签。对于这一步，您只需要记住录制格式。标签写在不等号之间：> 和 />
- 在一些教程中，HTML 标签被称为元素，开始和结束标签之间的文本被称为元素内容。
4 在编辑器中输入 html> 标签。 每个 HTML 文件都必须以标签开头 html> 并以标签结尾 /html>...这些标签告诉浏览器标签之间的所有内容都在 HTML 中。将这些标签添加到您的文档中：
- 通常 HTML 文件以行开头 !DOCTYPE html>这意味着浏览器必须将整个文件识别为 HTML。此行不是必需的，但它可以帮助您解决兼容性问题。
- 拨号 html> 在文档的顶部。
- 按 Enter 或 Return 多次以创建多个空行，然后键入 /html>
- 记住，那个整体您将在本文中创建的代码需要写在这两个标签之间。
5 在文件中创建一个 head> 部分。 在 html> 和 /html> 标签之间，创建一个开始标签头> 和结束标签 /头>...在它们之间添加一些空行。写在 head> 和 /head> 标签之间的内容不会显示在页面本身上。按照以下步骤操作，您将看到此标签的用途：
- 在 head> 和 /head> 标签之间，写 标题> 和 / 标题>
- 在 title> 和 /title> 标签之间，写 如何学习 HTML - wikiHow.
- 保存更改并在浏览器中打开文件（如果文件已打开，则刷新页面）。看到出现在地址栏上方页面标题中的文字了吗？
6 创建一个 body> 部分。 此示例中的所有其他标签和文本都写在正文部分中，其内容显示在页面上。后结束标签/头>，但是前标签/html> 添加标签 身体> 和 /身体>...对于本文的其余部分，请使用正文部分。您的文件应如下所示：
html>
头>
标题> 如何学习 HTML - wikiHow / 标题>
/头>
身体>
/身体>
/html>
7 使用不同的样式添加文本。 是时候向页面添加真正的内容了！在浏览器中刷新后，您在 body 标记之间写入的任何内容都将显示在页面上。 不使用 符号要么 >因为浏览器会尝试将内容解释为标签而不是文本。写 你好！ （或任何你喜欢的），然后尝试将这些标签添加到文本中，看看会发生什么：
- em> 大家好！/em> 使文本“斜体”： 你好！
- 强> 大家好！/强> 使文本“粗体”： 你好！
- s> 大家好！/s> 删除线文字： ~~你好！~~
- sup> 大家好！/sup> 将字体显示为上标：
- sub> 大家好！/ sub> 将字体显示为下标： _你好！
- 一起尝试不同的标签。看起来如何 em>strong>大家好！/strong>/em>?
8 将文本分成段落。 如果您尝试在 HTML 文件中编写多行文本，您会注意到浏览器中不显示换行符。要将文本分成段落，您需要添加标签：
- p> 这是一个单独的段落。/p>
- 这句话在这一行的开头之前跟一个换行符 br>。
  这是第一个不需要结束标签的标签。这些标签称为“空”标签。
- 创建标题以显示部分标题：
  H1> 标题文字 / H1>: 最大的标题
  h2> 标题文字 / h2> （二级标题）
  H3> 标题文字 / H3> （三级标题）
  H4> 标题文字 / H4> （四级标题）
  H5> 标题文字 / H5> （最小的标题）
9 学习创建列表。 有多种方法可以在网页上创建列表。尝试以下选项并决定您最喜欢哪一个。请注意，列表作为一个整体需要一对标签（例如，项目符号列表的 ul> 和 /ul>），并且每个列表项都用不同的标签对突出显示，例如 li> 和 /丽>。
- 项目符号列表：
  ul>li>第一行/li>li>第二行/li>li>依此类推/li>/ul>
- 编号列表：
  ol>li>一/li>li>二/li>li>三/li>/ol>
- 定义列表：
  dl>dt>咖啡/dt>dd>-热饮/dd>dt>柠檬水/dt>dd>-冷饮/dd>/dl>
10 使用布局页面换行，水平线，和图片. 是时候向页面添加文本以外的内容了。尝试使用以下标签或点击链接了解更多信息。使用在线托管服务创建指向您要发布的图像的链接：
- 水平线：小时>
- 插入图片： img src = "图片链接">
11 添加链接。 您可以使用这些标签创建指向其他页面和站点的超链接，但由于您还没有网站，您现在将学习如何创建锚链接，即指向页面上特定位置的链接：
- 创建带有 a> 标记的锚点，您可以在页面上链接到该位置。起一个清晰易记的名字：
  
  a name = "Tips"> 您要链接到的文本。/ a>
- 使用 href> 标签创建相对链接或指向外部资源的链接：
  
  a href = "链接到页面或页面内的锚点名称">将用作链接的文本或图像。/a>
- 要链接到另一个页面上的相对链接，请在主链接和锚点名称后添加 # 号。例如，https://en.wikihow.com/learn-HTML#Tips 链接到此页面的提示部分。

第 2 部分（共 2 部分）：高级 HTML

1 了解属性。 属性写在标签内，表示附加信息。属性的格式如下： 名称 = "值"，在哪里标题定义一个属性（例如，颜色用于颜色属性），值表示其值（例如， 红色的 红色）。
- 属性实际上已经在上一节关于 HTML 基础的部分中使用过。 img> 标签使用属性 源文件, 相对链接锚使用该属性名称和链接使用属性 href...正如您已经注意到的，所有属性都以格式编写 ___='___’.
2 尝试使用 HTML 表格。 表格的创建涉及到各种标签的使用。您可以进行试验，或阅读更详细的说明。
- 创建表标签：桌子> / 桌子>
- 将表中每一行的内容用标签括起来： tr>
- 列标题由标签定义： >
- 后续行中的单元格： td>
- 使用这些标签的示例：
  
  表> tr> th> 第1列：月/日> th> 第2列：储蓄/th> / tr> tr> td> 一月/ td> td> 5000卢布/ td> / tr> / table>
3 了解其他头部部分标签。 您已经了解了出现在每个 html 文件开头的 head> 标记。除了 title> 标签，本节还有其他标签：
- 包含的元标记 元数据被搜索引擎用来索引网站。为了使您的网站更容易在搜索引擎中找到，请使用一个或多个元标记开始（不需要结束标记）。每个标签使用一个属性和一个值：meta name = "description" content = "page description">;或元名称=“关键字”内容=“逗号分隔的关键字”>
- Link> 标记指向第三方文件，例如样式表 (CSS)，这些文件使用不同类型的编码创建，并允许您使用颜色、文本对齐和许多其他功能更改 HTML 页面。
- 用于将 JavaScript 文件附加到页面的 script> 标签。需要这些文件以交互方式修改页面（响应用户操作）。
4 试验其他网站的 HTML 代码。 查看其他网页的源代码是学习 HTML 的好方法。您可以右键单击该页面，然后从浏览器的顶部菜单中选择查看源代码或类似内容。尝试弄清楚陌生标签的作用，或在 Internet 上搜索有关它的信息。
- 虽然您无法编辑其他人的网站，但您可以将源代码复制到您的文件中，以便以后试验标签。请注意，CSS 标记可能不可用，并且颜色和格式可能看起来不同。
5 开始探索更详细的指南。 Internet 上有许多站点专门用于 HTML 标记，例如 W3Schools 或 HTMLbook。也有出售纸质书籍，但随着标准的变化和发展，请尝试找到最新版本。更好的是，掌握 CSS 可以更好地控制站点的布局和外观。在学习了 CSS 之后，网页设计师通常会学习 JavaScript。

提示

Notepad ++ 是一个很棒的免费程序，类似于普通的记事本，但您可以在线保存和测试您的浏览器中的代码。（它还支持几乎任何语言 - HTML、CSS、Python、JavaScript 等等。）
在网上找到一些简单的页面，将代码保存到您的计算机并进行试验。尝试移动文本、更改字体、替换图像 - 无论如何！
您可以将笔记本放在写标签的地方，以便您随时可以使用它们。您也可以打印此页并参考。
当你写代码时，要小心翼翼，这样你和其他人才能理解它。使用！ - 在此处插入注释 -> 用于 HTML 注释：它们不会反映在页面上，但会在代码文档中可见。
XML 和 RSS 越来越受欢迎。包含 XML 和 RSS 技术的页面代码对于没有经验的用户来说更难阅读和理解，但这些工具非常有用。
HTML 中的标记不区分大小写，但为了标准化和 XHTML 兼容性，我们建议仅使用小写字母（如本文中的示例）。