本文档详细介绍了HTML的基本标签、语义化标签的使用，以及如何引入CSS和JavaScript。此外，还涵盖了浏览器调试工具的使用，如ChromeDevTools的各个模块功能，包括元素检查、样式查看与修改、控制台、源代码、应用程序和网络面板。同时，讲解了CSS的选择器、声明和属性，以及内联、嵌入和链接引入CSS的方式。对于JavaScript，介绍了引入JS文件的两种方式及在HTML中的使用。内容旨在帮助初学者快速上手网页开发。
目标
- 了解各种HTML标签
- 普通标签和语义标签
- 了解各种标签的使用场景
- 了解并掌握HTML引入CSS的方法
- 了解并掌握HTML引入js的方法
- 了解基础的浏览器调试工具
HTML
HTML基本认识
开始学习HTML
需要注意的地方
- 注释
<html>
<!-- 这里是注释 -->
</html>
- 特殊字符
| 原义字符 | 等价字符引用 |
|---|---|
| < | < |
| > | > |
| " | " |
| ’ | ' |
| & | & |
| 空格 | |
常用语义化标签
语义化标签的引入使得HTML代码的可读性增强，结构更加清晰，也有利于团队的开发维护
练习
一个小的练习网站
练习熟悉以上标签
常用表单元素
练习
花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
现在我们刷新页面，通过调试工具的 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 就是
<p>元素的属性。）CSS 中，由编写人员决定修改哪个属性以改变规则。 - 属性的值（Property value）：在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。
其他规则
-
每个规则集（除了选择器的部分）都应该包含在成对的大括号里（{}）。
-
在每个声明里要用冒号（:）将属性与属性值分隔开。
-
在每个规则集里要用分号（;）将各个声明分隔开。
-
如果要同时修改多个属性，只需要将它们用分号隔开，如
p { color: red; width: 500px; border: 1px solid black; } -
可以选择多种类型的元素并为它们添加一组相同的样式。将不同的选择器用逗号分开。例如
p, li, h1 { color: red; }
引入CSS的方法
- 内联方式
直接在 HTML 标签中的 style 属性中添加 CSS。
<p style="color:red">hello world</p>
- 嵌入方式
在 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>
练习
自己根据上述知识点练习
扫一扫
1763
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
