HTML（網頁）
Web領域的一些基本概念。
WEB
Web（World Wide Web）叫全球廣域網，俗稱萬維網（www）。
W3C
W3C（World Wide Web Consortium）叫萬維網聯盟，是國際最著名的標准化組織，制定了web標准。
WEB標准
一個網頁包含了html元素 Css JavaScript，Html元素決定了網頁結構，Css進行了修飾美化，JavaScript控制了交互行為和動態效果。
web標准包含了下面三個方面：
- 結構標准（HTML）：用於對網頁元素進行整理和分類。
- 表現標准（CSS）：用於設置網頁元素的版式、顏色、大小等外觀樣式。
- 行為標准（JavaScript）：用於定義網頁的交互和行為。
HTML定義
Html不是一種編程語言，而是描述性的標記語言，主要作用是定義內容的結構。
2014年10月萬維網聯盟（W3C）完成了HTML5標准制定，是目前最新的HTM版本。
HTML5的出世，標志着web進入一個富客戶端（具有很強的交互性和體驗的客戶端程序）時代，像APP網頁，小程序都是HTML5的應用場景。
Html5新特性：
- 用於繪畫的 canvas 元素。
- 用於媒介回放的 video 和 audio 元素。
- 對本地離線存儲的更好的支持。
- 新的特殊內容元素，比如 article、footer、header、nav、section。
- 新的表單控件，比如 calendar、date、time、email、url、search。
頁面基本結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!--字符集-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="Author" content="">
<meta name="Keywords" content="關鍵詞" />
<meta name="Description" content="頁面描述" />
<title>頁面標題</title>
</head>
<body>
</body>
</html>
關於viewport
viewport用戶網頁的可視區域，一個針對移動網頁優化的頁面 viewport meta 標簽如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- width：控制 viewport 的大小，可以指定的一個值，如 600，或者特殊的值，如 device-width 為設備的寬度（單位為縮放為 100% 時的 CSS 的像素）。
- height：和 width 相對應，指定高度。
- initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。
- maximum-scale：允許用戶縮放到的最大比例。
- minimum-scale：允許用戶縮放到的最小比例。
- user-scalable：用戶是否可以手動縮放。
常見元素
head區域元素：meta title style link script base。
body區域元素：
- div、section、article、aside、header、footer
- p
- span、em、strong
- table、thead、tbody、tr、td
- ul、ol、dl、dt、dd
- a
- form、input、select、textarea、button
元素分類
塊級元素：每個元素都是獨占一行
- address – 地址
- blockquote – 塊引用
- center – 舉中對齊塊
- dir – 目錄列表
- div – 常用塊級容易，也是css layout的主要標簽
- dl – 定義列表
- fieldset – form控制組
- form – 交互表單
- h1-h6 – 標題
- hr – 水平分隔線
- isindex – input prompt
- menu – 菜單列表
- noframes – frames可選內容，（對於不支持frame的瀏覽器顯示此區塊內容）
- noscript – ）可選腳本內容（對於不支持script的瀏覽器顯示此內容）
- ol – 排序表單
- p – 段落
- pre – 格式化文本
- table – 表格
- ul – 非排序列表
行內元素：元素在同一行水平排列
- a – 錨點
- abbr – 縮寫
- acronym – 首字
- b – 粗體
- big – 大字體
- br – 換行
- em – 強調
- font – 字體設定(不推薦)
- i – 斜體
- img – 圖片
- input – 輸入框
- label – 表格標簽
- s – 中划線(不推薦)
- select – 項目選擇
- small – 小字體文本
- span – 常用內聯容器，定義文本內區塊
- strike – 中划線
- strong – 粗體強調
- sub – 下標
- sup – 上標
- textarea – 多行文本輸入框
- tt – 電傳文本
- u – 下划線
- var – 定義變量
inline-block：元素可以排列在同一行顯示，並且可以設置一些塊元素屬性
通過Css：display:inline-block 改變元素。
元素默認樣式
很多元素都自帶了默認樣式，不同瀏覽器下默認樣式表現不一致，為了統一或者滿足一些需求我們需求將所有默認樣式清空，這種處理方式又稱為 Css Reset，比如：
*{
margin: 0;
padding: 0;
}
另外一種方案使用normalize.css，它將不同瀏覽器下的默認樣式進行了統一，
CSS（層疊樣式表）
Css的單位
html中的單位是像素px
絕對單位
- in：英寸，1in = 2.54cm = 96px
- pc：皮卡，1皮卡 = 1/16英寸
- pt：點，1點 = 1/72英寸
- px：像素，1點 = 1/96英寸
相對單位
- em：font-size中相對於父元素的字體大小，在元素屬性中使用是相對於自身字體大小
- rem：根元素的字體大小，在元素屬性中使用是相對於根元素字體大小
- 1h：元素的line-height
- vw：視窗寬度的1%
- vh：視窗高度的1%
- vmin：視窗較小尺寸的1%
- vmax：視圖大尺寸的1%
字體屬性
屬性：字體、行高、顏色、大小、背景、邊框、滾動、換行、修飾屬性（粗體、斜體、下划線）
p{
font-size: 20px; /*字體大小*/
line-height: 30px; /*行高*/
font-family: PingFang SC; /*字體類型：顯示PingFang SC，沒有就顯示默認*/
font-style: italic ; /*italic表示斜體，normal表示不傾斜*/
font-weight: bold; /*粗體或寫（400｜500｜600）*/
font-variant: small-caps; /*小寫變大寫*/
}
行高（line-height）
一般約定行高、字號都是偶數，這樣保證它們的差一定偶數除2得到整數，如下圖所示：
文本垂直居中
對於單行文本可以設置行高 = 盒子高度。
對於多行元素的垂直對齊，我們可以使用vertical-align: middle屬性，不過vertical-align 僅適用inline、inline-block 和 table-cell 元素。
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/* 指定長度值 */
vertical-align: 10em;
vertical-align: 4px;
/* 使用百分比 */
vertical-align: 20%;
/* 全局值 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: unset;
文本屬性
letter-spacing: 0.5em ;單個字母之間的間距。word-spacing: 1em;單詞之間的間距。text-decoration: none;none 去掉下划線、underline 下划線、line-through 中划線、overline 上划線。color:red;字體顏色。text-align: center;文字對齊方式，屬性值可以是：left、right、center、justify。text-transform: lowercase;uppercase（大寫）、lowercase（小寫）capitalize（首字母大寫）。text-indent:10px;文本首行縮進。text-shadow:2px 2px #ff0000;文字陰影效果。white-space: normal;設置元素空白處理，normal，nowrap，break-spaces。
Overflow屬性
內容溢出處理
visible：默認值，多余的內容會全部顯示出來。hidden：超過元素的內容隱藏。auto：內容超出顯示滾動條。scroll：Windows總是顯示滾動條。Mac和auto屬性相同。
濾鏡
filter:gray()
背景屬性
background-color:#fff;設置背景顏色。background-image:url(img.png);設置圖像為背景。background-repeat: no-repeat;no-repeat不要平鋪，repeat-x橫向平鋪；repeat-y縱向平鋪。background-position:center top;設置背景圖片在容器的位置，top，bottom，left，right，center。background-attachment:scroll;設置背景圖片隨滾動條移動，scroll（跟隨滾動），fixed（固定）。background-origin:border-box;css3，border-box（背景相對於邊框框定位），padding-box（背景相對於填充框定位），content-box（背景相對於內容框定位）。background-clip:border-box;css3，背景裁切。background-size:cover;css3，調整尺寸，- contain（在不裁剪或拉伸圖像的情況下，在其容器內盡可能大地縮放圖像），
- cover（盡可能大地縮放圖像以填充容器，必要時拉伸圖像。），
- auto（在相應的方向上縮放背景圖像，以保持其固有比例。）。
優先級
理解優先級很重要，有助於我們排查一些問題。瀏覽器將優先級分為兩部分：HTML的行內樣式和選擇器的樣式。
行內樣式
行內樣式是直接作用在元素，它的優先級高於選擇器樣式，使用！important可以提高樣式表的優先級。
<div style="font-size:16px">
</div>
選擇器樣式
<style type="text/css">
p{
font-size: 16px;
}
</style>
<link rel="stylesheet" href="style/app.css">
優先級規則如下：
- 如果選擇器的ID數量最多的勝出。
- 如果ID數量一致，那么擁有最多類的選擇器勝出。
- 如果以上兩次比較都一致，那么擁有最多標簽名的選擇器勝出。
我們通過下圖這種標記方式，就可以判斷出選擇器的優先級。
兩條經驗法則
- 盡量不要使用ID選擇器，因為它會大幅提升優先級。當需要覆蓋這個選擇器時，通常找不到另一個有意義的ID，於是就需要復制原來的選擇器加上另一個類來讓它區別於想要覆蓋的選擇器。
- 不要使用！important。它比ID更難覆蓋，一旦用了它，想要覆蓋原先的聲明，就需要再加上一個！important，而且依然要處理優先級的問題。
基礎選擇器
- 類型或標簽選擇器，匹配目標元素的標簽名，如 ：p，input[type=text]，優先級（0，0，1）。
- 類選擇器，匹配class屬性中有指定類名的元素，如：.box，優先級（0，1，0）。
- ID選擇器，匹配擁有指定ID屬性的元素，如：#id， 優先級（1，0，0）。
- 通用選擇器（*），匹配所有元素 ，優先級（0，0，0）。
組合選擇器
由多個基礎選擇器組合成的復雜選擇器。
- 后代組合器（單個空格（
- 子組合器（>），匹配的元素是直接后代，.parent > .child。
- 相鄰兄弟組合器（+），匹配的元素緊跟在后面其它元素后面，div + p。
- 通用兄弟組合器（~），匹配所有跟隨在指定元素之后的兄弟元素，它不會選中目標元素之前的兄弟元素，li.active ~ li。
復合選擇器
多個基礎選擇器連起來（中間沒有空格）組成一個復合選擇器（如：ul.nav）。復合選擇器選中的元素將匹配其全部基礎選擇器，.box.nav 可以選中 class="box nav" ，但是不能選中 class="box"。
偽類選擇器
用於選中某種特定狀態的元素，優先級（0，1，0）。
- :first-child——匹配的元素是其父元素的第一個子元素。
- :last-child——匹配的元素是其父元素的最后一個子元素。
- :only-child——匹配的元素是其父元素的唯一一個子元素（沒有兄弟元素）。
- :nth-child(an+b)——匹配的元素在兄弟元素中間有特定的位置。公式an+b里面的a和b是整數，該公式指定要選中哪個元素。要了解一個公式的工作原理，請從0開始代入n的所有整數值。公式的計算結果指定了目標元素的位置。下表給出了一些例子。
-
:nth-last-child(an+b)——類似於：nth-child()，但不是從第一個元素往后數，而是從最后一個元素往前數。括號內的公式與：nth-child()里的公式的規則相同。
-
:first-of-type——類似於：first-child，但不是根據在全部子元素中的位置查找元素，而是根據擁有相同標簽名的子元素中的數字順序查找第一個元素。
-
:last-of-type——匹配每種類型的最后一個子元素。
-
:only-of-type——該選擇器匹配的元素是滿足該類型的唯一一個子元素。
-
:nth-of-type(an+b)——根據目標元素在特定類型下的數字順序以及特定公式選擇元素，類似於：nth-child。
-
:nth-last-of-type(an+b)——根據元素類型以及特定公式選擇元素，從其中最后一個元素往前算，類似於：nth-last-child。
-
:not(
<selector>)——匹配的元素不匹配括號內的選擇器。括號內的選擇器必須是基礎選擇器，它只能指定元素本身，無法用於排除祖先元素，同時不允許包含另一個排除選擇器。 -
:focus——匹配通過鼠標點擊、觸摸屏幕或者按Tab鍵導航而獲得焦點的元素。
-
:hover——匹配鼠標指針正懸停在其上方的元素。
-
:root——匹配文檔根元素。對HTML來說，這是html元素，但是CSS還可以應用到XML或者類似於XML的文檔上，比如SVG。在這些情況下，該選擇器的選擇范圍更廣。還有一些表單域相關的偽類選擇器。
-
:disabled——匹配已禁用的元素，包括input、select以及button元素。
-
:enabled——匹配已啟用的元素，即那些能夠被激活或者接受焦點的元素。
-
:checked——匹配已經針對選定的復選框、單選按鈕或選擇框選項。
-
:invalid——根據輸入類型中的定義，匹配有非法輸入值的元素。例如，當<inputtype="email">的值不是一個合法的郵箱地址時，該元素會被匹配。
偽元素選擇器
偽元素選擇器可以向HTML標記中未定義的地方插入內容，優先級（0，0，1）。
- ::before——創建一個偽元素，使其成為匹配元素的第一個子元素。該元素默認是行內元素，可用於插入文字、圖片或其他形狀。必須指定content屬性才能讓元素出現，如：.nav::before。
- ::after——創建一個偽元素，使其成為匹配元素的最后一個子元素。該元素默認是行內元素，可用於插入文字、圖片或其他形狀。必須指定content屬性才能讓元素出現，如：.nav::after。
- ::first-letter——用於指定匹配元素的第一個文本字符的樣式，如：h1::first-letter。
- ::first-line——用於指定匹配元素的第一行文本的樣式。
- ::selection——用於指定用戶使用鼠標高亮選擇的任意文本的樣式。通常用於改變選中文本的background-color。只有少數屬性可以使用，包括color、background-color、cursor、text-decoration。
屬性選擇器
屬性選擇器用於根據HTML屬性進行匹配元素，優先級（0，1，0）。
- [attr]——匹配的元素擁有指定屬性attr，無論屬性值是什么，如：input[disabled]。
- [attr="value"]——匹配的元素擁有指定屬性attr，且屬性值等於指定的字符串值，如：input[type="radio"]。
- [attr^="value"] ——“開頭”屬性選擇器。該選擇器匹配的元素擁有指定屬性attr，且屬性值的開頭是指定的字符串值，例如：a[href^="https"]。
- [attr＊="value"]——“包含”屬性選擇器。該選擇器匹配的元素擁有指定屬性attr，且屬性值包含指定的字符串值，如：[class＊="sprite-"]。
- [attr~="value"]——“空格分隔的列表”屬性選擇器。該選擇器匹配的元素擁有指定屬性attr，且屬性值是一個空格分隔的值列表，列表中的某個值等於指定的字符串值，如：a[rel="author"]。
- [attr|="value"]——匹配的元素擁有指定屬性attr，且屬性值要么等於指定的字符串值，要么以該字符串開頭且緊跟着一個連字符（-）。
小結
本文要點回顧，歡迎留言交流。
- Web中的一些基本概念介紹。
- Html頁面結構，元素分類。
- Css優先級。
- Css選擇器，（基礎選擇器，組合選擇器，復合選擇器，偽類選擇器，偽元素選擇器，屬性選擇器）。