HTML 元素

首页 / HTML / CSS / HTML / HTML 元素 /

技术教程

HTML

HTML 简介 HTML 编辑器基本的 HTML 标签 - 四个实例 HTML 元素 HTML 属性 HTML 标题 HTML 段落 HTML 样式 HTML 文本格式化 HTML 引用 HTML 注释 HTML 颜色 HTML 颜色名

HTML 文档是由 HTML 元素定义的。

HTML 元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

HTML 元素是构成 HTML 页面的基础组件。每个 HTML 元素都由开始标签（start tag）、内容和结束标签（end tag）组成（尽管有些元素可能是空元素，没有内容，也不需要结束标签）。

一个典型的 HTML 元素的结构如下：

&lt;tagname&gt;Content goes here&lt;/tagname&gt;

其中 tagname 是元素的名称，如 p（段落）、div（区块）、a（链接）等。Content goes here 是元素的内容，它可以是文本、图片、其他 HTML 元素等。

例如，一个段落元素可能是这样的：

&lt;p&gt;这是一个段落。&lt;/p&gt;

在这个例子中，<p> 是开始标签，</p> 是结束标签，而 “这是一个段落” 是元素的内容。

有些 HTML 元素是空元素，意味着它们没有内容，也不需要结束标签。这些元素通常用于表示某种状态或属性，而不是包含实际的内容。例如，<br> 元素用于插入一个简单的换行，它不需要任何内容或结束标签：

&lt;p&gt;这是第一行。&lt;br&gt;这是新的一行。&lt;/p&gt;

在上面的例子中，<br> 元素使得文本在 “这是第一行” 后面换行。

其他常见的空元素包括 <img>（用于插入图像）、<input>（用于在表单中创建输入字段）等。虽然这些元素没有内容，但它们可以有属性来定义它们的行为或外观。例如，<img> 元素使用 src 属性来指定图像的来源：

&lt;img src=“image.jpg” alt=“一个图像”&gt;

在这个例子中，<img> 元素没有内容或结束标签，但它使用了 src 和 alt 属性来分别指定图像的 URL 和替代文本。

HTML 元素是构建网页的基本单元，它们通过标签来定义，并可以包含属性来进一步定制它们的行为或外观。

注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。

HTML 元素语法

HTML 元素的语法主要由标签、属性和元素内容构成。以下是一个详细的说明：

HTML 元素的标签可以分为两种：开始标签（start tag）和结束标签（end tag）。开始标签由尖括号 < 和 > 包围的元素名称构成，而结束标签则类似，但在元素名称前多了一个斜杠 /。例如，一个段落元素的开始标签是 <p>，结束标签是 </p>。

属性

属性提供了关于元素的额外信息，并总是包含在开始标签中。属性总是以名称/值对的形式出现，比如 name=“value”。属性和标签名之间以及各属性之间用空格分隔。下面是一个带有属性的 <img> 标签示例：

&lt;img src=“example.jpg” alt=“An example image”&gt;

在这个例子中，src 属性指定了图像的源文件，而 alt 属性提供了图像的替代文本，用于在图像无法显示时提供描述。

元素内容

元素内容是位于开始标签和结束标签之间的文本或其他HTML元素。并非所有元素都会包含内容。例如，<br> 标签就没有内容，它是一个空元素。以下是一个包含内容的 <p> 标签示例：

&lt;p&gt;这是一个段落的内容。&lt;/p&gt;

空元素

某些 HTML 元素被定义为空元素，这意味着它们不能有任何内容。这些元素只需要一个标签，不需要结束标签。例如：

&lt;br&gt; &lt;!– 换行符，不需要结束标签 –&gt; 
&lt;input type=“text” name=“username”&gt; &lt;!– 输入框，也是空元素 –&gt;

HTML 元素语法规则总结：

HTML 标签可以拥有属性，属性能够为页面上的 HTML 元素提供附加信息。
HTML 标签可以嵌套，即一个标签内部可以包含另一个标签。
HTML 文档必须包含 <!DOCTYPE html> 声明，它是 HTML5 文档类型声明，并告诉浏览器这是一个 HTML5 文档。
HTML 文档通常包含 <html>, <head>, <title>, 和 <body> 等基本元素。
标签名称和属性名称都是大小写不敏感的，但通常习惯上使用小写。
属性值可以用双引号 “ 或单引号 ‘ 包围，虽然某些情况下可以省略引号，但推荐使用引号以确保兼容性。

