前端面试题01面试题内容来源阿里、网易、滴滴共十次前端面试碰到的问题 HTML HTML5新增了哪些内容或API，使用过

HTML

HTML5新增了哪些内容或API，使用过哪些

参考资料：

HTML元素

cancas、svg --- 绘画元素
video、audio --- 播放视频和音频的媒体
drag、drop --- 用于拖放
Geolocation --- 用于获取地理位置
webSQL、IndexDB --- 前端数据库操作，用于安全性极低，目前H5已放弃
web Worker --- 独立与其他脚本，补ing喜爱难过页面运行在后台的js
新的特殊内容元素 --- article、footer、header、nav、section
新的表单元素 --- date、time、email、url、search

dom操作方法

querySelector 和 querySelectorAll
类的操作

oDiv.classList.ass('test');
oDiv.classList.remove('test');
oDiv.classList.toggle('test'); // 有类名是移除，无类名时添加

data-*自定义属性

文件读取

上传，通过表单控件实现

<input type="file" name="" />

读取，通过FileReader构造函数实现

readAsBinaryString: 将文件读取为二进制编码
readAsDataUrl：将文件读取为DataURL
readAsText：将文本读取为文本

FileReader提供的事件

onabort：读取文件中断时触发
onerror：读取文件出错时触发
onload：读取文件完成时触发，只在读取成功后触发
onloadend：读取文件完成时触发，无论读取失败成功或者失败都会触发
onloadstart：读取文件开始时触发
onprogress：正在读取文件

本地存储

localStorage
sessionStorge

input 和 textarea的区别

input

input标签是单行文本框，不会换行
通过size属性指定显示字符的长度，但当使用css限定了高度，size属性就不再起作用
value属性置顶初始值，maxLength属性置顶文本框可以输入的最大长度
可以通过width和height设置宽高，但是也不会增加行数

<input type="text" style="width: 100px; height: 100px;" value="哈哈哈哈哈哈，测试"/>

textarea

text时多行文本输入框，文本区可容纳无限数量的文本

div框模拟textarea实现

// html 部分
<div id="textarea" contenteditable="true">>/div>

// css 部分
#textarea {
    width: 300px;
    border: 1px solid #ccc;
    min-height: 150px;
    max-height: 300px;
    overflow: auto;
    font-size: 14px;
    outline: none;
}

CSS部分

左右布局

<style>
    .container {
        height: 500px;
        overflow: hidden;
    }
    .left {
        width: 300px;
        height: 100%;
        background-color: red;
    }
    .right {
        width: 200px;
        height: 100%;
        background-color: green;
    }
    /* 方式一 */
    .container1 {
        display: flex;
        justify-content: space-between;
    }

    /* 方式二： display: inline-block + float: right< */
    .left2 {
        display: inline-block;
    }
    .right2 {
        float: right;
    }

    /* 方式三：float */
    .left3 {
        float: left;
    }
    .right3 {
        float: right;
    }

    /* 方法四：postion */
    .container4 {
        position: relative;
    }
    .right4 {
        position: absolute;
        right: 0;
        top: 0;
    }

    /* 方法五：grid */
    .container5 {
        display: grid;
        grid-template-columns: 300px auto 200px;
    }
</style>

<body>
    <p>方式1: FLEX布局</p>
    <div class="container container1">
        <div class="left left1"></div>
        <div class="right right1"></div>
    </div>

    <p>方式2: display: inline-block + float: right</p>
    <div class="container">
        <div class="left left2"></div>
        <div class="right right2"></div>
    </div>

    <p>方式3: float</p>
    <div class="container">
        <div class="left left3"></div>
        <div class="right right3"></div>
    </div>

    <p>方式4: postion</p>
    <div class="container container4">
        <div class="left"></div>
        <div class="right right4"></div>
    </div>

    <p>方式5: grid</p>
    <div class="container container5">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>

BFC、IFC

BFC（Block Fomatting Contexts）会计格式化上下文
是web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素和其他元素交互的区域。
系列方式会创建块格式化上下文：

根元素（html）
浮动元素（元素的float不是none）
绝对定位元素（position: absolute | fixed）
行内元素（display: inline-block）
表格单元素（display: table-cell, HTML表格单元格默认为该值）
表格标题（display: table-caption, HTML表格标题默认为该值）
表格单元格元素（display: table[table] | table-row[row] | table-row-group[tbody] | table-header-group[thead] | table-footer-group[tfoot] | inline-table）
overflow计算值（Computed）不为visible
display: flow-root
contain值为 layout、content、或 paint的元素
弹性元素（display为flex或inline-flex元素的直接子元素）
网格元素（display为grid或inlie-grid元素的直接子元素）
多列元素（元素的column-count或column-width不为auto，包括column-count为1）
column-span为all的元素会始终创建一个新的BFC，即使该元素没有包括在一个多列容器中

IFC（Inline formating context）行内格式化上下问
是web的渲染结果的一部分。其中，各行内框（inlie boxes）一个接一个地排列，其中顺序根据书写模式的设置来决定：

对于水平书写模式，各个框从左边开始水平地排列
对于垂直书写模式，各个框从顶部开始水平地排列