前端每日一问,全面提高技术认知<第一周汇总>

时间 2019-11-07

标签前端每日一问全面提高技术认知一周 1周汇总繁體版

原文原文链接

介绍一下我最近主导的开源项目————前端每日一问，针对前端的领域知识进行针对性的整理，包含HTML五、CSS3基础，JavaScript原理、设计模式、框架原理、工程化原理、浏览器原理以及经典算法进行系统整理，虽然是每日一问，时间碎片化，但内容完整而系统，源于面试，又高于面试。适合初级前端向上进阶，逐渐深刻原理，理解框架背后的设计思想，旨在以碎片的时间积累前端核心知识，在逐渐复杂的前端世界里挥洒自如。css

前面几周是关于HTML、CSS基础的内容，下面是第一周的整理。html

也能够前往github地址，查看相应vuepress博客。前端

001: HTML5和HTML4究竟有哪些不一样？

声明方面

HTML5 文件类型声明（<!DOCTYPE>）变成下面的形式：

<!DOCTYPE html>
复制代码

标准方面

HTML5的文档解析再也不基于SGML(Standard Generalized Markup Language)标准，而是造成了本身的一套标准。

标签方面

新增语义标签，其中包括

<header>、<footer>、<section>、<article>、<nav>、<hgroup>、<aside>、<figure>
复制代码

废除一些网页美化方面的标签，使样式与结构分离更加完全, 包括

<big>、<u>、<font>、<basefont>、<center>、<s>、<tt>
复制代码

经过增长了<audio>、<video>两个标签来实现对多媒体中的音频、视频使用的支持。

属性方面

增长了一些表单属性, 主要是其中的input属性的加强

<!-- 此类型要求输入格式正确的email地址 -->
<input type=email >
<!-- 要求输入格式正确的URL地址 -->
<input type=url >
<!-- 要求输入格式数字，默认会有上下两个按钮 -->
<input type=number >
<!-- 时间系列，但目前只有 Opera和Chrome支持 -->
<input type=date >
<input type=time >
<input type=datetime >
<input type=datetime-local >
<input type=month >
<input type=week >
<!-- 默认占位文字 -->
<input type=text placeholder="your message" >
<!-- 默认聚焦属性 -->
<input type=text autofacus="true" >
复制代码

其余标签新增了一些属性,

<!-- meta标签增长charset属性 -->
<meta charset="utf-8">
<!-- script标签增长async属性 -->
<script async></script>
复制代码

使部分属性名默认具备boolean属性

<!-- 只写属性名默认为true -->
<input type="checkbox" checked/>
<!-- 属性名="属性名"也为true -->
<input type="checkbox" checked="checked"/>
复制代码

存储方面

新增WebStorage, 包括localStorage和sessionStoragevue
引入了IndexedDB和Web SQL，容许在浏览器端建立数据库表并存储数据, 二者的区别在于IndexedDB更像是一个NoSQL数据库，而WebSQL更像是关系型数据库。W3C已经再也不支持WebSQL。git
引入了应用程序缓存器(application cache)，可对web进行缓存，在没有网络的状况下使用，经过建立cache manifest文件,建立应用缓存，为PWA(Progressive Web App)提供了底层的技术支持。github

总结：对于HTML5与HTML4的区别，这些基本的概念是要有印象的，也许如今还比较粗略，但后面会一步步追问细节，慢慢深刻，达到知其然也其因此然的效果。web

002: meta标签属性有哪些？

简介: 经常使用于定义页面的说明，关键字，最后修改日期，和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务。面试

charset属性

<!-- 定义网页文档的字符集 -->
<meta charset="utf-8" />
复制代码

name + content属性

<!-- 网页做者 -->
<meta name="author" content="开源技术团队"/>
<!-- 网页地址 -->
<meta name="website" content="https://sanyuan0704.github.io/frontend_daily_question/"/>
<!-- 网页版权信息 -->
 <meta name="copyright" content="2018-2019 demo.com"/>
<!-- 网页关键字, 用于SEO -->
<meta name="keywords" content="meta,html"/>
<!-- 网页描述 -->
<meta name="description" content="网页描述"/>
<!-- 搜索引擎索引方式，通常为all，不用深究 -->
<meta name="robots" content="all" />
<!-- 移动端经常使用视口设置 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!-- viewport参数详解： width：宽度（数值 / device-width）（默认为980 像素） height：高度（数值 / device-height） initial-scale：初始的缩放比例 （范围从>0 到10） minimum-scale：容许用户缩放到的最小比例 maximum-scale：容许用户缩放到的最大比例 user-scalable：用户是否能够手动缩 (no,yes) -->
复制代码

http-equiv属性

