揭秘前端面试常见问题：第一部分

前端开发作为当下炙手可热的职业之一，其面试竞争也愈发激烈。为了帮助求职者更好地备战前端面试，本文汇总了前端面试中经常遇到的问题，涵盖了HTML、CSS、JavaScript等核心技术领域，并提供了清晰的解答和示例，旨在帮助求职者提高面试通过率。本文分为两部分，第一部分主要涉及HTML和CSS相关的问题。

1. HTML中常用的语义标签有哪些？

HTML语义标签是指那些能够准确其所包含内容的标签，常见的语义标签有：

• <header>：头部
• <nav>：导航
• <main>：主体内容
• <section>：节
• <article>：文章
• <aside>：侧边栏
• <footer>：页脚

2. CSS中常用的选择器有哪些？

CSS选择器用于选择要应用样式的HTML元素，常用的选择器有：

• 元素选择器：选择特定类型的HTML元素，如<p>、<div>、<ul>等。
• 类选择器：选择具有特定类名的HTML元素，如<p class="red">。
• ID选择器：选择具有特定ID的HTML元素，如<p id="unique">。
• 通配符选择器：选择所有元素，如*。
• 子元素选择器：选择父元素内的子元素，如p > span。
• 相邻兄弟选择器：选择紧邻特定元素的兄弟元素，如p + span。
• 后代选择器：选择特定元素的后代元素，如p span。

3. CSS盒模型包含哪些部分？

CSS盒模型由以下几个部分组成：

• 内容区域：包含元素的文本或其他内容。
• 内边距：内容区域和边框之间的空间。
• 边框：元素的边框。
• 外边距：元素的边框和相邻元素的边距之间的空间。

4. CSS中如何实现响应式设计？

响应式设计是指网站能够根据不同设备的屏幕尺寸自动调整布局和内容，以提供最佳的浏览体验。实现响应式设计常用的方法有：

• 使用媒体查询：通过@media规则根据不同的屏幕尺寸应用不同的样式。
• 使用弹性布局：弹性布局允许元素根据可用空间自动调整大小。
• 使用flexbox布局：flexbox布局提供更强大的布局控制，允许元素在不同设备上灵活排列。

5. 如何在HTML中创建表格？

在HTML中创建表格可以使用<table>、<tr>和<td>标签：

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>

以上是前端面试中经常遇到的问题的一部分，希望对求职者有所帮助。在第二部分，我们将继续探讨JavaScript相关的问题。