![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：
Collection
Collection
像一根倒置的”树”，从根到叶子,具有明显的层次
HTML结构化其实就是HTML的编写规范，通过使用HTML语义化标签根据Web标准编写具有明确结构逻辑的HTML代码。
例如，最基本的结构：
<!DOCTYPE html><html><head></head><body></body></html>
html 结构使用”文档对象模型”来描述(document objet model)
文档对象模型 (DOM) 是HTML和XML文档的编程接口。
它提供了对文档的结构化的表述，并定义了一种方式可以通过程序中对该结构进行访问，从而改变文档的结构、样式和内容。
DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。
DOM是web页面的完全的面向对象表述，它能够使用如 JavaScript等脚本语言进行修改。
HTML称为超文本标记语言，标记标签通常就被成为标签，HTML标签是HTML的最基本单位。
HTML是由具有语义的标签组成。
通过 HTML标签创建了HTML元素，例如：
// 主根元素<html>// 元相关元素<meta>等
HTML 中的元素拥有属性（attribute）；这些额外的属性值可以配置元素或者以各种方式来调整元素的行为，进而满足用户所需的标准。
通过属性可以对元素进行进一步的描述，或者说进行装饰。
例如
<div style="width: 100px;height: 100px;background-color:aquamarine;">aa</div>
<!-- 文档类型 --><!DOCTYPE html><!-- html 根元素，lang定义页面语言 --><html lang="zh_CN"><!-- 头元素: 页面描述,供浏览器或搜索引擎解析时参考 --><head><!-- 元标签meta: charset 默认字符集,utf8可表示世界上几乎所有已知语言字符 --><meta charset="utf-8"><!-- 浏览器兼容,原用于IE8适配,可确保按IE最高版本来解析页面,可有可无,现在微软也采用了Chrome内核啦 --><meta http-equiv="X-UA-Compatible" content="IE=edge" /><!-- 视口适配控制: 极其重要,这涉及到三个"视口"类型之间的转换与适配,后面讲到移动端布局更细说 --><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!-- 页面标题: 显示在浏览器标签页,用于描述页面信息,主要用于给搜索引擎搜索 --><title>Document</title><!-- 引入外部样式表 --><link rel="stylesheet" href="style.css" /><!-- 引入外部脚本 --><script src="outer.js"></script></head><!-- 主体元素: 页面实际显示的内容,也是开发重点和用户真正关注的部分 --><body><h1>H1标题标签</h1></body></html>
注：
<!-- 文档类型 -->： HTML里注释的写法<h1></h1>。但是HTML中也有单标签，单标签不用闭合。元素 = 属性 + 标签 + 内容
元素有单标签、双标签
<link rel="stylesheet" href="style.css"> 、<img src="logo.png" alt=""><input type="text"><script src="test.js"></script><video src=""></video>