问题先导

• html5有哪些特性？【html】
• <title>和<h1>的区别？<b>和<strong>的区别？<i>和<em>的区别？【html】
• <li>元素之间看不见的空白是什么？如何解决？【css】
• css3有哪些新特性？【css】
• 为什么会有新增BigInt这种数据类型，使用的时候有什么需要注意的？【js数据类型】
• Object.assign和展开语法有什么区别？【js基础】
• let、const和var的区别？【js基础】
• v-if和v-show的区别？【Vue】
• v-model如何实现？【Vue】
• 手写Promise.then【手写代码】
• 手写Promise.all【手写代码】
• 手写Promise.race【手写代码】
• 输出结果（Promise相关）【输出结果】
• 复原IP地址【算法】

知识梳理

hml5有哪些新特性？

• 语义化标签：header、footer、nav、article、section、aside等

• 媒体标签：audio、video、source(提供多份媒体源，以供浏览器选择性播放)

  <audio controls>
      <source src="/i/horse.ogg" type="audio/ogg">
      <source src="/i/horse.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
  </audio>
  复制代码

• 表单标签

  • 新增type类型：email、url、number、search、range、color、time、data、datatime、datatime-local、week、month
  • 表单属性：placeholder（输入提示）、autofocus（自动聚焦）、autocomplete（自动完成属性有两个可选值：on和off，使用前提是表单必须要指定name属性，表单提交后才会生效。效果就是提交后回退页面表单会自动填充历史输入值，且输入时会显示历史提交值）、required（必填项）、pattern（定义匹配的正则规则）、multiple（表单多可存储多个文件或邮箱）、form（指定所属form的ID）
  • 表单事件：oninput、oninvalid（验证不通过时触发）

• 进度条、度量器

  • <progress>：用来表示任务的进度（IE、Safari不支持），max用来表示任务的总量，value表示已完成量，如果不设置value值，进度条还会自动滚动，出现动画效果。和input[type="range"]除了样式上的差异，input当然是方便用户可修改的。

  • <meter>：用来度量给定范围内的数据。既然是范围度量器，就需要需要使用min和max来指定度量范围，默认为0-1，然后可以使用low和high来指定度量器的低值区域和高值区域：[min-low)之间的值就是低值区域，并有低值的视觉效果（Chrome中度量颜色变橘色），那么[low-high]之间的值就是正常区域，(high, max]就是高值区域，也会有视觉上的变化（Chrome中度量颜色变红）。

    比如，我们知道PE（市盈率）常用来作为指数估值指标，其中等权历史百分位处于30%-70%区间时为正常区域，而小于30%就认为该指数处于低谷区域，具有很好的投资价值，相反，高于70%则处于高估区，不建议买入。

    <p>PE指标(百分位)</p>
    <div>14%<meter min="0" max="100" low="30" high="70" value="14">14%</meter>属于低估区</div>
    <div>45%<meter min="0" max="100" low="30" high="70" value="45">45%</meter>属于正常区</div>
    <div>88%<meter min="0" max="100" low="69" high="70" value="88">88%</meter>属于高估区</div>
    复制代码

    效果图：
    

  此外，还可以设置optimun属性来标记最优值所处的区间，比如案例中设置optinum="10"，则说明低估区属于优选区间，这个属性只是逻辑上的指标，没有特殊效果，即最佳值处于哪个区间，哪个区间就是逻辑上的优选区间（期待区间）。
  。

• DOM查询操作：document.querySelector、document.querySelectorAll

• Web存储：localStorage、sessionStorage

• 其他：拖放属性draggable、画布canvas、矢量图svg、地理定位geolocation、通信协议websocket、历史立即history API等。

<title>和<h1>的区别？<b>和<strong>的区别？<i>和<em>的区别？

<title>元素可定义文档的标题，而<h1>则表示层次明确的标题，对页面信息的抓取有很大的影响。

<b>和<strong>的页面都是加粗显示，但<strong>还有强调的意义。同样的，<i>和<em>的物理效果都是斜体，但<em>还有强调的意义。

总结就是，h1、strong、em之类的标签具有逻辑状态，而title、b和i只具有物理状态，具有逻辑状态的标签和语义化标签的效果是一致的，这种逻辑强调效果也是搜索引擎所针对性捕获的重点，而物理状态只是这些逻辑状态标签自带的效果，修改其默认样式并不影响其逻辑效果。

<li>元素之间看不见的空白是什么？如何解决？

<li>元素的默认display属性值为list-item，也就是以列表显示，有时候我们需要把<li>设置为行内显示：

<ul class="hero">
  <li>Jinx</li>
  <li>Yasuo</li>
  <li>Riven</li>
  <li>Teemo</li>
</ul>
复制代码

.hero li {
  display: inline;
}
.hero li:nth-child(odd)  {
  background: #21c96e;
}
.hero li:nth-child(even) {
  background: #ff0000;
}
复制代码

显示效果就会变成这样：

我们发现li标签之间多了一个空格，实际上，这个不是li标签本身的问题，而是浏览器会把内联标签中间的空白字符（空格、换行、Tab等）渲染为一个空格，因此，上面把<li>单独放在一行，元素之间的空白字符就被渲染为了空格。

解决方法：

• 将<li>写到一行。但这样不美观，也可能被html格式化插件格式化后换行，不推荐。
• 设置li浮动样式float: left;。缺点：某些场景下不利于控制。
• 设置父元素的字符尺寸为0，即font-size: 0;，然后再单独设置li的font-size。这样做的目的是将空白字符的font-size的字符尺寸设置为0，也就看不到了，但如果父元素除了li元素还有别的文本元素，也还需要单独设置font-size属性，会比较麻烦。
• 设置父元素的字符间隔属性letter-spacing: -5px;，由于空格大概占据5px，设置字符间隔为负数就可以将这些空格“挤到”一起，但是同样的，还需要单独设置子元素<li>的letter-spacing:normal;

CSS3有哪些新特性？

• 新增各种CSS选择器：:not()等

• 圆角属性：border-radius

  <div style="
    width: 50px;
    height: 50px;
    background: #29a2b1;
    border-radius: 10px;
  "></div>
  复制代码

  © 版权声明

  文章版权归作者所有，未经允许请勿转载。
  THE END
  前端