这是我参与「第四届青训营 」笔记创作活动的的第1天
一、课堂重点内容
前端
-
前端的定义:
解决GUI人机交互问题 跨终端 Web技术栈 -
前端的技术栈
行为 JavaScript 样式 CSS 内容 HTML -
前端的关注点
功能 体验 安全 性能 无障碍 美观 兼容 -
前端边界
发展较快，技术不断在更新，因此边界是在不断扩展的 -
开发环境
浏览器：如Chrome Firefox Safari 编辑器：如VSCode Vim WebStorm
HTML
-
HTML
HyperText Markup Language 超文本(图片、标题、链接、表格等) 标记 语言 -
语法
-
DOM
二、详细知识点介绍
HTML语法
标签和属性不区分大小写，推荐小写
标签成对出现
标签内部可以设置属性，建议用双引号包裹
空标签可以不闭合
多个连续空格或换行默认会合并 可以使用white-space属性调整
什么是DOM
DOM（Document Object Model）即文档对象模型，是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API。DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。
三、实践联系例子
以下为一段HTML代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>一级标题</h1>
<p>段落内容</p>
</body>
</html>
通过该代码能生成以下页面
可以看到，整个html代码由html标签包裹，就如DOM树的结构图所示，由html出发，到达head与body分支，然后又在分支中产生新的分支，同时一个分支的完毕伴随着标签的闭合，如
<h1>标题内容<\h1>，<h1>为 一级标题 标签，当该标签内容完毕时，使用了</h1>完成了闭合。
四、课后个人总结
不易掌握知识点：
<!DOCTYPE>声明必须位于 HTML5 文档中的第一行，也就是位于 标签之前。该标签告知浏览器文档所使用的 HTML 规范。doctype 声明不属于 HTML 标签；它是一条指令，告诉浏览器编写页面所用的标记的版本。- DOM模型不仅描述了文档的结构，还定义了结点对象的行为，利用对象的方法和属性。由于DOM模型的精确描述，我们可以方便地访问、修改、添加和删除DOM树的结点和内容。
容易混淆知识点：
- 一般来说标签成对出现，但存在空标签可以不闭合，比如横线标签既可以仅使用
<hr>也可以仅使用<hr/>，但是对于使用闭合空标签如<hr></hr>就可能出现一些意外情况。
