一、HTML

1、HTML文档描述

（1）结构化

像一根倒置的”树”，从根到叶子,具有明显的层次

HTML结构化其实就是HTML的编写规范，通过使用HTML语义化标签根据Web标准编写具有明确结构逻辑的HTML代码。

例如，最基本的结构：

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

（2）DOM

html 结构使用”文档对象模型”来描述(document objet model)

文档对象模型 (DOM) 是HTML和XML文档的编程接口。

它提供了对文档的结构化的表述，并定义了一种方式可以通过程序中对该结构进行访问，从而改变文档的结构、样式和内容。

DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

DOM是web页面的完全的面向对象表述，它能够使用如 JavaScript等脚本语言进行修改。

（3）标签

HTML称为超文本标记语言，标记标签通常就被成为标签，HTML标签是HTML的最基本单位。

HTML是由具有语义的标签组成。

（4）元素

通过　HTML标签创建了HTML元素，例如：

// 主根元素
<html>
// 元相关元素
<meta>
等

（5）属性

HTML 中的元素拥有属性（attribute）；这些额外的属性值可以配置元素或者以各种方式来调整元素的行为，进而满足用户所需的标准。

通过属性可以对元素进行进一步的描述，或者说进行装饰。

例如

<div style="width: 100px;height: 100px;background-color:aquamarine;">aa</div>

2、HTML 结构

<!-- 文档类型 -->
<!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里注释的写法
HTML标签的语法，闭合：<h1></h1>。但是HTML中也有单标签，单标签不用闭合。

3、元素

元素 = 属性 + 标签 + 内容

元素有单标签、双标签

双标签
- 内容为当前文件内的
单标签
- 通常用于引入外部资产，例如： <link rel="stylesheet" href="style.css"> 、<img src="logo.png" alt="">
- <input type="text">
但是：
- <script src="test.js"></script>
- <video src=""></video>

1、HTML基础：文档描述和文档结构