當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端知识二

發(fā)布時間：2023/12/14 HTML 23 豆豆

生活随笔收集整理的這篇文章主要介紹了前端知识二小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前端知識二

html，js，css前端三大件

不管你是使用市面上的熱門的框架還是公司自己開發(fā)的框架，都離不開這個要素，在深入學習框架源碼前，這是都是需要熟能上手，再去閱讀框架源碼！框架的作用是工程化，快速開發(fā)，將dom，js，css編譯成碼流！借助瀏覽器的哈希和history等來完成頁面的跳轉，原生傳統(tǒng)的是搭建.html頁面，現在還在使用的多為某些公司的線上商城，利于seo優(yōu)化排名，隨著vue，react慢慢發(fā)展也開始出現便于seo優(yōu)化的方法！沒有過多深入研究不在贅述。

前端的改變

互聯(lián)網快速發(fā)展的時代，逐漸出現各種框架，將前后端直接分離，各司其職，框架的出現將后端使用的單頁面直接搬到前端，經過框架的編譯壓縮，變成一個個js文件，所需要的頁面全以代碼的形式封存在js文件中，這也就是你看到的.html頁面只有一個的原因

三大件之一的html

發(fā)展歷史
html發(fā)展歷史1980年，物理學家蒂姆·伯納斯-李在歐洲核子研究中心（CERN）在承包工程期間，為使CERN的研究人員使用并共享文檔，他提出并創(chuàng)建原型系統(tǒng)ENQUIRE。1989年，伯納斯-李在一份備忘錄中提出一個基于互聯(lián)網的超文本系統(tǒng)。他規(guī)定HTML并在1990年底寫出瀏覽器和服務器軟件。同年，伯納斯-李與CERN的數據系統(tǒng)工程師羅伯特·卡里奧聯(lián)合為項目申請資助，但未被CERN正式批準。在他的個人筆記中伯納斯-李列舉“一些使用超文本的領域”，并把百科全書列為首位。
HTML的首個公開描述出現于一個名為“HTML標簽”的文件中，由蒂姆·伯納斯-李于1991年底提及。它描述18個元素，包括HTML初始的、相對簡單的設計。除了超鏈接標簽外，其他設計都深受CERN內部一個以標準通用標記語言（SGML）為基礎的文件格式SGMLguid的影響。這些元素在HTML 4中仍有11個存在。
伯納斯-李認為HTML是SGML的一個應用程序。1993年中期互聯(lián)網工程任務組（IETF）發(fā)布首個HTML規(guī)范的提案：“超文本標記語言（HTML）”互聯(lián)網草案，由伯納斯-李與丹·康納利撰寫。其中包括一個SGML文檔類型定義來定義語法[11]。草案于6個月后過期，不過值得注意的是其對NCSA Mosaic瀏覽器自定義標簽從而將在線圖像嵌入的行為的認可，這反映IETF把標準立足于成功原型的理念。同樣，戴夫·拉格特在1993年末提出的與之競爭的互聯(lián)網草案“HTML+（超文本標記格式）”建議規(guī)范已經實現的功能，如表格與填寫表單。
在HTML和HTML+的草案于1994年初到期后，IETF創(chuàng)建一個HTML工作組，并在1995年完成”HTML 2.0”，這是第一個旨在成為對其后續(xù)實現標準的依據的HTML規(guī)范。
在IETF的主持下，HTML標準的進一步發(fā)展因競爭利益而遭受停滯。自1996年起，HTML規(guī)范一直由萬維網聯(lián)盟（W3C）維護，并由商業(yè)軟件廠商出資。不過在2000年，HTML也成為國際標準（ISO/ IEC15445：2000）。HTML 4.01于1999年末發(fā)布，進一步的勘誤版本于2001年發(fā)布。2004年，網頁超文本應用技術工作小組（WHATWG）開始開發(fā)HTML5，并在2008年與W3C共同交付，2014年10月28日完成標準化。
二、版本時間線
1995年11月24日
HTML 2.0作為IETF RFC 1866發(fā)布。追加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推薦標準發(fā)布。
這是首個完全由W3C開發(fā)并標準化的版本，因IETF于1996年9月12日關閉它的HTML工作組。
最初代號為“威爾伯”（Wilbur），HTML 3.2 完全去除數學公式，協(xié)調各種專有擴展，并采用網景設計的大多數視覺標記標簽。由于兩家公司達成了協(xié)議，網景的閃爍元素和微軟的滾動元素被移除。HTML對數學公式的支持最后成為另外一種被稱為MathML的標準。
1997年12月18日
HTML 4.0作為W3C推薦標準發(fā)布。它提供三種變化：
嚴格，過時的元素被禁止。
過渡，過時的元素被允許。
框架集，大多只與框架相關的元素被允許。
最初代號“美洲獅”（Cougar）， HTML 4.0采用許多特定瀏覽器的元素類型和屬性，并試圖淘汰網景的視覺標記功能，將其標記為不贊成使用。HTML 4是遵循ISO 8879 - SGML的SGML應用程序。
1998年4月24日
HTML 4.0進行微調，不增加版本號。
1999年12月24日
HTML 4.01作為W3C推薦標準發(fā)布。它同樣提供三種變化，最終勘誤版于2001年5月12日發(fā)布。
2000年5月
ISO/IEC 15445:2000（”ISO HTML”，基于HTML 4.01嚴格版）作為ISO/IEC國際標準發(fā)布。在ISO中這一標準位于ISO/IEC JTC 1/SC 34域（ISO/IEC聯(lián)合技術委員會1、小組委員會34 – 文檔描述與處理語言）。
2014年10月28日
HTML 5作為W3C推薦標準發(fā)布。
三、草案時間線
1991年10月
HTML標簽，一個非正式CERN文件首次公開18個HTML標簽。
1992年6月
HTML DTD的首個非正式草案，后續(xù)有七個修訂版（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工作小組作為互聯(lián)網草案（一個粗略的建議標準）。在被第二版取代一個月后，IETF又發(fā)布6個草案，最終在RFC1866中發(fā)布HTML 2.0。
1993年11月
HTML+由IETF作為互聯(lián)網草案發(fā)布，是超文本標記語言草案的一個競爭性提案。它于1994年5月到期。
1995年4月（1995年3月編寫）
HTML 3.0被提議作為IETF的標準，但直到提案在五個月過期后（1995年9月28日）仍沒有進一步的行動。它包含許多拉格特HTML+提案的功能，如對表格的支持、圍繞數據的文本流和復雜的數學公式的顯示。W3C開始開發(fā)自己的Arena瀏覽器作為HTML 3和層疊樣式表的試驗臺[，但HTML 3.0并沒有獲得成功。瀏覽器廠商，包括微軟和網景，選擇實現HTML3草案功能的不同子集并引入它們自己的插件（見瀏覽器大戰(zhàn)）。
2008年1月
HTML5由W3C作為工作草案（鏈接）發(fā)布。雖然HTML5的語法非常類似于SGML，但它已經放棄任何成為SGML應用程序的嘗試，除了一種替代的基于XML的HTML5序列，它已明確定義自己的“HTML”序列。
2011年 HTML5 – 最終征求
2011年5月，工作小組將HTML5推進至“最終征求”（Last Call）階段，邀請W3C社區(qū)內外人士以確認本規(guī)范的技術可靠性。W3C開發(fā)一套綜合性測試包來實現完整規(guī)范的廣泛交互操作性，完整規(guī)范的目標日期為2014年。2011年1月，WHATWG將其“HTML5”活動標準重命名為“HTML”。W3C仍然繼續(xù)其發(fā)布HTML5的項目。
2012年 HTML5 – 候選推薦
2012年7月，WHATWG和W3C的工作產生一定程度的分離。W3C繼續(xù)HTML5規(guī)范工作，重點放在單一明確的標準上，這被WHATWG稱為“快照”。WHATWG組織則將HTML5作為一個“活動標準”（Living Standard）。活動標準的概念是從未完成但永遠保持更新與改進，可以蒂姆加新特性，但功能點不會被刪除。
2012年12月，W3C指定HTML5作為候選推薦階段。該階段的標準為“兩個100％完成，完全實現交互操作”。
2014年 HTML5 – 提案推薦與推薦
2014年9月，HTML5進入提案推薦階段。
2014年10月28日，HTML5作為穩(wěn)定W3C推薦標準發(fā)布，這意味著HTML5的標準化已經完成。
四、XHTML版本
XHTML是使用XML 1.0改寫自HTML 4.01的獨立語言。它不再被作為單獨標準開發(fā)。
XHTML 1.0， 2000年1月26日作為W3C推薦標準發(fā)布。修訂版于2002年8月1日發(fā)布，它提供與HTML 4.0和4.01相同的三個變化，這些變化被重新在XML中制定。
XHTML 1.1，基于XHTML 1.0 嚴格版，2001年5月31日作為W3C推薦標準發(fā)布。修訂版可使用模塊化XHTML的模塊，2001年4月10日作為W3C推薦標準發(fā)布。
XHTML 2.0為工作草案，但為支持HTML5與XHTML5的工作，此草案被放棄。 XHTML 2.0與XHTML 1.x不兼容，因此更確切的說這是一個XHTML風格的新語言而不是XHTML 1.x的更新。
在HTML5草案中規(guī)定一個XHTML語法，稱為“XHTML5.1”。

html的標簽從頭開始解讀

為什么要從頭開始呢！你在工作中的時候雖然知道這些標簽，但是花費時間深入去了解的時間較少！只有慢慢工作的時間長了，才會一點點知道！在此也算是做記錄！

HTML 指的是超文本標記語言: HyperText Markup Language
HTML 不是一種編程語言，而是一種標記語言
標記語言是一套標記標簽 (markup tag)
HTML文檔的后綴名
.html
.htm
以上兩種后綴名沒有區(qū)別，都可以使用。

<!DOCTYPE html>  <html lang="zh-cn" style="--olcb-folder-code-block-max-height:80vh;">   <head> <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="referrer" content="origin-when-cross-origin"><meta name="description" content="元素創(chuàng)建的三種方式為了提高用戶的體驗 1. document.write(&quot;標簽的代碼以及內容&quot;); 頁面加載的時候創(chuàng)建,是沒有問題的：document.write(&quot;"><meta property="og:description" content="元素創(chuàng)建的三種方式為了提高用戶的體驗 1. document.write(&quot;標簽的代碼以及內容&quot;); 頁面加載的時候創(chuàng)建,是沒有問題的：document.write(&quot;"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta ke="X-UA-Compatible" content="IE=edge"><meta name="keywords" content="HTML DOM Link 對象"><title>頁面名稱</title><link id="favicon" rel="shortcut icon"href="//common.cnblogs.com/favicon.svg"type="image/svg+xml"><title>圖片地址(runoob.com)</title> <base href="http://www.runoob.com/images/" target="_blank"><script type="text/javascript" src="https://common.cnblogs.com/script/encoder.js"></script>  </head> <body class="skin-codinglife has-navbar"> <iframe src="https://a3e7ca4361cd17e3300b9a64d2d4b6c9.safeframe.googlesyndication.com/safeframe/1-0-38/html/container.html" style="visibility: hidden; display: none;"></iframe>   <div></div> <a href="http://"></a> <a href="http://" target="_blank" rel="noopener noreferrer"></a> <a href="mailto:"></a> <a href="tel:"></a> <a :href="`${完整的下載地址}`" target="downloadFile">{{文件名稱}}</a> <a href="#two" name="one">底部</a> <a href="#one" name="two">頂部</a> <a href="javascript:while(1){alert('循環(huán)')}">點我，javacsript死循環(huán)</a> <br /> <hr /> <code>計算機輸出</code> <kbd>鍵盤輸入</kbd> <tt>打字機文本</tt> <samp>計算機代碼樣本</samp> <var>計算機變量</var> <b>注釋：</b>這些標簽常用于顯示計算機/編程代碼。 <pre> 此例演示如何使用 pre 標簽對空行和空格進行控制 </pre> <strong>這個文本是加粗的</strong> <big>這個文本字體放大</big> <em>這個文本是斜體的（語氣的）</em> <i>這個文本是斜體的</i> <small>這個文本是縮小的</small> 這個文本包含 <sub>下標</sub> 這個文本包含 <sup>上標</sup> <address> 地址標簽 Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address>  <abbr title="etcetera">etc.</abbr>  <acronym title="World Wide Web">WWW</acronym> <bdo dir="rtl">該段落文字從右到左顯示。</bdo> <p>塊引用: <q>Build a future where people live in harmony with nature.</q> We hope they succeed.</p> <p>此例演示如何標記刪除文本和插入文本。（css也可以實現） <del>blue</del> <ins>red</ins>!</p></body> </html>  新增元素說明

viode	表示一段視頻并提供播放的用戶界面
audio	表示音頻
canvas	表示位圖區(qū)域
source	為video和audio提供數據源
track	為video和audio指定字母
svg	定義矢量圖
code	代碼段
figure	和文檔有關的圖例
figcapton	圖例的說明
main	main標簽規(guī)定文檔的主要內容，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萬維網聯(lián)盟用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；要有超出區(qū)域不顯示，overflow：hidden）

8.border-image使用圖片來創(chuàng)建邊框
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 區(qū)域
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;文字在固定區(qū)域內顯示不完整加省略號需要配合overflow: hidden;使用，多用于文本描述顯示區(qū)域有限，配合title使用，也可使用第三方的插件來實現鼠標移入顯示完整信息的效果！

clip：修剪文本

ellipsis：顯示省略符號來代表被修剪的文本
14.background-break
元素可以被分成幾個獨立的盒子（如使內聯(lián)元素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 屬性只能通過指定屬性的初始狀態(tài)和結束狀態(tài)來實現動畫效果，有一定的局限性。

animation 實現動畫效果主要由兩個部分組成：1、通過類似 Flash 動畫中的關鍵幀聲明一個動畫；2、在 animation 屬性中調用關鍵幀聲明的動畫。

css3新增過渡效果

1、transition過渡效果

過渡效果一般是通過一些簡單的 CSS 動作觸發(fā)平滑過渡功能，比如：:hover、:focus、:active、:checked 等。CSS3 提供了 transition 屬性來實現這個過渡功能。

對于css3新增的過渡內容和css新增動畫效果大家也可以參考CSS3 最新版參考手冊。

animation 動畫

動畫這個平常用的也很多，主要是做一個預設的動畫。和一些頁面交互的動畫效果，結果和過渡應該一樣，讓頁面不會那么生硬

animation也有很多的屬性

animation-name：動畫名稱

animation-duration：動畫持續(xù)時間

animation-timing-function：動畫時間函數

animation-delay：動畫延遲時間

animation-iteration-count：動畫執(zhí)行次數，可以設置為一個整數，也可以設置為infinite，意思是無限循環(huán)

animation-direction：動畫執(zhí)行方向

animation-paly-state：動畫播放狀態(tài)

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是中間的意思，意思是多余的空白間距只在元素中間區(qū)域分配。

space-around

around是環(huán)繞的意思，意思是每個flex子項兩側都環(huán)繞互不干擾的等寬的空白間距，最終視覺上邊緣兩側的空白只有中間空白寬度一半。

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 表單元素狀態(tài)可用
:disabled 表單元素狀態(tài)不可用。使用時需要在表單元素的HTML中設置“disabled”屬性
:checked 選中狀態(tài)，選中后樣式改變
:read-only 用于指定處于只讀狀態(tài)的元素的樣式，元素中需要設置readonly=“readonly”
:read-write 用于指定當元素處于非只讀狀態(tài)的樣式
4.偽元素選擇器
::selection 用來匹配突出顯示的文本（用鼠標選擇文本時的文本）
::before 在元素內部的前面插入內容
::after 在元素內部的后面插入內容
::placeholder 改變表單元素中的文字的樣式

JavaScript 是屬于 HTML 和 Web 的編程語言

js經過漫長的發(fā)展，已經不單單局限于前端，開始向后端延伸
Node.js發(fā)布于2009年5月，由Ryan Dahl開發(fā)，是一個基于Chrome V8引擎的JavaScript運行環(huán)境，使用了一個事件驅動、非阻塞式I/O模型，讓JavaScript 運行在服務端的開發(fā)平臺，它讓JavaScript成為與PHP、Python、Perl、Ruby等服務端語言平起平坐的腳本語言。
擴展：隨著前端的快速發(fā)展，js開始向著各個領域進發(fā)，混合式應用開發(fā)（物聯(lián)網），游戲端（前幾年比較火的網頁網游），桌面級應用（vscode），bim模型，服務器搭建，移動端（小程序，web app，安卓apk，小游戲例如：賺錢賺爆了的游戲羊了個羊），插件開發(fā)，pc端，多媒體端（電梯廣告屛），公司業(yè)務方向不同，你所用的js偏向性不同。技術深度也不可能同日而語！

一、dom（html文檔節(jié)點）

當網頁被加載時，瀏覽器會創(chuàng)建頁面的文檔對象模型（Document Object Model）
JavaScript 能改變頁面中的所有 HTML 元素
JavaScript 能改變頁面中的所有 HTML 屬性
JavaScript 能改變頁面中的所有 CSS 樣式
JavaScript 能刪除已有的 HTML 元素和屬性
JavaScript 能添加新的 HTML 元素和屬性
JavaScript 能對頁面中所有已有的 HTML 事件作出反應
JavaScript 能在頁面中創(chuàng)建新的 HTML 事件
通俗一點講就是dom就是讓js增刪改查dom元素

二、瀏覽器對象模型（Browser Object Model (BOM)）

不存在瀏覽器對象模型（BOM）的官方標準。

現代的瀏覽器已經（幾乎）實現了 JavaScript 交互相同的方法和屬性，因此它經常作為 BOM 的方法和屬性被提到。

注：簡單的不在贅述，講述一些用的極少功能
Navigator
Navigator 接口表示用戶代理的狀態(tài)和標識。它允許腳本查詢它和注冊自己進行一些活動。
1、navigator.userAgent獲取當前設備瀏覽器信息
獲取設備系統(tǒng)和型號

--------------------------分割線-------------------------------------------------

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; // 瀏覽器正在運行的操作系統(tǒng)平臺，包括Win16(windows3.x) // Win32(windows98,Me,NT,2000,xp),Mac68K(Macintosh 680x0)// 和ＭacPPC(Macintosh PowerPC)var plugins = navigator.plugins; // 安裝在瀏覽器上的所有插件的數組var userLanguage = navigator.userLanguage; // 用戶在自己的操作系統(tǒng)上設置的語言（火狐沒有）var userAgent = navigator.userAgent; //包含以下屬性中所有或一部分的字符串：appCodeName,appName,appVersion,language,platformvar systemLanguage = navigator.systemLanguage; // 用戶操作系統(tǒng)支持的默認語言（火狐沒有）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>系統(tǒng)平臺：</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>用戶設置的操作系統(tǒng)語言：</td><td>" + userLanguage + "</td></tr>";info += "<tr><td>操作系統(tǒng)支持的默認語言：</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>規(guī)定瀏覽器是否啟用數據污點：</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; //瀏覽器正在運行的操作系統(tǒng)，其中可能有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狀態(tài)：" + 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 >驅動器狀態(tài)：" + 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 >鍵盤狀態(tài)：" + 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獲取一些電池充電狀態(tài)的信息
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) 來表明瀏覽器是否聯(lián)網。
11、NavigatorPlugins.plugins (en-US) 只讀實驗性
返回 PluginArray (en-US) 數組用于列舉出瀏覽器安裝的插件。

