前端渣渣的面试准备-html篇

前端渣渣的面试准备-html篇

1. 常用布局结构（内联元素，块状元素，内联块状元素）

   1. 内联(dispaly: inline)： span，em，img，i，blob， br，inpit，textarea
      • 特性：从左到右一行显示，不能设置宽高等属性，padding，margin上下无效，但是padding， margin有效
   2. 块状（display: block): p, div, h1-h6, hr, dl,dt,dd,tbody,table,th
      • 特性 ：独占一行，上下排布，可直接控制宽高等属性
      • 特性1：在不设置宽度情况下，宽度等于父级宽，不设定高度情况下，高度，等于本身高
   3. 内联块状： 设置display：inline-block
      特性：不自动换行，有宽高等属性，从左到右排序

2. html语义化

   语义化是指使⽤恰当语义的html标签，让⻚⾯具有良好的结构与含义，⽐如 <p>标签就代表段落， <article> 代表正⽂内容等等。
   优点： 1. 开发者友好 2. 机器友好

3. html5的新特性？

   1. 拖拽 drag and drop
   2. 语义化内容标签：header，main，fotter，aside等
   3. 音频，视频
   4. 画布
   5. 地理 geolocation
   6. 本地储存 web storage
   7. 表单控件 data，time，email，url等
   8. webwork，websocket

4. doctype的作用

   是h5标准网页声明，且必须声明在html文档第一行。来告诉浏览器以什么方式解析文档。不同方式会影响浏览器对于css代码甚至js脚本的计息。

   类型：

   1. 怪异模式： 没生命doctype，页面按照html与css定义渲染
   2. 标准模式： 会按照html和css定义渲染

5. 常用的meta标签

   meta标签由name和content两个属性来定义，来描述⼀个HTML⽹⻚⽂档的属性，例如作者、⽇期和时间、⽹⻚描述、关键词、⻚⾯刷新等，除了⼀些http标准规定了⼀些name作为⼤家使⽤的共识，开发者也可以⾃定义name。

   • charset 描述html的编码形式。
   • http-equiv,相当于http的文件头作用，比如可设置http的缓存过期日期

    <meta http-equiv="expires" content="Web, 20 Jun 2020 xxxx GMT">
   

   • viewport, web开发人员可控制视图窗口大小和比例

    <meta name="viewport" content="width='device-widrh, inital-scale=1, maxmum-scale=1">
   

6. Web Storage 和 cookie，indexedDB

   • cookie： html5以前本地储存的主要方式，优点兼容性号，请求头自带cookie，缺点大小仅仅4k，自动请求头加入cookie浪费流量，每个domain限制20个cookie，开发者不友好，需要自己封装
   • localstorage：html5加入的以key-value的储存方式，优点大小5m，操作方便，永久储存
   • sessionStorage： html5加入的以key-value的储存方式，优点大小5m，操作方便，缺点，兼容ie8+，窗口关闭清除，不能再所有同源窗口中共享，会话级别的储存方式
   • omdexedDB: html5数据库储存方案，NoSQL数据库，用键值对进行储存，可以进行快速读取。

7. 哪些标签可以跨域

   1. <img src="">
   2. <link href="">
   3. <scirpt src="">

8. async和defer的区别

   • 他俩都是异步加载js文件，无需等待，async是脚本加载完成后立即执行，defer在页面加载完后执行
   • 当script标签同时包含defer和async时，只会触发async

9. 减少dom的方法有哪些？哟从黑魔大量dom怎么优化
   减少：

   • 伪元素：例如阴影，清除浮动，样式
   • 按需加载，减少不必要的渲染
   • 结构合理，语意化标签
     大量dom优化
   • 缓存dom对象

     let rootElem = document.querySelector('#app');
     let childList = rootElem.child; // 假设全是dom节点
     for(let i = 0;i<childList.len;j++){
         /**
         * 根据条件对应操作
         */
     }
   

   • document.createDocumentFragement()
   • 用innerHTML代替高频的appendChild
   • 虚拟Dom

10. 前端SEO（html篇）

    1. 合理的title，description， keywords
    2. 语义化标签
    3. 非装饰图片加alt
    4. 重要内容放在html最前面，优先加载
    5. 每个页面只出现一个h1标签
    6. 扁平化
    7. 少用iframe

11. src和href的区别

    1. src指向外部资源位置，指向的内容会嵌⼊到⽂档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应⽤到⽂档内，如js脚本，img图⽚和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，知道将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在底部⽽不是头部。(会造成阻塞)
    2. href是指向⽹络资源所在位置（的超链接），⽤来建⽴和当前元素或⽂档之间的连接，当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。(不会造成阻塞)