有关html，css的知识点总结（三）

1.html和xhtml的区别

xhtml比html更加严格，它重写了html的规范
xhtml中的标签名和属性名必须全部小写
xhtml中必须合理嵌套
img标签alt属性必须加说明文字

2. title和h1的区别？

title一般用于网站标题
h1用于文章标题（一个页面中只允许出现一个h1标签）

3.html文档结构中那个Doctype是干什么用的？

告知浏览器该文档使用的是html规范还是xhtml规范

4. div+css布局相对于table布局有什么优点？

页面加载速度更快，结构化清晰，页面显示简洁
样式与结构分离，更有利于seo优化

5.渐进式增强和优雅降级的区别？

渐进增强：针对低版本浏览器进行构建页面，然后在针对高版本浏览器进行效果i和功能的改进，以求达到更好的用户体验

优雅降级：一开始就完整的构建功能，在针对低版本浏览器进行兼容

6. 前端要注意哪些seo优化？

网站中重要的内容不用js进行输出，因为爬虫不去js爬取内容
非装饰性图片加alt文字描述·
语义化的html标签，让搜索引擎更加容易理解
提高页面的加载速度

7. canvas和svg的区别？

canvas通过js绘制2d图像，逐像素渲染，位置改变重新渲染

依赖分辨率，不支持事件处理，适合密集型游戏

svg通过xml绘制2d图像，每个被绘制的图形被视为对象

不依赖分辨率，支持事件处理，不适合游戏应用

8. img标签的title属性和alt的区别

title指的是图片的信息，alt指图片不显示时候的文字提示

9.base64图片的介绍

优点：减少http请求，因为图片被base64编进了css文件中
缺点：如果css文件中会使css文件增大，从而导致阻塞渲染

10.png，jpg，gif这些图片格式分别在什么时候使用？

png是便捷式网络图片，是一种无损数据压缩的文件格式，优点：色彩好，压缩比高 jpg是被用来传输和存储图片的格式
gif是一种动图格式
webp是谷歌在2010年推出的图片格式，兼容性不好

11.css让元素垂直的几种方式？

line-height：px
algin-item：center
定位

12.如何在谷歌浏览器中写出小于12px的字体？

谷歌浏览器最小支持12px的字体大小，想要缩小只能靠css3中的transfrom来缩小 例：transform：scale（0.5）

13、重绘和回流（重排）区别，什么情况会触发重排和重绘

回流常见于元素的尺寸，布局，位置，隐藏等Dom结构发生改变的情况

1.添加或者删除可见的dom元素
2.元素位置改变
3.元素尺寸改变（边距，填充，边框，高度和宽度）
4.内容改变（内容物引起的元素大小发生变化）
5.页面渲染初始化
6.浏览器尺寸改变
7.计算元素的偏移量属性（浏览器为了确保属性值的正确性会回流得到最新值

重绘常见于元素的颜色的样式发生改变的情况

1.改变字体
2.增加或者移除样式表
3.内容变化（input输入框）
4.激活CSS伪类
5.设置style属性值
6.计算offsetWidth和offsetHeight属性

重绘不一定引发回流，但是回流一定会引起重绘

14. px和rem的区别

px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位，不会因为其他元素的尺寸变化而变化；
rem表示相对于根元素的字体大小。rem是相对单位 ，没有一个固定的度量值，而是由其他元素尺寸来决定的相对值。

例如：html{62.5%}
//16px的62.5%就是10px，所以此时的子元素在设置1rem就是10px

15. 什么是伪类？什么是伪元素？

伪类：用于选择处于 特定状态 的元素，比如鼠标悬浮状态（ :hover ）。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。
伪元素：以类似方式表现，不过表现得是像你往标记文本中加入全新的HTML元素一样，产生的效果是把不存在的元素硬选出来

16.link和@import的区别

加载页面时，link标签引入的 CSS 同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

17.如何让小程序结构中最大的盒子一直保持背景色是白色，数据多的情况下往下滚动也一直是白色背景

.max-box {
  background-color: white;
  height: 500px; /* 设置一个固定高度 */
  overflow-y: scroll; /* 添加垂直滚动条 */
}