由于web頁面運行在用戶電腦，所以瀏覽器為了用戶數據安全，禁止本地讀寫數據！nodejs應用于服務器端，則有讀寫的權限！

script標簽

異步加載
首先，script如果沒有 defer和 async，那么瀏覽器會立即加載并執(zhí)行腳本，也就是說，會阻塞后面的文檔元素的加載和渲染。

有 defer屬性的話，會異步加載js文件，即和加載渲染后續(xù)文檔元素并行進行。加載完成后并不一定是立即執(zhí)行，而是要等到所有元素解析完成后(圖片是在之后解析完成)，在 DOMContentLoaded事件觸發(fā)之前完成

有 async屬性的話，會異步加載js文件。加載完成會立即執(zhí)行，阻塞后面的文檔元素的加載和渲染。所以不一定按順序執(zhí)行，誰先加載完成就誰先執(zhí)行。

let、const

對于字符串數值類型不允許更改，對于復雜類型的列入數組對象和函數，能修改復雜數據類型中的值，不允許修改地址，例如：
let a = 1不允許 let a = 2，const同樣

//聲明a let a = 1 //更改賦值,不被允許,const同樣 let a = 2 //聲明一個對象 let O = {name:'小張' } //可以更改對象中變量的值 O.name:'李四' //不可以改變地址如： O = { sex:'男' }

