入坑前須要瞭解的知識點

可以說出網頁的基本組成

前端的工做是開發網頁，那什麼是網頁呢？
- 網站是指的因特網上根據必定規則，使用HTML等製做的，用於展現特定內容相關的網頁集合。
- 網頁是網站中的一頁，一般是HTML格式的文件，它要經過瀏覽器來閱讀。
- 網頁是構成網站的基本元素，它一般由圖片、連接、文字、聲音、視頻等元素組成，一般咱們看到的網頁常以.htm或.html後綴結尾的文件,所以將其俗稱爲HTML文件。
什麼是HTML？
- HTML指的是超文本語言，他是用來描述網頁的一種語言
- HTML不是一種編程語言，而是一種標記語言
- 標記語言是一套標記標籤
- 所謂的超文本有兩層含義
  - 它能夠加入圖片、聲音、視頻、動畫、多媒體等內容（超越了文本限制）
  - 它能夠從一個文件跳轉到另外一個文件，與世界各地主機的文件連接
網頁的造成?
- 網頁是由網頁元素組成的，這些元素是利用HTML標籤描述出來的，而後經過瀏覽器解析來顯示給用戶。
網頁總結
- 網頁是由圖片、視頻、文本、音頻等元素組成的，其實就是一個HTML文件
- 網頁生成製做，有前端人員進行書寫HTML文件，而後用瀏覽器打開解析渲染，最終咱們就能看見網頁了。

可以說出經常使用的瀏覽器

瀏覽器是網頁顯示、運行的平臺，經常使用的瀏覽器有IE、火狐（Firefox）、谷歌(Chrome)、Safari和Poera，平稱五大瀏覽器。
瀏覽器內核（渲染引擎）：負責網頁內容、整理訊息、計算網頁顯示方式並顯示網頁。

瀏覽器	內核	備註
IE	Trident	IE、百度
firefox	Gecko	火狐瀏覽器內核
Safari	Webkit	蘋果瀏覽器內核
chrome/Opera	Blink	谷歌和跑歐朋瀏覽器內核，其實Blink是Webkit的分支

可以說出Web標準的三大組成部分

Web標準是由W3C組織和其餘標準化組織制定的一系列標準的集合，W3C（萬維網聯盟）是國際最著名的標準化組織。

爲何須要Web標準？
- 瀏覽器不一樣，他們顯示頁面或者排版就會有些許差別。開發者經常須要爲多版本的開發而艱苦的工做。
- 遵頊Web標準除了可讓不一樣的開發人員寫出的頁面更加標準，更統一外，還有一下的優勢。
  - 讓Web的發展前景變得更廣闊
  - 內容能被更普遍的設備訪問
  - 更容易被搜索引擎搜索
  - 減低網站流量費用
  - 使網站更容易維護
  - 提升頁面的瀏覽速度
Web標準的構成。
- 主要包括結構、表現和行爲三個方面。

標準	說明
結構	結構用於對網頁元素進行整理和分類，現階段主要學的是HTML
表現	表現用於設置網頁元素的版式、顏色、字體等外觀樣式，主要是指css
行爲	行爲是指網頁模型的定義及交互的編寫，現階段主要學的是JavaScript

HTML標籤

說出HTML標籤的書寫注意規範

HTML的語法規範

基本語法概述
- HTML標籤是由尖括號包圍的關鍵詞，例如<html>
- HTML一般是成對出現的，例如<html></html>,咱們稱爲雙標籤。標籤中的第一個標籤咱們稱爲開始標籤，第二標籤是結束標籤。
- 有些特殊的標籤必須是單標籤（極少數狀況下），例如<br />，咱們稱爲單標籤。

標籤的關係

雙標籤的關係能夠分爲包含關係和並列關係。

包含關係
<head>
    <title></title>
</head>
並列關係
<p></p>
<div></div>
複製代碼

HTML基本結構標籤

第一個HTML網頁
- 每個網頁都會有一個基本的結構標籤（也成爲骨架標籤），頁面內容也是在這些基本標籤上書寫，HTML頁面也稱爲HTML文檔
```
骨架標籤
<html>
    <head>
        <title>標題</title>
    </head>
    <body>
        存放內容
    </body>
<html/>
複製代碼
```
- html是頁面中最大的標籤，咱們稱爲跟標籤
- 文檔頭部，注意在head中咱們必需要設置的標籤是title標籤
- 文檔的標題，讓頁面有一個屬於本身的網頁標籤
- 文檔主體，元素包含文檔的全部內容，頁面內容基本都是放在body裏面。

HTML經常使用標籤

文檔類型聲明標籤
- <!DOCTYPE html>文檔類型聲明標籤，做用就是告訴他們瀏覽器使用哪一種HTML版原本顯示網頁。這句話的意思是，當前頁面採起的是HTML的頁面來顯示的。
- <!DOCTYPE>聲明位於文檔中最前面的位置，處於html標籤以前。
- <!DOCTYPE>不是一個HTML標籤，它只是文檔類型聲明標籤。
<html lang = en >,lang用來定義當前文檔顯示的語言
- en定義語言種類爲英文
- zh-CN定義語言種類爲中文
- fr定義語言種類爲法語
- 簡單來講就是en爲英文文檔，zh-CN就是中文文檔，可是這兩個並不影響顯示英文或者中文，這個屬性對瀏覽器是有做用的，翻譯功能的切換。
<meta chartset = 'UTF-8' />字符集，字符集是多個字符的集合，以便計算機可以識別和存儲各種文字，在head標籤內，能夠經過meta標籤的chartset屬性來規定HTML文檔應該使用哪一種字符編碼。
- chartset經常使用的值有：GB2312（簡體中文）、BIG5（繁體中文）、GBK（簡繁體）和UTF-8，其中UTF-8也被稱爲萬國碼，基本包含了全世界全部國家須要用到的字符。
- meta標籤規定的字符集是必需要寫的，不然可能引發亂碼的狀況，通常狀況下統一使用UTF-8，儘可能攜程標準的UTF-8，不要寫成utf-8或UTF8
標題標籤<h1>-<h6>
段落標籤和換行標籤
- 在網頁中，要把文字有條理的顯示出來，就須要將這些文字分段顯示。在HTML標籤中，
  標籤用於定義段落，它能夠將網頁分紅若干個段落。css
