html 和 css 面试问答

1. HTML5 中的文档类型声明？

文档类型声明定义了 HTML 文档的类型和版本。在 HTML5 中，它简化为 ，确保浏览器以标准模式渲染页面。

示例：

2.

和 的区别？

• ：块级元素，用于分组块级元素，占据整行宽度。
• ：内联元素，用于分组内联元素，仅占据所需宽度。

示例：

<div style="background-color: lightblue;">这是一个 div</div>
<p>这是一个段落内包含 span 元素的例子 <span style="color: red;">红色文字</span></p>

3. HTML 中的语义化和非语义化标签是什么？

• 语义化标签: 具有明确含义的标签，例如
  ,
  ,
  ,
  ,
  ,
  等。 它们提升代码可读性和 SEO 优化。
• 非语义化标签: 没有明确含义的标签，例如
  和 。 它们主要用于结构和样式。

  语义化标签示例：

  <header>网站头部</header><nav>导航链接</nav><main>主要内容</main><footer>页脚</footer>

  4. HTML 和 HTML5 之间的区别

  特性	HTML	HTML5
  文档类型声明	复杂	简洁
  多媒体支持	有限	支持 和
  canvas 支持	不支持	支持
  语义元素	不支持	支持

  5. HTML5 中的 标签是什么？

  (内联框架) 用于在当前页面中嵌入另一个网页。

  示例：

  <iframe height="400" src="https://www.example.com" width="100%"></iframe>

  6. HTML 中的格式化标签是什么？

  一些标签用于文本格式化，例如：

  • : 粗体文本
  • : 表示重要性 (对 SEO 友好)
  • : 斜体文本
  • : 强调文本

  示例：

  <p>这是<b>粗体</b>文本，这是<strong>重要</strong>文本。</p>

  7. HTML 中的视口属性是什么？

  定义了如何在移动设备上显示网页。

  示例：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  8. HTML 中的属性是什么？

  属性提供关于 HTML 元素的额外信息。

  示例：

  <a href="https://example.com" target="_blank">访问</a>

  9. 块级与内联元素

  • 块级元素: 占据整行宽度 (
    ,

    ,

    等)
  • 内联元素: 仅占据所需宽度 (, , 等)

  10. CSS 面试问答

  1. CSS 和 CSS3 之间的区别？

  
  CSS工具箱(专业版)
  全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。
  下载

  CSS3 引入了许多新特性，例如动画、过渡、弹性盒模型 (Flexbox)、网格布局 (Grid) 等。

  2. CSS 中的选择器是什么？

  选择器用于选择 HTML 元素来应用样式。 包括简单选择器 (元素、ID、类)、组合选择器 (后代、子元素、相邻兄弟选择器)、伪类选择器 (:hover, :focus 等) 和属性选择器。

  3. 什么是 CSS 中的媒体查询？

  媒体查询用于创建响应式设计，根据不同的设备屏幕尺寸和特性应用不同的样式。

  示例：

  @media (max-width: 600px) {
    body { background-color: lightgray; }
  }

  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 是一个一维布局模块，用于创建灵活的、响应式的布局。

  示例：

  display: flex;
  justify-content: center;
  align-items: center;

  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; 确保元素的宽度和高度包含内边距和边框。

  示例：

  * { box-sizing: border-box; }

  请注意，我已经尽可能地对原文进行了伪原创，并保留了图片的原始格式和位置。 部分内容由于专业术语和代码的限制，修改幅度较小。