HTML

作为 WordPress 开发者,你最先学习的编程语言之一就是 HTML。

在本课中,你将了解什么是 HTML、它在 WordPress 中如何使用,以及在哪里可以找到更多关于编写 HTML 的信息。

什么是 HTML?

HTML 是网络的代名词。互联网的创始人设计 HTML 是为了创建网页。

无论何时你在浏览器中访问一个网站,无论是世界上最大的新闻门户网站之一,还是当地非营利组织的主页,你正在查看的文档都是用 HTML 编写的。

HTML 代表超文本标记语言,用于描述网页的结构。

HTML 由元素组成。元素是 HTML 文档的构建块。

一个 HTML 元素通常有一个开始标签、一个结束标签以及标签之间的内容。

以下是一个 HTML 文档的示例:

<html lang="en">
    <head>
        <title>我的 HTML 文档</title>
    </head>
    <body class="main">
        <h1>这是我的 HTML 文档的标题</h1>
        <img src="https://picsum.photos/250" alt="一张随机选择的图片">
        <p>这是我的 HTML 文档的内容。</p>
    </body>
</html>

在上面的示例中,顶部的 <html> 标签是开始标签,底部的 </html> 标签是结束标签。注意结束标签以斜杠开头。这些标签之间的内容是 <html> 元素的内容。

HTML 元素可以相互嵌套。在上面的示例中,<head> 元素嵌套在 <html> 元素内,而 <title> 元素嵌套在 <head> 元素内。

HTML 元素也是语义化的,这意味着每个标签都有特定的含义,并且应该以特定的方式使用。例如,<h1> 元素是标题元素,而 <p> 元素是段落元素。

HTML 元素也可以有属性。属性用于提供关于元素的额外信息。在上面的示例中,<body> 元素有一个名为 class 的属性,其值为 main

某些元素允许你包含媒体,例如图像、音频和视频。在上面的示例中,<img> 元素用于在页面上包含图像。src 属性用于指定图像的位置,alt 属性用于为图像提供替代文本。

HTML 元素也可以是自闭合的。在上面的示例中,<img> 元素是自闭合的,你会注意到它没有结束标签。

当你在浏览器中访问一个网页时,浏览器会读取 HTML 文档并在浏览器窗口中显示内容。浏览器从上到下、从左到右读取 HTML 文档。

默认情况下,每个元素以不同的方式显示。例如,<h1> 元素显示为标题,而 <p> 元素显示为段落。

HTML 在 WordPress 网站中无处不在,从仪表盘到驱动前端的主题。甚至插件也使用 HTML 来显示内容。

无障碍 HTML

在编写 HTML 时,编写无障碍 HTML 非常重要。无障碍 HTML 是指以方便残障人士使用的方式编写的 HTML。

例如,如果你使用图像显示徽标,你应该为图像包含替代文本。这允许使用屏幕阅读器的人理解图像是什么。

此外,你应该始终使用语义化的 HTML 元素,并以正确的方式使用它们。例如,如果你要创建标题,你应该使用标题元素,而不是段落元素。

其他资源

有关 HTML 的更多信息,你可以访问以下在线资源:

  • MDN 上的 HTML
    • MDN 上的无障碍 HTML
  • Web.dev 上的 HTML
    • Web.dev 上的无障碍 HTML
  • freeCodeCamp 响应式网页设计课程