- 若須要文本強制換行顯示，可使用換行標籤
文本格式化標籤
- 在網頁中，有時須要爲文本設置粗體、斜體和下劃線等效果，使文本以特殊的方式顯示。

語義	標籤	說明
加粗	`<strong></strong>`或`<b></b>`	推薦使用`<strong>`標籤，語義更強烈
傾斜	`<em></em>或<i></i>`	推薦使用`<em>`，語義更強烈
刪除線	`<del></del>`或`<s></s>`	推薦使用`<del>`,語義更強烈
下劃線	`<ins></ins>或<u><u>`	推薦使用`<ins>`,語義更強烈

<div>和<span>標籤 ,<div>和<span>是沒有語義的，它們就是一個盒子，用來裝內容的。
圖像標籤介紹
- 標籤介紹<img src='圖像路徑URL' />

屬性	屬性值	說明
src	圖片路徑	必須屬性，圖像路徑
alt	文本	在圖像不能成功加載時，顯示
title	文本	提示文本，鼠標移到圖片上時，顯示的文字
width	像素	設置圖像的寬度
height	像素	設置圖像的高度
border	像素	設置圖像的邊框線的粗細

超連接<a />標籤，做用是從一個頁面到另外一個頁面，既能夠跳轉外部連接，也能夠跳轉至內部連接，例如，兩個屬性的做用以下
- 連接分類
  - 外部連接<a href="跳轉目標url" target="目標窗口的彈出方式"></a>
  - 內部連接<a herf="index.html">跳至首頁</a>
  - 空鏈接<a herf="#">空連接</a>
  - 下載連接<a herf="img.zip">下載</a>若是href裏面地址是一個文件或壓縮包則會下載這個文件
  - 網頁元素的連接<a herf="http://www.baidu.com"><img src="img.png" /></a>點擊這個圖片元素就會跳轉到百度首頁，文本、圖片、視頻、音頻等均可以加
  - 錨點連接，點擊咱們的連接，能夠快速定位到頁面中的某一個位置。用法：第一步，在連接href中設置屬性值爲#+名字，例如<a href="#one">第一季</a>;第二步，找到目標位置標籤，在裏面添加一個id屬性= 剛剛設置的名字，如<h3 id='two'>第二季介紹</h3>

屬性	做用
href	用於超連接目標的url，必須屬性
target	用於指定連接頁面的打開方式，其中_self爲默認值，_blank爲在新窗口中打開

特殊字符

在HTML頁面中，一些特俗的符號很難或者不方便直接使用，此時咱們就可使用下面的字符來替代

特殊符號	描述	字符代碼
	空格符	` `
<	小於號	`<`
>	大於號	`>`
&	和號	`&`
￥	人民幣	`¥`
°	攝氏度	`°`
×	乘號	`×`
÷	除號	`÷`
²	平方2上標	`²`
³	立方3上標	`³`
©	版權	`&copr;`
®	註冊商標	`®`

表格標籤

表格的做用；主要用於顯示、展現數據；它可讓數據展現的很是規整。
表格的基本語法

<table>
    <thead>
          <tr>
                <th></th>
           </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>
複製代碼

<table></table>用於定義表格的標籤;爲了更好的表示表格的語義化，能夠將表格分爲表格頭部和表格主體兩大部分。<thead>表示表格頭部部分，<tbody>表明表格主體部分；<tr></tr>行標籤；<th></th>標題標籤,<td></td>單元格的標籤
經常使用的表格屬性

屬性名	屬性值	描述
align	left、right、center	規定表格相對周圍元素的對齊方式
border	一、""	規定表格是否有邊框，默認爲""，表示沒有邊框
width	像素或者百分比	規定表格的寬度
cellpadding	像素值	規定單元格邊緣border和內容之間的距離，默認是1像素
cellspacing	像素值	規定單元格之間的距離，默認是2像素
height	像素	規定單元格的高度

合併表格的單元格
- 合併表格的方式
  - 跨行合併:rowspan = "合併行單元格的個數"
  - 跨列合併:colspan= "合併列的單元格個數"

列表標籤

無序列表<ul><li></li></ul>
有序列表<ol><li></li></ol>
自定義列表

<dl>
    <dt>名詞</dt>
    <dd>名詞解釋</dd>
</dl>
複製代碼

在HTML標籤中<dl>標籤用於定義描述列表或（定義列表）,該標籤會與<dt>(定義項目/名字)和<dd>（描述每個項目/名字）一塊兒使用。
列表總結

標籤名	定義	說明
`<ul></ul>`	無序標籤	裏面只能包含li，沒有順序，使用較多，li裏能夠包含任何標籤
`<ol></ol>`	有序列表	裏面只能包含li，有順序，使用相對較少，li裏面能夠包含任何標籤
`<dl></dl>`	自定義列表	裏面只能包含dt和dd，dt和dd裏面能夠包含任何標籤

表單標籤

表單標籤的目的是爲了收集用戶的信息，在HTML中，一個完整的表單一般由表單域、表單控件(也成爲表單元素)和提示信息3個部分組成。

在HTML中，<form>標籤會定義表單域，以實現用戶信息的收集和傳遞。<form>表單會把它範圍內的表單元素信息提交給服務器。

<form action="utl地址" method="提交方式" name="表單域名稱">
    各類表單控件
</form>
複製代碼

表單經常使用屬性以下

屬性	屬性值	做用
action	url地址	用於指定接受並處理表單數據的服務器程序的url地址
method	get/post	用於設置表單數據的提交方式，其值爲get或者post
name	名稱	用於指定表單的名稱，以區分同一個頁面中的多個表單域

