html 和 css 面试问答
1. HTML5 中的文档类型声明？
文档类型声明定义了 HTML 文档的类型和版本。在 HTML5 中，它简化为 <!DOCTYPE html>，确保浏览器以标准模式渲染页面。
示例：<!DOCTYPE html>
2. <div> 和 <span> 的区别？
立即学习“前端免费学习笔记（深入）”；
-
<div>：块级元素，用于分组块级元素，占据整行宽度。 -
<span>：内联元素，用于分组内联元素，仅占据所需宽度。
示例：
<code class="html"><div style="background-color: lightblue;">这是一个 div</div> <p>这是一个段落内包含 span 元素的例子 <span style="color: red;">红色文字</span></p></code>
3. HTML 中的语义化和非语义化标签是什么？
-
语义化标签: 具有明确含义的标签，例如
<header>,<nav>,<main>,<article>,<aside>,<footer>等。 它们提升代码可读性和 SEO 优化。 -
非语义化标签: 没有明确含义的标签，例如
<div>和<span>。 它们主要用于结构和样式。
语义化标签示例：
<code class="html"><header>网站头部</header> <nav>导航链接</nav> <main>主要内容</main> <footer>页脚</footer></code>
4. HTML 和 HTML5 之间的区别
| 特性 | HTML | HTML5 |
|---|---|---|
| 文档类型声明 | 复杂 | 简洁 <!DOCTYPE html>
|
| 多媒体支持 | 有限 | 支持 <audio> 和 <video>
|
| canvas 支持 | 不支持 | 支持 |
| 语义元素 | 不支持 | 支持 |
5. HTML5 中的 <iframe> 标签是什么？
<iframe> (内联框架) 用于在当前页面中嵌入另一个网页。
示例：
<code class="html"><iframe height="400" src="https://www.example.com" width="600"></iframe></code>
6. HTML 中的格式化标签是什么？
一些标签用于文本格式化，例如：
-
<b>: 粗体文本 -
<strong>: 表示重要性 (对 SEO 友好) -
<i>: 斜体文本 -
<em>: 强调文本
示例：
<code class="html"><p>这是<b>粗体</b>文本，这是<strong>重要</strong>文本。</p></code>
7. HTML 中的视口属性是什么？
<meta name="viewport"> 定义了如何在移动设备上显示网页。
示例：
<code class="html"><meta name="viewport" content="width=device-width, initial-scale=1.0"></code>
8. HTML 中的属性是什么？
属性提供关于 HTML 元素的额外信息。
示例：
<code class="html"><a href="https://example.com" target="_blank">访问</a></code>
9. 块级与内联元素
-
块级元素: 占据整行宽度 (
<div>,<p>,<h1>等) -
内联元素: 仅占据所需宽度 (
<span>,<a>,<img>等)
10. CSS 面试问答
1. CSS 和 CSS3 之间的区别？
CSS3 引入了许多新特性，例如动画、过渡、弹性盒模型 (Flexbox)、网格布局 (Grid) 等。
2. CSS 中的选择器是什么？
选择器用于选择 HTML 元素来应用样式。 包括简单选择器 (元素、ID、类)、组合选择器 (后代、子元素、相邻兄弟选择器)、伪类选择器 (:hover, :focus 等) 和属性选择器。
3. 什么是 CSS 中的媒体查询？
媒体查询用于创建响应式设计，根据不同的设备屏幕尺寸和特性应用不同的样式。
示例：
<code class="css">@media (max-width: 600px) {
body { background-color: lightgray; }
}</code>
4. CSS 中的不同定位值 (static, relative, absolute, fixed, sticky)
这些值定义了元素在文档流中的位置。
5. CSS 中的 BOM 是什么？
BOM (Box Model) 指的是元素的盒子模型，包括内容、内边距 (padding)、边框 (border) 和外边距 (margin)。
6. px, em, rem 之间的区别
-
px: 像素，固定单位。 -
em: 相对父元素字体大小的单位。 -
rem: 相对根元素 (html) 字体大小的单位。
7. CSS 中的 Flexbox 是什么？
Flexbox 是一个一维布局模块，用于创建灵活的、响应式的布局。
示例：
<code class="css">display: flex; justify-content: center; align-items: center;</code>
8. CSS 中有哪些伪类选择器？
:hover, :focus, :active, :visited, :nth-child(n) 等。
9. 如何使网站响应式？
使用媒体查询、流体布局、Flexbox、Grid 和响应式图片。
10. 响应式设计的断点是什么？
断点是根据屏幕尺寸来切换不同样式的临界点，例如 320px, 768px, 1024px, 1200px 等。 这些值并非固定，取决于设计需求。
11. 为什么在 CSS 中使用 box-sizing: border-box;?
box-sizing: border-box; 确保元素的宽度和高度包含内边距和边框。
示例：
<code class="css">* { box-sizing: border-box; }</code>
请注意，我已经尽可能地对原文进行了伪原创，并保留了图片的原始格式和位置。 部分内容由于专业术语和代码的限制，修改幅度较小。
