HTML5特性与前端面试必备知识总结

"面试题总结 .md" 面试题总结涵盖了HTML5的新特性、HTML语义化标签的理解、HTML文档声明(DOCTYPE)的作用、HTML中的行内元素与块级元素、cookies、sessionStorage和localStorage的区别、CSS盒模型以及清除浮动的方法等核心知识点。 ### HTML5新特性 HTML5引入了一系列新特性，旨在提升网页应用的功能和用户体验。这些新特性包括： 1. **Canvas** 元素，提供了一个二维绘图环境，允许动态图形和交互式图像的创建。 2. **Video** 和 **Audio** 元素，使得在网页中嵌入多媒体内容变得更加简单。 3. **Geolocation API**，通过 `window.navigator.geolocation` 访问用户的地理位置信息。 4. 语义化更好的内容元素，如 `article`, `footer`, `header`, `nav`, `section`，这些元素有助于提高网页内容的结构化和可读性。 5. 新的表单控件，如 `date`, `time`, `email`, `url`, `search`, `calendar`，增强了用户输入体验和数据验证。 ### HTML语义化标签 HTML语义化标签使得网页结构更加清晰，有以下好处： 1. 在没有CSS的情况下，也能呈现良好的页面结构。 2. 提升了用户体验，因为浏览器和屏幕阅读器可以更好地理解页面内容。 3. 对搜索引擎友好，利于SEO（搜索引擎优化）。 4. 代码结构清晰，便于团队协作和代码维护。 ### DOCTYPE的作用 DOCTYPE声明位于HTML文档的开头，它告知浏览器文档遵循的HTML或XHTML规范，确保浏览器以正确的方式解析和渲染页面内容。 ### HTML中的行内元素与块级元素 - **行内元素**（如 `a`, `img`, `input`, `span`）：它们在一行内显示，不会独自占据一整行。 - **块级元素**（如 `div`, `h1`-`h5`, `table`, `ul`）：它们会占据一整行，形成独立的区块。 ### Cookies, sessionStorage, localStorage的区别 - **Cookie** 是一种存储在客户端的数据，常用于保持用户登录状态。数据大小有限，且每次HTTP请求都会携带。 - **sessionStorage** 保存在浏览器会话期间，会话结束时（浏览器窗口关闭）数据会被清除。 - **localStorage** 存储的数据更持久，即使浏览器关闭，数据也不会丢失，直到被主动删除。存储容量远大于Cookie。 ### CSS盒模型 - **标准盒模型**：元素的宽度（width）仅包含内容区域。 - **怪异盒模型**：元素的宽度（width）包含内容、内边距（padding）和边框（border）。 ### 清除浮动 清除浮动是为了防止父元素因子元素浮动而高度塌陷，常见的方法有： 1. 给父级元素设定固定高度。 2. 在末尾添加一个带有 `clear:both` 属性的空`div`。 3. 使用父级元素的伪类`:after`和`zoom`，触发BFC（块级格式化上下文）。 4. 设置父级元素的 `overflow` 为 `hidden` 或 `auto`。 ### BFC（Block Formatting Context） BFC是CSS布局中的一种概念，它决定了元素如何对其内部和外部元素进行布局。BFC可以帮助解决浮动元素引起的问题，避免高度塌陷，并实现特定的布局效果。创建BFC的方法包括：根元素、浮动元素、绝对定位元素、`display: inline-block` 或 `flex` 的元素、`overflow` 不为 `visible` 的元素。