function

//聲明一個函數let username = function (Name){return Name}function show (){let person = {name:username}return person } //這種情況瀏覽器的內存回收機制不會對username函數銷毀，盡量避免這樣去寫代碼

+=和前置++、后置++

var a = 10 a+=1 //會立即執(zhí)行-=同樣 var b = 10 function num(){ b++ console.log(b)//當你遇到某些環(huán)境下數值不正確的時候查看這里 //可更改為 ++b console.log(b)//數值在控制臺測試一樣，但區(qū)別與環(huán)境，之所以列出來是因為在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 無法區(qū)分null 數組和對象，通常我們會區(qū)分判斷Array和Object 有時會用instanceof 來判斷是不是一個對象的實例子 [] instanceof Array// true 這種方法可以判斷數組，不能區(qū)分對象 [] instanceof Object // truenull instanceof Object // false 也不能區(qū)分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} //規(guī)避賦值為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創(chuàng)建dom，沒有閉合標簽

var dom = document.createElement('video') //這部特別重要，以下步驟，會將創(chuàng)建<video>添加一個</video>閉合標簽，沒有這一步，當你使用innerHTML插入<video>一個標簽沒有</video>閉合標簽，使用appendChild插入會報錯 dom.innerText = '您的瀏覽器不支持視頻播放' xx.innerHTML = dom xx.appendChild(dom)

eval() 函數計算 JavaScript 字符串，并把它作為腳本代碼來執(zhí)行。

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]//會出現這種結果，可以使用遍歷刪除

創(chuàng)建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核心笔记

HTML

前端知识二

html，js，css前端三大件

前端的改變

三大件之一的html

html的標簽 從頭開始解讀

css：

c3新增

css3新增動畫效果

css3新增過渡效果

animation 動畫

布局

作用在flex子項上的CSS屬性

CSS3新增選擇器

JavaScript 是屬于 HTML 和 Web 的編程語言

一、dom（html文檔節(jié)點）

二、瀏覽器對象模型（Browser Object Model (BOM)）

pc

script標簽

let、const

function

+=和 前置++、后置++

toString.call()

變量賦值

async await

js創(chuàng)建dom，沒有閉合標簽

eval() 函數計算 JavaScript 字符串，并把它作為腳本代碼來執(zhí)行。

原生delete方法

創(chuàng)建Array和Object

iframe跨域通信

if的語法簡寫，不建議使用，閱讀性差

總結

html的標簽從頭開始解讀

+=和前置++、后置++