前端大厂面试题笔记.pdf

【HTML语义化】 HTML语义化是前端开发中的重要概念，它的目的是使网页内容更易于被人类理解和机器解析。正确使用语义化的HTML标签能够帮助搜索引擎优化（SEO），提高可访问性，并且使代码结构更加清晰。例如，使用``、``、``、``、``和``等标签，可以使页面结构更加清晰，而避免过度依赖无语义的``和``。同时，避免使用纯样式标签如``、``和``，而是改用CSS来控制样式。 【Canvas】 HTML5的``元素提供了在网页上进行动态图形绘制的功能。在使用`canvas`之前，需要获取其2D渲染上下文，然后才能调用各种绘图API，如`fillRect()`、`strokeRect()`、`fillText()`和`strokeText()`。虽然`canvas`不支持3D绘图，但可以通过JavaScript进行复杂的图形操作。需要注意的是，`canvas`基于像素点，是位图，放大或缩小可能导致图像失真。 【SVG与Canvas的区别】 SVG（Scalable Vector Graphics）是一种基于XML的矢量图格式，支持在HTML中直接绘制图形，其特点是无论放大多少倍都不会失真。与`canvas`不同，SVG图形是通过标签来描述形状的，可以被搜索引擎和屏幕阅读器理解。而`canvas`则更适合实时动态的图形绘制，但不支持对已绘制内容的直接操作。 【HTML5新特性】 HTML5引入了许多新特性，包括： 1.拖放API（Drag and drop） 2.语义化内容标签（如, , , , , ） 3.音频和视频API，使得直接在网页中嵌入媒体文件成为可能4. `canvas`用于在网页上绘制图形5.地理定位API（Geolocation） 6.本地存储，如localStorage和sessionStorage 7.新的表单控件，如calendar、date、time、email、url和search 【HTML5新标签的浏览器兼容】针对旧版IE（尤其是IE8/7/6）的兼容问题，可以使用`document.createElement`方法创建HTML5新标签。推荐使用像html5shiv这样的库，它们可以在旧版IE中模拟新标签的行为。 【title与alt属性】 `title`和`alt`属性是HTML中用于提供额外信息的属性。`alt`是``标签的专属属性，提供图片内容的文字描述，当图片无法显示时，作为替代文字显示。`title`属性可以应用于大部分HTML元素，提供元素的提示信息，通常在鼠标悬停时显示。 【HTML全局属性】全局属性如"class"用于设置元素的类名，"data-*"用于添加自定义数据，"draggable"设定元素是否可拖动，"id"确保元素的唯一性，"lang"指定元素内容的语言，"style"用于行内CSS，"title"提供元素的提示信息。 【CSS居中布局】在CSS中，有多种方法可以使元素水平或垂直居中。水平居中可以使用`text-align: center;`对行内元素生效，或者对块级元素设置`margin: 0 auto;`，或使用绝对定位。垂直居中可以通过`line-height`、`flexbox`、`grid`布局或使用`transform`实现。对于不确定宽度的块级元素，可以结合`display: table`和`margin: 0 auto`，或者使用`inline-block`结合负边距实现。