前端分享

時間  2019-12-04
標籤 前端 分享 简体版
原文   原文鏈接

1 前言

1-1 W3C標準

W3C標準，既一系列標準的集合，他的本質是結構標準語言。就像平時使用的HTML,CSS等都要遵照這些標準。咱們這裏只討論W3C網頁標準。根據網頁主要有三部分組成:結構(Structure),表現(Presentation)和行爲(Behavior)。對應的標準也分如下三方面:
  1. 結構化標準語言：HTML,XML,XHML
  2. 表現標準語言: CSS
  3. 行爲標準語言: ECMAScript
爲何要遵循W3C標準?

對於咱們開發者來講，咱們是介於瀏覽器製造商和瀏覽器終端使用者的中間位置。也至關於說是一個接口的位置，也就是說咱們要同時知足瀏覽器製造商和瀏覽器終端使用者的需求，用程序的語言來講就是「轉換器」。也是說咱們要千方百計的讓咱們的頁面、咱們的程序支持全部的瀏覽器，可以知足儘量多多的用戶。javascript

HTML,XML,XHTML三者區別

HTML 指的是超文本標記語言(Hyper Text Markup Language)
  • HTML 不是一種編程語言，而是一種標記語言 (markup language)
  • 標記語言是一套標記標籤 (markup tag)
  • HTML 使用標記標籤來描述網頁
XML 指可擴展標記語言（EXtensible Markup Language）
  • XML 是一種標記語言，很相似 HTML
  • XML 的設計宗旨是傳輸數據，而非顯示數據
  • XML 標籤沒有被預約義。您須要自行定義標籤。
  • XML 被設計爲具備自我描述性。
  • XML 是 W3C 的推薦標準
XHTML 指可擴展超文本標籤語言（EXtensible HyperText Markup Language）。
  • XHTML 的目標是取代 HTML。
  • XHTML 與 HTML 4.01 幾乎是相同的。
  • XHTML 是更嚴格更純淨的 HTML 版本。
  • XHTML 是做爲一種 XML 應用被從新定義的 HTML。
  • XHTML 是一個 W3C 標準。

W3C標準規範

一、 須要聲明（DOCTYPE）

DOCTYPE是Document Type（文檔類型）的簡寫，在頁面中，用來指定頁面所使用的XHTML（或者HTML）的版本。要想製做符合標準的頁 面，一個必不可少的關鍵組成部分就是DOCTYPE聲明。只有肯定了一個正確的DOCTYPE，XHTML裏的標識和CSS才能正常生效。css

二、須要定義語言編碼 (若是忘記定義可能會出現亂碼) 
<meta http-equiv=「Content-Type」 content=「text/html; charset=gb2312」 />
三、JavaScript定義

Js必需要用<script language="javascript" type="text/javascript">來開頭定義，以保證在不支持js的瀏覽器上直接顯示出來。html

四、 CSS定義

CSS必需要用<style type=「text/css」>開頭來定義，爲保證各瀏覽器的兼容性，在寫CSS時請都寫上數量單位，例如：錯誤：.space_10{padding-left:10} 正確：.space_10 {padding-left:10px}前端

五、全部的標記都必須合理嵌套 
<p><b></p></b>必須修改成：<p><b></b></p>
六、更多規範請參考連接 W3C代碼標準規範

W3c代碼標準規範
!DOCTYPE
HTML 元素和文檔類型（Doctype）java

1-2 瀏覽器和內核

瀏覽器最重要的部分是瀏覽器的內核。瀏覽器內核是瀏覽器的核心，也稱「渲染引擎」，用來解釋網頁語法並渲染到網頁上。瀏覽器內核決定了瀏覽器該如何顯示網頁內容以及頁面的格式信息。不一樣的瀏覽器內核對網頁的語法解釋也不一樣，所以網頁開發者須要在不一樣內核的瀏覽器中測試網頁的渲染效果。五大瀏覽器採用的都是單核，而隨着瀏覽器的發展示在也出現了雙內核。像360瀏覽器、QQ瀏覽器都是採用雙內核。web

五大主流瀏覽器以及四大內核

IE瀏覽器

IE是微軟公司旗下瀏覽器，是目國內用戶量最多的瀏覽器。採用的是Trident內核（也稱IE內核）編程

Opera瀏覽器