遵循这些规则有助于创建结构清晰、易于维护的 HTML 文档。

嵌套的 HTML 元素

在HTML中，嵌套指的是在一个元素内部放置另一个元素。这是构建复杂网页布局和内容结构的基础。通过嵌套，我们可以创建出具有层次感和组织性的页面。

以下是一个简单的嵌套HTML元素的示例：

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;title&gt;嵌套的HTML元素示例&lt;/title&gt;  


&lt;/head&gt;

&lt;body&gt;

&lt;div&gt; &lt;!-- 外层div元素 --&gt;  
    &lt;h1&gt;欢迎来到我的网站&lt;/h1&gt; &lt;!-- 标题元素 --&gt;  
    &lt;p&gt;这是一个段落。 &lt;!-- 段落元素 --&gt;  
        &lt;strong&gt;这里的文字会被加粗显示。&lt;/strong&gt; &lt;!-- 加粗元素嵌套在段落中 --&gt;  
    &lt;/p&gt;  
    &lt;ul&gt; &lt;!-- 无序列表元素 --&gt;  
        &lt;li&gt;列表项 1&lt;/li&gt; &lt;!-- 列表项元素 --&gt;  
        &lt;li&gt;列表项 2  
            &lt;ul&gt; &lt;!-- 嵌套的无序列表 --&gt;  
                &lt;li&gt;子列表项 1&lt;/li&gt;  
                &lt;li&gt;子列表项 2&lt;/li&gt;  
            &lt;/ul&gt;  
        &lt;/li&gt;  
        &lt;li&gt;列表项 3&lt;/li&gt;  
    &lt;/ul&gt;  
&lt;/div&gt;  


&lt;/body&gt;

&lt;/html&gt;

在这个例子中，我们可以看到多个层次的嵌套：

<div> 元素包含了整个页面的主要内容。
<h1>、<p> 和 <ul> 元素被嵌套在 <div> 内部。
在 <p> 元素内部，我们又嵌套了一个 <strong> 元素来强调某些文字。
在 <ul> 无序列表中的一个 <li> 元素内部，我们又嵌套了另一个 <ul> 元素，形成了子列表。

嵌套使得我们能够创建更加复杂和丰富的页面结构。但是，也需要注意正确地关闭每个标签，以确保HTML文档的合法性和可读性。不正确的嵌套或未关闭的标签可能会导致页面显示异常或解析错误。

此外，虽然嵌套提供了很大的灵活性，但过度嵌套也可能会使HTML代码变得难以阅读和维护。因此，在设计页面结构时，应寻求简洁明了的嵌套方式。

HTML 实例解释

当然，下面我将提供一个简单的HTML实例，并对其中的各个部分进行解释。

&lt;!DOCTYPE html&gt;

&lt;html lang=“en”&gt;

&lt;head&gt;

&lt;meta charset="UTF-8"&gt;  
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;  
&lt;title&gt;我的第一个网页&lt;/title&gt;  


&lt;/he&gt;

&lt;body&gt;

&lt;header&gt;  
    &lt;h1&gt;欢迎来到我的网站&lt;/h1&gt;  
&lt;/header&gt;  
&lt;nav&gt;  
    &lt;ul&gt;  
        &lt;li&gt;&lt;a href="#"&gt;首页&lt;/a&gt;&lt;/li&gt;  
        &lt;li&gt;&lt;a href="#"&gt;关于我们&lt;/a&gt;&lt;/li&gt;  
        &lt;li&gt;&lt;a href="#"&gt;联系我们&lt;/a&gt;&lt;/li&gt;  
    &lt;/ul&gt;  
