Web前端基礎學習-1

時間 2019-11-17

標籤 web 前端基礎學習欄目 HTML 简体版

原文原文鏈接

HTML5/CSS簡介css

首先來講一說什麼是HTML5，HTML5能夠認爲是字面上的意義，也就是HTML的第五代產品，固然從另外一個角度來講它是一種新的富客戶端解決方案。
html

HTML5 將成爲 HTML、XHTML 以及 HTML DOM 的新標準。html5

HTML 的上一個版本誕生於 1999 年。自從那之後，Web 世界已經經歷了鉅變。css3

HTML5 仍處於完善之中。然而，大部分現代瀏覽器已經具有了某些 HTML5 支持。git

HTML：超文本標記語言。標記能夠稱爲標籤，節點，元素等。github

HTML的核心是它的語義，也就是標籤自己的含義。咱們再寫結構的時候只須要注重標籤的語義而無需考慮標籤的樣式。web

再寫頁面的時候，HTML、CSS、JS各有各的用處，HTML負責網頁的結構，CSS負責網頁的美化渲染，JavaScript負責用戶與網頁的交互。瀏覽器

寫頁面以前，主體結構必定要了解。安全

CSSpost

層疊樣式表，它的核心是層疊，咱們看到的最終效果每每不是一個CSS就能搞定的，它都是不少的CSS樣式疊加才造成了用戶最終看到的界面。

CSS的使用方式：

內聯樣式：直接寫在行內，以style屬性將樣式直接寫在元素上。

內部樣式：寫在<style>標籤中的樣式，經過選擇器選擇頁面上的元素進行樣式的添加。

外部樣式：寫在CSS文件中，經過link標籤進行調用。

三種方式中，內聯樣式的優先級是最高的，另外兩隻優先級相同。寫在頁面中，優先級相同則寫在後面的會覆蓋前面的樣式。（建議使用外部樣式，寫頁面的時候要儘可能作到結構與樣式相分離，也就是頁面結構，CSS樣式最好不要放到一塊兒）

網頁的主體結構

<!DOCTYPE html> 文檔聲明頭，主要是用來聲明代碼是H5的，若是不寫的話，代碼會被瀏覽器降級處理。

<html> 網頁的所有

<head> 用來寫對當前網頁的一些設置信息，這些內容是用戶看不到的

<body> 網頁的主體，再頁面上顯示的內容基本上都在這裏

HTML5 兼容性

支持Html5的瀏覽器包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等；國內的遨遊瀏覽器（Maxthon），以及基於IE或Chromium（Chrome的工程版或稱實驗版）所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹瀏覽器等國產瀏覽器一樣具有支持HTML5的能力。

須要注意的是，雖然不少瀏覽器目前已經可以支持HTML5，可是顯示效果仍舊存在差別性。這時，咱們若是從樣式的角度出發，能夠採用下面的幾種css方案。

CSS Reset

每種瀏覽器都有一套默認的樣式表，即user agent stylesheet，網頁在沒有指定的樣式時，按瀏覽器內置的樣式表來渲染。這是合理的，像word中也有一些預留樣式，可讓咱們的排版更美觀整齊。不一樣瀏覽器甚至同一瀏覽器不一樣版本的默認樣式是不一樣的。但這樣會有不少兼容問題，CSSReset能夠將全部瀏覽器默認樣式設置成同樣。

CSS Reset 下載地址: https://meyerweb.com/eric/tools/css/reset/

Normalize(號稱是CSS reset的替代方案，保留了一些內置的樣式，並非清除全部)。

下載地址:https://necolas.github.io/normalize.css/

CSS Hack

因爲不一樣廠商的流覽器或某瀏覽器的不一樣版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），對CSS的支持、解析不同，致使在不一樣瀏覽器的環境中呈現出不一致的頁面展示效果。這時，咱們爲了得到統一的頁面效果，就須要針對不一樣的瀏覽器或不一樣版本寫特定的CSS樣式，咱們把這個針對不一樣的瀏覽器/不一樣版本寫相應的CSS code的過程，叫作CSS hack!

分類:

CSS Hack大體有3種表現形式，CSS屬性前綴法、選擇器前綴法以及IE條件註釋法（即HTML頭部引用if IE）Hack，實際項目中CSS Hack大部分是針對IE瀏覽器不一樣版本之間的表現差別而引入的。

屬性前綴法(即類內部Hack)：例如 IE6能識別下劃線"_"和星號" * "，IE7能識別星號" * "，但不能識別下劃線"_"，IE6~IE10都認識"\9"，但firefox前述三個都不能認識。
選擇器前綴法(即選擇器Hack)：例如IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。
IE條件註釋法(即HTML條件註釋Hack)：針對全部IE(注：IE10+已經再也不支持條件註釋)：，針對IE6及如下版本：。這類Hack不只對CSS生效，對寫在判斷語句裏面的全部代碼都會生效。

關於IE的條件註釋能夠參考https://www.cnblogs.com/liujunhang/articles/10667109.html.

CSS hack書寫順序，通常是將適用範圍廣、被識別能力強的CSS定義在前面。

屬性前綴法:

屬性前綴法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識別的hack前綴，以達到預期的頁面展示效果。

IE瀏覽器各版本 CSS hack 對照表

hack	寫法	實例	IE6(S)	IE6(Q)	IE7(S)	IE7(Q)	IE8(S)	IE8(Q)	IE9(S)	IE9(Q)	IE10(S)	IE10(Q)
*	*color	青色	Y	Y	Y	Y	N	Y	N	Y	N	Y
+	+color	綠色	Y	Y	Y	Y	N	Y	N	Y	N	Y
-	-color	黃色	Y	Y	N	N	N	N	N	N	N	N
_	_color	藍色	Y	Y	N	Y	N	Y	N	Y	N	N
#	#color	紫色	Y	Y	Y	Y	N	Y	N	Y	N	Y
\0	color:red\0	紅色	N	N	N	N	Y	N	Y	N	Y	N
\9\0	color:red\9\0	粉色	N	N	N	N	N	N	Y	N	Y	N
!important	color:blue !important;color:green;	棕色	N	N	Y	N	Y	N	Y	N	Y	Y

說明：在標準模式中

「-″減號是IE6專有的hack
「\9″ IE6/IE7/IE8/IE9/IE10都生效
「\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
「\9\0″ 只對IE9/IE10生效，是IE9/10的hack

選擇器前綴法:

選擇器前綴法是針對一些頁面表現不一致或者須要特殊對待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進行hack。

目前最多見的是

*html *前綴只對IE6生效 *+html *+前綴只對IE7生效 @media screen\9{...}只對IE6/7生效 @media \0screen {body { background: red; }}只對IE8有效 @media \0screen\,screen\9{body { background: blue; }}只對IE6/7/8有效 @media screen\0 {body { background: green; }} 只對IE8/9/10有效 @media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效 等等

CSS Hack利弊：

通常狀況下，咱們儘可能避免使用CSS hack，可是有些狀況爲了顧及用戶體驗實現向下兼容，不得已才使用hack。好比因爲IE8及如下版本不支持CSS3,而咱們的項目頁面使用了大量CSS3新屬性在IE9/Firefox/Chrome下正常渲染，這種狀況下若是不使用css3pie或htc或條件註釋等方法時,可能就得讓IE8-的專屬hack出馬了。使用hack雖然對頁面表現的一致性有好處，但過多的濫用會形成html文檔混亂不堪，增長管理和維護的負擔。

優雅降級和漸進加強: