Html 简明教程

HTML - Elements

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

HTML Elements are building block of a web page. It is used to create component for webpages. HTML documents consist of a tree of these elements and they specify how HTML documents should be built, and what kind of content should be placed within various parts of an HTML document.

What is an HTML Element?

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

HTML Elements are consists of a start tag, an end tag, and the content between them. HTML Element is a component of HTML document, it tells the browser how a content should be render. It contains formating instruction, semantic meaning and content.

Difference Between tags & element

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

All the HTML elements are created using the HTML tags. But, an HTML element is defined by a pair of starting tags and closing tags. Within these tags, we place the content of the HTML document which further creates the layout and structure of the web page.

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

For example,  is the starting tag of a paragraph and  is closing tag of the same paragraph but This is paragraph is a paragraph element.

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

Try to click the icon run button to run the following HTML code to see the output.

Examples of HTML Elements

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

In the bellow examples we will see Simple Element, Nested Element and Emty Element

HTML Simple Element

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

In this example we will create two HTML element one will header element and other one will be paragraph element.

<!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

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

In this example we will creat a nested element, a parent element and two child element inside of the parent 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

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

In this example we will create a empty element between two simple 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> 等其他元素则需要。不包含这些元素的结束标记可能不会导致错误，并且某些内容可能仍然正常显示。但是，千万不要错过结束标记，因为它可能导致意外和不一致的结果。

Only the empty elements like <hr> and   do not require closing tags, other elements such as and <h1> do. Failing to include closing tags for these elements may not result in an error, and some content may still display properly. However, never miss the closing tag as it may lead to unexpected and inconsistent results.

<!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 建议并要求使用小写。因此，始终尝试对标记名称使用小写。

Yes, HTML elements are case-insensitive which means we can use both uppercase and lowercase for tag names. However, it is not a good practice as W3C recommends and demands lowercase. Hence, always try to use lowercase for the tag names.

<!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>