&lt;/nav&gt;  
&lt;main&gt;  
    &lt;section&gt;  
        &lt;h2&gt;介绍&lt;/h2&gt;  
        &lt;p&gt;这是一个简单的HTML页面示例。&lt;/p&gt;  
    &lt;/section&gt;  
    &lt;section&gt;  
        &lt;h2&gt;服务&lt;/h2&gt;  
        &lt;p&gt;我们提供各种服务，包括但不限于：&lt;/p&gt;  
        &lt;ul&gt;  
            &lt;li&gt;网页设计&lt;/li&gt;  
            &lt;li&gt;软件开发&lt;/li&gt;  
            &lt;li&gt;图形设计&lt;/li&gt;  
        &lt;/ul&gt;  
    &lt;/section&gt;  
&lt;/main&gt;  
&lt;footer&gt;  
    &lt;p&gt;版权所有 © 2023 我的网站&lt;/p&gt;  
&lt;/footer&gt;  


&lt;/body&gt;

&lt;/html&gt;

解释：

<!DOCTYPE html>：声明文档类型，告诉浏览器这是一个HTML5文档。
<html lang=“en”>：HTML元素的开始标签，它包围着整个页面的内容。lang属性定义了页面内容的语言，这里是英文（en）。如果是中文页面，可以改为lang=“zh-CN”。
<head>：头部元素，包含了关于文档的元信息，如字符集、视口设置、标题等。
<meta charset=“UTF-8”>：定义文档使用的字符集为UTF-8，这是一种能够表示任何字符在Unicode标准中的编码方式。
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>：使页面在移动设备上正确显示，设置视口的宽度为设备宽度，并设置初始缩放级别为1.0。
<title>：定义浏览器标签页上显示的标题。
<body>：主体元素，包含了所有可见的页面内容。
<header>, <nav>, <main>, <footer>：这些是HTML5引入的语义化标签，分别代表页面的头部、导航、主要内容和页脚。
<h1>, <h2>：标题元素，<h1>表示最高级别的标题，<h2>次之。这些元素对于页面的层次结构和SEO很重要。
<p>：段落元素，用于包含文本内容。
<ul>, <li>：无序列表和列表项元素，用于创建项目列表。
<a href=“#”>：链接元素，href属性指定了链接的目标地址。在这个例子中，链接是占位符（#），实际开发中应替换为有效的URL。

这个HTML实例展示了如何构建一个基本的结构，包括头部、导航、主要内容区域和页脚。在实际开发中，你还可以通过CSS来美化页面，以及使用JavaScript来添加交互功能。

不要忘记结束标签

忘记添加结束标签是HTML编码中常见的错误之一。每个开始标签（除了自闭合标签如<br/>，<img/>等）都应该有一个对应的结束标签，以确保文档结构的正确性和浏览器能够正确解析和渲染内容。

以下是一些常见的HTML元素及其对应的结束标签：

&lt;div&gt; … &lt;/div&gt;

&lt;p&gt; … &lt;/p&gt;

&lt;span&gt; … &lt;/span&gt;

&lt;a&gt; … &lt;/a&gt;

&lt;h1&gt; … &lt;/h1&gt;

&lt;h2&gt; … &lt;/h2&gt;

&lt;!– 以此类推，直到 h6 –&gt;

&lt;ul&gt; … &lt;/ul&gt;

&lt;ol&gt; … &lt;/ol&gt;

&lt;li&gt; … &lt;/li&gt;

&lt;section&gt; … &lt;/section&gt;

&lt;article&gt; … &lt;/article&gt;

&lt;header&gt; … &lt;/header&gt;

&lt;footer&gt; … &lt;/footer&gt;

&lt;nav&gt; … &lt;/nav&gt;

&lt;main&gt; … &lt;/main&gt;

&lt;aside&gt; … &lt;/aside&gt;

&lt;form&gt; … &lt;/form&gt;

&lt;!– 还有许多其他标签 –&gt;

忘记添加结束标签可能会导致以下问题：

布局问题：缺少结束标签会打乱页面的布局，因为浏览器会尝试修复错误，但结果可能不符合预期。
样式问题：CSS样式可能无法正确应用，因为元素的层次结构已经被破坏。
功能问题：JavaScript可能无法正确选取或操作DOM元素。
7}爬虫可能无法正确理解页面内容，从而影响的搜索引擎优化（SEO）。

