重學(xué)前端

參考:重學(xué)前端

列一份前端知識(shí)架構(gòu)圖

前端知識(shí)架構(gòu)
  1. 用一定的詞法和語法棚菊,表達(dá)一定語義薪鹦,從而操作運(yùn)行時(shí)肺孵。

  2. 運(yùn)行時(shí) = 數(shù)據(jù)結(jié)構(gòu) + 執(zhí)行過程

  3. 程序 = 數(shù)據(jù)結(jié)構(gòu) + 算法走敌。

  4. 標(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)暂论。

  5. 在現(xiàn)代互聯(lián)網(wǎng)產(chǎn)品里,HTML用于描述 "軟件界面" 多過于“富文本”拌禾,而軟件界面里的東西取胎,實(shí)際上幾乎是沒有語義的,譬如:購物車功能湃窍。

錯(cuò)誤地使用語義標(biāo)簽扼菠,會(huì)給機(jī)器閱讀造成混淆摄杂、增加嵌套,給CSS編寫增加重負(fù)擔(dān)循榆。

  1. 以下列出了幾種語義標(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>
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)頁面或者是整站地圖。
  1. abbr 標(biāo)簽表示縮寫碳褒,例如WWW 表示 World Wide Web 的縮寫:

      <abbr title='World Wide Web' >WWW</abbr>
    
  2. HTML中有三個(gè)跟引述相關(guān)的標(biāo)簽 blockquote 表示段落級(jí)引述內(nèi)容折砸,q 表示行內(nèi)的引述內(nèi)容,cite 表示引述的作品名沙峻。

  3. 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>.
    
  4. 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>
    
  5. <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. 
    
  6. pre摔寨、code去枷、samp

  7. 更多


    更多標(biāo)簽
  8. 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 接受屬性值的控制
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末梨州,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子田轧,更是在濱河造成了極大的恐慌暴匠,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件傻粘,死亡現(xiàn)場(chǎng)離奇詭異每窖,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)弦悉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門窒典,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人稽莉,你說我怎么就攤上這事瀑志。” “怎么了污秆?”我有些...
    開封第一講書人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵劈猪,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我良拼,道長(zhǎng)战得,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任庸推,我火速辦了婚禮常侦,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘予弧。我一直安慰自己刮吧,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開白布掖蛤。 她就那樣靜靜地躺著杀捻,像睡著了一般。 火紅的嫁衣襯著肌膚如雪蚓庭。 梳的紋絲不亂的頭發(fā)上致讥,一...
    開封第一講書人閱讀 52,736評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音器赞,去河邊找鬼垢袱。 笑死,一個(gè)胖子當(dāng)著我的面吹牛港柜,可吹牛的內(nèi)容都是我干的请契。 我是一名探鬼主播咳榜,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼爽锥!你這毒婦竟也來了涌韩?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤氯夷,失蹤者是張志新(化名)和其女友劉穎臣樱,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體腮考,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡雇毫,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了踩蔚。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片棚放。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖馅闽,靈堂內(nèi)的尸體忽然破棺而出席吴,到底是詐尸還是另有隱情,我是刑警寧澤捞蛋,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布孝冒,位于F島的核電站,受9級(jí)特大地震影響拟杉,放射性物質(zhì)發(fā)生泄漏庄涡。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一搬设、第九天 我趴在偏房一處隱蔽的房頂上張望穴店。 院中可真熱鬧,春花似錦拿穴、人聲如沸泣洞。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽球凰。三九已至,卻和暖如春腿宰,著一層夾襖步出監(jiān)牢的瞬間呕诉,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工吃度, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留甩挫,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓椿每,卻偏偏與公主長(zhǎng)得像伊者,于是被迫代替她去往敵國(guó)和親英遭。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容