Opera是挪威Opera Software ASA公司旗下的瀏覽器，最初是本身的Presto內核，2016年奇虎360和崑崙萬維收購了Oprea瀏覽器，今後也丟棄了強大的Presto內核，改用當時Google開源的webkit內核。後來Opera瀏覽器跟隨Google將瀏覽器內核改成Blink內核。Blink只是Webkit的一個分支。瀏覽器

Safari瀏覽器

蘋果公司旗下的瀏覽器。Safari是最先使用webkit內核的瀏覽器，也是如今蘋果默認的瀏覽器。app

Chrome瀏覽器

Chrome瀏覽器是google旗下的瀏覽器，之前是Webkit內核，如今是Blink內核。dom

Firefox瀏覽器

Firefox瀏覽器使Mozilla公司旗下瀏覽器，採用的是Gecko內核，俗稱Firefox內核

其它經常使用瀏覽器和內核

  • 360瀏覽器、獵豹瀏覽器內核：IE+Chrome雙內核；
  • 搜狗、遨遊、QQ瀏覽器內核：Trident（兼容模式）+Webkit（高速模式）；
  • 百度瀏覽器、世界之窗內核：IE內核；
  • 2345瀏覽器：之前是IE內核，如今也是IE+Chrome雙內核 ；

1-3 css瀏覽器前綴兼容性寫法

Vendor prefix—瀏覽器引擎前綴，是一些放在CSS屬性前的小字符串，用來確保這種屬性只在特定的瀏覽器渲染引擎下才能識別和生效。谷歌瀏覽器和 Safari瀏覽器使用的是WebKit渲染引擎，火狐瀏覽器使用的是Gecko引擎，Internet Explorer使用的是Trident引擎，Opera之前使用Presto引擎，後改成WebKit引擎。一種瀏覽器引擎裏通常不實現其它引擎前綴標 識的CSS屬性，但因爲以WebKit爲引擎的移動瀏覽器至關流行，火狐等瀏覽器在其移動版裏也實現了部分WebKit引擎前綴的CSS屬性。

瀏覽器引擎前綴(Vendor Prefix)有哪些

-moz- 火狐等使用Mozilla瀏覽器引擎的瀏覽器
-webkit- Safari, 谷歌瀏覽器等使用Webkit引擎的瀏覽器
-o- Opera瀏覽器(早期)
-ms- Internet Explorer

爲何須要瀏覽器引擎前綴(Vendor Prefix)

這些瀏覽器引擎前綴(Vendor Prefix)主要是各類瀏覽器用來試驗或測試新出現的CSS3屬性特徵。能夠總結爲如下3點：

  • 試驗一些還未成爲標準的的CSS屬性——也許永遠不會成爲標準
  • 對新出現的標準的CSS3屬性特徵作實驗性的實現
  • 對CSS3中一些新屬性作等效語義的個性實現

這些前綴並不是全部都是須要的，但一般你加上這些前綴不會有任何害處——只要記住一條，把不帶前綴的版本放到最後一行：以下代碼

#div{
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -o-border-radius: 10px; 
     border-radius: 10px;
}

有些新的CSS3屬性已經試驗了好久，一些瀏覽器已經對這些屬性再也不使用前綴。Border-radius屬性就是一個很是典型的例子。最新版的瀏覽器都支持不帶前綴的Border-radius屬性寫法。

瀏覽器引擎前綴(vendor-prefix)的用法

當須要使用瀏覽器引擎前綴(vendor-prefix)時，最好是把帶有各類前綴的寫法放在前面，而後把不帶前綴的標準的寫法放到最後。好比：

.myClass {
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    -ms-animation-name: fadeIn;
    animation-name: fadeIn;  /* 不帶前綴的放到最後 */
}
/* 複雜屬性 keyframes */
@-webkit-keyframes fadeIn {
    0% { opacity: 0; } 100% { opacity: 1; }
}
@-moz-keyframes fadeIn {
    0% { opacity: 0; } 100% { opacity: 1; }
}
@-o-keyframes fadeIn {
    0% { opacity: 0; } 100% { opacity: 1; }
}
@-ms-keyframes fadeIn {
    0% { opacity: 0; } 100% { opacity: 1; }
}
/* 不帶前綴的放到最後 */
@keyframes fadeIn {
    0% { opacity: 0; } 100% { opacity: 1; }
}

