压缩。

我是没想到还是有人会说，没有基础的人才会问html空格的问题，这些细节没有什么用，而我这里给大家简单的汇报一下。

首先第一个问题，标签和标签之间空格的问题。先看一下这个家伙，这个例子，这两种写法有什么区别？直接看这里的例子。第一种写法包含了一个奇怪的空格，但是第二种写法是不包含空格的。

这个东西在html里面，它的解析，它的Dome节点中看是看不出来的，而我们看它们的表现完全一致的，要怎么去理解？毕竟写的代码不是所有的都会去挂工程画，这个地方是animate和note的区别，它们的内存结构是不一样的。

比如第一个节点，它下面包含了5个字节点，有3个是文本节点。再看第二个节点，这个节点下面只有两个节点，只有两个span的标签。去看html的时候，它的表现是字符，标签是字符的一种结构，但是最终使用的时候是document，它是节点，中间是有转换的，这是理论。

这里聊的就是text文本节点，而对于文本节点，那里面的东西就非常恶心了，东西就特别多了。比如现在就要这三个字，无压缩它的宽度，要怎么去计算？找一下无压缩节点，找的是无压缩里面文案的节点，它是没有宽度的，上面可以看到它的宽度是144，这是它渲染出来的，它的宽度是没有的，这个节点里面是不给提供它的宽高的，这是很恶心的一件事情。

必须得基于容器，基于它外侧的容器，来去获取到它最终的宽度，计算中文的宽度是多少，大家有见过这样的需求吧。

再说一个，现在要节点信息的位置，比如这里做了个例子，现在要定义文案的偏移量，要怎么去计算？当用第一种方式里面写的有SPA标签以后，直接获取标签，用行内的标签来去进行获取，里面包含了左边定位的信息，三百八十七。

·但现在要计算第二个节点，它的问题跟刚才的问题是一样的，如何去获取到text的节点？它的宽高获取不到的，没有偏移量的信息，得进行特殊的计算，这就是其中一个比较大的区别，这个东西就比较操蛋了。

·再来一个跨局跟行内元素的规则，规则包含哪些？标准的规则是所有的子元素，块菊元素当中所有的子元素要么都是块菊，要么都是内联的。看一下它们两个这种写法上有没有区别？这两种写法是没有任何区别的，因为它是跨极，它是内联的，而内联和跨极是不允许进行交叉使用的。

它的写法相当于它的外层又包含了一个隐匿的跨句元素，直接看页面中表现的效果，它俩的表现效果是一致的，虽然标签不一样，但是最终展示的结果是一样的，它俩的表现形式是一样的。

如果这个逻辑知道，再解释一下下面这种写法，这两种写法是一样的，解释一下为什么？已知div是跨距元素，跨距元素当中里面所有的节点全部都是跨距元素或者是行内元素，而又知道空格会转换成text的节点，而Tech的节点是行内元素，所以它的外层又会包成一行隐匿的节点，它是div，所以这里包含div，这里又包含div，有3个空格。

块级：所有的子元素都是块，中间两偏差的两个一，这两个元素它俩的表现是一样的，可以看到它最终表现的效果。

这里引出的额外的概念就是塌陷，没有内容，没有div它的content是0，它的高度必须得是0，否则这种实现就会跟理解是有差异的，而这种实现又会产生一些额外的其他的问题。

举一个例子，往from表单里面，往table里面插入元素，恰巧那一行的数据它就是为空，后端返回这个空词无串，这个时候要不要进行特殊处理？比如图中这个table，这个table它就是没有数据，这两行就是没有数据，最终展示的时候可能就是第一行它是正常的，它的高度可能是40，第二行第三行它就是瘪了，发现了因为没有内容产生的原因。

要怎么去解决这个问题？phone表格也是一样的，它也会有类似的问题。当然还会有一些其他的比较恶心的要求，现在是复文本，现在是编辑代码，而要求内容跟写的结构一样，现在要再怎么去处理第三类？使用PRE标签，刷新一下，空壳这个问题又得到了一个处理。

这里就涉及到了具体的解析结构、规则，而这些问题聊完以后又可以回到上一个问题，HM中有哪些标签？关于如何分类的？标签的分类其实按功能分、按和模型去区分，没问题都没问题，但至少所有的类型得加上。

比如hider meter，它们是行类的还是块儿级？包括直播的时候弹幕上已经提到过行内块级，有些内容是说错的，讲道理当时就是听个响，因为答案太普通了。可以按照另外的一种结构来去区分，可以基于转换后的元素进行区分，而它包含很多。

·第一种：空元素，没有内容的元素，它的核心是什么？现在写一个image标签，里面的标签内容不要那样写，非要这样去写，里面加一个奇怪的标签内容，肯定是标加不进去的，是没有办法放到image里面的。包括heart，包括这些里面的其他的标签全部都是这样的，最终会做一些特殊的操作来去处理里面的span或者里面文案的内容。

