使用工具：

Vscode使用：

需要下載插件：open in browser。這個(gè)插件可以快速打開(kāi)瀏覽器。

選擇文件夾有兩種方式：選擇打開(kāi)文件、拖拽方式（這種最方便）

快捷鍵：快速生成Htm結(jié)構(gòu)文件：!+回車 （注意是英文符號(hào)）

代碼格式化：shift+alt+f

向上移動(dòng)：Alt+up

快速?gòu)?fù)制一行(復(fù)制到上行)：shift+Alt+up

一、HTML補(bǔ)充

HTML5 是超文本標(biāo)記語(yǔ)言。它有兩種表現(xiàn)形式：雙標(biāo)簽（html、p、div） 和單標(biāo)簽（img、meta）。

<meta>是單標(biāo)簽 用來(lái)指定網(wǎng)頁(yè)格式。常用：<meta charset="utf-8">

路徑：

路徑分為絕對(duì)路徑和相對(duì)路徑。絕對(duì)路徑就是從d盤一直到目標(biāo)所在。

相對(duì)路徑：分為

? ? ? ? ? ? ? ? ? ? ? ? ? 父級(jí)路徑： ../? ? 一般表示回退到上一個(gè)文件夾。然后找到圖片所在位置。

? ? ? ? ? ? ? ? ? ? ? ? ? 子級(jí)路徑： /1.jpg? ?

? ? ? ? ? ? ? ? ? ? ? ? ? 同級(jí)路徑:? ./images/1.jpg??

? 一般來(lái)說(shuō)，子級(jí)路徑和同級(jí)路徑是一起使用的。比如上面一個(gè)例子。

超文本鏈接：<a>

內(nèi)聯(lián)元素和塊級(jí)元素：

?

HTML5新版本 新增的標(biāo)簽：

新增標(biāo)簽的目的是為了利于SEO（搜索引擎）的排名。利于搜索爬蟲(chóng)快速找到。

需要注意的是：存在瀏覽器版本兼容性問(wèn)題。

選擇器的優(yōu)先級(jí)：

二、CSS補(bǔ)充

CSS是層疊樣式表，又叫 級(jí)聯(lián)樣式表，簡(jiǎn)稱樣式表。

語(yǔ)法：由兩部分構(gòu)成： 選擇器；一條或多條聲明。

CSS引入樣式：

分為：

? ? ? ? ?內(nèi)聯(lián)樣式：<p style="~"> </p>

? ? ? ? ?內(nèi)部樣式：在頭部定義。<style>? </style>

? ? ? ? ?外部樣式：<link rel="stylesheet" href="? ? ?.css">

選擇器：

分為：

? ? ? ? ?全局選擇器：*{? ? ?}? ?它的優(yōu)先級(jí)是最低的

? ? ? ? ?元素選擇器：根據(jù)HTML元素選擇。而且一旦選擇了，就是body部分所有這個(gè)元素的樣式。??

? ? ? ? ?類選擇器： 用圓點(diǎn) .? ?定義。針對(duì)所需要的標(biāo)簽使用。注意命名：不能以數(shù)字開(kāi)頭。同一個(gè)標(biāo)簽可以使用多個(gè)類選擇器，用空格隔開(kāi)。例如：<p class="first? second"></p>

? ? ? ? ?ID選擇器：在css里面用#定義。 <h2 id="content" />? ?#content{? ?} 。特點(diǎn)：它的名稱只能使用一次。（和類選擇器不同，類選擇器可以使用多次。）

? ? ? ? ?合并選擇器：? p,h2{? ? }? ? 或者：? .text，.title{? ? }

需要注意 選擇器的優(yōu)先級(jí)：行內(nèi)樣式優(yōu)先級(jí)最高、同級(jí)類元素，后者會(huì)覆蓋前者。

關(guān)系選擇器：

分為

? ? ? ? 后代選擇器：E? ?F{? ? ?}? 選擇E里面所有的F標(biāo)簽

? ? ? ? 子代選擇器：div > p {? ?}? 緊跟div后的p標(biāo)簽

? ? ? ? 相鄰兄弟選擇器：h3+p{? ? }? ?只有相鄰的。隔一個(gè)都不行

? ? ? ? 通用兄弟選擇器：E~F{? ? }? ?選擇E之后的所有同級(jí)標(biāo)簽。

CSS盒子模型：

注意下邊圖像的四個(gè)概念。