2 基礎知識點

2-1 CSS知識點

css知識點

2-2 html 知識點

html知識點

2-3 javascript 知識點

javascript知識點

2-4 盒模型

盒模型是css中重要的一個概念，理解了盒模型才能更好地排版，css盒模型有兩種，分別是IE盒模型和標準盒模型(標準W3C盒子模型)，它們對盒子模型的解釋各不相同

標準盒模型

圖片描述

從上圖能夠看到標準盒子模型的範圍包括 margin、border、padding、content，而且 content 部分不包含其餘部分，既元素的寬度爲content的寬度

IE盒模型

圖片描述

從上圖能夠看到 IE 盒子模型的範圍也包括 margin、border、padding、content，和標準盒子模型不一樣的是：IE 盒子模型的 content 部分包含了 border 和 pading。既元素的寬度包括content,border,padding3部分。

盒模型的使用

咱們能夠經過box-sizing屬性來決定瀏覽器以那種模型來解析html,使用方式以下:

圖片描述

* {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

在上圖，咱們看到IE兼容屬性box-sizing必須是8或者更高的版本，其餘瀏覽器均可以自動升級，兼容性不擔憂。

若是咱們不用該屬性，那瀏覽器該選擇哪一種盒模型呢？

其實，瀏覽器選擇哪一個盒模型，主要看瀏覽器處於標準模式（Standards Mode）仍是怪異模式（Quirks Mode）。咱們都記得<!DOCTYPE>聲明吧，這是告訴瀏覽器選擇哪一個版本的HTML，<!DOCTYPE>後面通常有DTD的聲明，若是有DTD的聲明，瀏覽器就是處於標準模式；若是沒有DTD聲明或者HTML4如下的DTD聲明，那瀏覽器按照本身的方式解析代碼，處於怪異模式。
處於標準模式的瀏覽器（IE瀏覽器版本必須是6或者6以上），會選擇標準盒模型解析代碼；處於怪異模式的瀏覽器，則會按照本身的方式去解析代碼，IE6如下則會是選擇IE盒模型，其餘現代的瀏覽器都是採用標準盒模型。
由於IE6如下版本的瀏覽器沒有遵循Web標準，不論頁面開頭有沒有DTD聲明，它都是按照IE盒模型解析代碼的。

2-5 行內元素和塊級元素

行內元素和塊級元素說明

根據CSS規範的規定，每個網頁元素都有一個display屬性，用於肯定該元素的類型，每個元素都有默認的display屬性值，好比div元素，它的默認display屬性值爲「block」，成爲「塊級」元素(block-level)；而span元素的默認display屬性值爲「inline」，稱爲「行內」元素。

行內元素和塊級元素的區別
  • 塊級元素:塊級元素會獨佔一行，其寬度自動填滿其父元素寬度，能夠經過設置高度、寬度、內外邊距等屬性，來調整的這個元素大小。
  • 行內元素：行內元素又稱內聯元素。行內元素不會獨佔一行，相鄰的行內元素會排列到同一行裏，直到一行排不下，纔會換行，其寬度隨元素的內容變化而變化。行內元素設置width,height無效，它是依附於其餘塊級元素存在的。行內元素通常只容納文本或者其餘內聯元素。

3 網頁佈局

3-1 靜態佈局(static layout)

即傳統Web設計，網頁上的全部元素的尺寸一概使用px做爲單位。

佈局特色

無論瀏覽器尺寸具體是多少，網頁佈局始終按照最初寫代碼時的佈局來顯示。常規的pc的網站都是靜態（定寬度）佈局的，也就是設置了min-width，這樣的話，若是小於這個寬度就會出現滾動條，若是大於這個寬度則內容居中外加背景，這種設計常見於pc端。

設計方法

PC：居中佈局，全部樣式使用絕對寬度/高度(px)，設計一個Layout，在屏幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分；
移動設備：另外創建移動網站，單獨設計一個佈局，使用不一樣的域名如wap.或m.。
優勢：這種佈局方式對設計師和CSS編寫者來講都是最簡單的，亦沒有兼容性問題。
缺點：顯而易見，即不能根據用戶的屏幕尺寸作出不一樣的表現。當前，大部分門戶網站、大部分企業的PC宣傳站點都採用了這種佈局方式。固定像素尺寸的網頁是匹配固定像素尺寸顯示器的最簡單辦法。但這種方法不是一種徹底兼容將來網頁的製做方法，咱們須要一些適應未知設備的方法。

3-2 流式佈局（Liquid Layout）

流式佈局（Liquid）的特色（也叫"Fluid") 是頁面元素的寬度按照屏幕分辨率進行適配調整，但總體佈局不變。表明做柵欄系統（網格系統）。
網頁中主要的劃分區域的尺寸使用百分數（搭配min-、max-屬性使用），例如，設置網頁主體的寬度爲80%，min-width爲960px。圖片也做相似處理（width:100%, max-width通常設定爲圖片自己的尺寸，防止被拉伸而失真）。

