Html 简明教程

HTML - Elements

HTML Elements 是网页的构建块。它用于创建网页组件。HTML 文档由这些元素的树组成，它们指定如何构建 HTML 文档，以及应在 HTML 文档的各个部分放置哪种内容。

What is an HTML Element?

HTML 元素由起始标签、结束标签和它们之间的内容组成。HTML 元素是 HTML 文档的一个组成部分，它告诉浏览器如何渲染内容。它包含格式化指令、语义含义和内容。

Difference Between tags & element

所有 HTML 元素都是使用 HTML 标记创建的。但是，HTML 元素由一对起始标记和结束标记定义。在这些标记内，我们放置 HTML 文档的内容，这将进一步创建网页的布局和结构。

例如，  是段落的起始标签，  是同一段落的结束标签，但 This is paragraph 是一个段落元素。

尝试单击图标运行按钮，以运行以下 HTML 代码并查看输出。

Examples of HTML Elements

在下面的示例中，我们将看到 Simple Element 、 Nested Element 和 Emty Element

HTML Simple Element

在这个示例中，我们将创建两个 HTML 元素，一个将是标题元素，另一个将是段落元素。

<!DOCTYPE html>
<html>
<head>
    <title>HTML Smiple Element</title>
</head>
<body>
    <h1>This is Header Element</h1>
    <p>This is Paragrapgh Element</p>
</body>
</html>

HTML Nested Element

在这个示例中，我们将创建嵌套元素、父元素和父元素内部的两个子元素。

<!DOCTYPE html>
<html>

<head>
    <title>HTML Nested Element</title>
</head>
<body>
    <p>
        This is parent element containing
        <span>Child Elelement 1</span> &
        <span>Child Elelement 2</span>.
    </p>
</body>
</html>

HTML Empty Element

在这个示例中，我们将创建两个简单元素之间的空元素。

<!DOCTYPE html>
<html>
<head>
    <title>HTML Smiple Element</title>
</head>
<body>
    <h1>This is Header Element</h1>
    <hr>
    <p>This is Paragrapgh Element</p>
</body>

Mandatory Closing tag

只有像 * <hr>* 和 * * 这样的空元素不需要结束标记，而 和 <h1> 等其他元素则需要。不包含这些元素的结束标记可能不会导致错误，并且某些内容可能仍然正常显示。但是，千万不要错过结束标记，因为它可能导致意外和不一致的结果。

<!DOCTYPE html>
<html>
<body>
   <p>
       This line contains a line break tag,
       <br> hence content is visible in
       two separate lines.
   <p>
       This line is <hr>separated by a
       horizontal rule.
</body>
</html>

Are HTML elements case-sensitive?

是的，HTML 元素不区分大小写，这意味着我们可以对标记名称使用大写和小写。不过，这不被推荐为好的做法，因为 W3C 建议并要求使用小写。因此，始终尝试对标记名称使用小写。

<!DOCTYPE html>
<HTml>
<BODY>
   <P>
       HTML is not case sensitive i.e we can
       use both upper or, lower case letters
       in the tags.
   </p>
</BOdy>
</html>