因此，编写HTML代码时，务必确保每个开始标签都有对应的结束标签，或者使用自闭合标签（对于空元素）。此外，使用代码编辑器或IDE（集成开发环境）的代码检查功能，以及在线HTML验证工具，都可以帮助识别和修复这类错误。

空的 HTML 元素

在HTML中，有些元素被定义为“空元素”（empty elements），这意味着它们不能包含任何内容，也不需要结束标签。这些元素通常用于表示某种行为或状态，而不是包含文本或其他HTML元素。

以下是一些常见的空HTML元素的例子：

&lt;br&gt;      &lt;!– 换行符 –&gt;

&lt;input&gt;   &lt;!– 输入框 –&gt;

&lt;img&gt;     &lt;!– 图像 –&gt;

&lt;link&gt;    &lt;!– 链接关系 –&gt;

&lt;meta&gt;    &lt;!– 元数据 –&gt;

&lt;area&gt;    &lt;!– 图像映射区域 –&gt;

&lt;base&gt;    &lt;!– 为页面上的所有相对URL指定默认地址或默认目标 –&gt;

&lt;col&gt;     &lt;!– 用于定义表格的列属性 –&gt;

&lt;command&gt; &lt;!– 定义命令按钮，用于调用JavaScript代码（已废弃） –&gt;

&lt;embed&gt;   &lt;!– 嵌入外部内容 –&gt;

&lt;keygen&gt;  &lt;!– 生成密钥对（已废弃） –&gt;

&lt;param&gt;   &lt;!– 为嵌入的对象定义参数 –&gt;

&lt;source&gt;  &lt;!– 定义媒体元素的媒体资源 –&gt;

&lt;track&gt;   &lt;!– 定义用在视频或音频元素上的文本轨道 –&gt;

&lt;wbr&gt;     &lt;!– 可能的换行点 –&gt;

请注意，虽然这些元素是空元素，但在HTML5中，你可以选择在开始标签的末尾添加一个斜杠（/），例如<br/>、<input/>等，但这并不是必须的。这种写法主要是受到XHTML的影响，在XHTML中，所有的空元素都必须以这种方式闭合。然而，在纯HTML5文档中，这种斜杠是可选的，且通常被省略。

另外，值得注意的是，<script>、<style>和<textarea>等元素虽然不是空元素，但它们的结束标签（</script>、</style>、</textarea>）内不能包含任何内容，否则可能会导致解析错误。

在使用空元素时，你主要通过设置元素的属性来控制它们的行为和外观，例如设置<img>元素的src属性来指定图像的URL，或者设置<input>元素的type属性来定义输入框的类型等。

HTML 提示：使用小写标签

在HTML中，标签名称不区分大小写，这意味着 <div>, <DIV>, 和 <Div> 在技术上都是有效的并且会被浏览器以相同的方式解析。然而，使用小写标签是被广泛推荐的最佳实践，原因如下：

一致性：使用小写标签可以确保代码的一致性，使得代码更加整洁和易于阅读。
可读性：小写字母更易于阅读，尤其是在代码编辑器和一些具有代码高亮功能的IDE中。
XHTML 和 XML 兼容性：XHTML 是 HTML 的一个更严格的变体，它遵循 XML 的规则。在 XML 和 XHTML 中，标签名称是区分大小写的，并且通常要求使用小写。如果你计划将你的 HTML 转换为 XHTML 或嵌入到 XML 文档中，使用小写标签会避免潜在的问题。
团队协作：在团队环境中，统一的编码风格对于保持代码的清晰和一致性至关重要。使用小写标签可以作为团队编码规范的一部分。
未来兼容性：虽然当前的 HTML 规范不区分标签大小写，但未来的规范或浏览器实现可能会对此有所要求。使用小写标签可以确保你的代码更加未来兼容。

因此，尽管大写或小写标签在技术上都是可行的，但最佳实践是使用小写标签来编写 HTML 代码。这有助于提高代码的可读性、一致性和兼容性。

上一篇：基本的 HTML 标签 - 四个实例

下一篇： HTML 属性