Html学习 | 青训营笔记这是我参与「第四届青训营」笔记创作活动的第3天。今天我学习了如何编写一个Html文件，在此

这是我参与「第四届青训营」笔记创作活动的第3天。今天我学习了如何编写一个Html文件，在此分享给大家。

简介

Html，即Hyper Text Markup Language，”超文本标记语言“。超文本，即不是简单的纯文字，包含图片、标题、链接、表格等。标记语言，即使用开始标签与结束标签来表示一段内容，如<h1>标题</h1>，<img>表示图片等等。

语法

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面标题</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <p>段落内容</p>
    </body>
</html>

如上例，第一行doctype指明了html版本，告诉浏览器采用哪一种渲染方式。如果不写这一行，浏览器会以较旧的版本进行渲染，从而导致页面展示效果与预期不符。

html所有内容均包裹在<html></html>标签中。

<head>标签中包含页面的元数据，这些数据不会直接呈现给用户。如页面编码方式、页面标题等等信息。

<body>中放着我们需要呈现给用户的内容，如标题、正文等等。

如此便构成了一个简单的html文件，将其保存为html文件后用浏览器打开，可以获得如图所示的一个页面：

html的标签和属性不区分大小写，但是一般推荐使用小写。
空标签可以不闭合，比如input、meta
属性值推荐使用双引号包裹
某些属性值可以省略，比如required、readonly

DOM树

DOM，即document object model。DOM结构构成的基本要素主要为节点，而文档的结构就是由层次化的节点组成。从网络传给渲染引擎的 HTML 文件字节流是无法直接被渲染引擎理解的，所以要将其转化为渲染引擎能够理解的内部结构，这个结构就是 DOM。

浏览器拿到html文件后会首先将其解析为DOM树，document为文档根节点，其中每一个节点称之为DOM节点。