·第二个元素，模板元素。它是用来定义下面模板用的，是比较特殊的，里面的内容不会进行额外的解析。比如现在写了一个奇怪的标签，里面加了一个script，这个时候刷起甲会怎样？刷新一下标签会进行执行。当然是如果用time play就不会进行执行，它是一个元素的，是一个模板类的标签，刷新一下不会进行执行。

·第三类，原始文本元素。这类元素其实往下看，主要是看这两个元素包含可转移和不可转移，一般是两个，提示器写的也行，一般是两个。这两个会进行解析，需要其他的解析器来对里面的代码去进行解析。但是textl里边放的这些元素是不会进行解析的。

比如现在把tablet改成taxl，大家注意里面的节点会怎么处理？会去执行吗？不会执行，并且会把里面的内容放到里面的内容，这个东西也是以前代替template的核心原因。去看一些比较老的实现的时候，比如百度中里面会用一些taxl代替template，因为以前没这个元素。

·第五个，这两原始文本算两个，第五个就是外来元素，这里写的又比较清楚，非HTML规范的一些元素。特殊的一些元素，外来的不是html里面规范的。

最后就是普通元素，打鼓本身就是笔试题的平替，但是它的内容跟笔试是不一样的，笔试是有标准答案的，是要打分的，60分以后继续聊，没有超过60分就可以走了。

但打鼓不是，抛出一个问题，永远是论述题，大家来相互的沟通，有可能面试官的这个点不会没关系，完全可以主动地去提。面试官我觉得这个点不重要，我更了解浏览器中编语原理的部分，了解浏览器中关于渲染引擎的这一部分，可以基于这个问题来探讨一下关于节点，关于刚才这些问题到底是有一个什么样的答案，这是没有问题的。

反正一句话，我是不认可没有技术的人才会问hmr空格问题的，更不认可这些细节问题没有任何用的言论。

、系统结构：

① B/S架构：Browser/Server（浏览器/服务器的交互形式。）

• Browser支持的语言：HTML、CSS、JavaScript；S是服务器端Server支持的语言有：C、C++、Java等
• B/S架构系统有什么优点和缺点？ 优点：升级方便，只升级服务器代码即可，维护成本低。缺点：速度慢、体验不好、界面不炫酷
• 企业大部分使用B/S架构
• B/S架构的系统代表有：京东、百度、天猫等

② C/S架构：Client/Server（客户端/服务器的交互形式。）

• C/S架构的优点和缺点？
• 优点：速度快、体验好、界面炫酷（娱乐性多数是C/S架构）
• 缺点：升级麻烦、维护成本较高。
• C/S架构的系统代表有：QQ、微信、支付宝等

2、 HTML概述

① 什么是HTML？② 怎么开发HTML？③ 怎么运行HTML?

• ① HTML：Hyper Text Markup Language（超文本标记语言）

•由大量的标签组成，每一个标签都有开始标签和结束标签。

•超文本：图片、声音、视频等

• ② HTML开发使用普通的文本编辑器就行，创建扩展名是.html或.htm

•编辑器有：HBuilder、vscode等

③ 直接采用浏览器打开HTML文件就能运行

④ HTML是谁制定的？

• ④ W3C：世界万维网联盟

•W3C制定了HTML的规范：每个浏览器生产厂家都会遵守规范。HTML也会按照规范去写代码

•HTML规范目前最高的版本是：HTML5.0，简称H5

•我们现在主要学的HTML4.0（基本用法）

• 为了方便中国Web前端程序员开发，提供了大量帮助文档。为开发提供方便。

•w3school：先出现的，和W3C无关

•w3cschool：后出现的，和W3C无关

•W3C制定了很多规范：HTML/XML/http协议/https协议……

3、 第一个HTML

4、基本标签

• p：段落标记
• h1~h6：标题字，与word的标题字相同
• br：换行标记（独目标记）
• hr：横线（独目标记）
• color：横线颜色
• width：横线宽度（可以px和%）
• pre：预留格式
• del：删除字
• ins：插入字（有下划线）
• b：粗体字
• i：斜体字
• sup：上标
• sub：下标
• font：字体标签
• color：字体颜色
• size：字体大小（1~7）

页面效果图：

5、实体符号：为了避免和标签冲突，所以需要使用实体符号

• <：<
• >：>
• 空格：
• 注：html中按多个空格键，在网页中只显示一个空格。

6、HTML表格

• table：表格
• tr：行
• td：列
• th：列（比td加粗居中）
• 合并行：rowspan（一个格占两个位置）
• 注：row合并的时候，删除下面的单元格
• 合并列：colspan（一个格占两个位置）
• 注：col合并的时候，删除哪个没有要求

7、thead、tbody、tfoot标签

• thead、tbody、tfoot不是必须的，便于后期JS编写。

8、body的背景颜色和背景图片

• bgcolor：背景色
• background：背景图片
• 背景图片在背景色的上面

9、img标签

• src：图片的路径
• 只设置width，height会等比例缩放
• 只设置height，不起作用
• title：鼠标悬停时显示的信息
• alt：设置图片加载失败时显示的提示信息

10、 超链接或热链接

