zz130428的博客

svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会失真和锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿。Canvas适用于像素级绘图和动画，而SVG适用于矢量图形和可缩放的图像。选择使用Canvas还是SVG取决于具体的需求和场景。

语义化是指在编写HTML和CSS代码时，通过恰当的选择标签和属性，使得代码更具有语义性和可读性，使得页面结构和内容更加清晰明了。语义化的目的是让页面具备良好的可访问性、可维护性和可扩展性。可访问性（Accessibility）：通过使用恰当的标签和属性，可以提高页面的可访问性，使得辅助技术（如屏幕阅读器）能够更好地理解和解析页面内容，使得残障用户能够正常浏览和使用网页。

从网络传给渲染引擎的 HTML 文件字节流是无法直接被渲染引擎理解的，所以要将其转化为渲染引擎能够理解的内部结构，这个结构就是 DOM。DOM 提供了对 HTML 文档结构化的表述。从页面的视角来看，DOM 是生成页面的基础数据结构。从 JavaScript 脚本视角来看，DOM 提供给 JavaScript 脚本操作的接口，通过这套接口，JavaScript 可以对 DOM 结构进行访问，从而改变文档的结构、样式和内容。

在页面布局的时候，经常出现以下情况：这个元素高度怎么没了？这两栏布局怎么没法自适应？这两个元素的间距怎么有点奇怪的样子？......原因是元素之间相互的影响，导致了意料之外的情况，这里就涉及到BFC概念BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：内部的盒子会在垂直方向上一个接一个的放置对于同一个 BFC 的俩个相邻的盒子的 margin 会发生重叠，与方向无关。每个元素的左外边距与包含块的左边

css3中引入与视口有关的新的单位vw和vh, vw表示相对于视口的宽度，vh表示相对于视口高度。在这里插入图片描述那么问题来了，平时拿到的设计图都是基于px标记的，怎么将px转为vw呢? vw单位换算:视口宽度为100vw占满整个视口区域，那么1vw .相当于占整个视口宽度的1%，所以1px= 1/375*100vw所有的页面元素都可以直接进行计算换算成vw单位，但是这样计算和百分比方案计算比较类似，都会比较麻烦。

使用该方法的原理与使用锚点的原理类似，在页面最上方设置目标元素，当页面滚动时，目标元素被滚动到页面区域以外，点击回到顶部按钮，使目标元素重新回到原来位置，则达到预期效果。该实现主要在页面顶部放置一个指定名称的锚点链接，然后在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返回到该锚点所在的顶部位置。元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度。只要把当前页面的滚动长度作为参数，逆向滚动，则可以实现回到顶部的效果。

clear：both：本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来。: 需要手动添加高度，如何后面的高度发生变化，还要再次修改高度，给后期的维护带来麻烦。给谁清除浮动，就在其后额外添加一个空白标签 ，给其设置clear：both。：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout。：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。：添加许多无意义的标签，结构化比较差。：符合闭合浮动思想，结构语义化正确。：通俗易懂，书写方便。

SPA全名是，指的是单页面应用。SEO全称为，指的是搜索引擎优化。SPA技术将产出html的逻辑从服务器转移到了客户端，在进入React, Vue等UI框架进行开发时，开发的页面更多的是在客户端进行脚本执行、数据请求和UI动态装载。那么搜索引擎爬虫在抓取这样的页面的时，在未做任何优化的情况下，通常拿到的是类似下面的字符文本： 除了可以事先定义的title（可能title也不能事先确定），在SPA下很多内容需要通过ajax请求server拿到数据通过脚本执行产生。通常爬虫不会有类似浏览器的执行环境去产生

圣诞树html编写

Web浏览器先会把获取到的HTML代码解析成一个DOM树，HTML中的每个标签都是DOM树中的一个节点，包括display: none隐藏的标签，还有JavaScript动态添加的元素等。浏览器会获取到所有样式，并会把所有样式解析成样式规则，在解析的过程中会去掉浏览器不能识别的样式。浏览器将会把DOM树和样式规则组合在一起（DOM元素和样式规则匹配）后将会合建一个渲染树（Render Tree），渲染树类似于DOM树，但两者别还是很大的：渲染树能识别样式，渲染树中每个节点（NODE）都有自己的样式，而且渲染