互联网大厂200道高频H5和CSS3面试题

文章目录

H5和CSS3篇

1. 什么是 HTML5?它与 HTML4 有哪些主要区别?

答案解析
HTML5 是超文本标记语言的第五代版本,旨在适应现代 Web 需求,提升多媒体支持和语义化。它于 2014 年由 W3C 正式发布,相较于 HTML4 引入了诸多新特性。
主要区别

  • 新元素:HTML5 增加了语义化标签(如 <header><footer><article>),替代 HTML4 中大量依赖 <div> 的布局。
  • 多媒体支持:新增 <audio><video> 标签,无需插件即可播放音视频,HTML4 依赖 Flash。
  • 表单增强:新增输入类型(如 emaildate)和属性(如 placeholderrequired),HTML4 表单功能较弱。
  • Canvas 和 SVG:HTML5 支持 <canvas>(位图绘制)和 SVG(矢量图形),HTML4 无此功能。
  • API 支持:引入 Geolocation、Web Storage 等 API,HTML4 无原生支持。
  • DOCTYPE 简化:HTML5 使用 <!DOCTYPE html>,HTML4 使用复杂声明(如 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">)。

应用场景:HTML5 广泛用于现代响应式网站和移动端开发。


2. HTML5 的语义化标签有哪些?为什么要使用语义化标签?

答案解析
语义化标签是 HTML5 提供的具有明确含义的标签,帮助开发者描述内容结构,同时提升可访问性和 SEO。
常见语义化标签

  • <header>:页眉或区域头部。
  • <footer>:页脚或区域底部。
  • <article>:独立的内容块(如文章)。
  • <section>:文档中的章节。
  • <nav>:导航区域。
  • <aside>:侧边栏或补充内容。
  • <main>:页面主要内容。

使用原因

  1. 可读性:代码结构清晰,便于团队协作和维护。
  2. SEO:搜索引擎更容易理解页面结构,提升排名。
  3. 可访问性:屏幕阅读器能更好解析内容,帮助残障用户。
  4. 替代性:减少对 <div> 和类名的依赖,降低代码复杂度。

示例

<main>
  <header><h1>网站标题</h1></header>
  <article><h2>文章</h2><p>内容...</p></article>
  <footer><p>版权信息</p></footer>
</main>

3. canvas 和 SVG 的区别是什么?各自适合什么场景?

答案解析
<canvas> 和 SVG 都是 HTML5 的绘图工具,但实现方式和应用场景不同。
区别

  • 绘制方式<canvas> 是基于像素的位图绘制,通过 JavaScript 动态渲染;SVG 是基于 XML 的矢量图形,声明式定义。
  • 缩放性<canvas> 放大失真,SVG 无损缩放。
  • 操作性<canvas> 整体操作,SVG 可单独操作每个元素。
  • 性能<canvas> 适合复杂动态图形(如游戏),SVG 渲染较慢。
  • SEO:SVG 可被搜索引擎解析,<canvas> 不行。

适用场景

  • <canvas>:游戏开发、实时动画。
  • SVG:图标、图表、响应式设计。

JavaScript 示例(Canvas)

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

4. HTML5 的 data-* 属性有什么作用?如何使用?

答案解析
data-* 属性是 HTML5 提供的自定义数据属性,用于存储私有数据,便于 JavaScript 操作。
作用

  • 保存与元素相关的元数据。
  • 增强交互性,无需额外 DOM 属性。

使用方法

  • 定义:data- 前缀后接自定义名称,如 data-id
  • 访问:通过 dataset 属性获取。

示例

<div id="user" data-id="123" data-name="Alice">用户</div>
<script>
  const user = document.getElementById('user');
  console.log(user.dataset.id);   // 输出 "123"
  console.log(user.dataset.name); // 输出 "Alice"
</script>

注意:属性名需小写,避免与标准属性冲突。


5. CSS3 的 box-sizing 属性有什么作用?有哪些取值?

答案解析
box-sizing 定义元素宽高的计算方式,解决了传统盒模型中 padding 和 border 影响尺寸的问题。
作用:控制 width 和 height 是否包含 padding 和 border。
取值

  • content-box(默认):宽高仅包括内容,padding 和 border 额外计算。
  • border-box:宽高包括内容、padding 和 border。
  • inherit:继承父元素的值。

示例

div {
   
   
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box; /* 实际宽高为 200x100 */
}

应用border-box 常用于响应式布局,便于精确控制尺寸。


6. CSS3 的媒体查询(Media Query)是什么?如何使用?

答案解析
媒体查询是 CSS3 的核心特性,用于根据设备特性(如屏幕宽度)应用不同样式,实现响应式设计。
语法@media 媒体类型 and (条件)
常用条件

  • min-width:最小宽度。
  • max-width:最大宽度。
  • orientation:屏幕方向。

示例

div {
   
   
  background: blue;
}
@media screen and (max-width: 600px) {
   
   
  div {
   
   
    background: red; /* 小于 600px 时变红 */
  }
}

注意:需配合 <meta name="viewport"> 使用。


7. HTML5 的本地存储有哪些?与 Cookie 的区别是什么?

答案解析
HTML5 提供两种本地存储方式:localStoragesessionStorage
特点

  • localStorage:持久存储,无过期时间,除非手动清除。
  • sessionStorage:会话存储,页面关闭即清除。
  • 容量:通常 5-10MB,远超 Cookie 的 4KB。

与 Cookie 的区别

  • 存储位置:本地存储仅客户端,Cookie 可随请求发送到服务器。
  • 用途:本地存储适合大数据,Cookie 用于身份验证。
  • 性能:本地存储不随请求发送,效率更高。

JavaScript 示例

localStorage.setItem('key', 'value');
console.log(localStorage.getItem('key')); // 输出 "value"
sessionStorage.setItem('temp', 'data');

8. CSS3 的 flex 布局是什么?有哪些常用属性?

答案解析
Flex(弹性布局)是 CSS3 提供的一维布局模型,用于灵活排列容器中的子元素。
常用属性

  • 容器
    • display: flex:启用 Flex 布局。
    • flex-direction:主轴方向(row、column)。
    • justify-content:主轴对齐(space-between、center)。
    • align-items:交叉轴对齐(stretch、center)。
  • 子项
    • flex:分配空间(如 flex: 1)。
    • order:排列顺序。

示例

.container {
   
   
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.item {
   
   
  flex: 1;
}

优点:简洁、适应性强,适合响应式设计。


9. HTML5 的 <video> 标签有哪些属性?如何控制播放?

答案解析
<video> 是 HTML5 的原生视频播放标签。
常用属性

  • src:视频源。
  • controls:显示控制条。
  • autoplay:自动播放。
  • loop:循环播放。
  • muted:静音。

JavaScript 控制

<video id="myVideo" src="video.mp4" controls></video>
<script>
  const video = document.getElementById('myVideo');
  video.play();  // 播放
  video.pause(); // 暂停
  video.currentTime = 10; // 跳转到 10 秒
</script>

注意:浏览器支持不同格式(如 MP4、WebM)。


10. CSS3 的 transition 属性如何使用?有哪些子属性?

答案解析
transition 实现平滑的属性变化效果,常用于动画。
子属性

  • transition-property:过渡的属性(如 width)。
  • transition-duration:持续时间(如 1s)。
  • transition-timing-function:速度曲线(如 ease)。
  • transition-delay:延迟时间(如 0.5s)。

示例

div {
   
   
  width: 100px;
  transition: width 1s ease 0.2s;
}
div:hover {
   
   
  width: 200px;
}

应用:按钮悬停、菜单展开等。


11. HTML5 的表单新特性有哪些?

答案解析
HTML5 增强了表单功能,提升用户体验和验证。
新特性

  • 新输入类型emailurldaterange 等。
  • 新属性
    • placeholder:提示文字。
    • required:必填。
    • pattern:正则验证。
    • autofocus:自动聚焦。

示例

<input type="email" placeholder="请输入邮箱" required>

12. CSS3 的 transform 属性有哪些值?如何实现 3D 效果?

答案解析
transform 修改元素的形状、位置或视角。
常见值

  • translate(x, y):平移。
  • rotate(deg):旋转。
  • scale(x, y):缩放。
  • skew(deg):倾斜。
  • perspective(n):3D 透视。

3D 示例

div {
   
   
  transform: perspective(500px) rotateY(45deg);
}

注意:需配合 transform-style: preserve-3d


13. HTML5 的 Geolocation API 如何使用?

答案解析
Geolocation API 获取用户地理位置。
方法

  • navigator.geolocation.getCurrentPosition(success, error)

JavaScript 示例

navigator.geolocation.getCurrentPosition(
  pos => console.log(`纬度: ${
     
     pos.coords.latitude}, 经度: ${
     
     pos.coords.longitude}`),
  err => console.error(err)
);

应用:地图导航、定位服务。


14. CSS3 的 animation 属性如何定义动画?

答案解析
animation 创建复杂的动画效果。
子属性

  • animation-name:动画名称。
  • animation-duration:持续时间。
  • animation-iteration-count:播放次数。

示例

@keyframes move {
   
   
  from {
   
    left: 0; }
  to {
   
    left: 100px; }
}
div {
   
   
  position: relative;
  animation: move 2s infinite;
}

15. HTML5 的 Web Worker 是什么?如何使用?

答案解析
Web Worker 是 HTML5 的多线程解决方案,在后台运行脚本,不阻塞主线程。
使用

  • 创建 Worker 文件。
  • 主线程与 Worker 通信。

示例

// worker.js
self.onmessage = e => self.postMessage(e.data * 2);

// main.js
const worker = new Worker('worker.js');
worker.onmessage = e => console.log(e.data); // 输出 10
worker.postMessage(5);

应用:复杂计算、数据处理。


16. CSS3 的 :nth-child 伪类如何使用?

答案解析
:nth-child 选择特定位置的子元素。
语法:nth-child(an+b),如 2n(偶数)。
示例

li:nth-child(odd) {
   
   
  background: gray; /* 奇数行变灰 */
}

17. HTML5 的拖放 API 如何实现?

答案解析
拖放 API 实现元素拖拽。
事件

  • dragstartdragoverdrop 等。

示例

<div draggable="true" ondragstart="event.dataTransfer.setData('text', 'data')">拖我</div>
<div ondragover="event.preventDefault()" ondrop="console.log(event.dataTransfer.getData('text'))">放这里</div>

18. CSS3 的 calc() 函数有什么作用?

答案解析
calc() 动态计算长度值,支持加减乘除。
示例

div {
   
   
  width: calc(100% - 20px);
}

19. HTML5 的 audio 标签有哪些属性?

答案解析
<audio> 播放音频。
属性

  • src:音频源。
  • controls:控制条。
  • loop:循环。

示例

<audio src="audio.mp3" controls loop></audio>

20. CSS3 的 opacityrgba() 的区别是什么?

答案解析

  • opacity:设置元素整体透明度(0-1),影响子元素。
  • rgba():设置颜色透明度,不影响子元素。

示例

div {
   
    opacity: 0.5; } /* 整体半透明 */
span {
   
    background: rgba(255, 0, 0, 0.5); } /* 红色背景半透明 */

21. HTML5 的 WebSocket 是什么?与 HTTP 的区别是什么?

答案解析
WebSocket 是 HTML5 的全双工通信协议。
区别

  • WebSocket 持久连接,HTTP 短连接。
  • WebSocket 双向通信,HTTP 请求-响应。

示例

const ws = new WebSocket('ws://example.com');
ws.onmessage = e => console.log(e.data);

22. CSS3 的 position 属性有哪些值?作用是什么?

答案解析
position 定义元素定位方式:

  • static:默认,无定位。
  • relative:相对自身定位。
  • absolute:相对最近定位祖先。
  • fixed:相对视口。
  • sticky:粘性定位。

示例

div {
   
    position: absolute; top: 10px; left: 10px; }

23. HTML5 的 <progress> 标签有什么作用?

答案解析
<progress> 显示任务进度。
属性

  • value:当前值。
  • max:最大值。

示例

<progress value="50" max="100"></progress>

24. CSS3 的 grid 布局是什么?有哪些核心属性?

答案解析
Grid 是 CSS3 的二维布局系统。
核心属性

  • display: grid:启用网格。
  • grid-template-columns:列定义。
  • grid-gap:间距。

示例

.container {
   
   
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

25. HTML5 的 History API 如何操作浏览器历史?

答案解析
History API 操作浏览器历史记录。
方法

  • pushState():添加记录。
  • replaceState():替换记录。

示例

history.pushState({
   
    page: 1 }, '标题', '/page1');

26. CSS3 的 clip-path 属性有什么作用?

答案解析
clip-path 裁剪元素显示区域。
示例

div {
   
   
  clip-path: circle(50%);
}

27. HTML5 的 <details><summary> 标签如何使用?

答案解析
<details><summary> 创建折叠内容。
示例

<details>
  <summary>点击展开</summary>
  <p>内容</p>
</details>

28. CSS3 的 filter 属性有哪些值?

答案解析
filter 添加图形效果:

  • blur():模糊。
  • brightness():亮度。
  • grayscale():灰度。

示例

img {
   
    filter: blur(5px); }

29. HTML5 的 <meter> 标签有什么作用?

答案解析
<meter> 显示范围内的值。
属性

  • value:当前值。
  • min/max:范围。

示例

<meter value="70" min="0" max="100"></meter>

30. CSS3 的 :hover 伪类如何使用?

答案解析
:hover 在鼠标悬停时应用样式。
示例

button:hover {
   
   
  background: blue;
}

31. HTML5 的 output 标签有什么作用?

答案解析
<output> 显示计算结果。
示例

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input id="a"> + <input id="b"> = <output name="result"></output>
</form>

32. CSS3 的 background-size 属性有哪些值?

答案解析
background-size 控制背景图大小:

  • cover:覆盖容器。
  • contain:完整显示。
  • 具体值:如 100px 200px

示例

div {
   
    background-size: cover; }

33. HTML5 的 figurefigcaption 标签有什么作用?

答案解析
<figure> 表示独立内容(如图片),<figcaption> 是其说明。
示例

<figure>
  <img src="img.jpg" alt="图片">
  <figcaption>图片说明</figcaption>
</figure>

34. CSS3 的 box-shadow 属性如何使用?

答案解析
box-shadow 添加阴影。
参数:水平偏移、垂直偏移、模糊半径、颜色。
示例

div {
   
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); }

35. HTML5 的 <mark> 标签有什么作用?

答案解析
<mark> 高亮显示文本。
示例

<p>这是 <mark>重要</mark> 内容</p>

36. CSS3 的 text-overflow 属性有什么作用?

答案解析
text-overflow 处理溢出文本:

  • ellipsis:显示省略号。
  • clip:裁剪。

示例

div {
   
   
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

37. HTML5 的 <time> 标签有什么作用?

答案解析
<time> 表示时间或日期。
示例

<time datetime="2025-04-08">2025年4月8日</time>

38. CSS3 的 column-count 属性如何实现多列布局?

答案解析
column-count 将内容分成多列。
示例

div {
   
    column-count: 3; }

39. HTML5 的 <datalist> 标签如何使用?

答案解析
<datalist> 提供输入建议。
示例

<input list="options">
<datalist id="options">
  <option value="选项1">
  <option value
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天涯学馆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值