今天让我们继续走向HTML——HTML元素

105 阅读2分钟

HTML 元素

HTML 元素是从 start 标签到 end 标签的所有内容:

<tagname>内容在这里...</tagname >

一些 HTML 元素的示例:

<h1>我第一行。</h1>

<p>我的第一段。</p>

Start tagElement contentEnd tag
<h1>My First Heading</h1>
<p> My first paragraph.</p>
<br> nonenone

注意 某些 HTML 元素没有内容(如 <br> 元素)。这些元素称为空元素。空元素没有 end 标签! ##### 嵌套的 HTML 元素

HTML 元素可以嵌套(这意味着元素可以包含其他元素)。

所有 HTML 文档都由嵌套的 HTML 元素组成。

以下示例包含四个 HTML 元素<html>,<body>,<h1>,<p>

<html>  
<body>  
<h1>My First Heading</h1>  
<p>My first paragraph.</p>   
</body>  
</html>

亲自试一试 »

示例解释

元素是根元素 它定义了整个 HTML 文档。<html>

它有一个 start 标签和一个 end 标签 。<html>``</html>

然后,元素内部有 元素:<html>``<body>

<body>  

<h1>My First Heading</h1>  
<p>My first paragraph.</p>    

</body>

该元素定义了 document 的正文。<body>

它有一个 start 标签和一个 end 标签 。<body>``</body>

然后,在元素内部有 是另外两个元素:和 :<body>``<h1>`` <p>

<h1>My First Heading</h1>  
<p>My first paragraph.</p>

元素定义标题。<h1>

它有一个 start 标签和一个 end 标签:<h1>``</h1>

<h1>My First Heading</h1>

元素定义一个段落。<p>

它有一个 start 标签和一个 end 标签:<p>``</p>

<p>My first paragraph.</p>

从不跳过结束标记

即使您忘记了 end 标签,某些 HTML 元素也会正确显示:

This is a paragraph

This is a paragraph

亲自试一试 »

但是,永远不要依赖这个!如果您忘记了 end 标签,可能会出现意外结果和错误!


空 HTML 元素

没有内容的 HTML 元素称为空元素。

该标签定义一个换行符,而 是没有结束标签的空元素:<br>

<p>This is a <br> paragraph with a line break.</p>

亲自试一试 »


HTML 不区分大小写

HTML 标记不区分大小写:表示与 .<P>``<p>

HTML 标准不需要小写标记,但 W3C 建议在 HTML 中使用小写,并且对于更严格的文档类型(如 XHTML)要求小写。

总结

  1. 文档类型声明

    • <!DOCTYPE html>:声明文档类型,告诉浏览器这是一个 HTML5 文档。
  2. HTML 根元素

    • <html>:HTML 文档的根元素,包含所有其他 HTML 元素。
  3. 头部元素

    • <head>:包含文档的元数据,如字符集、标题、样式表、脚本等。
    • <title>:定义文档的标题,显示在浏览器的标签页上。
    • <meta>:定义文档的元数据,如字符集、描述、关键词等。
    • <link>:定义文档与外部资源的关系,如样式表。
    • <style>:定义内联 CSS 样式。
    • <script>:定义内联 JavaScript 脚本或引入外部脚本。
  4. 主体元素

    • <body>:包含文档的所有可见内容,如文本、图像、表格、表单等。
  5. 段落

    • <p>:定义一个段落。
  6. 标题

    <h1> 到 <h6>:定义不同级别的标题,<h1> 是最高级别,<h6> 是最低级别。