白小水i
白小水i

前端面试题

1. script标签的使用，defer属性

script标签有以下属性：

  1. src：可选，链接外部文件
  2. type ：用script元素嵌入js代码记得要加type="text/javascript" 。
  1. charset：字符编码属性，可选。默认是utf-8编码，主要表示通过src属性指定的代码的字符集，大多浏览器会忽略它的值，所以不必使用。
  2. language：脚本类型属性，不是标准组成的一部分，已废弃。大多数浏览器会忽略这个属性，已没必要使用。
  3. defer：如果script标签设置了该属性，则浏览器会异步的下载该文件并且不会影响到后续DOM的渲染；如果有多个设置了defer的script标签存在，则会按照顺序执行所有的script。defer脚本会在文档渲染完毕后，DOMContentLoaded事件调用前执行。
  4. async
    async的设置，会使得script脚本异步的加载并在允许的情况下执行
    async的执行，并不会按着script在页面中的顺序来执行，而是谁先加载完谁执行。
    注意：defer和async的区别
    • defer和async都属于异步加载, defer会比async稳定。
    • defer是延迟执行（推迟解释，当前html页面解析完成后执行）js，async是当前js文件加载完成后执行js。
    • async要和src属性配合使用。因为只对外部脚本起作用，如果你是在script标签里面书写脚本，该脚本是不会异步加载！！！
    • defer属性，表示延迟执行，具体意思是当页面解析和显示之后再执行。这个属性也是针对外部属性才起作用。
      异步脚本一定会在页面的load事件前执行完毕，但是可能会在DOMContentLoaded事件触发之前或者之后执行。

2.行内元素和块元素有哪些？区别是什么？

1. 区别
  1. 盒模型：块级元素会生成一个独立的矩形框，它会占据一整行的宽度，可以设置宽度、高度、边距和填充等属性。而行内元素则不会产生独立的框，它的宽度和高度由内容决定，无法直接设置宽度和高度。
  2. 排列方式：块级元素会自上而下按顺序排列，每个块级元素独占一行。而行内元素则会在同一行上水平排列，直到一行放不下才会换行。
  3. 内容显示：块级元素可以包含其他块级元素和行内元素，并且可以设置内部元素的布局和样式。行内元素一般不能包含块级元素，只能包含文本或其他行内元素
  4. 相对位置：块级元素具有明显的边界，可以使用CSS定位属性（如position、top、left）来控制其相对位置。而行内元素通常不能设置这些属性，它们会根据文本流布局自动调整位置。
  5. 默认尺寸：块级元素的默认宽度是100%，会占满父元素可用空间。行内元素的默认宽度由内容决定，一般只占据内容所需的宽度。
  6. 行内元素、块级元素相互转换：
display: inline; // 行内元素
display: block; // 块元素
display: inline-block; // 行内块元素
2.常见的块元素和行内元素
  1. 常见块元素
    、

    、

    -
    、