參考：重學(xué)前端
列一份前端知識(shí)架構(gòu)圖
用一定的詞法和語法棚菊，表達(dá)一定語義薪鹦，從而操作運(yùn)行時(shí)肺孵。
運(yùn)行時(shí) = 數(shù)據(jù)結(jié)構(gòu) + 執(zhí)行過程
程序 = 數(shù)據(jù)結(jié)構(gòu) + 算法走敌。
-
標(biāo)簽分為以下幾種：
a. 文檔元信息：通常是出現(xiàn)在head標(biāo)簽中的元素碴倾，包含了描述文檔自身的一些信息；
b. 語義相關(guān)：擴(kuò)展了純文本掉丽，表達(dá)文章結(jié)構(gòu)跌榔、不同語言要素的標(biāo)簽；
c. 鏈接：提供到文檔內(nèi)和文檔外的鏈接捶障；
d. 替換型標(biāo)簽：引入聲音僧须、圖片、視頻等外部元素替換自身的一類標(biāo)簽项炼；
e. 表單：用于填寫和提交信息的一類標(biāo)簽担平；
f. 表格：表頭、表尾锭部、單元格等表格的結(jié)構(gòu)暂论。 在現(xiàn)代互聯(lián)網(wǎng)產(chǎn)品里，HTML用于描述 "軟件界面" 多過于“富文本”拌禾，而軟件界面里的東西取胎，實(shí)際上幾乎是沒有語義的，譬如：購物車功能湃窍。
錯(cuò)誤地使用語義標(biāo)簽扼菠，會(huì)給機(jī)器閱讀造成混淆摄杂、增加嵌套，給CSS編寫增加重負(fù)擔(dān)循榆。
- 以下列出了幾種語義標(biāo)簽使用場(chǎng)景析恢。
作為自然語言延伸的語義類標(biāo)簽——ruby、em秧饮、i映挂、strong、b
作為自然語言和純文本的補(bǔ)充盗尸，用來表達(dá)一定的結(jié)構(gòu)或者消除歧義
Example:
<ruby>
明日 <rt>(Ashita)</rt>
</ruby>
<br/>
<ruby>
漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
還有一種情況是柑船，HTML 的有些標(biāo)簽實(shí)際上就是必要的，甚至必要的程度可以達(dá)到：如果沒有這個(gè)標(biāo)簽泼各，文字會(huì)產(chǎn)生歧義的程度鞍时。
Example:
今天我吃了一個(gè) <em> 蘋果 </em>。
今天我吃了 <em> 一個(gè) </em> 蘋果扣蜻。
- strong 和 b： strong是一個(gè)邏輯狀態(tài)逆巍，而bold是一個(gè)物理狀態(tài)。邏輯狀態(tài)分離內(nèi)容和表現(xiàn)形式莽使，使用邏輯狀態(tài)允許你用各種不同的方式來表達(dá)锐极。比如你想把文字渲染成紅色，使用其它大小的字體芳肌、帶有下劃線或其他樣式灵再，而不是加粗的樣式。必須要理解使用strong呈現(xiàn)出的表現(xiàn)形式不同于單純的加粗亿笤。 因?yàn)閎old是一個(gè)物理狀態(tài)翎迁，他沒有區(qū)分表現(xiàn)形式和內(nèi)容。如果讓bold做了加粗文本外的其它任何事情净薛，都將會(huì)令人困惑而且也不符合邏輯汪榔。
同樣應(yīng)該注意<b></b> 還有其他用途，比如想單純地吸引注意而不增加其重要性罕拂。- em 和 i： 在 默認(rèn)情況下，視覺效果是一樣的- 這兩個(gè)標(biāo)簽都把內(nèi)容呈現(xiàn)為斜體. 但語義是不同的全陨。 <em> 標(biāo)簽表示著重強(qiáng)調(diào)其內(nèi)容爆班，而 <i> 標(biāo)簽表示從正常的散文中區(qū)分出的文本, 如電影或書籍的名字，一個(gè)外來詞, 或者當(dāng)文本指的是一個(gè)字的定義辱姨，而不是其自身代表的語義柿菩。
例如， <em> 可能是: "Just do it already!", 或: "We had to do something about it". 人或軟件在閱讀文本時(shí)會(huì)對(duì)斜體字的發(fā)音使用重讀強(qiáng)調(diào)雨涛。
例如枢舶， <i> 可能是: "The Queen Mary sailed last night". 在這里伐庭，沒有必要對(duì)這個(gè)詞"Queen Mary"添加強(qiáng)調(diào)或重要性. 它只是表明痪宰，談?wù)搯栴}的對(duì)象不是一個(gè)名叫瑪麗女王, 而是一艘名字叫瑪麗的船. 另一個(gè)例子 <i> 可能是: "The word the is an article".
作為標(biāo)題摘要的語義類標(biāo)簽——hgroup、section
Example:
在 hgroup 中的 h1-h6 被視為同一標(biāo)題的不同組成部分：
<hgroup>
<h1>JavaScript 對(duì)象 </h1>
<h2> 我們需要模擬類嗎？</h2>
</hgroup>
<p>balah balah</p>
......
從HTML5開始尤溜，我們有了section標(biāo)簽，這個(gè)標(biāo)簽可不僅僅是一個(gè)“有語義的div”浩聋，它會(huì)改變h1-h6的語義祟昭。section的嵌套會(huì)使得其中的h1-h6下降一級(jí)，因此蒂誉，在HTML5以后教藻，我們只需要section 和 h1 就足以形成文檔的樹形結(jié)構(gòu)：
<section>
<h1>HTML 語義 </h1>
<p>balah balah balah balah</p>
<section>
<h1> 弱語義 </h1>
<p>balah balah</p>
</section>
<section>
<h1> 結(jié)構(gòu)性元素 </h1>
<p>balah balah</p>
</section>
......
</section>
作為整體結(jié)構(gòu)的語義類標(biāo)簽——
Example:
一個(gè)典型的場(chǎng)景是多篇新聞?wù)故驹谕粋€(gè)新聞專題頁面中，這種類似報(bào)紙的多文章結(jié)構(gòu)適合用 article 來組織：
<body>
<header>……</header>
<article>
<header>……</header>
<section>……</section>
<section>……</section>
<section>……</section>
<footer>……</footer>
</article>
<article>
……
</article>
<article>
……
</article>
<footer>
<address></address>
</footer>
</body>
- article是一種特別的結(jié)構(gòu)右锨，它表示具有一定獨(dú)立性質(zhì)的文章括堤。所以，article 和 body 具有相似的結(jié)構(gòu)绍移，同時(shí)悄窃，一個(gè)HTML頁面中，可以有多個(gè) article 存在登夫。
- aside表示跟文章主體不是那么相關(guān)的部分广匙，它可能包含導(dǎo)航、廣告等工具性質(zhì)的內(nèi)容恼策。aside 很容易被理解為側(cè)邊欄鸦致，實(shí)際上兩者是包含關(guān)系，側(cè)邊欄是aside涣楷，aside不一定是側(cè)邊欄分唾。
- aside 和 header 中都可能出現(xiàn)導(dǎo)航（nav 標(biāo)簽），二者的區(qū)別是狮斗，header 中的導(dǎo)航多數(shù)是到文章自己的目錄绽乔，而 aside 中的導(dǎo)航多數(shù)是到關(guān)聯(lián)頁面或者是整站地圖。
-
abbr 標(biāo)簽表示縮寫碳褒，例如WWW 表示 World Wide Web 的縮寫：
<abbr title='World Wide Web' >WWW</abbr> HTML中有三個(gè)跟引述相關(guān)的標(biāo)簽 blockquote 表示段落級(jí)引述內(nèi)容折砸，q 表示行內(nèi)的引述內(nèi)容，cite 表示引述的作品名沙峻。
-
time 標(biāo)簽
<cite>"What is the difference between the Web and the Internet?"</cite>. W3C Help and FAQ. W3C. 2009. Archived from the original on <time datetime="2015-07-09">9 July 2015</time>. Retrieved <time datetime="2015-07-16">16 July 2015</time>. -
figure睦授、figcaption 用于與主文章相關(guān)的照片、圖像等流內(nèi)容
<figure> <img src="https://.....440px-NeXTcube_first_webserver.JPG"/> <figcaption>The NeXT Computer used by Tim Berners-Lee at CERN.</figcaption> </figure> -
<dfn></dfn> 用來包裹被定義的名詞
The terms Internet and World Wide Web are often used without much distinction. However, the two are not the same. The <dfn>Internet</dfn> is a global system of interconnected computer networks. In contrast, the <dfn>World Wide Web</dfn> is a global collection of documents and other resources, linked by hyperlinks and URIs. pre摔寨、code去枷、samp
-
更多
更多標(biāo)簽 CSS的頂層樣式表由兩種規(guī)則組成的規(guī)則列表構(gòu)成，一種是“@規(guī)則”，一種是“普通規(guī)則”
@規(guī)則
@charset
用于提示CSS文件使用的字符編碼方式删顶，它如果被使用竖螃，必須出現(xiàn)在最前面。這個(gè)規(guī)則只在給出語法解析階段前使用逗余，并不影響頁面上的展示效果特咆。
@charset "uft-8"
@import
用于引入一個(gè)CSS文件，除了@charset規(guī)則不會(huì)被引入猎荠，@import可以引入另一個(gè)文件的全部?jī)?nèi)容坚弱。
@import "mystyle.css"
@import url("mystyle.css")
@import [ <url> | <string> ]
[ supports( [ <supports-condition> | <declaration> ] ) ]?
<media-query-list>?
@media
media 就是大名鼎鼎的 media query 使用的規(guī)則了，它能夠?qū)υO(shè)備的類型進(jìn)行一些判斷关摇。在media 的區(qū)塊內(nèi)荒叶，是普通規(guī)則列表。
@media print {
body { font-size: 10pt }
}
@page
page 用于分頁媒體訪問網(wǎng)頁時(shí)的表現(xiàn)設(shè)置输虱，頁面是一種特殊的盒模型結(jié)構(gòu)些楣，除了頁面本身，還可以設(shè)置它周圍的盒宪睹。
@page {
size: 8.5in 11in;
margin: 10%;
@top-left {
content: "Hamlet";
}
@top-right {
content: "Page" counter(page);
}
}
@counter-style
counter-style 產(chǎn)生一種數(shù)據(jù)愁茁，用于定義列表項(xiàng)的表現(xiàn)。
@counter-style triangle {
system: cyclic;
symbols: ;
suffix: " ";
}
@key-frames
keyframes 產(chǎn)生一種數(shù)據(jù)亭病，用于定義動(dòng)畫關(guān)鍵幀鹅很。
@keyframes diagonal-slide {
from {
left: 0;
top: 0;
}
to {
left: 100px;
top: 100px;
}
}
@fontface
fontface 用于定義一種字體，icon font 技術(shù)就是利用這個(gè)特性來實(shí)現(xiàn)的罪帖。
@font-face {
font-family: Gentium;
src: url(http://example.com/fonts/Gentium.woff);
}
p { font-family: Gentium, serif; }
@support
support 檢查環(huán)境的特性促煮，它與media 比較類似。
@namespace
用于跟XML命名空間配合的一個(gè)規(guī)則整袁，表示內(nèi)部的CSS選擇器全都帶上特定命名空間菠齿。
@viewport
用于設(shè)置視口的一些特性，不過兼容性目前不是很好坐昙，多數(shù)時(shí)候被 html 的 meta 代替绳匀。
普通規(guī)則(qualified rule)
* 普通規(guī)則
* 選擇器
* 聲明列表
* 屬性
* 值
* 值的類型
* 函數(shù)
在 CSS Variables 標(biāo)準(zhǔn)中，以雙中劃線開頭的屬性被當(dāng)作變量炸客，與之配合的則是 var 函數(shù)：
:root {
--main-color: #06c;
--accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
color: var(--main-color);
}
CSS 支持一批特定的計(jì)算型函數(shù)：
- calc() 函數(shù)是基本的表達(dá)式計(jì)算疾棵，它支持加減乘除四則運(yùn)算。在針對(duì)維度進(jìn)行計(jì)算時(shí)痹仙，calc() 函數(shù)允許不同單位混合運(yùn)算是尔，這非常的有用。
section {
float: left;
margin: 1em; border: solid 1px;
width: calc(100%/3 - 2*1em - 2*1px);
}
- max() 表示取兩數(shù)中較大的一個(gè)
- min() 表示取兩數(shù)中較小的一個(gè)
- clamp() 則是給一個(gè)值限定一個(gè)范圍蝶溶，超出范圍外則使用范圍的最大或者最小值
- toggle() 函數(shù)在規(guī)則選中多于一個(gè)元素時(shí)生效嗜历，它會(huì)在幾個(gè)值之間來回切換，比如我們要讓一個(gè)列表項(xiàng)的樣式圓點(diǎn)和方點(diǎn)間隔出現(xiàn)抖所，可以使用下面的代碼：
ul { list-style-type: toggle(circle, square); }
- attr() 函數(shù)允許CSS 接受屬性值的控制
