前端面试必备：HTML5新特性与语义化解析

3星 · 超过75%的资源需积分: 13 138 浏览量更新于2024-09-08 收藏 23KB DOCX 举报

"前端面试总结" 前端面试是一个评估求职者技术能力、问题解决能力和实际项目经验的过程。在HTML方面，面试通常会涵盖HTML5的新特性、语义化HTML以及最佳实践。以下是对这些主题的详细解释： 1. HTML5的改进： - **新元素**：HTML5引入了如`<canvas>`（用于动态图形绘制）、`<audio>`和`<video>`（用于媒体播放）、`<article>`、`<nav>`、`<footer>`、`<section>`、`<aside>`和`<hgroup>`等元素，增强了网页的语义性和功能性。 - **拖放功能**：通过`draggable`属性实现元素的拖放操作，例如`<img draggable="true">`。 - **可编辑内容**：`contenteditable`属性允许用户直接在页面上编辑文本。 - **新事件**：如`ondrag`, `ondrop`, `onunload`, `onresize`等，增加了对用户交互的响应。 - **取消的元素**：不再推荐使用如`<font>`和`<center>`等非语义化元素。 - **DOCTYPE声明**：简化为`<!DOCTYPE html>`。 - **CSS3支持**：HTML5完全支持CSS3，提供了更多的样式控制和动画效果。 - **多媒体支持**：内置对视频和音频的支持，如`<video>`和`<audio>`元素，可以添加2D/3D图形和本地存储等功能。 - **Web应用**：HTML5支持离线存储、Web Workers和Web SQL数据库，使得Web应用更加丰富和强大。 2. **什么是语义化的HTML**：语义化HTML是指使用恰当的HTML标签来表达网页内容的结构和意义，而不是仅仅关注外观。其目标包括： - **内容结构清晰**：即使没有CSS，页面内容仍然可以清晰理解。 - **用户体验**：辅助功能如`title`、`alt`提供信息，`label`提高表单可用性。 - **搜索引擎优化**：帮助搜索引擎更好地理解和索引内容。 - **无障碍访问**：使屏幕阅读器和其他辅助技术更容易解析和呈现网页。 - **团队协作与维护**：提高代码可读性，降低维护成本。 3. **如何实现语义化HTML**： - **避免过度使用`<div>`和`<span>`**：它们是通用容器，但不应滥用，应优先选择有特定语义的标签。 - **使用`<p>`而非`<div>`**：在段落和内容分隔时，`<p>`提供更好的语义。 - **避免纯样式标签**：如`<b>`、`<font>`、`<u>`，改为使用CSS进行样式控制。 - **强调文本**：使用`<strong>`（默认加粗，代替`<b>`）和`<em>`（默认斜体，代替`<i>`）。 - **表格语义**：正确使用`<caption>`、`<thead>`、`<tbody>`、`<tfoot>`和`<th>`、`<td>`，区分表头和数据单元格。 - **表单结构**：利用`<fieldset>`和`<legend>`来组织和描述表单内容。在面试中，展示对这些概念的理解和应用能力，将有助于展示你作为前端开发者的技术深度和专业素养。熟悉并能够熟练运用HTML5的新特性以及语义化原则，将使你在面试中脱颖而出。

前端整理（HTML 篇）

web 前端面试题整理（HTML 篇）

1. h5 的改进:

新元素

画布 canvas: HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是 JavaScript)来完

成

音频 audio

视频 video

语义性: article,nav ,footer, section, aside, hgroup 等.

时间 time

新属性

拖放: draggable <img draggable="true">

可编辑: contenteditable

新事件

拖放 ondrag ondrop

关闭页面 onunload

窗口大小改变 onresize

取消了一些元素: font center 等

新的 DOCTYPE 声明 <!DOCTYPE html>

完全支持 CSS3

Video 和 Audio

2D/3D 制图

本地存储

本地 SQL 数据

Web 应用

2. 什么是语义化的 html?

what?

根据内容的结构（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出

更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

why?

为了在没有 CSS 的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；

用户体验：例如 title、alt 用于解释名词或解释图片信息、label 标签的活用；

有利于 SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标

下载后可阅读完整内容，剩余5页未读，立即下载

写bug，改bug

粉丝: 0
资源: 2

前端面试必备：HTML5新特性与语义化解析

web前端面试宝典

2018最新BAT 《前端必考面试》.pdf

前端面试江湖试读样章

解锁前端面试体系核心攻略.rar

2021前端面试真题pdf

2023前端面试笔试题

前端面试题token

前端面试 开发过NPM嘛

中级web前端面试20203

2023年高频前端面试题

最新资源

前端面试开发过NPM嘛