前端知识二
前端知識二
html，js，css前端三大件
不管你是使用市面上的熱門的框架還是公司自己開發的框架，都離不開這個要素，在深入學習框架源碼前，這是都是需要熟能上手，再去閱讀框架源碼！框架的作用是工程化，快速開發，將dom，js，css編譯成碼流！借助瀏覽器的哈希和history等來完成頁面的跳轉，原生傳統的是搭建.html頁面，現在還在使用的多為某些公司的線上商城，利于seo優化排名，隨著vue，react慢慢發展也開始出現便于seo優化的方法！沒有過多深入研究不在贅述。
前端的改變
互聯網快速發展的時代，逐漸出現各種框架，將前后端直接分離，各司其職，框架的出現將后端使用的單頁面直接搬到前端，經過框架的編譯壓縮，變成一個個js文件，所需要的頁面全以代碼的形式封存在js文件中，這也就是你看到的.html頁面只有一個的原因
三大件之一的html
發展歷史
html發展歷史1980年，物理學家蒂姆·伯納斯-李在歐洲核子研究中心（CERN）在承包工程期間，為使CERN的研究人員使用并共享文檔，他提出并創建原型系統ENQUIRE。1989年，伯納斯-李在一份備忘錄中提出一個基于互聯網的超文本系統。他規定HTML并在1990年底寫出瀏覽器和服務器軟件。同年，伯納斯-李與CERN的數據系統工程師羅伯特·卡里奧聯合為項目申請資助，但未被CERN正式批準。在他的個人筆記中伯納斯-李列舉“一些使用超文本的領域”，并把百科全書列為首位。
HTML的首個公開描述出現于一個名為“HTML標簽”的文件中，由蒂姆·伯納斯-李于1991年底提及。它描述18個元素，包括HTML初始的、相對簡單的設計。除了超鏈接標簽外，其他設計都深受CERN內部一個以標準通用標記語言（SGML）為基礎的文件格式SGMLguid的影響。這些元素在HTML 4中仍有11個存在。
伯納斯-李認為HTML是SGML的一個應用程序。1993年中期互聯網工程任務組（IETF）發布首個HTML規范的提案：“超文本標記語言（HTML）”互聯網草案，由伯納斯-李與丹·康納利撰寫。其中包括一個SGML文檔類型定義來定義語法[11]。草案于6個月后過期，不過值得注意的是其對NCSA Mosaic瀏覽器自定義標簽從而將在線圖像嵌入的行為的認可，這反映IETF把標準立足于成功原型的理念。同樣，戴夫·拉格特在1993年末提出的與之競爭的互聯網草案“HTML+（超文本標記格式）”建議規范已經實現的功能，如表格與填寫表單。
在HTML和HTML+的草案于1994年初到期后，IETF創建一個HTML工作組，并在1995年完成”HTML 2.0”，這是第一個旨在成為對其后續實現標準的依據的HTML規范。
在IETF的主持下，HTML標準的進一步發展因競爭利益而遭受停滯。自1996年起，HTML規范一直由萬維網聯盟（W3C）維護，并由商業軟件廠商出資。不過在2000年，HTML也成為國際標準（ISO/ IEC15445：2000）。HTML 4.01于1999年末發布，進一步的勘誤版本于2001年發布。2004年，網頁超文本應用技術工作小組（WHATWG）開始開發HTML5，并在2008年與W3C共同交付，2014年10月28日完成標準化。
二、版本時間線
1995年11月24日
HTML 2.0作為IETF RFC 1866發布。追加RFC的附加功能：
1995年11月25日：RFC 1867（基于表單的文件上傳）
1996年5月：RFC 1942（表格）
1996年8月：RFC 1980（客戶端圖像映射）
1997年1月：RFC 2070（國際化）
1997年1月14日
HTML 3.2 作為W3C推薦標準發布。
這是首個完全由W3C開發并標準化的版本，因IETF于1996年9月12日關閉它的HTML工作組。
最初代號為“威爾伯”（Wilbur），HTML 3.2 完全去除數學公式，協調各種專有擴展，并采用網景設計的大多數視覺標記標簽。由于兩家公司達成了協議，網景的閃爍元素和微軟的滾動元素被移除。HTML對數學公式的支持最后成為另外一種被稱為MathML的標準。
1997年12月18日
HTML 4.0作為W3C推薦標準發布。它提供三種變化：
嚴格，過時的元素被禁止。
過渡，過時的元素被允許。
框架集，大多只與框架相關的元素被允許。
最初代號“美洲獅”（Cougar）， HTML 4.0采用許多特定瀏覽器的元素類型和屬性，并試圖淘汰網景的視覺標記功能，將其標記為不贊成使用。HTML 4是遵循ISO 8879 - SGML的SGML應用程序。
1998年4月24日
HTML 4.0進行微調，不增加版本號。
1999年12月24日
HTML 4.01作為W3C推薦標準發布。它同樣提供三種變化，最終勘誤版于2001年5月12日發布。
2000年5月
ISO/IEC 15445:2000（”ISO HTML”，基于HTML 4.01嚴格版）作為ISO/IEC國際標準發布。在ISO中這一標準位于ISO/IEC JTC 1/SC 34域（ISO/IEC聯合技術委員會1、小組委員會34 – 文檔描述與處理語言）。
2014年10月28日
HTML 5作為W3C推薦標準發布。
三、草案時間線
1991年10月
HTML標簽，一個非正式CERN文件首次公開18個HTML標簽。
1992年6月
HTML DTD的首個非正式草案， 后續有七個修訂版（7月15日，8月6日，8月18日，11月17日，11月19日，11月20日，11月22日）。
1992年11月
HTML DTD 1.1（首個版本號，基于RCS修訂版，版本號從1.1開始而非1.0），非正式草案。
1993年6月
超文本標記語言由IETF IIIR工作小組作為互聯網草案（一個粗略的建議標準）。在被第二版取代一個月后，IETF又發布6個草案，最終在RFC1866中發布HTML 2.0。
1993年11月
HTML+由IETF作為互聯網草案發布，是超文本標記語言草案的一個競爭性提案。它于1994年5月到期。
1995年4月 （1995年3月編寫）
HTML 3.0被提議作為IETF的標準，但直到提案在五個月過期后（1995年9月28日）仍沒有進一步的行動。它包含許多拉格特HTML+提案的功能，如對表格的支持、圍繞數據的文本流和復雜的數學公式的顯示。W3C開始開發自己的Arena瀏覽器作為HTML 3和層疊樣式表的試驗臺[，但HTML 3.0并沒有獲得成功。瀏覽器廠商，包括微軟和網景，選擇實現HTML3草案功能的不同子集并引入它們自己的插件（見瀏覽器大戰）。
2008年1月
HTML5由W3C作為工作草案（鏈接）發布。雖然HTML5的語法非常類似于SGML，但它已經放棄任何成為SGML應用程序的嘗試，除了一種替代的基于XML的HTML5序列，它已明確定義自己的“HTML”序列。
2011年 HTML5 – 最終征求
2011年5月，工作小組將HTML5推進至“最終征求”（Last Call）階段，邀請W3C社區內外人士以確認本規范的技術可靠性。W3C開發一套綜合性測試包來實現完整規范的廣泛交互操作性，完整規范的目標日期為2014年。2011年1月，WHATWG將其“HTML5”活動標準重命名為“HTML”。W3C仍然繼續其發布HTML5的項目。
2012年 HTML5 – 候選推薦
2012年7月，WHATWG和W3C的工作產生一定程度的分離。W3C繼續HTML5規范工作，重點放在單一明確的標準上，這被WHATWG稱為“快照”。WHATWG組織則將HTML5作為一個“活動標準”（Living Standard）。活動標準的概念是從未完成但永遠保持更新與改進，可以蒂姆加新特性，但功能點不會被刪除。
2012年12月，W3C指定HTML5作為候選推薦階段。 該階段的標準為“兩個100％完成，完全實現交互操作”。
2014年 HTML5 – 提案推薦與推薦
2014年9月，HTML5進入提案推薦階段。
2014年10月28日，HTML5作為穩定W3C推薦標準發布，這意味著HTML5的標準化已經完成。
四、XHTML版本
XHTML是使用XML 1.0改寫自HTML 4.01的獨立語言。它不再被作為單獨標準開發。
XHTML 1.0， 2000年1月26日作為W3C推薦標準發布。修訂版于2002年8月1日發布，它提供與HTML 4.0和4.01相同的三個變化，這些變化被重新在XML中制定。
XHTML 1.1，基于XHTML 1.0 嚴格版，2001年5月31日 作為W3C推薦標準發布。修訂版可使用模塊化XHTML的模塊，2001年4月10日作為W3C推薦標準發布。
XHTML 2.0為工作草案，但為支持HTML5與XHTML5的工作，此草案被放棄。 XHTML 2.0與XHTML 1.x不兼容，因此更確切的說這是一個XHTML風格的新語言而不是XHTML 1.x的更新。
在HTML5草案中規定一個XHTML語法，稱為“XHTML5.1”。
html的標簽 從頭開始解讀
為什么要從頭開始呢！你在工作中的時候雖然知道這些標簽，但是花費時間深入去了解的時間較少！只有慢慢工作的時間長了，才會一點點知道！在此也算是做記錄！
HTML 指的是超文本標記語言: HyperText Markup Language
HTML 不是一種編程語言，而是一種標記語言
標記語言是一套標記標簽 (markup tag)
HTML文檔的后綴名
.html
.htm
以上兩種后綴名沒有區別，都可以使用。
| viode | 表示一段視頻并提供播放的用戶界面 |
| audio | 表示音頻 |
| canvas | 表示位圖區域 |
| source | 為video和audio提供數據源 |
| track | 為video和audio指定字母 |
| svg | 定義矢量圖 |
| code | 代碼段 |
| figure | 和文檔有關的圖例 |
| figcapton | 圖例的說明 |
| main | main標簽規定文檔的主要內容，main的主要目的是將ARIA的地標性作用main映射到HTML中的元素，這可以幫助那些屏幕閱讀 |
| time | 日期和時間值 |
| mark | 高亮的引用文字 |
| datalist | 提供給其他控件的預定義選項 |
| keygen | 秘鑰對生成器控件 |
| output | 計算值 |
| progress | 進度條 |
| menuitem | 用戶可點擊的菜單項 |
| menu | 菜單 |
| template | 元素模板 |
| section | 選中的文本樣式 |
| nav | 標簽定義導航鏈接的部分 |
| aside | aside元素用來定義當前頁面或者文章的附屬信息部分，它可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、導航條等其他類似的有別于主要內容的部分。 |
| article | 標簽定義的內容本身必須是有意義的且必須是獨立于文檔的其余部分。 |
| footer | 底部標簽 |
| progress | 標簽用于定義文檔中的進度條 |
| header | 頭部標簽 |
lang語言代碼想了解更多點擊：語言代碼
unicode編碼也叫字符集：UTF-8、UTF-7、UTF-16、UnicodeLittle、UnicodeBig
ogp.me（官網）:地址
css：
css是層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。css是建立網站不可缺少的樣式。
96年左右的時候css還不成熟，標簽上經常width和height的標簽屬性，有些完成不了的就直接使用標簽代替，并且沒有語義化，使用操作頻繁，更改個顏色和大小都使用到這個標簽，整合html是無處不在，直到后來w3c萬維網聯盟用css的font-size和color代替這標簽，頁面標簽量驟然縮減，逐步的更新替代舊的css。
c3新增
樣式類
1.圓角 radius（border-radius:50%）
2.三角型（不給盒子寬高，左右給邊框，顏色為透明，上邊框給顏色即可）
3.陰影 box-shadow（box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式(inset或省略)];）
4.背景色透明度 background：rgba（165，42，42，.5）【提示：opacity屬性透明度會傳遞給后代元素，而rgba的后代元素不會繼承透明】
5.漸變色彩 background: linear-gradient(to bottom, red, yellow);
6.文本陰影 text-shadow: X軸偏移量 Y軸偏移量 模糊半徑 陰影顏色（text-shadow: 2px 2px 0 #E4F1FF;）
7.溢出文本用text-overflow，用（…）省略標記。（text-overflow：ellipsis；要有超出區域不顯示，overflow：hidden）
8.border-image使用圖片來創建邊框
9.background-size指定背景圖片尺寸與
background-size: contain; 縮小圖片以適合元素（維持像素長寬比）
background-size: cover; 擴展元素以填補元素（維持像素長寬比）
background-size: 100px 100px; 縮小圖片至指定的大小
background-size: 50% 100%; 縮小圖片至指定的大小，百分比是相對包 含元素的尺寸
10.background-origin：指定背景圖片從哪里開始顯示，背景圖片可以放置于 content-box、padding-box 或 border-box 區域
background-origin: border-box; 從border開始計算background-position
background-origin: padding-box; 從padding開始計算background-position
background-origin: content-box; 從content開始計算background-position
11.background-clip：指定背景圖片從什么位置開始裁剪
12.word-wrap：文字自動換行
13.text-overflow: ellipsis;文字在固定區域內顯示不完整加省略號需要配合overflow: hidden;使用，多用于文本描述顯示區域有限，配合title使用，也可使用第三方的插件來實現鼠標移入顯示完整信息的效果！
clip：修剪文本
ellipsis：顯示省略符號來代表被修剪的文本
14.background-break
元素可以被分成幾個獨立的盒子（如使內聯元素span跨越多行），background-break 屬性用來控制背景怎樣在這些不同的盒子中顯示
background-break: continuous; 默認值。忽略盒之間的距離（也就是像元素沒有分成多個盒子，依然是一個整體一樣）
background-break: bounding-box; 把盒之間的距離計算在內；
background-break: each-box; 為每個盒子單獨重繪背景
15.text-decoration
CSS3里面開始支持對文字的更深層次的渲染，具體有三個屬性可供設置：
text-fill-color: 設置文字內部填充顏色
text-stroke-color: 設置文字邊界填充顏色
text-stroke-width: 設置文字邊界寬度
16.顏色
css3新增了新的顏色表示方式rgba與hsla
rgba分為兩部分，rgb為顏色值，a為透明度
hala分為四部分，h為色相，s為飽和度，l為亮度，a為透明度
css3新增動畫效果
1、transform變換效果：
css3提供了元素變形效果，也叫做變換。它可以將元素實現旋轉、縮放和平移的功能。
屬性值：（1）transform ；（2）transform-origin：transform-origin 屬性可以設置變換的起點。默認情況下，使用元素的中心作為起點。
transform: translate(120px, 50%)：位移
transform: scale(2, 0.5)：縮放
transform: rotate(0.5turn)：旋轉
transform: skew(30deg, 20deg)：傾斜
2、animation動畫效果
CSS3 提供了類似 Flash 關鍵幀控制的動畫效果，通過 animation 屬性實現。那么之前的 transition 屬性只能通過指定屬性的初始狀態和結束狀態來實現動畫效果，有一定的局限性。
animation 實現動畫效果主要由兩個部分組成：1、通過類似 Flash 動畫中的關鍵幀聲明一個動畫；2、在 animation 屬性中調用關鍵幀聲明的動畫。
css3新增過渡效果
1、transition過渡效果
過渡效果一般是通過一些簡單的 CSS 動作觸發平滑過渡功能，比如：:hover、:focus、:active、:checked 等。CSS3 提供了 transition 屬性來實現這個過渡功能。
對于css3新增的過渡內容和css新增動畫效果大家也可以參考CSS3 最新版參考手冊。
animation 動畫
動畫這個平常用的也很多，主要是做一個預設的動畫。和一些頁面交互的動畫效果，結果和過渡應該一樣，讓頁面不會那么生硬
animation也有很多的屬性
animation-name：動畫名稱
animation-duration：動畫持續時間
animation-timing-function：動畫時間函數
animation-delay：動畫延遲時間
animation-iteration-count：動畫執行次數，可以設置為一個整數，也可以設置為infinite，意思是無限循環
animation-direction：動畫執行方向
animation-paly-state：動畫播放狀態
animation-fill-mode：動畫填充模式
布局
一.flex彈性布局
1、flex-direction用來控制子項整體布局方向，是從左往右還是從右往左，是從上往下還是從下往上
row
默認值，顯示為行。方向為當前文檔水平流方向，默認情況下是從左往右。
row-reverse
顯示為行。但方向和row屬性值是反的
column
顯示為列
column-reverse
顯示為列。但方向和column屬性值是反的
2、flex-wrap用來控制子項整體單行顯示還是換行顯示。
nowrap
默認值，表示單行顯示，不換行。
wrap
寬度不足換行顯示
wrap-reverse
寬度不足換行顯示，但是是從下往上開始，也就是原本換行在下面的子項現在跑到上面。
flex-flow屬性是flex-direction和flex-wrap的縮寫，表示flex布局的flow流動特性。第一個值表示方向，第二個值表示換行，中間用空格隔開。
3、justify-content屬性決定了主軸方向上子項的對齊和分布方式。 常用
flex-start
默認值，表現為起始位置對齊。
flex-end
表現為結束位置對齊。
center
表現為居中對齊。
space-between
表現為兩端對齊。between是中間的意思，意思是多余的空白間距只在元素中間區域分配。
space-around
around是環繞的意思，意思是每個flex子項兩側都環繞互不干擾的等寬的空白間距，最終視覺上邊緣兩側的空白只有中間空白寬度一半。
space-evenly
evenly是勻稱、平等的意思。也就是視覺上，每個flex子項兩側空白間距完全相等。
4、align-items中的items指的就是flex子項們，因此align-items指的就是flex子項們相對于flex容器在側軸方向上的對齊方式。
stretch
默認值，flex子項拉伸。
flex-start
表現為容器頂部對齊。
flex-end
表現為容器底部對齊。
center
表現為垂直居中對齊。
5、align-content可以看成和justify-content是相似且對立的屬性，如果所有flex子項只有一行，則align-content屬性是沒有任何效果的。
stretch
默認值。每一行flex子元素都等比例拉伸。例如，如果共兩行flex子元素，則每一行拉伸高度是50%。
flex-start
表現為起始位置對齊。
flex-end
表現為結束位置對齊。
center
表現為居中對齊。
space-between
表現為兩端對齊。
space-around
每一行元素上下都享有獨立不重疊的空白空間。
space-evenly
每一行元素都完全上下等分。
作用在flex子項上的CSS屬性
1、order
可以通過設置order改變某一個flex子項的排序位置。所有flex子項的默認order屬性值是0。
2、flex-grow
屬性中的grow是擴展的意思，擴展的就是flex子項所占據的寬度，擴展所侵占的空間就是除去元素外的剩余的空白間隙。默認值為0。
3、flex-shrink
屬性中的shrink是“收縮”的意思，flex-shrink主要處理當flex容器空間不足時候，單個元素的收縮比例。默認值是1。
4、flex-basis
flex-basis定義了在分配剩余空間之前元素的默認大小。
5、flex
flex屬性是flex-grow，flex-shrink和flex-basis的縮寫。
6、align-self
align-self指控制單獨某一個flex子項的垂直對齊方式。
二.Grid柵格布局
Grid布局是一個二維的布局方法，縱橫兩個方向同時存在。
我有點懶的寫就直接放格柵的連接吧！寫的不錯
CSS3新增選擇器
兄弟選擇器：選擇該元素后面的同級的兄弟元素
例如：
h1~p:選擇h1元素后面的所有同級p元素。
p~p:選擇p元素后面的所有同級p元素，除了第一個p元素
E[att] 選擇具有att屬性的E元素
E[att="val’'] 選擇具有att屬性且屬性值等于val的E元素
E[att^=“val”] 匹配具有att屬性且值以val開頭的E元素
E[att$=“val”] 匹配具有att屬性且值以val結尾的E元素
E[att*=“val”] 匹配具有att屬性且值中含有val的E元素
3.偽類選擇器
E:first-child 匹配父元素中的第一個子元素E
E:last-child 匹配父元素中的最后一個E元素
E:nth-child(n) 匹配父元素中的第n個子元素E 僅支持正整數
E:first-of-type 指定類型E的第一個
E:last-of-type 指定類型E的最后一個
E:nth-of-type(n) 指定類型E的第n個 僅支持正整數
E:nth-last-child(n) 從父元素的最后一個子元素開始算
E:nth-last-of-child(n) 指定類型E的第n個，但是是從父元素的最后一個子元素開始算
:root 根選擇器，匹配E元素所在文檔的根元素，在HTML文檔中，根元素始終是
:not 否定選擇器，選擇除某個元素之外的所有元素
:empty 用來選擇沒有任何內容的元素
:target 目標選擇器，用來匹配文檔（頁面）url的某個標志符的目標元素，鼠標點擊后變化
:only-child 父元素中只有一個子元素，且只有唯一的一個子元素
:only-of-type 選擇的是一個元素是它的父元素的唯一一個相同類型的子元素
:enabled 表單元素狀態可用
:disabled 表單元素狀態不可用。使用時需要在表單元素的HTML中設置“disabled”屬性
:checked 選中狀態，選中后樣式改變
:read-only 用于指定處于只讀狀態的元素的樣式，元素中需要設置readonly=“readonly”
:read-write 用于指定當元素處于非只讀狀態的樣式
4.偽元素選擇器
::selection 用來匹配突出顯示的文本（用鼠標選擇文本時的文本）
::before 在元素內部的前面插入內容
::after 在元素內部的后面插入內容
::placeholder 改變表單元素中的文字的樣式
JavaScript 是屬于 HTML 和 Web 的編程語言
js經過漫長的發展，已經不單單局限于前端，開始向后端延伸
Node.js發布于2009年5月，由Ryan Dahl開發，是一個基于Chrome V8引擎的JavaScript運行環境，使用了一個事件驅動、非阻塞式I/O模型，讓JavaScript 運行在服務端的開發平臺，它讓JavaScript成為與PHP、Python、Perl、Ruby等服務端語言平起平坐的腳本語言。
擴展：隨著前端的快速發展，js開始向著各個領域進發，混合式應用開發（物聯網），游戲端（前幾年比較火的網頁網游），桌面級應用（vscode），bim模型，服務器搭建，移動端（小程序，web app，安卓apk，小游戲 例如：賺錢賺爆了的游戲 羊了個羊），插件開發，pc端，多媒體端（電梯廣告屛），公司業務方向不同，你所用的js偏向性不同。技術深度也不可能同日而語！
一、dom（html文檔節點）
當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）
JavaScript 能改變頁面中的所有 HTML 元素
JavaScript 能改變頁面中的所有 HTML 屬性
JavaScript 能改變頁面中的所有 CSS 樣式
JavaScript 能刪除已有的 HTML 元素和屬性
JavaScript 能添加新的 HTML 元素和屬性
JavaScript 能對頁面中所有已有的 HTML 事件作出反應
JavaScript 能在頁面中創建新的 HTML 事件
通俗一點講就是dom就是讓js增刪改查dom元素
二、瀏覽器對象模型（Browser Object Model (BOM)）
不存在瀏覽器對象模型（BOM）的官方標準。
現代的瀏覽器已經（幾乎）實現了 JavaScript 交互相同的方法和屬性，因此它經常作為 BOM 的方法和屬性被提到。
注：簡單的不在贅述，講述一些用的極少功能
Navigator
Navigator 接口表示用戶代理的狀態和標識。它允許腳本查詢它和注冊自己進行一些活動。
1、navigator.userAgent獲取當前設備瀏覽器信息
獲取設備系統和型號
--------------------------分割線-------------------------------------------------
pc
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><title> 獲取PC設備信息 </title><meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"><meta name="Generator" content="EditPlus"><meta name="Author" content=""><meta name="Keywords" content=""><meta charset="utf-8" /><meta name="Description" content=""><script id=clientEventHandlersJS language=javascript>/******************************************下為瀏覽器信息************************************************///獲取瀏覽器相關信息function allinfo() {var appName = navigator.appName; //瀏覽器的正式名稱var appVersion = navigator.appVersion; //瀏覽器的版本號var cookieEnabled = navigator.cookieEnabled; // 返回用戶瀏覽器是否啟用了cookievar cpuClass = navigator.cpuClass; //返回用戶計算機的cpu的型號，通常intel芯片返回"x86"（火狐沒有）var mimeType = navigator.mimeTypes; // 瀏覽器支持的所有MIME類型的數組var platform = navigator.platform; // 瀏覽器正在運行的操作系統平臺，包括Win16(windows3.x) // Win32(windows98,Me,NT,2000,xp),Mac68K(Macintosh 680x0)// 和ＭacPPC(Macintosh PowerPC)var plugins = navigator.plugins; // 安裝在瀏覽器上的所有插件的數組var userLanguage = navigator.userLanguage; // 用戶在自己的操作系統上設置的語言（火狐沒有）var userAgent = navigator.userAgent; //包含以下屬性中所有或一部分的字符串：appCodeName,appName,appVersion,language,platformvar systemLanguage = navigator.systemLanguage; // 用戶操作系統支持的默認語言（火狐沒有）var info = "<table border=1>";var type = "";if (isIe()) {type = "IE瀏覽器";} else if (isFireFox()) {type = "火狐瀏覽器";}info += "<tr><td>瀏覽器類型：</td><td>" + type + "</td></tr>";info += "<tr><td>瀏覽器屬性信息：</td><td>" + userAgent + "</td></tr>";info += "<tr><td>瀏覽器的正式名稱：</td><td>" + appName + "</td></tr>";info += "<tr><td>瀏覽器的版本號：</td><td>" + appVersion + "</td></tr>";info += "<tr><td>瀏覽器的是否啟用了cookie：</td><td>" + cookieEnabled + "</td></tr>";info += "<tr><td>cpu等級：</td><td>" + cpuClass + "</td></tr>";info += "<tr><td>瀏覽器的MIME類型：</td><td>" + mimeType.length + "</td></tr>";info += "<tr><td>系統平臺：</td><td>" + platform + "</td></tr>";info += "<tr><td>安裝的插件：</td><td>" + plugins + "</td></tr>";info += "<tr><td>插件的數量：</td><td>" + plugins.length + "</td></tr>";info += "<tr><td>插件的名稱：</td><td>" + getPluginName() + "</td></tr>";info += "<tr><td>用戶設置的操作系統語言：</td><td>" + userLanguage + "</td></tr>";info += "<tr><td>操作系統支持的默認語言：</td><td>" + systemLanguage + "</td></tr>";info += "<tr><td>Director：</td><td>" + checkePlugs("Director") + "</td></tr>";info += "<tr><td>javaEnabled：</td><td>" + navigator.javaEnabled() + "</td></tr>";info += "<tr><td>是否有quickTime：</td><td>" + checkePlugs("QuickTime") + "</td></tr>";info += "<tr><td>flash插件情況：</td><td>" + checkePlugs('Shockwave Flash') + "</td></tr>";info += "<tr><td>是否有MediaPlayer：</td><td>" + checkePlugs("MediaPlayer") + "</td></tr>";info += "<tr><td>是否有realPlayer:</td><td>" + checkePlugs("RealPlayer") + "</td></tr>";info += "<tr><td>屏幕分辨率高度：</td><td>" + window.screen.height + "</td></tr>";info += "<tr><td>屏幕分辨率寬度：</td><td>" + window.screen.width + "</td></tr>";info += "<tr><td>顏色質量：</td><td>" + window.screen.colorDepth + "位</td></tr>";info += "<tr><td>像素：</td><td>" + window.screen.deviceXDPI + "像素/英寸</td></tr>";info += "<tr><td>字體是否平滑：</td><td>" + window.screen.fontSmoothingEnabled + "</td></tr>";//info += "<tr><td>規定瀏覽器是否啟用數據污點：</td><td>" + navigator.taintEnabled() + "</td></tr>";info += "</table>";document.getElementById("elInfo").innerHTML = info;return info;//directorvar appCodeName = navigator.appCodeName; //與瀏覽器相關的內部代碼名var appMinorVersion = navigator.appMinorVersion; //輔版本號（通常應用于瀏覽器的補丁或服務包)var language = navigator.language; //瀏覽器支持的語言 （IE沒有）var onLine = navigator.onLine; //返回瀏覽器是否處于在線模式（IE4以上版本）var opsProfile = navigator.opsProfile; // 未定義 （IE、火狐沒有）var oscpu = navigator.oscpu; //瀏覽器正在運行的操作系統，其中可能有CPU的信息（IE沒有）var product = navigator.product; // 瀏覽器的產品名（IE沒有）var productSub = navigator.productSub; //關于瀏覽器更多信息（IE沒有）var securityPolicy = navigator.securityPolicy; // 瀏覽器支持的加密類型（IE沒有）var userProfile = navigator.userProfile; // 返回一個UserProfile對象，它存儲用戶的個人信息（火狐沒有）var vender = navigator.vender; // 瀏覽器廠商名稱（IE、火狐沒有）var vendorSub = navigator.vendorSub; // 關于瀏覽器廠商更多的信息 }//獲取插件所有的名稱function getPluginName() {var info = "";var plugins = navigator.plugins;if (plugins.length > 0) {for (i = 0; i < navigator.plugins.length; i++) {info += navigator.plugins[i].name + ";";}}return info;}//檢查是否安裝了某插件，如果安裝了返回版本號function checkePlugs(pluginname) {var f = "-"var plugins = navigator.plugins;if (plugins.length > 0) {for (i = 0; i < navigator.plugins.length; i++) {if (navigator.plugins[i].name.indexOf(pluginname) >= 0) {f = navigator.plugins[i].description.split(pluginname)[1];return f;break;}}}return false;}//判斷是否IEfunction isIe() {var i = navigator.userAgent.toLowerCase().indexOf("msie");return i >= 0;}//判斷是否firefoxfunction isFireFox() {var i = navigator.userAgent.toLowerCase().indexOf("firefox");return i >= 0;}/******************************************以上為瀏覽器信息，以下為pc信息************************************************/var locator = new ActiveXObject("WbemScripting.SWbemLocator");var service = locator.ConnectServer(".");function cpuInfo() { //CPU 信息 var properties = service.ExecQuery("SELECT * FROM Win32_Processor");var e = new Enumerator(properties);var info = "<table border=1>";info += "<tr bgcolor='#CDEDED' style='font-weight: bold;' ><td width='450' >CPU 信息</td></tr>";for (; !e.atEnd(); e.moveNext()) {var p = e.item();info += "<tr style='color: red'><td >CPU序列號:" + p.ProcessorID + "</td></tr>";info += "<tr><td >" + p.Caption + "</td></tr>";info += "<tr><td >CPU編號：" + p.DeviceID + "</td></tr>";info += "<tr><td >CPU型號：" + p.Name + "</td></tr>";info += "<tr><td >CPU狀態：" + p.CpuStatus + "</td></tr>";info += "<tr><td >CPU可用性：" + p.Availability + "</td></tr>";info += "<tr><td >CUP Level：" + p.Level + "</td></tr>";info += "<tr><td >主機名稱：" + p.SystemName + "</td></tr>";info += "<tr><td >Processor Type：" + p.ProcessorType + "</td></tr>";}info += "</table>";return info;}function softDisk() { //軟盤信息 var properties = service.ExecQuery("SELECT * FROM Win32_FloppyDrive");var e = new Enumerator(properties);var info = "<table border=1>";info += "<tr bgcolor='#CDEDED' style='font-weight: bold;' ><td width='450'>軟盤信息</td></tr>";for (; !e.atEnd(); e.moveNext()) {var p = e.item();info += "<tr><td >" + p.Description + "</td></tr>";info += "<tr><td >" + p.DeviceID + "</td></tr>";info += "<tr><td >" + p.Status + "</td></tr>";info += "<tr><td >" + p.Manufacuturer + "</td></tr>";}info += "</table>";return info;}function RomInfo() { //CD-ROM 信息 var properties = service.ExecQuery("SELECT * FROM Win32_CDROMDrive");var e = new Enumerator(properties);var info = "<table border=1>";info += "<tr bgcolor='#CDEDED' style='font-weight: bold;'><td width='450' >CD-ROM 信息 </td></tr>";for (; !e.atEnd(); e.moveNext()) {var p = e.item();info += "<tr><td >驅動器名稱：" + p.Caption + "</td></tr>";info += "<tr><td >描述：" + p.Description + "</td></tr>";info += "<tr><td >盤符：" + p.Drive + "</td></tr>";info += "<tr><td >驅動器狀態：" + p.Status + "</td></tr>";info += "<tr><td >是否在使用：" + p.MediaLoaded + "</td></tr>";}info += "</table>";return info;}function keyBoardInfo() { //鍵盤信息 var properties = service.ExecQuery("SELECT * FROM Win32_Keyboard");var e = new Enumerator(properties);var info = "<table border=1>";info += "<tr bgcolor='#CDEDED' style='font-weight: bold;'><td width='450'>鍵盤信息 </td></tr>";for (; !e.atEnd(); e.moveNext()) {var p = e.item();info += "<tr><td >鍵盤描述：" + p.Description + "</td></tr>";info += "<tr><td >鍵盤名稱：" + p.Name + "</td></tr>";info += "<tr><td >鍵盤狀態：" + p.Status + "</td></tr>";}info += "</table>";return info;}function mainBoard() { //主板信息 var properties = service.ExecQuery("SELECT * FROM Win32_BaseBoard");var e = new Enumerator(properties);var info = "<table border=1>";info += "<tr bgcolor='#CDEDED' style='font-weight: bold;'><td width='450'>主板信息 </td></tr>";for (; !e.atEnd(); e.moveNext()) {var p = e.item();info += "<tr style='color: red'><td >主板ID：" + p.SerialNumber + "</td></tr>";info += "<tr><td >" + p.HostingBoard + "</td></tr>";info += "<tr><td >制造商：" + p.Manufacturer + "</td></tr>";info += "<tr><td >是否開啟：" + p.PoweredOn + "</td></tr>";info += "<tr><td >型號：" + p.Product + "</td></tr>";info += "<tr><td >版本：" + p.Version + "</td></tr>";}info += "</table>";return info;}function disk() { //硬盤序列號 信息var properties = service.ExecQuery("SELECT * FROM Win32_DiskDrive");var e = new Enumerator(properties);var info = "<table border=1>";info += "<tr bgcolor='#CDEDED' style='font-weight: bold;' ><td width='450'>硬盤信息 </td></tr>";for (; !e.atEnd(); e.moveNext()) {var p = e.item();info += "<tr style='color: red'><td >硬盤序列號：" + p.signature + "</td></tr>";}info += "</table>";return info;}//獲取Ram信息function raminfo() {var system = new Enumerator(service.ExecQuery("SELECT * FROM Win32_ComputerSystem")).item();var physicMenCap = Math.ceil(system.TotalPhysicalMemory / 1024 / 1024);//內存信息 var memory = new Enumerator(service.ExecQuery("SELECT * FROM Win32_PhysicalMemory"));for (var mem = [], i = 0; !memory.atEnd(); memory.moveNext()) {mem[i++] = {cap: memory.item().Capacity / 1024 / 1024,speed: memory.item().Speed};}var info = "<table border=1>";info += "<tr bgcolor='#CDEDED' style='font-weight: bold;' ><td width='450'>內存信息 </td></tr>";info += "<tr style='color: red'><td >內存總量：" + (mem[0].cap + mem[1].cap) + "M</td></tr>";info += "<tr style='color: red'><td >可用物理內存：" + physicMenCap + "M</td></tr>";info += "</table>";return info;}//獲取網絡連接信息function ipinfo() {var properties = service.ExecQuery("SELECT * FROM Win32_NetworkAdapterConfiguration Where IPEnabled=TRUE");var e = new Enumerator(properties);var info = "<table border=1>";info += "<tr bgcolor='#CDEDED' style='font-weight: bold;' ><td width='450'>網絡連接信息：</td></tr>";var i = 1;for (; !e.atEnd(); e.moveNext()) {var p = e.item();info += "<tr style='color: red'><td >MAC地址" + i + "：" + p.MACAddress + "</td></tr>";info += "<tr style='color: red'><td >IP地址" + i + "：" + p.IPAddress(0) + "</td></tr>";i++;}info += "</table>";return info;}function pcInfo() { //所有信息 var info = cpuInfo();info += disk();info += raminfo();info += mainBoard();info += ipinfo();info += keyBoardInfo();info += RomInfo();info += softDisk();document.getElementById('elInfo').innerHTML = info;return info;}/******************************************以上為pc信息************************************************/</script></head><body><INPUT id="Button1" type="button" value="瀏覽器所有信息" name="Button1" language=javascript onclick="allinfo()"><INPUT id="Button1" type="button" value="客戶端pc信息" name="Button1" language=javascript onclick="pcInfo()"><div id="elInfo"></div></body></html>2、Navigator.battery獲取一些電池充電狀態的信息
3、 NetworkInformation 獲取設備的網絡連接信息。
4、Navigator.geolocation訪問設備的地理位位置信息
5、NavigatorConcurrentHardware.hardwareConcurrency (en-US)獲取可用的邏輯處理器核心數
6、NavigatorPlugins.javaEnabled (en-US)返回 Boolean (en-US) 表明瀏覽器是否支持 Java。
7、Navigator.keyboard 只讀 實驗性
返回一個 Keyboard 對象，該對象提供對以下功能的訪問：檢索鍵盤布局圖和切換從物理鍵盤捕獲按鍵的功能。
8、NavigatorLanguage.language (en-US) 只讀
返回 DOMString 表示用戶的首先語言，通常是瀏覽器用戶界面的語言。當未知的時，返回 null
9、NavigatorPlugins.mimeTypes (en-US) 只讀 實驗性
返回 MimeTypeArray (en-US) 數組用于列舉瀏覽器所支持的 MIME 類型。
10、NavigatorOnLine.onLine (en-US) 只讀
返回 Boolean (en-US) 來表明瀏覽器是否聯網。
11、NavigatorPlugins.plugins (en-US) 只讀 實驗性
返回 PluginArray (en-US) 數組用于列舉出瀏覽器安裝的插件。
由于web頁面運行在用戶電腦，所以瀏覽器為了用戶數據安全，禁止本地讀寫數據！nodejs應用于服務器端，則有讀寫的權限！
script標簽
異步加載
首先，script如果沒有 defer和 async，那么瀏覽器會立即加載并執行腳本，也就是說，會阻塞后面的文檔元素的加載和渲染。
有 defer屬性的話，會異步加載js文件，即和加載渲染后續文檔元素并行進行。加載完成后并不一定是立即執行，而是要等到所有元素解析完成后(圖片是在之后解析完成)，在 DOMContentLoaded事件觸發之前完成
有 async屬性的話，會異步加載js文件。加載完成會立即執行，阻塞后面的文檔元素的加載和渲染。所以不一定按順序執行，誰先加載完成就誰先執行。
<script defer src="https://g.csdnimg.cn/common/csdn-toolbar/csdn-toolbar.js" type="text/javascript" ></script> <script async src="https://g.csdnimg.cn/common/csdn-toolbar/csdn-toolbar.js" type="text/javascript" ></script>let、const
對于字符串數值類型不允許更改，對于復雜類型的列入數組對象和函數，能修改復雜數據類型中的值，不允許修改地址，例如：
let a = 1不允許 let a = 2，const同樣
function
//聲明一個函數let username = function (Name){return Name}function show (){let person = {name:username}return person } //這種情況瀏覽器的內存回收機制不會對username函數銷毀，盡量避免這樣去寫代碼+=和 前置++、后置++
var a = 10 a+=1 //會立即執行-=同樣 var b = 10 function num(){ b++ console.log(b)//當你遇到某些環境下數值不正確的時候查看這里 //可更改為 ++b console.log(b)//數值在控制臺測試一樣，但區別與環境，之所以列出來是因為在vue中遇到這個問題 } num()toString.call()
快速的做類型檢測
//js的寬松是出了名的，比如說你要封裝一個公共函數，多地方使用，可以使用這個方法做數據類型檢測 console.log(toString.call({})) // [object Object] console.log(toString.call(1)) // [object Number] console.log(toString.call(function(){})) // [object Function] console.log(toString.call(false)) // [object Boolean] console.log(toString.call([])) // [object Array] //另外的一種方法就是typeof 它不會檢測name詳細，一股腦的會返回給你 typeof null // "object"typeof [8] // "object"typeof {} // "object"typeof function(){} // "function" typeof 2 //"number"typeof "" //"string"typeof true //"boolean"typeof undefined //"undefined"typeof Symbol(2) // "symbol" //typeof 無法區分null 數組和對象，通常我們會區分判斷Array和Object 有時會用instanceof 來判斷是不是一個對象的實例子 [] instanceof Array// true 這種方法可以判斷數組，不能區分對象 [] instanceof Object // truenull instanceof Object // false 也不能區分nulltoSting.call()實際上是 Object.prototype.toString.call()function isType(type) {let type = Object.prototype.toString.call(type)if(type==='[object Function]'){//填寫邏輯}else if(type==='[object Array]'){//填寫邏輯}else if(type==='[object String]'){//填寫邏輯}else if(type==='[object Number]'){//填寫邏輯}else if(type==='[object Boolean]'){//填寫邏輯}else if(type==='[object Symbol]'){//填寫邏輯}else if(type==='[object Object]'){//填寫邏輯}else {try {if(type==='[object Null]'||type==='[object Undefined]'){alert('傳入的參數錯誤')}} catch(err) {console.error("錯誤信息：" + err.message);}}}變量賦值
//先檢查sessionStorage.a是否有值，沒有就賦值1 var a = sessionStorage.a||1//sessionStorage.a有值則是sessionStorage.a，沒值則是1 var a = sessionStorage.a??1//sessionStorage.a有值則是sessionStorage.a，沒值則是1 function num(type =1){return {num:type} } num()//{num:1} num(11)//{num:11} //規避賦值為null方法async await
//使用async await讓接口同步，完成在進行下行代碼運行 export function log(data){//模擬接口1console.log(123)return axios({url:'xxxx/xxx/xx--/ss',method:'post',data}) } export function log2(params){ //模擬接口2console.log(123)return axios({url:'xxxx/xxx/xx--/ss',method:'get',params}) } async function init(){ let params = {id:1}await log(params).then(res=>{}).catch(error=>{})let {code,message,result} = await log2({id:1}) }js創建dom，沒有閉合標簽
var dom = document.createElement('video') //這部特別重要，以下步驟，會將創建<video>添加一個</video>閉合標簽，沒有這一步，當你使用innerHTML插入<video>一個標簽沒有</video>閉合標簽，使用appendChild插入會報錯 dom.innerText = '您的瀏覽器不支持視頻播放' xx.innerHTML = dom xx.appendChild(dom)eval() 函數計算 JavaScript 字符串，并把它作為腳本代碼來執行。
eval("x=10;y=20;console.log(x*y)"); // 200 console.log(eval("2+2")); // 4 console.log(eval(x+17)); // 27 console.log(eval(18)); // 18 // 相當于直接調用console.log let msg = "hello world"; eval("console.log(msg)"); // hello world // 相當于函數聲明 eval("function sayHi() { console.log('hi'); }");const obj = {a: {b: {c: 1,}} } function get(str) {console.log(eval(str)) // 1，相當于console.log(obj.a.b.c) } get('obj.a.b.c')此方法和innerHTML慎用，如果有黑客察覺并惡意使用，會造成損失
原生delete方法
var nun = [1,2,3,4,5,6] delete(nun[0]) console.log(nun) VM1001:3 (6) [empty, 2, 3, 4, 5, 6]//會出現這種結果，可以使用遍歷刪除創建Array和Object
var arr = [] var array = new Array([1,1,3]) var obj = {} var object = new Object({name:'123'})iframe跨域通信
父傳子
// 父頁面 <iframe id="iframe" src="http://test.com/childrenCrossDomain.html" name="childrenName"></iframe><script>let iframe = document.getElementById('iframe');function sendToChildren(){iframe.contentWindow.postMessage('hello啊，在嗎', 'http://test.com')} </script>// 子頁面 <script>window.addEventListener("message", function(e){console.log(e.data)}); </script>子傳父
// 父頁面 window.addEventListener('message',function(e){console.log(e.data) })// 子頁面 window.parent.postMessage('不在', 'http://父域名');if的語法簡寫，不建議使用，閱讀性差
var a = 1 if(a) console.log(1)總結
- 上一篇： 钉钉这两年：陈航自我迭代 阿里社交进击
- 下一篇： HTML5和CSS3核心笔记