外邊距：透明的、消除邊框外的區(qū)域。? ?（撐開(kāi)自身，內(nèi)容大小不變）//不是撐大噢

邊框：

內(nèi)邊距：消除內(nèi)容周圍區(qū)域，是透明的。不過(guò)會(huì)因?yàn)楸尘暗母淖兌淖?，外邊距不?huì)。（它會(huì)撐大自身，內(nèi)容大小不變。）

content：顯示文本和圖像。?

彈性盒模型（flex box）：

目的：為了適應(yīng)不同屏幕的大小。提供一種更加有效的方式對(duì)一個(gè)容器中的子元素進(jìn)行排列、對(duì)齊和分配 空白空間。

組成：彈性容器（flex-container）和彈性子元素（flex-item）組成。

設(shè)置display：flex；（定義 一個(gè)彈性容器）? 默認(rèn)是橫向擺放。

flex-direction 屬性：

row、row-reverse、column（垂直擺放）、column-reverse。

justify-content：

就是相當(dāng)于 子元素是什么方向，那么它的樣式就是什么方向。

?align-items屬性：

相當(dāng)于 子元素是什么方向，它的方向就是子元素的縱向。它一般和justify-content搭配使用。搭配使用可以定義五個(gè)方向的位置。

小結(jié)：彈性盒模型只能定義5個(gè)位置的方向。如果需要指定位置存放。在后續(xù)，浮點(diǎn)元素和定位元素會(huì)有介紹。

擴(kuò)展：flex元素，定義寬度權(quán)重。

例如：在一個(gè)父框架里面定義n個(gè)子框架。在子框架設(shè)置：flex:2 ；flex:1；flex:1。那么就是占用父框架的幾分之幾。

文檔流：

存在幾個(gè)問(wèn)題：高矮不齊、底邊對(duì)齊；元素之間無(wú)空隙；空格折疊。

文檔流就是，普通定義的一些選擇器，它們會(huì)在一個(gè)文檔里面的樣式。

為了解決文檔流的問(wèn)題，提出了脫離文檔流的方法。

分別是：浮動(dòng)、絕對(duì)定位、固定定位。

脫離文檔流：

浮動(dòng)：

定義：? ?它會(huì)脫離文檔流，相當(dāng)于在上層有一個(gè)布局。 （如果有兩個(gè)圖片都定義：float:left；它們都顯示在上層，不會(huì)出現(xiàn)有空隙的情況。）

浮動(dòng)也可以使 同級(jí)元素橫向擺放。類似于：display:flex;

當(dāng)浮動(dòng)的元素超出容器的框架，它會(huì)被擠在容器下面。

不同點(diǎn)：浮動(dòng)可以設(shè)置寬高，flex可以適應(yīng)屏幕。

注意：浮動(dòng)使元素脫離文檔流，且只有左右浮動(dòng)，無(wú)上下浮動(dòng)。

清除浮動(dòng)：

浮動(dòng)的缺點(diǎn)：會(huì)造成 父元素高度的塌陷；后續(xù)元素受影響。

例如：如果沒(méi)有設(shè)置 父框架的高度，它的框架是靠子元素?fù)伍_(kāi)。而一旦設(shè)置子元素為浮動(dòng)，那么父元素的高度就會(huì)變?yōu)?。而且后續(xù)添加的子元素或者同級(jí)元素，它會(huì)出現(xiàn)在原本父元素的位置，被設(shè)置為浮動(dòng)的子元素所覆蓋。

清除浮動(dòng)的方法：

? ? ? ? ? ?父元素設(shè)置高度；? ? ? //它可以直接撐開(kāi)框架，就不需要子元素?fù)伍_(kāi)了。

? ? ? ? ? ?對(duì)受影響的元素增加clear屬性。例如：后續(xù)添加的子元素，使用clear:both；無(wú)論是左浮動(dòng)還是右浮動(dòng)都可以消除。

? ? ? ? ? ?overflow清除浮動(dòng)。? 在父元素上添加：overflow:hidden； clear:both；? 這種情況下，父元素不能設(shè)置高度。

? ? ? ? ? 偽對(duì)象方式。? ?在父元素添加：? ?.container::after{ content:"";? display:block; clear:both; }。同樣，父元素不能設(shè)置高度。

小結(jié)：在沒(méi)有對(duì)父元素設(shè)置高度的情況下，一般使用第三種清除浮動(dòng)的方式。而第二種清除浮動(dòng)方式，用于會(huì)受影響的子元素或者同級(jí)元素下才使用。

