这是我参与「第四届青训营 」笔记创作活动的的第1天
一、本堂课重点内容：
- 前端技术栈--HTML的基础语法
- 前端的重点关注
二、前端技术栈--HTML的基础语法：
- HTML--------->内容
- CSS----------->样式
- JavaScript---->行为
HTML（HyperText Markup Language）HyperText 译为超文本，Markup 译为标记。
在超文本中，包含多种内容：图片、标题、链接、表格等等，标记语言（Markup Language）即前端的HTML代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>一级标题</h1>
<p>段落内容</p>
</body>
</html>
标记语言：<>内容</>
图片：<img src="/链接" />
语法：
- 标签和属性不区分大小写
- 空标签不闭合，例如input、meta
- 属性值推荐用双引号
- 某些属性值可以省略
三、实践练习例子：
<h1-6> <p>h表示标题等级，表示段落内容<ol>+<li>有序列表<ul>+<li>无序列表<dl>+<dt>+<dd>定义列表<a href="链接">内容</a>链接<img src="地址">图片（同理video视频、audio音频）- input属性，placeholder、type（range滑动块、number数字、date日期）
- textarea，文本内容
注意代码的语义化：
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
HTML的精髓就在于标签的语义。在HTML中，大部分标签都有它自身的语义，例如p标签，表示的是"paragraph",标记的是一个段落；hl标签，表示“headerl”,标记的是一 个最高级标题……而div和span是无语义的标签，我们应该尽可能少用。
四、DOM树
graph TD
document --> html
html --> head
html --> body
head --> meta
head --> title
title --> PageTitle
body --> h1
body -->p
h1 --> Heading
p --> PageContent
文档（页面）中有一个根（root），这个根标签包含head标签与body标签，head标签中又包含meta与title标签，body标签中包含div、p、header、main等等标签，其中main下面又有article、aside等等标签，article标签中又有其它的标签等等，这就组成了树状结构图，也叫DOM树。
- 元素（element）：文档中的都有标签都是元素，元素可以看成是对象
- 节点（node）：文档中都有的内容都是节点：标签，属性，文本
- 文档（document）：一个页面就是一个文档
- 这三者的关系是：文档包含节点，节点包含元素 DOM结构为了让JavaScript可以对文档中的标签、属性、内容等进行 访增删改 操作。
五、总结：
HTML内容重点在于各类标签的使用，需要对每一个标签都进行实践认识，加深印象。才能在之后的编写过程中，找到最适合的标签属性来进行使用。
