前端系列-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）

      视频和音频（video、audio）

      本地存储（LocalStorage、SessionStorage）

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

      表单改进（datalist、output）

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

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

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

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

5、Svg和Canvas的区别？

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

      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语义化