表單控件（表單元素）
- input輸入表單元素，用於手機用戶信息，其中包含了type屬性，輸入不一樣的字段能夠擁有不少形式的控件類型（能夠是文本輸入框、複選框、單選按鈕、按鈕）；
  - type屬性的屬性值以下

屬性值	描述
button	定義能夠點擊的按鈕
checkbox	定義複選框
file	定義輸入字段和瀏覽按鈕，供文件上傳
hidden	定義隱藏的輸入字段
image	定義圖像形式的提交按鈕
password	定義密碼字段，該字段中的字符被掩碼
radio	定義單選按鈕
reset	定義重置按鈕。重置按鈕會清除表單中的全部數據
submit	定義提交按鈕，提交按鈕會把表單數據提交到服務器
text	定義單行的輸入字段，用戶能夠在其中輸入字段

input標籤中的經常使用屬性

屬性	屬性值	描述
name	由用戶定義	定義input元素的名稱，在定義單選按鈕和複選框時，必須給input表單控件添加同樣的name值
value	由用戶定義	規定input元素的值
checked	checked	規定input元素首次加載時應被選中
maxlength	正整數	規定輸入字段中的字符的最大長度

<lable>標籤爲input元素定義標註（標籤）;當點擊lable標籤時，input標籤鼠標會自動聚焦；語法以下

<label for="sex">男</label>
<input id="sex" type="radio" name="sex" />
核心：input中的id屬性值等於for屬性值。
複製代碼

select下拉表單元素，語法以下
- select中必須包含至少一個option標籤
- option標籤中的selected屬性 = "selected"時，表示當前項默認選中

<form>
<select>
    <option selected="selected" value="one">選項一</option>
    <option value="two">選項二</option>
</select>
<form>
//選中選項一時，返回值是one，選中選項二時，返回值是two
複製代碼

textarea表單元素,用於輸入較多的多行文本。語法以下

<form>
    <textare>
        文本
    </textarea>
</form>
複製代碼

相對路徑的三種形式

路徑介紹

相對路徑	符號	說明
同一級路徑		圖像文件位於HTML文件同一級
下一級路徑	/	圖像位於HTML文件的下一級
上一級路徑	../	圖像位於HTML文件的上一級

絕對路徑：是指目錄下的絕對路徑，直接到達目標位置，一般是從盤符開始的路徑，例如，"D:\web\logo.png"或完整的網絡地址，"www.baidu.com/images/logo…"

CSS層疊樣式表

css的簡介

css是層疊樣式表的簡稱，主要使用場景就是美化網頁、頁面佈局的，css是一種標記語言，主要用於設置HTML頁面中的文本內容（字體、大小、對齊方式）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的佈局和外觀顯示樣式。

css語法規範

css規則主要由兩個部分構成：選擇器以及一條或者多條聲明
- 選擇器是用於指定css樣式的HTML標籤，花括號內是對該對象設置的具體樣式
- 屬性和屬性值是以鍵值對的形式出現，屬性是對指定的對象設置的樣式屬性；例如文本大小、字體顏色；屬性和屬性值之間用英文的:分開，多個屬性之間用英文的;分開。

css代碼風格
- 樣式格式書寫;建議使用第二種格式更加的直觀。
  - 緊湊格式
```
h3 { color: red; font-size: 16px }
複製代碼
```
  - 展開格式
```
h3 {
    color: red;
    font-size: 16px;
}
複製代碼
```
- 樣式大小寫，建議使用第二種。
  - 大寫
```
h3 {
    COLOR: RED;
}
複製代碼
```
  - 小寫
```
h3 {
    color: red;
}
複製代碼
```
- 空格規範
  - 屬性值的前面，冒號的後面，保留一個空格
  - 在選擇器和大括號之間留有一個空格
```
h3 {
    color: red;
}
複製代碼
```

CSS選擇器

css基礎選擇器

選擇器的做用是根據不一樣的需求把不一樣的標籤選擇出來，就是選擇標籤用的。
在css中，能夠根據選擇器的類型把選擇器分爲基礎選擇器和符合選擇器，符合選擇器就是創建在基礎選擇器之上，對基本選擇器進行組合造成。
基礎選擇器包括：標籤選擇器、類選擇器、id選擇器和通配符選擇器
- 標籤選擇器指的用HTML做爲選擇器，按標籤名稱分類，爲頁面中的某一種標籤指定統一的css樣式。
- 類選擇器是當咱們想要差別化選擇不一樣的標籤，單獨選一個或者幾個標籤，能夠選擇類選擇器。
- id選擇器能夠爲標有特定id選擇器的HTML元素指定特定的樣式,HTML中的id屬性不容許有相同的屬性值，不能重複。
- 通配符選擇器使用*定義，他表示選中頁面中的全部元素。
  - 代碼以下
```
h3 {
    color: red;
}
.class {
    color: pink;
}
#id {
    color: black;
}
* {
    padding: 0;
}
複製代碼
```
類命名規則以下

類命	對應的結構類名
header	頭部
content/container	內容
footer	尾部
nav	導航欄
sidebar	側欄
column	欄目
left/center/right	左中右
loginbar	登錄條
logo	標誌
banner	廣告
main	頁面主體
hot	頁面熱點
news	新聞
download	下載
subnav	子導航
menu	菜單
submenu	子菜單
## CSS字體屬性

css使用font-family屬性定義文本的字體系列

p {
    font-family: "微軟雅黑",Arial;
}
div {
    font-family: "Microsoft Yahei";
}
複製代碼

各類字體之間必須使用英文的逗號分隔開。
通常狀況下，多個單詞組成的字體須要在單詞之間用間隔分隔開，而且用英文的引號包含單詞組。
儘可能使用系統默認自帶的字體，保證在任何瀏覽器中都能正常的顯示。
多個字體的，瀏覽器會由左到右優先顯示，若是第一個字體沒有，則顯示下一個；以此類推。

css的複合選擇器

複合選擇器能夠更準確、更高效的選擇目標元素，複合選擇器由兩個或者多個基礎選擇器，經過同的方式組合而成；一般的複合選擇器包括：後代選擇器、子元素選擇器、並集選擇器、僞類選擇器等等。

