2023年6月21日发(作者：)
前端⾯试常见问题——HTML篇1. HTML语义化什么是HTML语义化根据内容的结构化（内容语义化），选择合适的标签（代码语义化）为什么要语义化1. 在没有样式CSS情况下也以⼀种⽂档格式显⽰，容易阅读2. 搜索引擎爬⾍依赖标记来确定上下⽂和各个关键字的权重，有利于SEO3. 语义化HTML会使HTML结构变的清晰，有利于维护代码和添加样式4. ⽅便其他设备解析（如屏幕阅读器、盲⼈阅读器、移动设备等）写HTML代码时应该注意1. 尽可能少使⽤⽆语义的标签div和span2. 在语义不明显时，即可以使⽤div或者p时，尽量⽤p, 因为p在默认情况下有上下间距，对兼容特殊终端有利3. 不要使⽤纯样式标签，如b、u、i等，改⽤css设置4. 需要强调的⽂本，可以包含在或者中5. 使⽤表格时，标题⽤caption包围，表头⽤thead包围，主体部分⽤tbody包围，尾部⽤tfoot包围6. 表单域⽤fieldset标签包围，并⽤legend标签说明表单⽤途7.
input标签对应的说明⽂本使⽤label标签，通过为input设置id属性，在lable标签中设置for=someld来让说明⽂本和相对应的input关联起来常⽤的语义元素
audio 元素，⽤于媒介回放localStorage本地离线存储，长期存储数据，浏览器关闭数据不丢失sessionStorage在浏览器关闭后⾃动删除article、footer、header、nav、section 等语义化内容元素calendar、date、time、email、url、search等表单控件webworker、websocket、manifest离线存储等新技术移除的元素：纯表现的元素，如big、center、font、
s、strike、tt、u对可⽤性产⽣负⾯影响的元素：frame、frameset、noframesIE8/IE7/IE6如何⽀持HTML5新标签：通过Element⽅法让这些浏览器⽀持HTML5新标签，还需要添加标签默认的样式。当然也可以直接使⽤成熟的框架、⽐如html5shim3. Web WorkerHTML5提供的⼀种多线程解决⽅案，可以将⼤计算量的代码交给web worker⽽不冻结页⾯。但⼦线程完全受主线程控制，且不得操作dom，还是没有改变js单线程的本质使⽤⽅式创建在分线程中执⾏的js⽂件，设置age，在回调函数中处理数据，通过ssage返回要传递给主线程的数据在主线程的js中创建worker对象，向分线程发消息ssage(要传递给分线程的数据)并设置回调age=function(event)注意事项主线程和分线程的this不同，所以分线程很多属性、⽅法不能⽤（document、window、alert等），也不能操作DOM更新界⾯同源限制：分配给分线程的脚本必须与主线程脚本同源HTML5新特性：不是所有浏览器都兼容4. Canvascanvas 是
HTML5 提供的⼀个⽤于展⽰绘图效果的标签，提供了⼀个空⽩的图形区域，可以使⽤特定的JavaScript API来绘画图形在标签中通过width和height可以指定画布的宽⾼，不能在CSS中定义宽⾼，因为canvas的默认宽⾼为300px * 150px，在CSS中为canvas定义宽⾼，实际上把宽⾼为300px * 150px的画布进⾏了拉伸，如果在这样的情况下进⾏绘图，得到的图形可能就变形的效果在开始和闭合标签之间添加后备信息，当浏览器不⽀持（IE9以下）时则会显⽰标签内的信息getContext()获取绘图上下⽂translate(x, y)更改坐标原点fillStyle属性指定填充样式strokeStyle、lineWidth等属性指定描边样式绘制路径moveTo(x,y) 定义线条开始坐标lineTo(x,y) 定义线条结束坐标rect(x, y, width, height) 可以绘制⼀个左上⾓坐标为(x, y)，宽width，⾼height的矩形路径绘制图形fillRect(x, y, width, height) 绘制⼀个由fillStyle指定填充样式的矩形绘制⽂本fillText(text, x, y, maxWidth) 使⽤fillStyle属性显⽰⽂本strokeText(text, x, y, maxWidth) 使⽤strokeStyle属性为⽂本描边绘制图像drawImage(image, x1, y1, width1, height1, x2, y2, width2, height2)创建渐变、阴影变换rotate(angle) 旋转scale(scaleX, scaleY) 缩放导出画布toDataURL()5. Canvas和SVG的区别svg绘制出来的每⼀个图形的元素都是独⽴的DOM节点，能够⽅便的绑定事件或⽤来修改。canvas输出的是⼀整幅画布svg输出的图形是⽮量图形，后期可以修改参数来⾃由放⼤缩⼩，不会失真和锯齿。⽽canvas输出标量画布，就像⼀张图⽚⼀样，放⼤会失真或者锯齿6. HTML5离线储存manifest原理基于新建的.appcache⽂件的缓存机制，通过这个⽂件上的解析清单，离线存储资源。之后当⽹络处于离线状态时，浏览器会通过被离线存储的数据进⾏页⾯展⽰，当与因特⽹连接时，更新机器上的缓存⽂件如何使⽤：页⾯头部加⼊⼀个manifest的属性；在st⽂件的编写离线存储的资源在离线状态时，操作ationCache进⾏需求实现管理和加载在线情况下，浏览器发现html头部有manifest属性，会请求manifest⽂件，第⼀次访问会根据⽂件内容下载相应的资源并且进⾏离线存储。如果已经离线存储，则使⽤离线的资源加载页⾯，然后对⽐新旧的manifest⽂件，如果⽂件改变了，那么就会重新下载并存储。离线的情况下直接使⽤离线存储的资源如果服务器对离线的资源进⾏了更新，那么必须更新manifest⽂件，如果只是更新了资源⽽没有更新manifest⽂件的话，浏览器不会重新下载资源在更新资源之后，新的资源需要到下次打开才会⽣效，如需马上⽣效，可以使⽤che()``⽅法，出现这种现象的原因是浏览器会先使⽤离线资源加载页⾯，然后再去检查manifest是否有更新，所以需要到下次打开页⾯才能⽣效。对于manifest⽂件最好不要设置缓存浏览器在下载manifest⽂件中的资源的时候，它会⼀次性下载所有资源，如果某个资源由于某种原因下载失败，那么这次的所有更新就算是失败的，浏览器还是会使⽤原来的资源。7. iframe缺点iframe会阻塞主页⾯的onload事件iframe和主页⾯共享连接池，⽽浏览器对相同域的连接有限制，这意味着有可能iframe中的资源占⽤了可⽤连接⽽阻塞了主页⾯的资源加载使⽤iframe之前需要考虑这两个缺点。如果需要使⽤iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题搜索引擎的检索程序⽆法解读这种页⾯，不利于SEO8. Doctype，严格模式与混杂模式 声明位于⽂档中的最前⾯，告知浏览器的解析器，⽤什么⽂档类型规范来解析⽂档严格模式的排版和JS运作模式是以该浏览器⽀持的最⾼标准运⾏混杂模式的页⾯以宽松的向后兼容的⽅式显⽰。模拟⽼式浏览器的⾏为以防⽌站点⽆法⼯作DOCTYPE不存在或格式不正确会导致⽂档以混杂模式呈现9. HTML5 为何只需写 HTML5 不基于
SGML，因此不需要对DTD进⾏引⽤，但是需要doctype来规范浏览器的⾏为⽽HTML4.01基于SGML，所以需要对DTD进⾏引⽤，才能告知浏览器⽂档所使⽤的⽂档类型SGML(Standard Generalized Markup language)标准通⽤标记语⾔，是国际上定义电⼦⽂件结构和内容描述的标准，⽽超⽂本标记语⾔HyperText
Markup Language(HTML)，标准通⽤标记语⾔下的⼀个应⽤随着Web应⽤的不断深⼊，HTML在需求⼴泛的应⽤中已显得捉襟见肘，有⼈建议直接使⽤SGML作为Web语⾔。但SGML太庞⼤了，于是W3C建议使⽤⼀种精简的SGML版本——XML可扩展标记语⾔XML和HTML之间的差异XML不是HTML的替代，是对HTML的补充，为不同的⽬的⽽设计；XML被设计⽤来传输和存储数据，其焦点是数据的内容。HTML被设计⽤来显⽰数据，其焦点是数据的外观。HTML旨在显⽰信息，⽽XML旨在传输信息10. xhtml和html的区别XHTML(eXtensible HyperText Markup Language)可扩展超⽂本标记语⾔表现⽅式与HTML类似，但语法上更加严格。从继承关系上讲，HTML是⼀种基于标准通⽤标记语⾔SGML的应⽤，XHTML则基于可扩展标记语⾔XML，XML是SGML的⼀个⼦集功能上：XHTML可兼容各⼤浏览器、⼿机以及PDA，并且浏览器也能快速正确地编译⽹页书写习惯上：XHTML 元素必须被正确地嵌套，闭合，区分⼤⼩写，⽂档必须拥有根元素，所有属性都必须使⽤双引号11. HTML全局属性class:为元素设置类标识data-*: 为元素增加⾃定义属性draggable: 设置元素是否可拖拽id: 元素id，⽂档内唯⼀lang: 元素内容的的语⾔style: ⾏内css样式title: 元素相关的建议信息12. Viewport// width 设置viewport宽度，为⼀个正整数，或字符串‘device-width’// device-width 设备宽度// height 设置viewport⾼度，⼀般设置了宽度，会⾃动解析出⾼度，可以不⽤设置// initial-scale 默认缩放⽐例（初始缩放⽐例），为⼀个数字，可以带⼩数// minimum-scale 允许⽤户最⼩缩放⽐例，为⼀个数字，可以带⼩数// maximum-scale 允许⽤户最⼤缩放⽐例，为⼀个数字，可以带⼩数// user-scalable 是否允许⼿动缩放延伸提问：怎样处理 移动端 1px 被 渲染成 2px问题局部处理mate标签中的 viewport属性 ，initial-scale 设置为 1rem按照设计稿标准⾛，外加利⽤transfrom 的scale(0.5) 缩⼩⼀倍即可；全局处理mate标签中的 viewport属性 ，initial-scale 设置为 0.5rem 按照设计稿标准⾛即可13. div+css的布局较table布局有什么优点？改版更⽅便 只要改css⽂件页⾯加载速度更快、结构化清晰、页⾯显⽰简洁表现与结构相分离易于优化SEO，对搜索引擎更友好，排名更容易靠前14. src与href的区别src⽤于替换当前元素，href⽤于在当前⽂档和引⽤资源之间确⽴联系。src是source的缩写，指向外部资源的位置，指向的内容将会嵌⼊到⽂档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应⽤到⽂档内，例如js脚本，img图⽚,会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，类似于将所指向资源嵌⼊当前标签内。href是Hypertext Reference的缩写，指向⽹络资源所在位置，建⽴和当前元素（锚点）或当前⽂档（链接）之间的链接，例如超链接；如果我们在⽂档中添加那么浏览器会识别该⽂档为css⽂件，就会并⾏下载资源并且不会停⽌对当前⽂档的处理。这也是为什么建议使⽤link⽅式来加载css，⽽不是使⽤@import⽅式
2023年6月21日发(作者：)
前端⾯试常见问题——HTML篇1. HTML语义化什么是HTML语义化根据内容的结构化（内容语义化），选择合适的标签（代码语义化）为什么要语义化1. 在没有样式CSS情况下也以⼀种⽂档格式显⽰，容易阅读2. 搜索引擎爬⾍依赖标记来确定上下⽂和各个关键字的权重，有利于SEO3. 语义化HTML会使HTML结构变的清晰，有利于维护代码和添加样式4. ⽅便其他设备解析（如屏幕阅读器、盲⼈阅读器、移动设备等）写HTML代码时应该注意1. 尽可能少使⽤⽆语义的标签div和span2. 在语义不明显时，即可以使⽤div或者p时，尽量⽤p, 因为p在默认情况下有上下间距，对兼容特殊终端有利3. 不要使⽤纯样式标签，如b、u、i等，改⽤css设置4. 需要强调的⽂本，可以包含在或者中5. 使⽤表格时，标题⽤caption包围，表头⽤thead包围，主体部分⽤tbody包围，尾部⽤tfoot包围6. 表单域⽤fieldset标签包围，并⽤legend标签说明表单⽤途7.
input标签对应的说明⽂本使⽤label标签，通过为input设置id属性，在lable标签中设置for=someld来让说明⽂本和相对应的input关联起来常⽤的语义元素
audio 元素，⽤于媒介回放localStorage本地离线存储，长期存储数据，浏览器关闭数据不丢失sessionStorage在浏览器关闭后⾃动删除article、footer、header、nav、section 等语义化内容元素calendar、date、time、email、url、search等表单控件webworker、websocket、manifest离线存储等新技术移除的元素：纯表现的元素，如big、center、font、
s、strike、tt、u对可⽤性产⽣负⾯影响的元素：frame、frameset、noframesIE8/IE7/IE6如何⽀持HTML5新标签：通过Element⽅法让这些浏览器⽀持HTML5新标签，还需要添加标签默认的样式。当然也可以直接使⽤成熟的框架、⽐如html5shim3. Web WorkerHTML5提供的⼀种多线程解决⽅案，可以将⼤计算量的代码交给web worker⽽不冻结页⾯。但⼦线程完全受主线程控制，且不得操作dom，还是没有改变js单线程的本质使⽤⽅式创建在分线程中执⾏的js⽂件，设置age，在回调函数中处理数据，通过ssage返回要传递给主线程的数据在主线程的js中创建worker对象，向分线程发消息ssage(要传递给分线程的数据)并设置回调age=function(event)注意事项主线程和分线程的this不同，所以分线程很多属性、⽅法不能⽤（document、window、alert等），也不能操作DOM更新界⾯同源限制：分配给分线程的脚本必须与主线程脚本同源HTML5新特性：不是所有浏览器都兼容4. Canvascanvas 是
HTML5 提供的⼀个⽤于展⽰绘图效果的标签，提供了⼀个空⽩的图形区域，可以使⽤特定的JavaScript API来绘画图形在标签中通过width和height可以指定画布的宽⾼，不能在CSS中定义宽⾼，因为canvas的默认宽⾼为300px * 150px，在CSS中为canvas定义宽⾼，实际上把宽⾼为300px * 150px的画布进⾏了拉伸，如果在这样的情况下进⾏绘图，得到的图形可能就变形的效果在开始和闭合标签之间添加后备信息，当浏览器不⽀持（IE9以下）时则会显⽰标签内的信息getContext()获取绘图上下⽂translate(x, y)更改坐标原点fillStyle属性指定填充样式strokeStyle、lineWidth等属性指定描边样式绘制路径moveTo(x,y) 定义线条开始坐标lineTo(x,y) 定义线条结束坐标rect(x, y, width, height) 可以绘制⼀个左上⾓坐标为(x, y)，宽width，⾼height的矩形路径绘制图形fillRect(x, y, width, height) 绘制⼀个由fillStyle指定填充样式的矩形绘制⽂本fillText(text, x, y, maxWidth) 使⽤fillStyle属性显⽰⽂本strokeText(text, x, y, maxWidth) 使⽤strokeStyle属性为⽂本描边绘制图像drawImage(image, x1, y1, width1, height1, x2, y2, width2, height2)创建渐变、阴影变换rotate(angle) 旋转scale(scaleX, scaleY) 缩放导出画布toDataURL()5. Canvas和SVG的区别svg绘制出来的每⼀个图形的元素都是独⽴的DOM节点，能够⽅便的绑定事件或⽤来修改。canvas输出的是⼀整幅画布svg输出的图形是⽮量图形，后期可以修改参数来⾃由放⼤缩⼩，不会失真和锯齿。⽽canvas输出标量画布，就像⼀张图⽚⼀样，放⼤会失真或者锯齿6. HTML5离线储存manifest原理基于新建的.appcache⽂件的缓存机制，通过这个⽂件上的解析清单，离线存储资源。之后当⽹络处于离线状态时，浏览器会通过被离线存储的数据进⾏页⾯展⽰，当与因特⽹连接时，更新机器上的缓存⽂件如何使⽤：页⾯头部加⼊⼀个manifest的属性；在st⽂件的编写离线存储的资源在离线状态时，操作ationCache进⾏需求实现管理和加载在线情况下，浏览器发现html头部有manifest属性，会请求manifest⽂件，第⼀次访问会根据⽂件内容下载相应的资源并且进⾏离线存储。如果已经离线存储，则使⽤离线的资源加载页⾯，然后对⽐新旧的manifest⽂件，如果⽂件改变了，那么就会重新下载并存储。离线的情况下直接使⽤离线存储的资源如果服务器对离线的资源进⾏了更新，那么必须更新manifest⽂件，如果只是更新了资源⽽没有更新manifest⽂件的话，浏览器不会重新下载资源在更新资源之后，新的资源需要到下次打开才会⽣效，如需马上⽣效，可以使⽤che()``⽅法，出现这种现象的原因是浏览器会先使⽤离线资源加载页⾯，然后再去检查manifest是否有更新，所以需要到下次打开页⾯才能⽣效。对于manifest⽂件最好不要设置缓存浏览器在下载manifest⽂件中的资源的时候，它会⼀次性下载所有资源，如果某个资源由于某种原因下载失败，那么这次的所有更新就算是失败的，浏览器还是会使⽤原来的资源。7. iframe缺点iframe会阻塞主页⾯的onload事件iframe和主页⾯共享连接池，⽽浏览器对相同域的连接有限制，这意味着有可能iframe中的资源占⽤了可⽤连接⽽阻塞了主页⾯的资源加载使⽤iframe之前需要考虑这两个缺点。如果需要使⽤iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题搜索引擎的检索程序⽆法解读这种页⾯，不利于SEO8. Doctype，严格模式与混杂模式 声明位于⽂档中的最前⾯，告知浏览器的解析器，⽤什么⽂档类型规范来解析⽂档严格模式的排版和JS运作模式是以该浏览器⽀持的最⾼标准运⾏混杂模式的页⾯以宽松的向后兼容的⽅式显⽰。模拟⽼式浏览器的⾏为以防⽌站点⽆法⼯作DOCTYPE不存在或格式不正确会导致⽂档以混杂模式呈现9. HTML5 为何只需写 HTML5 不基于
SGML，因此不需要对DTD进⾏引⽤，但是需要doctype来规范浏览器的⾏为⽽HTML4.01基于SGML，所以需要对DTD进⾏引⽤，才能告知浏览器⽂档所使⽤的⽂档类型SGML(Standard Generalized Markup language)标准通⽤标记语⾔，是国际上定义电⼦⽂件结构和内容描述的标准，⽽超⽂本标记语⾔HyperText
Markup Language(HTML)，标准通⽤标记语⾔下的⼀个应⽤随着Web应⽤的不断深⼊，HTML在需求⼴泛的应⽤中已显得捉襟见肘，有⼈建议直接使⽤SGML作为Web语⾔。但SGML太庞⼤了，于是W3C建议使⽤⼀种精简的SGML版本——XML可扩展标记语⾔XML和HTML之间的差异XML不是HTML的替代，是对HTML的补充，为不同的⽬的⽽设计；XML被设计⽤来传输和存储数据，其焦点是数据的内容。HTML被设计⽤来显⽰数据，其焦点是数据的外观。HTML旨在显⽰信息，⽽XML旨在传输信息10. xhtml和html的区别XHTML(eXtensible HyperText Markup Language)可扩展超⽂本标记语⾔表现⽅式与HTML类似，但语法上更加严格。从继承关系上讲，HTML是⼀种基于标准通⽤标记语⾔SGML的应⽤，XHTML则基于可扩展标记语⾔XML，XML是SGML的⼀个⼦集功能上：XHTML可兼容各⼤浏览器、⼿机以及PDA，并且浏览器也能快速正确地编译⽹页书写习惯上：XHTML 元素必须被正确地嵌套，闭合，区分⼤⼩写，⽂档必须拥有根元素，所有属性都必须使⽤双引号11. HTML全局属性class:为元素设置类标识data-*: 为元素增加⾃定义属性draggable: 设置元素是否可拖拽id: 元素id，⽂档内唯⼀lang: 元素内容的的语⾔style: ⾏内css样式title: 元素相关的建议信息12. Viewport// width 设置viewport宽度，为⼀个正整数，或字符串‘device-width’// device-width 设备宽度// height 设置viewport⾼度，⼀般设置了宽度，会⾃动解析出⾼度，可以不⽤设置// initial-scale 默认缩放⽐例（初始缩放⽐例），为⼀个数字，可以带⼩数// minimum-scale 允许⽤户最⼩缩放⽐例，为⼀个数字，可以带⼩数// maximum-scale 允许⽤户最⼤缩放⽐例，为⼀个数字，可以带⼩数// user-scalable 是否允许⼿动缩放延伸提问：怎样处理 移动端 1px 被 渲染成 2px问题局部处理mate标签中的 viewport属性 ，initial-scale 设置为 1rem按照设计稿标准⾛，外加利⽤transfrom 的scale(0.5) 缩⼩⼀倍即可；全局处理mate标签中的 viewport属性 ，initial-scale 设置为 0.5rem 按照设计稿标准⾛即可13. div+css的布局较table布局有什么优点？改版更⽅便 只要改css⽂件页⾯加载速度更快、结构化清晰、页⾯显⽰简洁表现与结构相分离易于优化SEO，对搜索引擎更友好，排名更容易靠前14. src与href的区别src⽤于替换当前元素，href⽤于在当前⽂档和引⽤资源之间确⽴联系。src是source的缩写，指向外部资源的位置，指向的内容将会嵌⼊到⽂档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应⽤到⽂档内，例如js脚本，img图⽚,会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，类似于将所指向资源嵌⼊当前标签内。href是Hypertext Reference的缩写，指向⽹络资源所在位置，建⽴和当前元素（锚点）或当前⽂档（链接）之间的链接，例如超链接；如果我们在⽂档中添加那么浏览器会识别该⽂档为css⽂件，就会并⾏下载资源并且不会停⽌对当前⽂档的处理。这也是为什么建议使⽤link⽅式来加载css，⽽不是使⽤@import⽅式
发布评论