目标
了解各种HTML标签
普通标签和语义标签
了解各种标签的使用场景
了解并掌握HTML引入CSS的方法
了解并掌握HTML引入js的方法
了解基础的浏览器调试工具
HTML
HTML基本认识
开始学习HTML
需要注意的地方
注释
<html> <!-- 这里是注释 --> </html>
常用语义化标签
语义化标签的引入使得HTML代码的可读性增强，结构更加清晰，也有利于团队的开发维护
main
article
aside
header
footer
nav
section
figure
练习
一个小的练习网站
练习熟悉以上标签
常用表单元素
button
checkbox
color
password
radio
text
number
select
textarea
练习
花10分钟时间自己熟悉
认识浏览器
DevTools
Chrome DevTools是一组内建在Chrome浏览器的Web开发者工具，通过它我们可以非常方便得对网页应用进行的分析、调试，是我们在日常开发中最常用的调试工具，是Web开发者的必备技能。在前面的课程中我们已经使用过DevTools中的一些功能，现在我们再来系统地看一看平时比较常用地几个模块。
Elements/元素
该模块可以让我们查看和修改DOM，在左侧可以看到DOM树，当我们在节点上右键，可以看到弹出的右键功能菜单，当我们选择一些功能进行修改之后，DOM的变化会立刻在页面中生效
添加属性：可以让我们给节点添加自定义的属性
编辑属性：可以对已有的属性进行修改
以HTML形式编辑：可以让整个DOM节点树变为可编辑的状态，适合需要大编辑编辑DOM的场景
编辑文本：双击DOM节点的文本，可以对其内容进行修改
删除元素：按 Del 键，可以直接将该节点删除
复制/复制outerHTML：可以复制该节点的HTML内容
复制/复制selector：可以复制该节点的CSS选择器
复制/复制样式：可以复制该节点所应用的CSS样式列表，当你需要编写JS代码对DOM进行测试操作的时候，非常有用
强制状态：这里可以将元素强制伪类状态，比如 :hover，方便我们调试处于对应状态时节点的样式
以递归方式展开：DOM节点树默认是折叠的，通过该选项可以将所有的子节点展开
捕获节点屏幕截图：可以将该节点的当前状态截取快照，保存成图片
左上角的 检查 按钮，可以让我们在页面上直接选择节点，然后在左侧的DOM树中会自动选中，右侧主要是样式面板，可以让我们查看、修改DOM的CSS样式，它也有几个常用的Tab页
样式
这个模块主要时列出当前节点所应用的CSS样式，它包括两部分，一部分是内联样式，即 element.style 部分，另外就是下面的CSS选择器对应的样式，我们都可以对这些样式直接进行增删改，也可以看到这些样式在文件中定义的位置。最下面会显示该节点的盒子模型，它的尺寸、边框、间距等都会用一个盒子的形式展示出来，非常方便我们分析尺寸。
已计算
这个模块可以查看元素实际计算生效的样式的值，比如通过变量 var、计算函数 calc 等动态计算的结果，或者继承得到的样式，都可以通过这里来查看。
布局
可以查看页面中网格布局的具体信息。
Console/控制台
控制台的主要功能有两个，一是查看JS代码的打印输出的信息，比如普通的log，或者是报错信息，二是可以直接在这里执行JS代码，对页面进行操作
Sources/源代码
源代码面板可以让我们对页面所加载的资源进行查看，也可以对JS代码进行断点调试
source map【以后讲到typescript以及webpack的时候在详细讲解】
这里涉及到另外一种技术叫 source map，我们有必要先来了解一下。
被浏览器执行的JS或者CSS代码通常会以某种方式从开发人员创建的原始资源种转义而来，例如：
源码通常会合并和压缩，以高效的方式从服务端获取
页面中运行的JS通常是由机器生成的，就像TypeScript、Babel这类的编译工具一样
CSS通常也会使用一些预处理工具来生成，比如LESS、SASS
这些场景下，调试原始的代码会比浏览器实际下载、执行的转换之后的代码更加容易，source map 是从已转换的代码映射到原始源代码的的文件，使浏览器能够重建原始源并在调试器中显示重建之后的源代码。
为了能够在调试时使用 source map，你必须
为源代码生成一个 source map 文件，这个过程不需要我们手动执行，我们常用的这些编译器都支持自动生成，在我们前面的例子中也可以看到伴随着生成的js文件有一个对应的map文件，这个就是它的 source map，我们也不需要关心map文件的具体内容
加入一个注释在转换后的文件，它用来指向对应的 source map，语法类似
//# sourceMappingURL=main.js.map
1
现在我们刷新页面，通过调试工具的 Sources 面板就可以看到原始的代码了，并且可以直接对它进行断点调试。
source map只是用来方便我们在开发的过程中进行代码调试，当需要发布到生产环境的时候，应该取消 source map 的生成，并且对代码进行压缩，这些可以在后面借助于构建工具来完成，对我们的源代码进行一定程度的保护。
了解 source map 技术之后，我们就可以来分析页面中的资源了，在左侧边栏会按照域名、路径列举出所加载的各种图片、样式、脚本文件，如果某个资源指定了 source map 并且加载成功，查看的时候会自动切换到映射源。
Application/应用程序
该面板可以让我们查看Web页面存储的数据，目前常用到的主要是 Storage 部分
Storage
Web Storage API 提供了存储机制，通过该机制，浏览器可以安全地存储键值对，作为 Web Storage API 的接口，Storage 提供了访问特定域名下的会话存储或本地存储的功能，例如，可以添加、修改或删除存储的数据项。存储对象是简单的键值存储，类似于对象，但是他们在页面加载时保持完整，键和值始终是字符串（数字、布尔型、对象都会被自动转换为字符串），Web Storage 包含如下两种机制：
sessionStorage
sessionStorage 为每一个给定的源位置一个独立的存储区域，该存储区域在页面会话期间可用
页面会话在浏览器打开期间一直保持，并且重新加载或者恢复页面仍会保持原来的会话
打开多个相同URL的Tabs页面，会创建各自的 sessionStorage
关闭对应的浏览器窗口、tab，会清除对应的 sessionStorage
localStorage
功能与 sessionStorage 相同，但是在浏览器关闭，重新打开之后数据仍然可用，可以用来做缓存数据的持久化
调用其中任何一个会创建 Storage 对象，通过 Storage 对象，可以设置、获取、移除数据项，不同源之间的数据是相互独立、隔离的
Storage 属性
length
返回一个整数，表示存储在 Storage 对象中的数据项的数量，如
Storage 方法
Storage.key()
该方法接受一个数值n作为参数，并返回存储中第n个键名
Storage.getItem()
该方法接受一个键名作为参数，返回键名对应的值
Storage.setItem()
该方法接受一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值。
Storage.removeItem()
该方法接受一个键名作为参数，并把该键名从存储中删除
Storage.clear()
该方法将会清空存储中的所有键名
Cookie
该面板可以查看当前源下面的Cookie信息，关于Cookie的具体信息我们在后面的HTTP章节再具体介绍
React Developer Tools
这是一个Chrome插件，它可以将组件结构、状态等信息都展示出来，对于我们调试React程序特别有用。
Network/网络
Network面板是我们分析网络请求的利器，我们常见的Web页面以及所关联的资源都是通过HTTP请求加载的，通过该功能我们可以分析页面资源的请求过程、响应内容，便于我们和服务端联调。
练习
花10分钟熟悉浏览器
初识CSS
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ywuHK1gf-1640573771572)(./imgs/css-declaration.png)]
选择器（Selector）：HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器就行了。
声明（Declaration）：一个单独的规则，如 color: red; 用来指定添加样式元素的属性。
属性（Properties）：改变 HTML 元素样式的途径。（本例中 color 就是
元素的属性。）CSS 中，由编写人员决定修改哪个属性以改变规则。
属性的值（Property value）：在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。
其他规则
每个规则集（除了选择器的部分）都应该包含在成对的大括号里（{}）。
在每个声明里要用冒号（:）将属性与属性值分隔开。
在每个规则集里要用分号（;）将各个声明分隔开。
如果要同时修改多个属性，只需要将它们用分号隔开，如
p { color: red; width: 500px; border: 1px solid black; }
可以选择多种类型的元素并为它们添加一组相同的样式。将不同的选择器用逗号分开。例如
p, li, h1 { color: red; }
引入CSS的方法
内联方式
直接在 HTML 标签中的 style 属性中添加 CSS。
hello world
嵌入方式
在 HTML 头部中的
<style> p { color: red; } </style>
链接方式
使用 HTML 头部的 标签引入外部的 CSS 文件。
<link rel="stylesheet" type="text/css" href="../css/index.css" /> ... <p class="title"> hello world </p>
比较链接方式和导入方式
链接方式（下面用 link 代替）和导入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我们来比较这两种方式，并且说明为什么不推荐使用 @import。
link 属于 HTML，通过 标签中的 href 属性来引入外部文件，而 @import 属于 CSS，所以导入语句应写在 CSS 中，要注意的是导入语句应写在样式表的开头，否则无法正确导入外部文件；
@import 是 CSS2.1 才出现的概念，所以如果浏览器版本较低，无法正确导入外部样式文件；
当 HTML 文件被加载时，link 引用的文件会同时被加载，而 @import 引用的文件则会等页面全部下载完毕再被加载；
初识js
引入js引入js文件
<script type="text/javascript" src="./index.js"></script>
内部直接使用
<script type="text/javascript"> alert("hello world");</script>
标签插入
<button onclick="javascript:alert('hello world')">点我</button>