後代選擇器

後代選擇器又稱爲包含選擇器，能夠選擇父元素裏面的子元素，語法就是外層標籤寫在前面，內城標籤寫在後面，中間用空格分隔，內層標籤爲外層標籤的後代。

div p {
    color: red;
}
複製代碼

子元素選擇器（子選擇器）

子元素選擇器(子選擇器)只能選擇做爲某元素的最近一級子元素，簡單李健就是隻能選親兒子元素。樣式設置孫子及孫子如下是不會生效的。
語法是外層元素>內層親兒子元素

<div class="ins">
        <p>
            你好
        </p>
        <div>
            <p>換行</p>
        </div>
</div>

.ins>p {
    color:red;
}
複製代碼

並集選擇器

並集選擇器能夠選擇多組標籤，同時爲他們定義相同的樣式，一般用於集體聲明。
語法；並集選擇器是各選擇器經過英文的,鏈接而成，任何形式的選擇器均可以做爲並集選擇器的一部分。

div>p,ul>li {
    color: red;
}
複製代碼

僞類選擇器

僞類選擇器用於向耨寫選擇器添加特俗的效果，好比給鏈接添加特殊效果、或選擇第一個，第n個元素；僞類選擇器最大的特色是用冒號 :表示，好比:hover、:first-child。
連接僞類選擇器 -a:link；選擇全部未被訪問的連接。
- a:visited；選擇全部已被訪問的連接。
- a:hover;選擇鼠標移上的連接。
- a:active；選擇活動連接(鼠標按下未彈起的連接)
連接僞類選擇器注意事項
- 爲了確保生效，請按照LVHA的順序聲明::link,:visited,:hover,:active。口訣也能夠用love hate來記。
:focus僞類選擇器；獲取鼠標光標的表單

input:focus {
    background: red;
}
複製代碼

css字體屬性

css字體大小

css使用font-size屬性定義字體大小

p {
    font-size: 16px;
}
複製代碼

px（像素）是咱們網頁最經常使用的單位。
谷歌瀏覽器的文字默認大小爲16px。
不一樣的瀏覽器，可能默認的字號大小不同，咱們給body設置一個默認的大小。例如body { font-size: 16px}

css字體粗細

css使用font-weight屬性設置文本字體的粗細。

p {
    font-weight: bold;
}
複製代碼

font-weight經常使用的屬性值

屬性值	描述
normal	默認值（不加粗）
bold	加粗
100-900	400等於normal，而700等同於bold，注意數字後面不能加符號
## css文本屬性
### css文本裝飾

text-decoration屬性規定添加到文本的修飾，能夠給文本添加下劃線、上劃線、刪除線等

p {
    text-decoration: underline;
}
複製代碼

屬性值	描述
none	沒有裝飾線，默認值
underline	下劃線
overline	上劃線
line-through	刪除線

css文本縮進

text-indent屬性用來指定文本第一行的縮進，一般是將段落的首行縮進。

p {
    p {
        text-indent: 15px;
    }
    div {
        text-indent: 2em;
    }
}
// em是一個相對單位，就是當前元素1箇中文文字的大小。
複製代碼

行間距

line-height屬性用於設置行間的距離，能夠控制文字與行之間的距離

css文本屬性總結

屬性	表示	注意點
color	文本顏色	咱們一般用十六進制好比#ffffff
text-align	文本對齊	能夠設定文字水平對齊方式
text-indent	文本縮進	一般用於段落首行縮進2個字的距離
text-decoration	文本修飾	添加下劃線爲underline，取消下劃線爲none，刪除線爲line-through
line-heigt	行間距	用於設置行與行之間的距離

css的引入方式

css的三種樣式表

行內樣式表（行內式）,是在元素標籤內部的style屬性中設置css樣式，適合簡單的樣式。

<div style="color:red;font-size:25px"></div> 複製代碼

內部樣式表（嵌入式），是寫在html內部，將全部的css單獨放到一個style裏面。

<style>
    div {
        color: red;
    }
</style>
複製代碼

外部樣式表（外鏈式）;實際開發都是外部樣式表，適合樣式比較多的狀況，核心是樣式單獨寫到css文件中，以後把css文件引入HTML頁面中。

<link rel="stylesheet" href="home.css">
複製代碼

css引入方式總結

樣式表	優勢	缺點	使用狀況	控制範圍
行內樣式表	書寫方便，權重高	結構樣式混寫	較少	控制一個標籤
內部樣式表	部分結構和樣式分離	沒有完全分離	較多	控制一個頁面
外部樣式表	完成是心啊結構和樣式相分離	須要引入	最多、吐血推薦	可控制多個頁面

css的元素顯示模式

塊級元素

常見的塊級元素<h1>~<h6>、<p>、<div>、<ul>、<li>等。
塊級元素的特色
- 比較霸道，獨佔一行。
- 高度、寬度、外邊距、以及內邊距均可以控制。
- 寬度默認是容器(父級寬度)的100%。
- 是一個容器及盒子，裏面能夠放行內元素或者塊級元素。
注意事項
- 文字類的元素內不能使用塊級元素。
- <p>標籤主要用於存放文字，所以<p>裏面不能放塊級元素，特別是<div>。
  - 同理<h1>~<h6>也是文字標籤，裏面也不能放塊級元素。

行內元素

常見的行內元素：<a>、<strong>、<b>、<i>、<del>、<s>、<ins>、<u>、<span>等。
行內元素的特色
- 相鄰的行內元素在一行上，一行能夠顯示多個。
- 高、寬直接設置是無效的。
- 默認的寬度就是它自己內容的寬度。
- 行內元素只能容納文本或者其餘行內元素。
注意事項
- 連接裏面不能再放連接
- 特殊狀況連接<a>裏面能夠放在塊級元素,可是給<a>轉換成塊級元素最安全。

行內塊元素