• href：hot references 热引用；
• 后面一定是一个资源的地址。
• 后面的路径可以是绝对路径也可以是相对路径，可以是网络某个资源的路径。
• target：
• _blank：新窗口
• _self：当前窗口（默认）
• _top：顶级窗口
• _parent：父级窗口

超链接的作用：

通过超链接可以从浏览器向服务器发送请求。

11、request与response的概念

• request：浏览器向服务器发送数据（请求）
• B --》S
• response：服务器向浏览器发送数据（响应）
• S--》B

12、列表

• 有序列表：ol
• type：1、A、a、I、i
• 无序列表：ul
• type：circle（○）、square（□）、disc（●）

13、表单（重点）

• action：写提交的URL地址
• method：默认get；还有post
• 表单有什么用？
• 答：收集用户的信息。表单展现之后，用户填写表单，点击提交。 （submit）
• 怎么画一个表单？
• 答：用form标签
• 一个网页可以有多个表单form
• 表单最终是需要提交数据给服务器的，form标签有一个action属性，这个属性用来指定服务器地址。
• action属性用来指定数据提交给哪个服务器
• action属性和超链接中的href属性一样。都可以向服务器发送请求（request）
• http://192.168.111.3:8080/oa/save 这是请求路径，
• 表单提交数据最终提交给192.168.111.3机器上的8080端口对应的软件。
• input中的type取值:
• radio：单选控件
• checkbox：多选控件
• submit：提交控件
• reset：重置控件
• button：普通控件
• text：文本控件
• password：密码控
• file：文件控件
• 上传文件专用
• hidden：隐藏域
• 网页上看不到，但是表单提交的时候数据会自动提交给服务器。
• input中的value属性用来指定按钮上显示的文本信息。
• 超链接a与表单form的区别？
• 答：表达form可以收集信息，而超链接a无法收集信息。
• 表单提交里面的按钮input中属性必须定义name，不然提交不了。
• 表单是以什么格式提交数据给服务器的？
• 格式：action?name=value&name=value&name=value..
• HTTP协议规定的，必须以这种格式提交给服务器
• java中String split('&');
• 重点强调：表单项写了name属性的，一律会提交给服务器。不想提交就不要写name属性。
• 文本框和密码框的value不需要程序员指定，用户输入什么value就是什么。
• 当name没有写的时候，该项不会提交给服务器
• 但是当value没有写的时候，value的默认值是空字符串"",将空字符串提交给服务器。java代码得到的是：String s = "";

效果图：

地址栏提交的信息：

?username=abc&userpassowrd=1234&sex=1&aihao=study&aihao=dream&myText=我没有value属性；&position=ln&myFile=&myHidden=

14、表单的说明：

• ① 用户手动输入的文本框，都不需要给value赋值
• ② textarea没有value属性
• ③ radio、checkbox默认选项需要使用，checked="checked"（简写：checked）
• ④ select中的option属性：• selected="selected" 为默认选中 •size：显示条目数量
• multiple="multiple" 支持多选(select的属性)
• ⑤ input的属性
• readonly和disabled：
• 都是只读不能修改
• 数据不会提交
• maxlength：设置文本框中输入的字符数量。

15、HTML中的结点

• 在HTML文档中，任何元素（结点）都有id属性，id属性是该节点的唯一标识。所以在同一个HTML文档中id值不能重复。
• 注意：表单提交数据的时候，只和name有关系，和id无关
• id有什么作用？
• javascript语言：可以对HTML文档中的任何节点进行增删改操作。
• 获取节点时，通常通过id来获取节点
• HTML文档是一棵树，树上有很多节点，每一个节点都有唯一的id（DOM树）

16、div和span

• div和span有什么用？
• div和span都可以称为图层。
• 有什么用？
• 图层的作用为了保证页面可以灵活的布局。
• div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。
• div和span的区别？
• di独占一行
• span不会独占一行

let str = "jiajia2023_&^%^&";
console.log(str.match(/.+/));//匹配除换行符以外的任何单个字符

let url = 'http://www.baidu.com'
console.log(url.match(/https?:\/\/w+\.\w+\.\w+/));//['http://www.baidu.com', index: 0, input: 'http://www.baidu.com', groups: undefined]

// 不能匹配换行符
let aStr = `
sfjsjalsjkajjnjn
dgudjg
`;
console.log(aStr.match(/.+/));//['sfjsjalsjkajjnjn', index: 1, input: '\nsfjsjalsjkajjnjn\ndgudjg\n', groups: undefined]
console.log(aStr.match(/.+/s));//s视为单行  ['\nsfjsjalsjkajjnjn\ndgudjg\n', index: 0, input: '\nsfjsjalsjkajjnjn\ndgudjg\n', groups: undefined]

let tel = '010 - 4561237'
console.log(tel.match(/\d+ - \d{7}/));//['010 - 4561237', index: 0, input: '010 - 4561237', groups: undefined]
console.log(tel.match(/\d+\s-\s\d{7}/));//结果同上，可以用空格，也可以用\s