261页前端面试题宝典，已拿offer

水深无声 2022-10-05 05:57 215阅读 0赞

#### 标准文档流 ####

标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。前面内容发生了变化，后面的内容位置也会随着发生变化。

HTML就是一种标准文档流文件  
HTML中的标准文档流特点通过两种方式体现：

*  微观现象
 *  元素等级

#### 元素特点： ####

**块状元素**：

*  在页面中以矩形区域显示。
 *  自上而下排列，独占一行
 *  可以直接添加宽高
 *  一般情况下，作为其他元素或内容的容器

**行内元素**：

*  在页面中最小单位也是矩形。
 *  在一行内逐个排列。
 *  不可以直接添加宽高，大小是由内容撑开的。
 *  内联元素也符合盒模型的规则，但是个别属性会出现问题（padding-top/bottom margin-top/bottom）
 *  内联元素在一行内排列的时候，之间有间距

**行内快元素**：

*  可以设置宽高。
 *  默认情况下，在一行内逐个显示，之间有间距。
 *  当前元素的display值为inline-block时，能支持vertical-align属性。

#### 常用元素： ####

**块状元素：**

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>div</td> 
   <td>最常用的块级元素</td> 
  </tr> 
  <tr> 
   <td>dl</td> 
   <td>和dt-dd 搭配使用的块级元素</td> 
  </tr> 
  <tr> 
   <td>form</td> 
   <td>交互表单</td> 
  </tr> 
  <tr> 
   <td>h1 -h6</td> 
   <td>标题</td> 
  </tr> 
  <tr> 
   <td>hr</td> 
   <td>水平分隔线</td> 
  </tr> 
  <tr> 
   <td>ol</td> 
   <td>有序列表</td> 
  </tr> 
  <tr> 
   <td>p</td> 
   <td>段落</td> 
  </tr> 
  <tr> 
   <td>ul</td> 
   <td>无序列表</td> 
  </tr> 
  <tr> 
   <td>li</td> 
   <td>列表标签</td> 
  </tr> 
  <tr> 
   <td>fieldset</td> 
   <td>表单字段集</td> 
  </tr> 
  <tr> 
   <td>colgroup-co</td> 
   <td>表单列分组元素</td> 
  </tr> 
  <tr> 
   <td>table-tr-td</td> 
   <td>表格及行-单元格</td> 
  </tr> 
 </tbody> 
</table>

**行内元素：**

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>a</td> 
   <td>超链接（锚点）</td> 
  </tr> 
  <tr> 
   <td>b</td> 
   <td>粗体</td> 
  </tr> 
  <tr> 
   <td>br</td> 
   <td>换行</td> 
  </tr> 
  <tr> 
   <td>i</td> 
   <td>斜体</td> 
  </tr> 
  <tr> 
   <td>em</td> 
   <td>强调</td> 
  </tr> 
  <tr> 
   <td>img</td> 
   <td>图片</td> 
  </tr> 
  <tr> 
   <td>input</td> 
   <td>输入框</td> 
  </tr> 
  <tr> 
   <td>label</td> 
   <td>表单标签</td> 
  </tr> 
  <tr> 
   <td>span</td> 
   <td>常用内联容器，定义文本内区块</td> 
  </tr> 
  <tr> 
   <td>strong</td> 
   <td>粗体强调</td> 
  </tr> 
  <tr> 
   <td>sub</td> 
   <td>下标</td> 
  </tr> 
  <tr> 
   <td>sup</td> 
   <td>上标</td> 
  </tr> 
  <tr> 
   <td>textarea</td> 
   <td>多行文本输入框</td> 
  </tr> 
  <tr> 
   <td>u</td> 
   <td>下划线</td> 
  </tr> 
  <tr> 
   <td>select</td> 
   <td>项目选择</td> 
  </tr> 
 </tbody> 
</table>

行内块元素：

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>input</td> 
   <td>表单标签</td> 
  </tr> 
  <tr> 
   <td>img</td> 
   <td>图片标签</td> 
  </tr> 
 </tbody> 
</table>

#### 元素类型转换： ####

**display属性**：  
作用：检索或者设置元素生成的盒模型类型。

**常用属性值**：

*  display:block;  
    作用：将元素转成块状元素，拥有块状元素特点。  
    补充：大部分块状元素，默认的display的值都是block;
 *  display:inline;  
    作用：将元素转成内联元素，拥有内联元素的特点。  
    补充：大部分内联元素，默认的display的值inline;
 *  display:none;  
    作用：将当前隐藏，并不占据空间。

### 结尾 ###

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

[**资料领取方式：戳这里免费获取**][Link 1]

可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

[**资料领取方式：戳这里免费获取**][Link 1]

![html5][]

[Link 1]: https://docs.qq.com/doc/DSlNuUUFPWmpZVlJh
[html5]: /images/20221005/4e975513e7e545aeaeff1b4d0fbfe4b2.png