html-标准文档结构

1- 元素嵌套

基本概念: HTML 元素可以像盒子一样相互嵌套，一个元素可以包含在另一个元素内部。
正确嵌套: 元素必须完整地嵌套在另一个元素中，就像俄罗斯套娃一样。开始标签和结束标签必须配对，并且子元素必须完全包含在父元素之内。
- 示例:
```
<div class="container">
  <h1>这是一个标题</h1>
  <p>这是一段文字</p>
</div>
```
错误嵌套: 错误的嵌套就像把俄罗斯套娃的上下两半搞混了。元素的起始标签在父元素内，而结束标签跑到了父元素的外面，这是绝对不允许的。
- 示例 (错误):
```
<div class="container">
  <h1>这是一个标题
</div></h1>
```
注意: 元素不能相互嵌套，必须是一个完整元素嵌套在另一个完整元素内。

2- 元素关系

由于元素可以嵌套，因此产生了以下关系概念：

父元素 (Parent Element): 包含其他元素的元素，就像家庭里的父亲一样。
子元素 (Child Element): 被其他元素包含的元素，就像家庭里的孩子一样。
兄弟元素 (Sibling Element): 拥有相同父元素的元素，就像家庭里的兄弟姐妹一样。
祖先元素 (Ancestor Element): 一个元素的所有父元素，以及父元素的父元素，以此类推。就像家族树中的祖先一样，可以有多层。
后代元素 (Descendant Element): 一个元素的所有子元素，以及子元素的子元素，以此类推。就像家族树中的后代一样，可以有多层。
示例:
```
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面标题</title>
    </head>
    <body>
        <div class="content">
            <p>这是内容</p>
        </div>
    </body>
</html>
```
- <html> 是 <head>, <body> 的父元素，同时也是 <meta>, <title>, <div>, <p> 的祖先元素。
- <head>, <body> 是 <html> 的子元素。
- <head> 和 <body> 是兄弟元素。
- <meta>, <title>, <div>, <p> 都是 <html> 的后代元素。
- <meta> 是 <head> 的子元素，<html> 是 <meta> 的祖先元素。
- <div> 是 <body> 的子元素，<html> 是 <div> 的祖先元素。
- <p> 是 <div> 的子元素， <html>, <body>, <div> 都是 <p> 的祖先元素。

3- 标准文档结构

当你新建一个 HTML 文件并输入 “#” 之后，编辑器会自动生成一些代码，这些代码被称为标准文档结构。让我们逐行分析一下：

3.1- * 文档声明 (Document Type Declaration)

<!DOCTYPE html>：声明文档类型为 HTML5。浏览器会根据这个声明来确定如何解析文档。
DocType 是 Document Type 的缩写。
通常由编辑器自动生成，无需手动输入。

3.2- * 根元素 (Root Element)

<html></html>：HTML 文档的根元素，包含了整个页面的所有内容，就像树的根一样。
一个页面只能有一个 HTML 元素。
所有代码都必须写在 HTML 元素内。

3.3- * `lang` 属性

lang 属性是全局属性，用于指定元素内容所使用的语言。
它通常在 <html> 标签中使用，为整个页面指定语言。
示例: <html lang="en"> 表示页面内容为英语。
旧写法： zh-cn （表示中文）
新写法： zh-cn-hans
- zh: 表示中文。
- cn: 表示中国大陆的普通话。
- hans: 表示简体汉字。
其他语言: 如果页面中的某个元素使用了不同的语言，可以在该元素上单独使用 lang 属性。
lang 属性不是必须的，可以省略，但建议使用，以便浏览器和辅助功能更好地理解网页内容。
浏览器可能会根据这个属性判断是否需要翻译页面。

4- 总结

元素可以嵌套，但要避免交叉嵌套。
了解父元素、子元素、兄弟元素、祖先元素和后代元素之间的关系，可以帮助我们更好地理解和组织 HTML 文档。
理解标准 HTML 文档结构，包括文档声明、根元素和 lang 属性是编写正确 HTML 代码的基础。
lang 属性建议使用 zh-cn-hans 表示简体中文。

#html #css #course

#course #html #css

HTML- 标准文档结构2 上一篇

Element 下一篇