【前端面试题1】

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

1. 标题标签（Heading）：用于定义标题，共有六个级别（h1 到 h6），h1 是最高级别的标题，h6 是最低级别的标题。

   <h1>这是一级标题h1>
   <h2>这是二级标题h2>
   
   <h6>这是六级标题h6>
   

2. 段落标签（Paragraph）：用于定义段落文本。

   <p>这是一个段落。p>
   

3. 链接标签（Anchor）：用于创建超链接。

   <a href="https://www.example.com">访问示例网站a>
   

4. 图像标签（Image）：用于插入图像。

   <img src="image.jpg" alt="图片描述">
   

5. 列表标签（List）：用于创建有序或无序列表。

   • 无序列表：

     <ul>
       <li>项目1li>
       <li>项目2li>
       
     ul>
     

   • 有序列表：

     <ol>
       <li>项目1li>
       <li>项目2li>
       
     ol>
     

6. 表格标签（Table）：用于创建表格。

   <table>
     <tr>
       <th>表头1th>
       <th>表头2th>
     tr>
     <tr>
       <td>数据1td>
       <td>数据2td>
     tr>
     
   table>
   
   <table>
      <thead>
        <tr>
          <th>姓名th>
          <th>年龄th>
        tr>
      thead>
      <tbody>
        <tr>
          <td>小明td>
          <td>25td>
        tr>
        <tr>
          <td>小红td>
          <td>22td>
        tr>
        
      tbody>
      <tfoot>
        <tr>
          <td colspan="2">总计td>
        tr>
      tfoot>
    table>
   
   

7. 表单标签（Form）：用于创建表单，收集用户输入。

   <form action="/submit" method="post">
     <label for="username">用户名：label>
     <input type="text" id="username" name="username">
     <br>
     <label for="password">密码：label>
     <input type="password" id="password" name="password">
     <br>
     <input type="submit" value="提交">
   form>
   

8. 分割线标签（Horizontal Rule）：用于创建水平分割线。

   <hr>
   

9. div 和 span 标签：用于创建容器块和内联元素，常用于布局和样式控制。

   <div>This is a block-level container.div>
   <span>This is an inline element.span>
   

10. 强调和加粗标签：用于文本的强调和加粗效果。

    • 强调：

      <em>这是强调的文本em>
      

    • 加粗：

      <strong>这是加粗的文本strong>
      

2. CSS 选择器有哪些？优先级分别是什么？

1. 元素选择器：选择特定的HTML元素。优先级较低。

   p {
     /* 样式规则 */
   }
   

2. 类选择器：选择具有特定类名的元素。优先级稍高于元素选择器。

   .example {
     /* 样式规则 */
   }
   

3. ID选择器：选择具有特定ID的唯一元素。优先级更高。

   #header {
     /* 样式规则 */
   }
   

4. 属性选择器：选择具有特定属性的元素。优先级与元素选择器类似。

   [type="text"] {
     /* 样式规则 */
   }
   

5. 伪类选择器：选择处于特定状态的元素，如链接的不同状态。优先级与元素选择器类似。

   a:hover {
     /* 样式规则 */
   }
   

6. 伪元素选择器：选择元素的特定部分，例如元素的第一个字母或最后一个子元素。优先级与元素选择器类似。

   p::first-line {
     /* 样式规则 */
   }
   

7. 组合选择器：结合多个选择器，以选择满足多个条件的元素。组合选择器的优先级由组成部分的选择器的优先级决定。

   p.example {
     /* 样式规则 */
   }
   

CSS选择器的优先级是由多个因素组合而成的，用于确定在多个样式规则应用到同一元素时哪个规则会生效。优先级从高到低分为四个等级，分别是：

1. 内联样式（Inline Styles）：应用于元素的内联样式，通过元素的style属性定义。内联样式具有最高的优先级。

   示例：

   <p style="color: blue;">这是内联样式的文本。p>
   

   优先级：(1, 0, 0, 0)

2. ID选择器（ID Selectors）：通过元素的唯一ID选择元素。每个ID选择器在文档中只能出现一次。

   示例：

   #header {
     color: red;
   }
   

   优先级：(0, 1, 0, 0)

3. 类选择器、属性选择器和伪类选择器（Class Selectors, Attribute Selectors, Pseudo-Class Selectors）：包括类选择器（.class）、属性选择器（[attribute]）和伪类选择器（:pseudo-class）。

   示例：

   .example {
     color: green;
   }
   
   [type="text"] {
     border: 1px solid black;
   }
   
   a:hover {
     text-decoration: underline;
   }
   

   优先级：(0, 0, 1, 0)

4. 元素选择器和伪元素选择器（Type Selectors, Pseudo-Element Selectors）：包括元素选择器（element）和伪元素选择器（::pseudo-element）。

   示例：

   p {
     font-size: 16px;
   }
   
   p::first-line {
     font-weight: bold;
   }
   

   优先级：(0, 0, 0, 1)

如果有多个规则应用到同一元素，浏览器会根据这个优先级顺序决定应用哪个规则。如果多个规则具有相同的优先级，那么根据出现在样式表中的顺序来决定哪个规则应用。

需要注意的是，优先级是基于权重的计算，每个等级的权重分别为 (1000^3)、(1000^2)、1000 和 1。因此，尽管具体的选择器组合可能会很复杂，但优先级的计算是基于这种简单的权重规则。

3. 有哪些常见的 CSS 布局？

1. 流动布局（Flow Layout）：
   这是默认的布局方式，元素按照文档流从左到右、从上到下排列。这种布局适合大部分页面，但可能在处理响应式设计时需要进一步调整。

2. 定宽布局（Fixed Layout）：
   在这种布局中，元素的宽度被固定为特定的像素值。页面元素不会根据浏览器宽度改变大小，可能会导致在小屏幕设备上显示问题。

3. 弹性布局（Flexible Layout，Flexbox）：
   Flexbox是一种用于创建一维布局的现代布局模式，可以轻松地在一行或一列上排列元素，使它们在不同屏幕尺寸上适应良好。

4. 网格布局（Grid Layout）：
   CSS Grid是用于创建二维布局的强大布局模式，允许您创建复杂的网格结构，使元素在网格的行和列中自由排列。

5. 响应式布局（Responsive Layout）：
   响应式布局是一种设计方法，使网页能够适应不同屏幕尺寸和设备。通常通过媒体查询和弹性布局技术实现。

6. 固定-弹性混合布局（Fixed-Flexible Hybrid Layout）：
   在此布局中，一些部分使用固定宽度，而其他部分使用弹性布局，以适应不同的需求。

7. 多列布局（Multi-column Layout）：
   使用CSS的多列属性可以将文本和内容分割成多列，类似于报纸的版面。

8. 层叠布局（Layered Layout）：
   使用绝对定位等技术，将元素叠加在另一个元素之上，用于创建悬浮导航、工具提示等效果。

9. 等分布局（Equal Height Columns）：
   使用各种方法（如Flexbox、Table布局等）使多个列的高度相等，无论其内容的高度如何。

10. 两栏、三栏布局（Two-column, Three-column Layout）：
    将页面划分为两个或三个主要的列，用于创建传统的栏目式布局。