前端每日一問,全面提高技術認知<第一週彙總>

時間 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>
複製代碼

第一週內容彙總到此結束，但願對你有所啓發，下週再見！