php網(wǎng)站如何編輯推廣方案的內(nèi)容有哪些
1，Emmet語法
Emmet語法的前身是Zen coding，它使用縮寫，來提高h(yuǎn)tml / css?的編寫速度，Vscode內(nèi)部已經(jīng)集成該語法
1.1，快速生成HTML結(jié)構(gòu)語法
1.想要快速生成多個相同標(biāo)簽，加上*就可以了，比如 div*3
2.如果有父子級關(guān)系的標(biāo)簽，可以用>，比如ul>li
3.如果有兄弟關(guān)系的標(biāo)簽，用+，比如div+p
4.如果生成帶有類名或者id名字的，直接寫.demo或者#two tab鍵就可以了
.nav(類名)? ? ?#.nav（id名） p.nav（p標(biāo)簽）
5.如果生成的div類名是有順序的，可以用自增符號$
.demo$*5（回車）
?6，如果想要在生成的標(biāo)簽內(nèi)部寫內(nèi)容可以用{ }表示
div{}
1.2，快速生成CSS樣式語法
CSS基本采取簡寫形式即可
1，比如w200 按tab 可以生成 width：2000px；
2，比如lh26 按tab 可以生成 line-weight：26px；
1.3，快速格式化代碼
Shift+Alt+F
2，CSS的復(fù)合選擇器
2.1 什么是復(fù)合選擇器
在CSS中，可以根據(jù)選擇器的類型把選擇器分為基礎(chǔ)選擇器和復(fù)合選擇器，復(fù)合選擇器是建立在基礎(chǔ)選擇器之上，對基礎(chǔ)選擇器進(jìn)行組合形成的
· 復(fù)合選擇器可以更準(zhǔn)確，更高效的選擇目標(biāo)元素（標(biāo)簽）
· 復(fù)合選擇器是由兩個或多個基礎(chǔ)選擇器，通過不同的方式組合而成的
· 常用的復(fù)合選擇器包括：后代選擇器、子選擇器、并集選擇器、偽類選擇器等等
2.2 后代選擇器（重要）
后代選擇器又稱為包含選擇器，可以選擇父元素里面子元素，其寫法就是把外層標(biāo)簽寫在前面，內(nèi)層標(biāo)簽寫在后面，中間用空格分隔。當(dāng)標(biāo)簽發(fā)生嵌套時，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代
元素1? 元素2{樣式聲明}
上述語法表示選擇元素1里面的所以元素2（后代元素）
?ul li{ 樣式聲明 }? ? /*? ?選擇ul里面所有的li標(biāo)簽元素? ?*/
?注意：
元素1和元素2中間用空格隔開
元素1是父級，元素2是子級，最終選擇的是元素2
元素2可以是兒子，也可以是孫子等，只要是元素1的后代即可
元素1和元素2可以是任意基礎(chǔ)選擇器
2.3 子選擇器（重要）
子元素選擇器（子選擇器）只能作為某元素的最近一級子元素。簡單理解就是選親兒子元素
語法：
元素1>元素2{樣式聲明}
上述語法表示選擇元素1里面的所以直接后代（子元素）元素2
例如：
div > p{? 樣式聲明? }? 選擇div里面所以最近一級p標(biāo)簽元素?
注意：
元素1和元素2中間用大于號隔開
元素1是父級，元素2是子級，最終選擇的是元素2
元素2必須是親兒子，其孫子、重孫之類都不歸他管，也可以叫他親兒子選擇器
2.4 并集選擇器（重要）
并集選擇器可以選擇多組標(biāo)簽，同時為他們定義相同的樣式。通常用于集體聲明
并集選擇器是各選擇器通過（，）連接而成，任何形式的選擇器都可以作為并集選擇器的一部分
語法：
元素1，元素2{樣式聲明}
例如：
ul，div{ 樣式聲明 }?
注意：
元素1和元素2中間用逗號隔開
逗號可以理解為和的意思
并集選擇器通常用于集體聲明
?2.5 偽類選擇器
偽類選擇器用于向某些選擇器添加特殊的效果，比如給鏈接添加特殊效果，或者選擇第1個，第n個元素
偽類選擇器書寫最大的特點是用冒號（：）表示，比如hover：first-child
2.5.1 鏈接偽類選擇器
a：link? ? ? ? ? ? ? ? ?選擇所有未被訪問的鏈接
a：visited? ? ? ? ? ? ?選擇所有已被訪問的鏈接
a：hover? ? ? ? ? ? ? 選擇鼠標(biāo)指針位于其上的連接
a：active? ? ? ? ? ? ? 選擇活動鏈接（鼠標(biāo)按下未彈起的鏈接）
?（1）鏈接偽類選擇器注意事項
①，為了確保生效，按照順序聲明：link—visited—hover—active
②，因為a鏈接在瀏覽器中具有默認(rèn)樣式，所以實際工作中需要給鏈接單獨指定樣式
（2）鏈接偽類選擇器實際開發(fā)中的書寫
a{
? ? ? ? color：gray；
? ? ? ? text-decoration：none；
}
a：hover{
? ? ? ? color：red；
? ? ? ? text-decoration：underline；
}
2.6 focus偽類選擇器
：focus 偽類選擇器 用于選取獲得焦點的表單元素
焦點就是光標(biāo)，一般情況<input>類表單元素才能獲取，因此這個選擇器也主要針對表單元素來說
input： focus{
? ? ? ? background-color：yellow；
}
3，CSS的元素顯示模式
3.1什么是元素顯示模式
作用：網(wǎng)頁的標(biāo)簽非常多，在不同地方會用到不同類型的標(biāo)簽，了解他們的特點可以更好的布局我們的網(wǎng)頁
元素顯示模式就是元素（標(biāo)簽）以什么方式進(jìn)行顯示，比如<div>自己占一行，比如一行可以放多個<span>
HTML元素一般分為塊元素和行內(nèi)元素兩種類型
3.2 塊元素
常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標(biāo)簽是最典型的塊元素
塊級元素的特點：
①比較霸道，自己獨占一行
②高度，寬度，外邊距以及內(nèi)邊距都可以控制
③寬度默認(rèn)是容器（父級寬度）的100%
④是容器以及盒子，里面可以放行內(nèi)或者塊級元素
注意：
文字類的元素內(nèi)不能使用塊級元素
<p>標(biāo)簽主要用于存放文字，因此<p>里面不能放塊級元素，特別是不能放<div>
同理，<h1>~<h6>等都是文字類塊級標(biāo)簽，里面也不能放其他塊級元素
3.3 行內(nèi)元素
常見的行內(nèi)元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標(biāo)簽是最典型的行內(nèi)元素。有的地方也將行內(nèi)元素稱為內(nèi)聯(lián)元素。
行內(nèi)元素的特點：
①相鄰行內(nèi)元素在一行上，一行可以顯示多個。
②高、寬直接設(shè)置是無效的。
③默認(rèn)寬度就是它本身內(nèi)容的寬度。
④行內(nèi)元素只能容納文本或者其他行內(nèi)元素。
注意：
鏈接里面不能再放鏈接
特殊情況鏈接<a>里面可以放塊級元素，但是給<a>轉(zhuǎn)換一下塊級模式最安全
3.4 行內(nèi)塊元素
在行內(nèi)元素中有幾個特殊的標(biāo)簽——<img/>、<input/>、<td>，它們同時具有塊元素和行內(nèi)元素的特點
行內(nèi)塊元素的特點：
①和相鄰行內(nèi)元素（行內(nèi)塊）在一行上，但是他們之間會有空白縫隙。一行可以顯示多個（行內(nèi)元素特點）
②默認(rèn)寬度就是它本身內(nèi)容的寬度（行內(nèi)元素特點）
③高度、行高、外邊距以及內(nèi)邊距都可以控制（塊級元素特點）
3.5 元素顯示模式轉(zhuǎn)換
特殊情況下，我們需要元素模式的轉(zhuǎn)換，簡單理解：一個模式的元素需要另外一種模式的特性
比如想要增加鏈接<a>的觸發(fā)范圍
3.5.1，轉(zhuǎn)換為塊元素：display：block；
<style>a{width: 150px;height: 50px;background-color: blueviolet;display: block;}</style><body><a href="#">金星阿姨</a><a href="#">金星阿姨</a></body>
3.5.2，轉(zhuǎn)化為行內(nèi)元素：display：inline；
<style>div{width: 150px;height: 50px;background-color: rgb(226, 43, 52);display: inline;}</style><body><div>我是塊級元素</div><div>我是塊級元素</div>
</body>
3.5.3，轉(zhuǎn)化為行內(nèi)塊：display：inline-block；
<style>span{width: 250px;height: 50px;background-color: aquamarine;display: inline-block;}</style><body><span>行內(nèi)元素轉(zhuǎn)化為行內(nèi)塊元素</span>
</body>3.6 一個小工具的使用 snipaste
Snipaste是一個簡單但強(qiáng)大的截圖工具，也可以讓你將截圖貼回到屏幕上
常用快捷方式：
1，F1可以截圖，同時測量大小，設(shè)置箭頭，書寫文字等
2，F3在桌面置頂顯示
3，點擊圖片，alt可以取色（按下shift可以切換取色模式）
4，按下esc取消圖片顯示
3.7，一個小技巧 單行文字垂直居中的代碼
解決方案：讓文字的行高等于盒子的高度，就可以讓文字在當(dāng)前盒子內(nèi)垂直居中
4，CSS的背景
通過CSS背景屬性，可以給頁面元素添加背景樣式
背景屬性可以設(shè)置背景顏色、背景圖片、背景平鋪、背景圖片位置、背景圖像固定等。
4.1，背景顏色
background-color屬性定義了元素的背景顏色。
background-color：顏色值；
一般情況下元素背景顏色默認(rèn)值是transparent（透明），我們也可以手動指定背景顏色為透明色
4.2，背景圖片
?background-image屬性描述了元素的背景圖像，實際開發(fā)常見于logo或者一些裝飾性的小圖片或者是超大的背景圖片，優(yōu)點是非常便于控制位置（精靈圖也是一種運用場景）
background-image：none / url（圖片地址）
?none：無背景圖（默認(rèn)的）
url：使用絕對或相對地址指定背景圖像
4.3，背景平鋪
如果需要在HTML頁面上對背景圖像進(jìn)行平鋪，可以使用background-repeat屬性
background-repeat：repeat? |? no-repeat? |? repeat-x? |? repeat-y
repeat：背景圖像在縱向和橫向上平鋪（默認(rèn)的）
no-repeat：背景圖像不平鋪?
repeat-x：背景圖像在橫向上平鋪
repeat-y：背景圖像在縱向平鋪
4.4，背景圖片位置
利用background-position屬性可以改變圖片在背景中的位置
background-position：x? y；
參數(shù)代表的意思是：x坐標(biāo)和y坐標(biāo)。可以使用方位名詞或者精確單位
?position：top?| center | bottom | left | center | right 方位名詞
length：百位數(shù) | 由浮點數(shù)和單位標(biāo)識符組成的長度值
1，參數(shù)是方位名詞
? ? ? ? right? center 和 center right 效果是等價的 跟順序沒有關(guān)系
? ? ? ? 如果只指定了一個方位名詞，另一個值省略，則第二個值默認(rèn)居中對齊
2，參數(shù)是精確單位
? ? ? ? 如果參數(shù)是精確坐標(biāo)，那么第一個肯定是x坐標(biāo)，第二個一定是y坐標(biāo)
background-position：20px 50px；
? ? ? ? ?如果只指定一個數(shù)值，那該數(shù)值一定是x坐標(biāo)，另一個默認(rèn)垂直居中
3，參數(shù)是混合單位
? ? ? ? 如果指定的兩個值是精確單位和方位名詞混合使用，則第一個值是x坐標(biāo)，第二個值是y坐標(biāo)
background-position：20px center；
4.5，背景圖像固定（背景附著）
background-attachment屬性設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動
background-attachment后期可以制作視覺
background-attachment：scroll | fixed
scroll：背景是隨對象內(nèi)容滾動（默認(rèn)的）
fixed：背景圖像固定
?