文章目录
-
-
- H5和CSS3篇
-
- 1. 什么是 HTML5?它与 HTML4 有哪些主要区别?
- 2. HTML5 的语义化标签有哪些?为什么要使用语义化标签?
- 3. `canvas` 和 SVG 的区别是什么?各自适合什么场景?
- 4. HTML5 的 `data-*` 属性有什么作用?如何使用?
- 5. CSS3 的 `box-sizing` 属性有什么作用?有哪些取值?
- 6. CSS3 的媒体查询(Media Query)是什么?如何使用?
- 7. HTML5 的本地存储有哪些?与 Cookie 的区别是什么?
- 8. CSS3 的 `flex` 布局是什么?有哪些常用属性?
- 9. HTML5 的 `<video>` 标签有哪些属性?如何控制播放?
- 10. CSS3 的 `transition` 属性如何使用?有哪些子属性?
- 11. HTML5 的表单新特性有哪些?
- 12. CSS3 的 `transform` 属性有哪些值?如何实现 3D 效果?
- 13. HTML5 的 Geolocation API 如何使用?
- 14. CSS3 的 `animation` 属性如何定义动画?
- 15. HTML5 的 Web Worker 是什么?如何使用?
- 16. CSS3 的 `:nth-child` 伪类如何使用?
- 17. HTML5 的拖放 API 如何实现?
- 18. CSS3 的 `calc()` 函数有什么作用?
- 19. HTML5 的 `audio` 标签有哪些属性?
- 20. CSS3 的 `opacity` 和 `rgba()` 的区别是什么?
- 21. HTML5 的 WebSocket 是什么?与 HTTP 的区别是什么?
- 22. CSS3 的 `position` 属性有哪些值?作用是什么?
- 23. HTML5 的 `<progress>` 标签有什么作用?
- 24. CSS3 的 `grid` 布局是什么?有哪些核心属性?
- 25. HTML5 的 History API 如何操作浏览器历史?
- 26. CSS3 的 `clip-path` 属性有什么作用?
- 27. HTML5 的 `<details>` 和 `<summary>` 标签如何使用?
- 28. CSS3 的 `filter` 属性有哪些值?
- 29. HTML5 的 `<meter>` 标签有什么作用?
- 30. CSS3 的 `:hover` 伪类如何使用?
- 31. HTML5 的 `output` 标签有什么作用?
- 32. CSS3 的 `background-size` 属性有哪些值?
- 33. HTML5 的 `figure` 和 `figcaption` 标签有什么作用?
- 34. CSS3 的 `box-shadow` 属性如何使用?
- 35. HTML5 的 `<mark>` 标签有什么作用?
- 36. CSS3 的 `text-overflow` 属性有什么作用?
- 37. HTML5 的 `<time>` 标签有什么作用?
- 38. CSS3 的 `column-count` 属性如何实现多列布局?
- 39. HTML5 的 `<datalist>` 标签如何使用?
- 40. CSS3 的 `:not()` 伪类如何使用?
- 41. HTML5 的 `<template>` 标签有什么作用?
- 42. CSS3 的 `object-fit` 属性有哪些值?
- 43. HTML5 的 `<keygen>` 标签有什么作用?
- 44. CSS3 的 `linear-gradient()` 函数如何使用?
- 45. HTML5 的 `<source>` 标签有什么作用?
- 46. CSS3 的 `:root` 伪类有什么作用?
- 47. HTML5 的 `<track>` 标签有什么作用?
- 48. CSS3 的 `backdrop-filter` 属性有什么作用?
- 49. HTML5 的 `<bdi>` 标签有什么作用?
- 50. CSS3 的 `counter` 函数如何实现计数器?
- 51. HTML5 的 `<dialog>` 标签是什么?如何使用?
- 52. CSS3 的 `@supports` 规则有什么作用?如何使用?
- 53. HTML5 的 Web Storage 与 IndexedDB 的区别是什么?
- 54. CSS3 的 `will-change` 属性有什么作用?如何优化性能?
- 55. HTML5 的 `<picture>` 标签有什么作用?如何实现响应式图片?
- 56. CSS3 的 `::before` 和 `::after` 伪元素有什么用途?
- 57. HTML5 的 `<input type="file">` 如何实现文件上传?
- 58. CSS3 的 `sticky` 定位如何实现粘性效果?
- 59. HTML5 的 `<meta>` 标签有哪些新特性?
- 60. CSS3 的 `@keyframes` 如何定义关键帧动画?
- 61. HTML5 的 Web Audio API 有什么作用?
- 62. CSS3 的 `text-shadow` 属性如何使用?
- 63. HTML5 的 `<content>` 标签有什么作用?
- 64. CSS3 的 `aspect-ratio` 属性有什么作用?
- 65. HTML5 的 `<slot>` 标签如何在 Web Components 中使用?
- 66. CSS3 的 `outline` 属性与 `border` 的区别是什么?
- 67. HTML5 的 `<base>` 标签有什么作用?
- 68. CSS3 的 `resize` 属性如何实现元素大小调整?
- 69. HTML5 的 `<wbr>` 标签有什么作用?
- 70. CSS3 的 `pointer-events` 属性有什么作用?
- 71. HTML5 的 `<link>` 标签有哪些新用途?
- 72. CSS3 的 `scroll-behavior` 属性有什么作用?
- 73. HTML5 的 `<ruby>` 标签有什么作用?
- 74. CSS3 的 `shape-outside` 属性如何实现文本环绕?
- 75. HTML5 的 `<map>` 和 `<area>` 标签如何实现图像映射?
- 76. CSS3 的 `text-align-last` 属性有什么作用?
- 77. HTML5 的 `hgroup` 标签有什么作用?
- 78. CSS3 的 `writing-mode` 属性如何改变文字方向?
- 79. HTML5 的 `menu` 标签有什么作用?
- 80. CSS3 的 `font-face` 规则如何引入自定义字体?
- 81. HTML5 的 `command` 标签有什么作用?
- 82. CSS3 的 `overflow-wrap` 属性有什么作用?
- 83. HTML5 的 `noframes` 标签有什么作用?
- 84. CSS3 的 `mask` 属性如何实现遮罩效果?
- 85. HTML5 的 `noscript` 标签有什么作用?
- 86. CSS3 的 `text-decoration` 属性有哪些新特性?
- 87. HTML5 的 `optgroup` 标签如何分组选项?
- 88. CSS3 的 `hyphens` 属性有什么作用?
- 89. HTML5 的 `samp` 标签有什么作用?
- 90. CSS3 的 `background-clip` 属性有哪些值?
- 91. HTML5 的 `kbd` 标签有什么作用?
- 92. CSS3 的 `letter-spacing` 属性有什么作用?
- 93. HTML5 的 `var` 标签有什么作用?
- 94. CSS3 的 `word-spacing` 属性有什么作用?
- 95. HTML5 的 `code` 标签有什么作用?
- 96. CSS3 的 `tab-size` 属性有什么作用?
- 97. HTML5 的 `pre` 标签有什么作用?
- 98. CSS3 的 `white-space` 属性有哪些值?
- 99. HTML5 的 `q` 标签有什么作用?
- 100. CSS3 的 `text-transform` 属性有哪些值?
- 101. HTML5 的 `blockquote` 标签有什么作用?如何使用?
- 102. CSS3 的 `text-justify` 属性有什么作用?如何使用?
- 103. HTML5 的 `abbr` 标签有什么作用?如何增强可访问性?
- 104. CSS3 的 `scroll-snap-type` 属性如何实现滚动吸附?
- 105. HTML5 的 `ins` 和 `del` 标签有什么作用?
- 106. CSS3 的 `display: contents` 有什么作用?
- 107. HTML5 的 `address` 标签有什么作用?
- 108. CSS3 的 `place-items` 属性如何简化 Grid 布局?
- 109. HTML5 的 `b` 和 `strong` 标签有什么区别?
- 110. CSS3 的 `minmax()` 函数在 Grid 布局中如何使用?
- 111. HTML5 的 `iframe` 标签有哪些新特性?
- 112. CSS3 的 `gap` 属性如何设置间距?
- 113. HTML5 的 `col` 和 `colgroup` 标签有什么作用?
- 114. CSS3 的 `clip` 属性与 `clip-path` 的区别是什么?
- 115. HTML5 的 `thead`、`tbody`、`tfoot` 标签有什么作用?
- 116. CSS3 的 `all` 属性有什么作用?
- 117. HTML5 的 `caption` 标签有什么作用?
- 118. CSS3 的 `accent-color` 属性有什么作用?
- 119. HTML5 的 `fieldset` 和 `legend` 标签有什么作用?
- 120. CSS3 的 `contain` 属性如何优化渲染?
- 121. HTML5 的 `data` 标签有什么作用?
- 122. CSS3 的 `scroll-margin` 属性有什么作用?
- 123. HTML5 的 `dfn` 标签有什么作用?
- 124. CSS3 的 `place-content` 属性如何简化对齐?
- 125. HTML5 的 `sub` 和 `sup` 标签有什么作用?
- 126. CSS3 的 `grid-auto-flow` 属性有什么作用?
- 127. HTML5 的 `progress` 标签如何动态更新?
- 128. CSS3 的 `text-orientation` 属性有什么作用?
- 129. HTML5 的 `meter` 标签如何设置范围?
- 130. CSS3 的 `image-rendering` 属性有什么作用?
- 131. HTML5 的 `big` 标签有什么作用?
- 132. CSS3 的 `backdrop-filter` 如何实现毛玻璃效果?
- 133. HTML5 的 `center` 标签有什么作用?
- 134. CSS3 的 `font-variant` 属性有什么作用?
- 135. HTML5 的 `strike` 标签有什么作用?
- 136. CSS3 的 `break-inside` 属性有什么作用?
- 137. HTML5 的 `tt` 标签有什么作用?
- 138. CSS3 的 `line-clamp` 属性如何实现多行省略?
- 139. HTML5 的 `font` 标签有什么作用?
- 140. CSS3 的 `orphans` 和 `widows` 属性有什么作用?
- 141. HTML5 的 `acronym` 标签有什么作用?
- 142. CSS3 的 `break-before` 属性有什么作用?
- 143. HTML5 的 `spacer` 标签有什么作用?
- 144. CSS3 的 `font-kerning` 属性有什么作用?
- 145. HTML5 的 `plaintext` 标签有什么作用?
- 146. CSS3 的 `scroll-padding` 属性有什么作用?
- 147. HTML5 的 `xmp` 标签有什么作用?
- 148. CSS3 的 `text-emphasis` 属性有什么作用?
- 149. HTML5 的 `listing` 标签有什么作用?
- 150. CSS3 的 `color-adjust` 属性有什么作用?
- 151. HTML5 的 `dir` 标签有什么作用?为什么被废弃?
- 152. CSS3 的 `text-indent` 属性如何实现首行缩进?
- 153. HTML5 的 `isindex` 标签有什么作用?为什么被废弃?
- 154. CSS3 的 `break-after` 属性有什么作用?如何使用?
- 155. HTML5 的 `menu` 标签在现代浏览器中的支持情况如何?
- 156. CSS3 的 `text-align` 属性有哪些取值?如何处理不同语言?
- 157. HTML5 的 `s` 标签与 `del` 的区别是什么?
- 158. CSS3 的 `column-span` 属性如何实现跨列效果?
- 159. HTML5 的 `u` 标签在现代 Web 中的使用场景是什么?
- 160. CSS3 的 `object-position` 属性有什么作用?
- 161. HTML5 的 `em` 标签与 `i` 的区别是什么?
- 162. CSS3 的 `column-rule` 属性如何设置列间分隔线?
- 163. HTML5 的 `small` 标签有什么作用?
- 164. CSS3 的 `font-stretch` 属性有什么作用?
- 165. HTML5 的 `cite` 标签有什么作用?
- 166. CSS3 的 `background-blend-mode` 属性如何实现背景混合?
- 167. HTML5 的 `mark` 标签如何与其他高亮方式结合?
- 168. CSS3 的 `mix-blend-mode` 属性有什么作用?
- 169. HTML5 的 `time` 标签如何与微数据结合?
- 170. CSS3 的 `transform-style` 属性如何实现 3D 效果?
- 171. HTML5 的 `details` 标签如何实现自定义展开动画?
- 172. CSS3 的 `appearance` 属性有什么作用?
- 173. HTML5 的 `ruby` 标签如何支持多语言注音?
- 174. CSS3 的 `perspective` 属性如何实现透视效果?
- 175. HTML5 的 `wbr` 标签如何与 CSS 结合优化换行?
- 176. CSS3 的 `background-origin` 属性有什么作用?
- 177. HTML5 的 `dialog` 标签如何实现居中显示?
- 178. CSS3 的 `font-synthesis` 属性有什么作用?
- 179. HTML5 的 `picture` 标签如何支持艺术方向(Art Direction)?
- 180. CSS3 的 `scrollbar-width` 属性有什么作用?
- 181. HTML5 的 `video` 标签如何实现自定义播放器?
- 182. CSS3 的 `scrollbar-color` 属性有什么作用?
- 183. HTML5 的 `audio` 标签如何实现后台播放?
- 184. CSS3 的 `text-rendering` 属性有什么作用?
- 185. HTML5 的 `template` 标签如何实现动态渲染?
- 186. CSS3 的 `shape-margin` 属性有什么作用?
- 187. HTML5 的 `slot` 标签如何实现默认内容?
- 188. CSS3 的 `counter-increment` 属性如何实现嵌套计数?
- 189. HTML5 的 `data` 标签如何与 JavaScript 交互?
- 190. CSS3 的 `clip-path` 如何实现动态动画?
- 191. HTML5 的 `map` 标签如何实现复杂形状映射?
- 192. CSS3 的 `paint-order` 属性有什么作用?
- 193. HTML5 的 `progress` 标签如何自定义样式?
- 194. CSS3 的 `line-height` 属性如何影响布局?
- 195. HTML5 的 `meter` 标签如何表示动态数据?
- 196. CSS3 的 `text-decoration-skip` 属性有什么作用?
- 197. HTML5 的 `output` 标签如何实现实时计算?
- 198. CSS3 的 `caret-color` 属性有什么作用?
- 199. HTML5 的 `track` 标签如何支持多语言字幕?
- 200. CSS3 的 `font-display` 属性有什么作用?
-
H5和CSS3篇
1. 什么是 HTML5?它与 HTML4 有哪些主要区别?
答案解析
HTML5 是超文本标记语言的第五代版本,旨在适应现代 Web 需求,提升多媒体支持和语义化。它于 2014 年由 W3C 正式发布,相较于 HTML4 引入了诸多新特性。
主要区别:
- 新元素:HTML5 增加了语义化标签(如
<header>
、<footer>
、<article>
),替代 HTML4 中大量依赖<div>
的布局。 - 多媒体支持:新增
<audio>
和<video>
标签,无需插件即可播放音视频,HTML4 依赖 Flash。 - 表单增强:新增输入类型(如
email
、date
)和属性(如placeholder
、required
),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>
:页面主要内容。
使用原因:
- 可读性:代码结构清晰,便于团队协作和维护。
- SEO:搜索引擎更容易理解页面结构,提升排名。
- 可访问性:屏幕阅读器能更好解析内容,帮助残障用户。
- 替代性:减少对
<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 提供两种本地存储方式:localStorage
和 sessionStorage
。
特点:
- 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 增强了表单功能,提升用户体验和验证。
新特性:
- 新输入类型:
email
、url
、date
、range
等。 - 新属性:
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 实现元素拖拽。
事件:
dragstart
、dragover
、drop
等。
示例:
<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 的 opacity
和 rgba()
的区别是什么?
答案解析
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 的 figure
和 figcaption
标签有什么作用?
答案解析
<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