<!-- expires指定网页的过时时间。一旦网页过时，必须从服务器上下载。 -->
<meta http-equiv="expires" content="Fri, 12 Jan 2020 18:18:18 GMT"/>
<!-- 等待必定的时间刷新或跳转到其余url。下面1表示1秒 -->
<meta http-equiv="refresh" content="1; url=https://www.baidu.com"/>
<!-- 禁止浏览器从本地缓存中读取网页，即浏览器一旦离开网页在没法链接网络的状况下就没法访问到页面。 -->
<meta http-equiv="pragma" content="no-cache"/>
<!-- 也是设置cookie的一种方式，而且能够指定过时时间 -->
<meta http-equiv="set-cookie" content="name=value expires=Fri, 12 Jan 2001 18:18:18 GMT,path=/"/>
<!-- 使用浏览器版本 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 针对WebApp全屏模式，隐藏状态栏/设置状态栏颜色，content的值为default | black | black-translucent -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
复制代码

003: src和href的区别是什么？

定义

href是Hypertext Reference的简写，表示超文本引用，指向网络资源所在位置。算法

常见场景:chrome

<a href="http://www.baidu.com"></a> 
<link type="text/css" rel="stylesheet" href="common.css"> 
复制代码

src是source的简写，目的是要把文件下载到html页面中去。

常见场景:

<img src="img/girl.jpg"> 
<iframe src="top.html"> 
<script src="show.js"> 复制代码

做用结果

href 用于在当前文档和引用资源之间确立联系
src 用于替换当前内容

浏览器解析方式

当浏览器遇到href会并行下载资源而且不会中止对当前文档的处理。(同时也是为何建议使用 link 方式加载 CSS，而不是使用 @import 方式)
当浏览器解析到src ，会暂停其余资源的下载和处理，直到将该资源加载或执行完毕。(这也是script标签为何放在底部而不是头部的缘由)

004: script标签中defer和async的区别是什么？

默认状况下，脚本的下载和执行将会按照文档的前后顺序同步进行。当脚本下载和执行的时候，文档解析就会被阻塞，在脚本下载和执行完成以后文档才能往下继续进行解析。

下面是async和defer二者区别：

当script中有defer属性时，脚本的加载过程和文档加载是异步发生的，等到文档解析完(DOMContentLoaded事件发生)脚本才开始执行。
当script有async属性时，脚本的加载过程和文档加载也是异步发生的。但脚本下载完成后会中止HTML解析，执行脚本，脚本解析完继续HTML解析。
当script同时有async和defer属性时，执行效果和async一致。

005: 让一个元素水平垂直居中，到底有多少种方案？

水平居中

对于行内元素: text-align: center;
对于肯定宽度的块级元素：

width和margin实现。margin: 0 auto;
绝对定位和margin-left: -width/2, 前提是父元素position: relative

对于宽度未知的块级元素

table标签配合margin左右auto实现水平居中。使用table标签（或直接将块级元素设值为display:table），再经过给该标签添加左右margin为auto。
inline-block实现水平居中方法。display：inline-block;（或display:inline）和text-align:center;实现水平居中。
绝对定位+transform，translateX能够移动自己元素的50%。
flex布局使用justify-content:center

垂直居中

利用line-height实现居中，这种方法适合纯文字类
经过设置父容器相对定位，子级设置绝对定位，标签经过margin实现自适应居中
弹性布局flex:父级设置display: flex; 子级设置margin为auto实现自适应居中
父级设置相对定位，子级设置绝对定位，而且经过位移transform实现
table布局，父级经过转换成表格形式，而后子级设置vertical-align实现。（须要注意的是：vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素）。

006: 浮动布局的优势？有什么缺点？清除浮动有哪些方式？

浮动布局简介:当元素浮动之后能够向左或向右移动，直到它的外边缘碰到包含它的框或者另一个浮动元素的边框为止。元素浮动之后会脱离正常的文档流，因此文档的普通流中的框就变现的好像浮动元素不存在同样。

优势

这样作的优势就是在图文混排的时候能够很好的使文字环绕在图片周围。另外当元素浮动了起来以后，它有着块级元素的一些性质例如能够设置宽高等，但它与inline-block仍是有一些区别的，第一个就是关于横向排序的时候，float能够设置方向而inline-block方向是固定的；还有一个就是inline-block在使用时有时会有空白间隙的问题

缺点

最明显的缺点就是浮动元素一旦脱离了文档流，就没法撑起父元素，会形成父级元素的高度塌陷。

清除浮动的方式

添加额外标签

<div class="parent">
    //添加额外标签而且添加clear属性
    <div style="clear:both"></div>
    //也能够加一个br标签
</div>
复制代码

父级添加overflow属性，或者设置高度

<div class="parent" style="overflow:hidden">//auto 也能够
    //将父元素的overflow设置为hidden
    <div class="f"></div>
</div>
复制代码

创建伪类选择器清除浮动（推荐）

//在css中添加:after伪元素
.parent:after{
    /* 设置添加子元素的内容是空 */
      content: '';  
      /* 设置添加子元素为块级元素 */
      display: block;
      /* 设置添加的子元素的高度0 */
      height: 0;
      /* 设置添加子元素看不见 */
      visibility: hidden;
      /* 设置clear：both */
      clear: both;
}
<div class="parent">
    <div class="f"></div>
</div>
复制代码

第一周内容汇总到此结束，但愿对你有所启发，下周再见！