定位position：

分為：relative、absolute、fixed。后面兩種方式可以脫離文檔流。 它們有四個(gè)屬性值：left、right、top、bottom。

絕對(duì)定位absolute：每設(shè)置一個(gè)絕對(duì)定位相當(dāng)于單獨(dú)設(shè)置一層。

固定定位fixed：它的特點(diǎn)是無(wú)論頁(yè)面怎么流動(dòng)，它都會(huì)固定在頁(yè)面上。

相對(duì)定位和絕對(duì)定位 是相對(duì)于具有定位的父級(jí)屬性進(jìn)行位置調(diào)整，如果沒(méi)有父級(jí)元素，就往上找，直到最底層是文檔流。

z-index：決定堆疊順序。誰(shuí)大，誰(shuí)放在上面。

CSS新特性：

圓角：border-radius

?50%或者100%都表示圓形。它有四個(gè)值：分別表示的順序是：左上，右下；右上，坐下。

border-radius：1px? 2px? ?3px? 4px；

回顧：margin：0 auto；表示圖形 在屏幕居中。0表示上下位置不用管，auto表示左右自適應(yīng)。

陰影：box-shadow

它也有四個(gè)值，分別的含義是：h-shadow水平陰影、v-shadow垂直陰影、blur（模糊）和color。

注意blur和color可以合起來(lái) 用rgba表示。rgba(0,0,0,0.1)。? ? ? ? 0.1就是模糊度。

box-shadow：2px? 2px? rgba(0,0,0,0.1)；

動(dòng)畫：

是指 使元素從一種樣式逐漸變化為另一種樣式的效果。（可以改變?nèi)我獯危?/p>

需要指定變化的時(shí)間：兩種方式：

使用關(guān)鍵詞： from (等同于0%)、to（等同于100%）；使用百分號(hào)：0%表示動(dòng)畫開(kāi)始、100%表示動(dòng)畫完成。

@keyframes創(chuàng)建動(dòng)畫：

@keyframes myAnim{
  0%   {top: 0px;}
  25%  {top: 200px;}
  50%  {top: 100px;}
  75%  {top: 200px;}
  100% {top: 0px;}
}

animation執(zhí)行動(dòng)畫： p{? animation：myAnim? 5s? linear 0s infinite}? ? //分別表示動(dòng)畫器名稱、持續(xù)時(shí)間、速度（勻速）、延遲時(shí)間、循環(huán)次數(shù)（無(wú)數(shù)次）

? ? 還可以加上鼠標(biāo)觸碰就停止的效果：p:hover {? ? animation-play-state：paused；}

執(zhí)行動(dòng)畫的一些詳情值見(jiàn)下圖所示：

?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-600778.html

媒體查詢：

? 會(huì)根據(jù)設(shè)備的大小 自動(dòng)識(shí)別加載不同的樣式。

一般都是在開(kāi)頭設(shè)置meta標(biāo)簽：使用設(shè)備的寬度作為視圖寬度并禁止初始的縮放。（比如：一些在pc屏幕設(shè)置寬度后，在縮放，它會(huì)等比例縮放，而不是，按照我們需要的樣式不變。）

<meta name="viewport" content=" width=device-width?，initial-scale=1，maximum-scale，user-scale=1?">

媒體查詢的語(yǔ)法：

@media screen and（）

?

雪碧圖Css Sprite：

也叫做css精靈圖。

原理：通過(guò)background-image 引入背景圖片；通過(guò)background-position 將背景圖片移動(dòng)到自己需要的位置。

注意：display:block；表示將一個(gè)行內(nèi)聯(lián)元素變?yōu)閴K級(jí)元素。

字體圖標(biāo)：

? 當(dāng)使用圖標(biāo)時(shí)，我們可能遇到圖片失真的情況，也可能因?yàn)閳D片的數(shù)量很多，使頁(yè)面的加載很慢。繼而提出了字體圖標(biāo)的方式。

它的用法：可以參考圖標(biāo)庫(kù)。從圖標(biāo)庫(kù)下載代碼，然后復(fù)制到我們的項(xiàng)目中直接使用。

iconfont-阿里巴巴矢量圖標(biāo)庫(kù)

?

如果要改變字體圖標(biāo)的樣式，建議新建一個(gè)類。例如下圖：

?

到了這里，關(guān)于前端知識(shí)點(diǎn)視頻補(bǔ)充的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！