作为 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 响应式网页设计课程