在行內元素中有幾個特殊的標籤<img>、<input>、`。他們同時具備塊級元素和行內元素的特色。
行內塊元素的特色
- 和相鄰的行內塊元素及行內元素在一行上，可是他們之間會有空白間隙。一行能夠顯示多個。
- 默認寬度就是它自己內容的寬度。
- 寬高、行高、內外邊距能夠直接設置。

css的三大特性

層疊性

相同的選擇器給設置相同的樣式，此時一個樣式就會覆蓋（層疊）另外一個衝突樣式。

繼承性

css繼承性，子標籤會繼承父標籤的某些樣式，如文本顏色字號。
- 子元素能夠繼承父元素的樣式（text-、font-、line-）等這些開頭的均可以繼承，以及color
- 行高的繼承性，語法以下
```
body {
    font:12px/15px;
} 
div {
    font:14/1.5;
}
複製代碼
```
- 注意：
  - 行高能夠跟單位也能夠不跟單位。
  - 若是子元素沒有設置行高，則會繼承父元素的行高的1.5倍。
  - 沒有單位的寫法，行高是當前字體大小的1.5倍。第二種寫法的優點是子元素能夠根據本身文字大小調整行高。

優先級

選擇器相同，則執行層疊性（覆蓋）
選擇器不一樣，則根據選擇器的權重執行。選擇器權重以下表

選擇器	選擇器權重
繼承或者`*`	0，0，0，0
元素選擇器	0，0，0，1
類選擇器，僞類選擇器	0，0，1，0
id選擇器	0，1，0，0
行內樣式	1，0，0，0
!important	無窮大

css背景圖片

背景圖片的複合寫法
- background: 背景顏色背景圖片地址背景平鋪背景圖像滾動背景圖片位置。
背景色半透明
- background:rgba(0,0,0,.3)
- 注意：背景半透明不會影響到內容。這是css3新增的屬性，是IE9+版本瀏覽器才支持。

css盒子模型

頁面佈局三大核心，盒子模型、浮動和定位。

css浮動

清除浮動的方法
- 額外標籤法(隔牆法)；額外標籤法在浮動元素的末尾添加一個空標籤，例如<div style="clear:both"></div>html
  - 優勢：通俗易懂，書寫方便。
  - 缺點：添加許多無心義的標籤，結構較差。
  - 注意：添加的新標籤必須是塊級元素，不然不能清除浮動的影響。
- 父元素添加overflow屬性，屬性值爲hidden、auto、scroll均可以。前端
  - 優勢：代碼簡潔。
  - 缺點：沒法顯示溢出的部分。
- :after僞元素法，給父級元素添加。node
  - 優勢：沒有增長標籤，結構更簡單。
  - 照顧低版本瀏覽器。
```
.clearfix:after {
        content:'';
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
   .clearfix {
        //IE6 7 專有
        *zoom:1;
    }
複製代碼
```
- 雙僞元素清除元素，也是爲父元素添加。css3
  - 優勢：代碼更簡潔。
  - 缺點：照顧低版本瀏覽器。
```
.clearfix:before,.clearfix:after {
    content:'';
    display:table;
}
.clearfix:after {
    clear:both;
}
.clearfix {
    *zoom:1;
}
複製代碼
```

核心陰影

box-shadow:h-shadow v-shadow blur spread color inset

值	描述
h-shadow	必需，水平陰影位置，容許負值。
v-shadow	必需，垂直陰影位置，容許負值。
blur	可選，模糊距離。
spread	可選，陰影尺寸大小。
color	可選，陰影的顏色。
inset	可選，將外陰影改成內陰影。

css書寫順序

佈局定位屬性：display、position、float、clear、visibility、overflow
自身屬性：width、height、margin、padding、border、background
文本屬性：color、font、text-decoration、text-align、vertical-align、white-space、break-word
其餘屬性：content、cursor、border-radius、box-shadow、text-shadow等等。

css定位

相對定位relative（重要）
- 相對定位的特色
  - 他是相對於本身原來的位置來移動的。（移動位置的時候參照點是本身原來的位置）
  - 原來在標準的位置繼續佔有，後面的盒子仍然以標準流的方式來對待它。（不脫離文檔流，繼續保留原來的位置），它最典型的應用是給絕對定位當爹的。
絕對定位absolute，絕對定位是元素在移動位置的時候，是相對於他的祖先元素
- 絕對定位的特色
  - 若是沒有祖先元素或祖先元素沒有定位，則以瀏覽器爲準定位。
  - 若是祖先元素有定位（相對、絕對、固定），則以最近一級的有定位的祖先元素爲參考點移動位置。
  - 絕對定位不在佔有原先的位置，脫離文檔流。
固定定位fixed，固定於瀏覽器可視區域的位置。在瀏覽器頁面滾動時元素的位置不會改變。
粘性定位sticky，粘性定位能夠被認爲時相對定位和固定定位的混合
- 語法： div {position: ticky;top: 10px;}
- 特色：
  - 以瀏覽器的可視窗口爲參照點移動元素(固定定位的特色)。
  - 粘性定位是佔有原先的位置（相對定位的特色）。
  - 必須添加top、bottom、left、right其中的一個纔會有效。
定位的拓展
- 絕對定位的盒子水平垂直居中
```
//定寬高
div {
    width:200px;
    height:200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -50%;
}
//不定寬高
div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}
複製代碼
```
- 定位的特殊性
  - 行內元素添加絕對定位或者固定定位，能夠直接設置高度和寬度。浮動也是同樣。
  - 塊級元素添加絕對或者固定定位，若是不給寬度或者高度，默認大小是內容的大小。
  - 絕對定位和固定定位會完成壓住盒子和文字，可是浮動不會壓住文字，浮動產生最初的目的就是爲了實現文字環繞的效果。給圖片添加一個浮動，就會產生文字環繞效果。

定位模式	是否脫標（脫離文檔流）	參照點
static靜態定位	否（佔有位置）	不能使用邊偏移
relative相對定位	否（佔有位置）	相對於自身位置偏移
position絕對定位	是（不佔有位置）	帶有定位的父級元素
fixed固定定位	是（不佔有位置）	瀏覽器可視區
sticky粘性定位	否（佔有位置）	瀏覽器可視區

精靈圖

精靈技術的目的：爲了有效的減小服務器接受和發送請求的次數，提升頁面的加載速度。
精靈圖主要是針對背景圖片使用，就是把多個小背景圖片整合到一張大圖片中。這個大圖片咱們稱爲sprites 精靈圖或者雪碧圖。
使用精靈圖的核心：移動背景圖片的位置，此時可使用background-position，移動雪碧圖到對應的位置便可。
精靈圖的缺點：
- 圖片文件仍是比較大的。
- 圖片自己放大縮小會失真。
- 一旦圖片製做完畢，想要更換很是的發雜。因而便出現了一種技術，就是字體圖標iconfont

字體圖標

字體圖標展現的是圖標，可是本質屬於字體。
字體圖標的優勢
- 輕量級：一個圖標字體要比一系列的圖像要小，一旦字體加載了，圖標就會立刻渲染出來，減小服務器的請求。
- 靈活性：本質實際上是文字，能夠很隨意的改變顏色、產生陰影、透明效果、旋轉等。
- 兼容性：幾乎支持全部的瀏覽器，請放心使用。
- 注意：字體圖標並不能替代精靈技術，只是對工做中的圖標部分技術的提高和優化。

css用戶界面樣式

鼠標樣式cursor

屬性值	描述
default	默認
pointer	小手
move	移動十字架
not-allowed	禁止

輪廓線outline

給表單添加outline:0或者outline:none；樣式以後就能夠去掉默認input表單點擊後的藍色邊框線。

input {outline: none;}web

若是須要點擊之後改變input表單的邊框線代碼以下

input:focus {
    border: 1px solid red;
}
複製代碼

防止拖拽文本域resize

<textarea> 你好</textarea>

textarea {
    resize: none;
}
複製代碼

vertical-align屬性的應用

css的vertical-align屬性使用場景；常常用於設置圖片或者表單（行內塊元素）和文字垂直對齊。可是它只對於行內塊素或者行內元素有效。

vertical-align: baseline | top | middle | bottomchrome

值	描述
baseline	默認。元素位置放在父級的基線上
top	把元素的頂端與行中最高的元素的頂端對齊
middle	把此元素的位置放置在父元素的中部
bottom	把元素的底端與行中最低的元素的底端對齊

解決圖片底部默認空白縫隙的問題
- 出現這個問題的緣由是：圖片底部會有一個空白間隙，緣由是行內塊元素和文字的基線對齊。主要解決辦法有兩種
  - 給圖片添加vertical-align:middle|top|bottom（提倡使用的）。
  - 給圖片轉換成塊級元素，display:block。

文字溢出省略號顯示

// 單行文本溢出省略號顯示

//1、先強制一行內顯示文本
white-space: nowrap;(默認normal，自動換行)
//2、超出部分隱藏
overflow: hidden;
//3、文字用省略號替代超出部分
text-overflow: ellipsis;

// 多行文本溢出省略號顯示,有較大的兼容性問題，適合於webkit瀏覽器或移動端（移動端大部分是webkit內核）
overflow: hidden;
text-overflow: elipsis;
//彈性伸縮盒子模型顯示
display: -webkit-box;
//限制在一個塊元素顯示的文本行數
-webkit-line-clamp: 2;
//設置或檢索伸縮盒對象的子元素的排列方式
-webkit-box-orient: vertical;

複製代碼

css重置樣式表

*{margin:0;padding:0}em,i{font-style:normal}li{list-style:none}img{border:0;vertical-align:middle}button{cursor:pointer}a{color:#666;text-decoration:none}a:hover{color:#c81623}button,input{font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif}body{-webkit-font-smoothing:antialiased;background-color:#fff;font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;color:#666}.hide,.none{display:none}.clearfix:after{visibility:hidden;clear:both;display:block;content:".";height:0}.clearfix{*zoom:1}
複製代碼

Emmet語法

快速生成HTML結構語法
- 若是想要生多個相同標籤標籤加上*個數就能夠了；例如li*3就能夠快速生成三個li標籤。
- 若是有父子級關係的標籤能夠用>，例如ul>li就能夠了。
- 若是是兄弟級關係的標籤就能夠用+，例如div+p。
- 若是要生成帶有屬性或者類的標籤，直接寫.demo或者#nav加回車鍵就能夠了。
- 若是想要標籤類名帶順序可使用.demo$*5便可。
- 若是想要生成的標籤內部有內同能夠用{}包含內容，例如.demo{hello word}。
快速生成css樣式
- 好比w200能夠快速生成width: 200px
- lh20px能夠快速生成line-height: 20px
- ti2em能夠快速生成text-indent: 2em

HTML5的新特性

HTML新增的語義化標籤

HTML5的新增特性主要是針對之前的不足，增長了一些新的標籤、新的表單和新的表單屬性等。

標籤元素	描述
header	頭部標籤
nav	導航欄標籤
article	內容標籤
section	某個區域標籤，能夠理解爲大號的div
aside	側邊欄標籤
footer	底部

HTML5新增的多媒體標籤

音頻：<audio>

<audio width="200" height="200" controls>
    <source src="movie.mp3" type="video/mp3"> <source src="movie.ogg" type="video/ogg"> 您的瀏覽器不支持video標籤 </audio> // 視頻代碼會從上到下執行，若是第一行符合就中止，若是不符合接着往下走，若是都不符合就顯示文字部分。 複製代碼

音頻的常見屬性

屬性	值	描述
autoplay	autoplay	若是出現該屬性，則音頻在就緒後就自動播放
controls	controls	若是出現該屬性，則向用戶顯示控件，好比播放按鈕
loop	loop	自動循環播放
src	url	播放MP3的地址

視頻：<video>

<video width="200" height="200" controls>
    <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的瀏覽器不支持video標籤 </video> // 視頻代碼會從上到下執行，若是第一行符合就中止，若是不符合接着往下走，若是都不符合就顯示文字部分。 複製代碼

屬性	值	描述
autoplay	autoplay	視頻就緒就自動播放（谷歌添加muted來解決自動播放的問題）
controls	controls	視頻播放控件
loop	loop	播放完自動循環
preload	auto(預先加載視頻) node（不預先加載視頻）	規定是否預加載播放該視頻，若是設置了autoplay屬性則該屬性就會被忽略
poster	圖片src	加載等待的畫片圖片
muted	muted	靜音播放

HTML5新增的input表單

必須配合form表單使用纔有效果

屬性值	說明
`type="email"`	限制用戶輸入必須爲郵箱類型
`type="url"`	限制用戶輸入必須爲URL類型
`type="date"`	限制用戶輸入必須爲日期類型
`type="time"`	限制用戶輸入必須爲時間類型
`type="month"`	限制用戶輸入必須爲月類型
`type="week"`	限制用戶輸入必須爲周類型
`type="number"`	限制用戶輸入必須爲數字類型
`type="tel"`	限制用戶輸入必須爲手機號碼
`type="search"`	搜素框
`type="color"`	生成一個顏色選擇表單

HTML5新增的表單屬性

屬性	值	說明
required	required	表單擁有該屬性表示其內容不能爲空，必填
palceholder	提示文本	表單的提示信息，存在默認值將不顯示
autofocus	autofocus	自動聚焦屬性，頁面加載完成自動聚焦到指定表單
multiple	multiple	能夠多選文件提交
autocomplete	off/on	當用戶在字段開始輸入時，瀏覽器基於以前輸入過的值，聚焦後顯示出在字段中填寫的選項，同時加上name屬性，而且提交必須成功的才能夠哦

能夠經過如下方式修改placeholder裏面的字體顏色。

input::placeholder {
    color: red;
}
複製代碼

css3的新特性

css3新增的選擇器

屬性選擇器

屬性選擇器能夠根據元素特定的特性來選擇元素，這樣就能夠不用藉助於類或者id選擇器。

/* 選擇全部input中有value屬性的表單 */
input[value] {
    color: red;
}
/* 選擇input表單中type屬性等於submit的表單。重點哦 */
input[type=submit] {
    color: pink;
}
/* 選擇屬性值開頭的某些元素 */
div[class^=icon] {
    color: black;
}
/* 選擇屬性值以什麼結尾的某些元素 */
div[class$=data] {
    cursor: pointer;
}
/* 選擇屬性值中含有什麼的某些元素 */
div[class*=val] {
    color: yellow;
}
複製代碼

結構僞類選擇器

結構僞類選擇器主要根據文檔結構來選擇元素，經常使用於父級選擇器裏面的子元素。

選擇符	簡介
E:first-child	匹配父元素中的第一個子元素E
E:last-child	匹配父元素中最後一個子元素E
E:nth-child(n)	匹配父元素中的第n個子元素E；n能夠爲even偶數，odd奇數
E:first-of-type	指定類型E的第一個
E:last-of-type	指定類型E中的最後一個
E:nth-of-type(n)	指定類型E中的第n個

其中n能夠是數字，關鍵字和公式，公式以下

公式	取值
2n	偶數
2n+1	奇數
5n	5 10 15 20
n+5	從第五個開始一直到最後

注意：
- nth-child對父元素裏面全部的孩子排序選擇（序號是固定的），先找到第n個孩子看看是否和E匹配，若是不匹配則不生效。
- nth-of-type對父元素裏面的指定元素今昔那個排序選擇，先去匹配E,而後再根據E找到第n個孩子

僞元素選擇器

僞元素選擇器能夠幫助咱們利用css建立新標籤元素，而不須要HTML標籤，從而簡化HTML結構。

選擇符	簡介
`::before`	再元素內部的最前面插入內容
`::after`	在元素內部的最後面插入內容

注意
- before和after建立一個元素，可是屬於行內元素。
- 新建立的這個元素在文檔樹中是找不到的，因此咱們稱爲僞元素。
- 語法：element::before{}。
- before和after必須有content屬性。
- 僞元素和標籤選擇器同樣權重爲1。

CSS3的其餘特性

css3濾鏡 filter，將模糊或者顏色偏移等圖形效果應用於元素。

語法：filter: 函數();例如filter：blur（5px）模糊處理，blur數值越大越模糊。

css3 calc函數,聲明css屬性值時執行一些計算

語法：width: calc(100% - 50px)

css3 過渡

過渡在css3中具備顛覆性，當元素從一個樣式變換爲另外一個樣式時爲元素添加效果。
過渡動畫：是從一個狀態漸漸的過渡到另一個狀態。
可讓咱們頁面更好看，更動感十足，雖然低版本瀏覽器不支持，可是不會影響頁面佈局。
咱們如今常常和:hover一塊兒搭配使用。
語法以下
- transition: 要過渡的屬性花費的時間運動曲線什麼時候開始
  - 運動曲線有linear勻速、ease逐漸減速、ease-in加速、ease-out減速、ease-in-out先加速後減速。默認ease
- 若是想要寫多個屬性，利用逗號分割
transition: width .5s, height .5s
- 若是想要多個屬性都變化能夠用all
transition: all .5s
- 注意：誰作過渡就給誰加。

2D轉換transform

轉換（transform），能夠實現元素的位移、旋轉、縮放等效果，能夠簡單理解爲變形。

2D轉換之平移 translate
- 語法
```
transform: translate(x,y);
/* 或者分開寫 */
tansform: translateX(n);
transform: translateY(n);
複製代碼
```
- 重點
  - 定義2D轉換中的移動，沿x軸和y軸移動元素
  - translate最大的特色是，不會影響到其餘元素的位置；
  - translate中的百分比單位是相對於自身元素的寬度或者高度。
  - 對行內標籤沒有效果。
2D轉換之rotate，讓元素在二維平面內順時針或者逆時針旋轉
- 語法
```
tansform: rotate(度數)
複製代碼
```
- 重點
  - rotate裏面的跟度數，單位是deg，好比rotate(45deg)
  - 角度爲正時，順時針，爲負時逆時針。
  - 默認旋轉的中心點時元素的中心點。
2D轉換中心點transform-origin
- 語法
transform-origin: x y;
- 重點
  - 注意後面的參數是x和y是用空格隔開的。
  - x y默認轉換的中心點是元素的中心點（50% 50%）。
  - 還能夠給x y設置像素或者方位詞（top bottom left right center）
2D轉換之縮放，顧名思義，能夠放大和縮小，只要給元素添加上了這個屬性就能控制它放大仍是縮小
- 語法
transform: scale(x,y)
- 注意
  - 注意其中的x和y用逗號隔開
  - transform: scale(1,1)寬高都放大一倍，至關於沒有放大。
  - transform: scale(2),寬高都放大了兩倍，至關於transform: scale(2,2)。
  - transform: scale(.5)，寬高都縮小了0.5倍。
  - scale縮放最大的優點：能夠設置轉換中心點縮放，默認是中心點縮放的，並且並不影響其餘盒子。
2D轉換綜合寫法
- 同時使用多個轉換，其格式爲transform: translate() rotate() scale()...等。
- 其順序會影響轉換的效果。（先旋轉會改變座標軸的方向）。
- 當咱們同時又位移和其餘屬性的時候，記得要將位移放到最前面。

動畫（animation）

用keyframes定義動畫
```
@keyframes 動畫名稱 {
    0% {
        width: 200px;
    }
    100% {
        width: 400px;
    }
}
複製代碼
```
- 0%和100%叫作動畫序列
  - 0%是動畫的開始，100%是動畫的結束。這樣的規則就是動畫序列。
  - 在@keyframes中規定某項css樣式，就能建立由當前樣式逐漸改成新樣式的動畫效果。
  - 動畫是使一種元素逐漸變化到另外一種樣式的效果，能夠改變任意多的樣式任意多的次數。
  - 請用百分比來規定變化發生的時間，或用關鍵詞from和to等同於0%和100%。

元素使用動畫

div {
    /* 動畫名稱 */
    animation-name:move;
    /* 持續時間 */
    animation-duration:2s
}
複製代碼

動畫經常使用屬性

屬性	描述
@keyframes	規定動畫
animation	全部動畫屬性的簡寫屬性，除了animation-play-state屬性
animation-name	@keyframes規定的動畫名稱。（必須的）
animation-duration	規定動畫完成的持續時間，能夠是秒（s）或者毫秒（ms）
animation-timing-function	規定動畫的速度曲線，默認是ease
animation-delay	規定動畫是合適開始
animation-iteration-count	規定動畫被播放的次數，默認是1，值還能夠是infinite（無限循環播放）
animation-direction	規定動畫是否在下一週期逆向播放，默認是normal，值還能夠是alternate（逆向播放）
animation-play-state	規定動畫初始狀態是運行仍是暫停，默認是running，暫停時paused
animation-fill-mode	規定動畫結束後的狀態，保持forwards，回到起始backwards

特殊符號	描述	字符代碼
	空格符	` `
<	小於號	`<`
>	大於號	`>`
&	和號	`&`
￥	人民幣	`¥`
°	攝氏度	`°`
×	乘號	`×`
÷	除號	`÷`
²	平方2上標	`²`
³	立方3上標	`³`
©	版權	`&copr;`
®	註冊商標	`®`

特殊符號	描述	字符代碼
	空格符	` `
<	小於號	`<`
>	大於號	`>`
&	和號	`&`
￥	人民幣	`¥`
°	攝氏度	`°`
×	乘號	`×`
÷	除號	`÷`
²	平方2上標	`²`
³	立方3上標	`³`
©	版權	`&copr;`
®	註冊商標	`®`

重抓基礎CSS+HTML入門知識

入坑前須要瞭解的知識點

可以說出網頁的基本組成

可以說出經常使用的瀏覽器

可以說出Web標準的三大組成部分

HTML標籤

說出HTML標籤的書寫注意規範

HTML的語法規範

HTML基本結構標籤

HTML經常使用標籤

特殊字符

表格標籤

列表標籤

表單標籤

相對路徑的三種形式

CSS層疊樣式表

css的簡介

css語法規範

CSS選擇器

css基礎選擇器

css的複合選擇器

後代選擇器

子元素選擇器（子選擇器）

並集選擇器

僞類選擇器

css字體屬性

css字體大小

css字體粗細

css文本縮進

行間距

css文本屬性總結

css的引入方式

css的三種樣式表

css的元素顯示模式

塊級元素

行內元素

行內塊元素

css的三大特性

層疊性

繼承性

優先級

css背景圖片

css盒子模型

css浮動

核心陰影

css書寫順序

css定位

精靈圖

字體圖標

css用戶界面樣式

鼠標樣式cursor

輪廓線outline

防止拖拽文本域resize

vertical-align屬性的應用

文字溢出省略號顯示

css重置樣式表

Emmet語法

HTML5的新特性

HTML新增的語義化標籤

HTML5新增的多媒體標籤

HTML5新增的input表單

HTML5新增的表單屬性

css3的新特性

css3新增的選擇器

屬性選擇器

結構僞類選擇器

僞元素選擇器

CSS3的其餘特性

css3濾鏡 filter，將模糊或者顏色偏移等圖形效果應用於元素。

css3 calc函數,聲明css屬性值時執行一些計算

css3 過渡

2D轉換transform

轉換（transform），能夠實現元素的位移、旋轉、縮放等效果，能夠簡單理解爲變形。

動畫（animation）

特殊符號	描述	字符代碼
	空格符	` `
<	小於號	`<`
>	大於號	`>`
&	和號	`&`
￥	人民幣	`¥`
°	攝氏度	`°`
×	乘號	`×`
÷	除號	`÷`
²	平方2上標	`²`
³	立方3上標	`³`
©	版權	`&copr;`
®	註冊商標	`®`