有关html，css的知识点总结

Posted 2021-12-10 老张在线敲代码

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）