佈局特色

屏幕分辨率變化時，頁面裏元素的大小會變化而但佈局不變。【這就致使若是屏幕太大或者過小都會致使元素沒法正常顯示】

設計方法
使用%百分比定義寬度，高度大都是用px來固定住，能夠根據可視區域 (viewport) 和父元素的實時尺寸進行調整，儘量的適應各類分辨率。每每配合 max-width/min-width 等屬性控制尺寸流動範圍以避免過大或者太小影響閱讀。
這種佈局方式在Web前端開發的早期歷史上，用來應對不一樣尺寸的PC屏幕（那時屏幕尺寸的差別不會太大），在當今的移動端開發也是經常使用佈局方式，但缺點明顯：主要的問題是若是屏幕尺度跨度太大，那麼在相對其原始設計而言太小或過大的屏幕上不能正常顯示。由於寬度使用%百分比定義，可是高度和文字大小等大都是用px來固定，因此在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，可是高度、文字大小仍是和原來同樣（即，這些東西沒法變得「流式」），顯示很是不協調

3-3 自適應佈局（Adaptive Layout）

自適應佈局的特色是分別爲不一樣的屏幕分辨率定義佈局，即建立多個靜態佈局，每一個靜態佈局對應一個屏幕分辨率範圍。改變屏幕分辨率能夠切換不一樣的靜態局部（頁面元素位置發生改變），但在每一個靜態佈局中，頁面元素不隨窗口大小的調整發生變化。能夠把自適應佈局看做是靜態佈局的一個系列。

佈局特色

屏幕分辨率變化時，頁面裏面元素的位置會變化而大小不會變化。

設計方法

使用 @media 媒體查詢給不一樣尺寸和介質的設備切換不一樣的樣式。在優秀的響應範圍設計下能夠給適配範圍內的設備最好的體驗，在同一個設備下實際仍是固定的佈局。

3-4 響應式佈局（Responsive Layout）

隨着CSS3出現了媒體查詢技術，又出現了響應式設計的概念。響應式設計的目標是確保一個頁面在全部終端上（各類尺寸的PC、手機、手錶、冰箱的Web瀏覽器等等）都能顯示出使人滿意的效果，對CSS編寫者而言，在實現上不拘泥於具體手法，但一般是糅合了流式佈局+彈性佈局，再搭配媒體查詢技術使用。——分別爲不一樣的屏幕分辨率定義佈局，同時，在每一個佈局中，應用流式佈局的理念，即頁面元素寬度隨着窗口調整而自動適配。即：建立多個流體式佈局，分別對應一個屏幕分辨率範圍。能夠把響應式佈局看做是流式佈局和自適應佈局設計理念的融合。響應式幾乎已經成爲優秀頁面佈局的標準。

佈局特色

每一個屏幕分辨率下面會有一個佈局樣式，即元素位置和大小都會變。

設計方法

媒體查詢+流式佈局。一般使用 @media 媒體查詢 和網格系統 (Grid System) 配合相對佈局單位進行佈局，實際上就是綜合響應式、流動等上述技術經過 CSS 給單一網頁不一樣設備返回不一樣樣式的技術統稱。
優勢：適應pc和移動端，若是足夠耐心，效果完美。
缺點：（1）媒體查詢是有限的，也就是能夠枚舉出來的，只能適應主流的寬高。（2）要匹配足夠多的屏幕大小，工做量不小，設計也須要多個版本。
響應式頁面在頭部會加上這一段代碼：

<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="Cache-Control" content="no-transform ">
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程