【前端面试题】JavaScript 核心知识点解析(第十四题解析到第二十二题)
第十四题解析:HTML5新特性
1. 新增媒体与交互标签
-
video:用于播放视频内容的标签
<video src="movie.mp4" controls width="400">您的浏览器不支持视频标签</video>
-
audio:用于播放音频内容的标签
<audio src="music.mp3" controls>您的浏览器不支持音频标签</audio>
-
article:表示文档中的独立内容,如文章、博客帖子等
-
canvas:提供绘图 API,用于动态绘制图形
<canvas id="myCanvas" width="200" height="100"></canvas>
2. 存储与通信
-
Storage:客户端存储解决方案,包括:
- localStorage:持久化存储,无过期时间
- sessionStorage:会话级存储,关闭浏览器后清除
-
socket:支持WebSocket通信,实现客户端与服务器的实时双向通信
3. 语义化标签
- 语义标签:具有明确含义的标签,使文档结构更清晰
- 常见语义标签:
<header>
,<nav>
,<main>
,<footer>
,<section>
,<article>
等 - 标签语义化的意义:
- 提高代码可读性和可维护性
- 有利于搜索引擎优化(SEO)
- 便于屏幕阅读器等辅助技术解析
4. 其他新特性
- drag:支持拖放功能的API
- pause:媒体元素的暂停方法
- resize:窗口或元素大小改变事件
- 地理定位:通过
getCurrentPosition()
方法获取用户位置navigator.geolocation.getCurrentPosition(position => {console.log("纬度: " + position.coords.latitude);console.log</