前端系列-Html5方面

1、块级元素、行内元素、空元素有哪些？行内元素与块级元素的区别？

块级元素：div、p、ul、li、h1-h6、dl、dt、dd、header、footer

行内元素：a、b、span、img、input、select、strong

空元素：br、hr、link、meta

行内元素不可设置宽高，不独占一行，块级元素可以设置宽高，独占一行。

2、简述html语义化的理解？

语义化使代码具有可读性，便于团队开发和维护。

语义化有利于用户体验。

语义化有利于SEO搜索引擎。（有利于爬虫爬取更多的有效信息）

3、iframe的优缺点？

优点：

        解决加载缓慢的第三方内容（图标、广告等的加载问题）

        并行加载脚本

缺点：

       iframe会阻塞主页面的onload事件

       即时内容为空，加载也需要时间

       使用iframe作为子应用问题（没有路由记录、样式隔离严重）

4、Html5新特性有哪些？

      语义化标签（article、section、nav、header、footer、aside、main）

      视频和音频（video、audio）、多任务（webworker）、跨窗口通信（PostMessage）

      本地存储（LocalStorage、SessionStorage）

      画布（Canvas）和Svg，用于绘制图形和动画

      表单改进（datalist、output）

      新的表单元素（如input类型：email、url、number）

      响应式设计支持，通过媒体查询实现

      Web workers允许在后台执行js任务，不影响主线程；

       Geolocation API获取用户地理位置信息 

5、Svg和Canvas的区别以及做过哪些场景  ？

      Svg是一种使用xml描述2D图形的语言；

            应用：图标、矢量图形、动画、数据可视化结合D3.js、响应式设计

      Canvas是通过js来绘制2D语言；

            应用：实时图形渲染（如粒子效果、动态背景）、数据可视化、图像处理、视频处理

6、自适应布局实现方案？

      使用百分比宽度

      使用媒体查询

      使用Flexbox布局

      使用Grid布局

      使用绝对单位（px）和视口单位（vw、vh）结合

      使用rem和em单位

      使用第三方库（bootstrap）

7、移动端的响应式布局怎么实现？

       媒体查询

       弹性盒子布局（Flexbox）

       网格布局（Grid）

       百分比布局

       视口单位（vw、vh）

       绝对单位（px）与相对单位（em、rem）的结合使用

8、前端开发在SEO方面做了哪些？

       一：TDK优化

              title标签-网站名片

              META标签-网站信息

              关于网站关键字keywords

       二：网站质量

              减少页面重绘和回流

              图片压缩、图片分割、精灵图

              字体包压缩

              懒加载/预加载资源

              SSR服务端渲染

              开启gzip压缩

              HTML语义化

9、可视化大屏适配方案？

      rem方案、vwvh方案、scale方案

      比例缩放autofit.js

      v-scale-screen

      FitScreen缩放大屏自适应

10、antV G2、G6、X6、L7能做哪些？

        G2：折线图、柱状体、饼图、雷达图、散点图、热力图、地图图表；

                支持图表的缩放、拖拽、点击、hover等交互操作；

        G6：关系网络图、树状图、流程图、

        X6：图形编辑、流程图设计、网络图设计；

        L7：地理信息可视化、空间数据分析、地图打点、路径规划、3D地图、地图交互