PHP基礎部分

但凡是和輸入、寫入相關的一定要預防別人植入惡意代碼！

HTML部分

語句格式

<br> <hr> 分割符 <p>插入一行
按住shift 輸入！然后按回車可快速輸入html代碼(VsCode需要先安裝live server插件)

html：<h1>標題數字越大越往后</h1> <p>帶間距</p> <div>不帶間距</div>
<span>同一行</span> <a>放超鏈接</a> <b>加粗</b> <i>斜體</i> <img/>圖片

html元素：任何標簽都可以加 <span class="" id="" style = "color=red">測試</span>
style是行內自己的元素超鏈接專用<a href="https://www.baidu.com">測試</a>
圖片用 <img src="圖片鏈接。省略" width="100" height="100" alt="圖片丟失"/>
控制圖片寬高 alt里的文字會在圖片丟失的時候顯示

表單：

action里面填表單要提交的地址可以配合name使用(屬性)
<form action="" method="get"> 直接輸入from+tab
<input type="text"> input是輸入框其中type分為 ↓
</form> text 文本輸入 radio 單選框 checkbox 多選框 select 下拉框 label標簽

<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="nomale">女

<select multiple name="" id=""> select和輸入框不同
<option value=""> 貓</option> multiple是多選關鍵字，按住ctrl可以多選
<option value="dog"> 狗</option> 另外value是它的值中間的只是顯示
<option value=""> 魚</option> method是方法
</select>

<label for="check1">標簽1</label>
<input type="radio" name="sex" id="check1">貓 id與標簽for值一致此時點擊外顯的"標簽1"會自動選中"貓"選項

<button type="submit">提交</button> 如果按鈕的type是submit則會提交該表單
<button type="button">普通按鈕</button> 為普通的button則可以自己添加觸發事件

---------------------------------------------------------------------------------------------------------------------------------

EOF、條件語句、數組

PHP里可以寫html，反過來則不行 html中可以使用PHP中的變量 <?php echo $title1?> EOF加'',則$name不為變量如果要直接連接，還是建議加中括號

echo <<<EOF
1234
EOF

并且自帶轉義功能可以輸出其中的各種特殊字符
第二種用法，定義一個變量等于上面的EOF語法們，然后再輸出也是一樣的
但變量會被解析類似被轉義了如果寫HTML標簽，則標簽仍然生效，但會被隱藏其他標簽也會如此

$t = sprintf("1 %$,2 %$",$_1 $_2)
var_dump($t) sprintf不直接輸出，需要利用返回值。printf則沒有返回值
a.=b 連接兩個字符串

x==y 相等返回true x===y 類型也要相等才返回true != 和 !== 同理
PHP在因為隱性轉換的規則，不同類型的變量是可以進行運算和比較的
&&優先級比and高 ||優先級比or高 ! 優先級比xor高如 $bool = true and false 會先執行= 而不是and

for循環里面可以同時定義i和j (多個變量也可以)
php中的數組允許不連續
$array =[] $array[3]='3'; 數組中仍然只有一個值
數組里可以套數組（鍵值對形式也可以鍵再指定數組）

關聯數組(鍵值對混數組): $array=['鍵1'=>'值1'，'無鍵1'，鍵2'=>'值2'，'無鍵2']
其中無鍵1會是索引0 無鍵2會是1 會將沒有鍵的值連續起來即$array[鍵1']='值1' $array[1]='無鍵2'
count($array) 可以得到長度
foreach($array as $value} //都是數組本身打頭
foreach($array as $key=>$value) {echo $key.$value}

---------------------------------------------------------------------------------------------------------------------------------

HTML屬性

<h1 align="right" "center" "left" >1</h1> 標簽居左中右 <br>單換行 <hr>分割線可以設置屬性

img的圖片需要在同一文件夾下(也可以用絕對路徑和網絡路徑) src路徑 alt替代文本寬高 title鼠標懸停文本
訪問同級的子集 src="./images/imag1" ./允許省略,但能獲得vs提示
子級/ 父級../ 同級./

<em>著重文字</em> <b>粗體</b> <i>斜體</i> <strong>加重語氣</strong>
<del>定義刪除字</del> <span>沒有特定含義</span>

<ol>
<li>大東東</li> 有序列表自動排成1.大東東
<li>中東東</li> 2.中東東
</ol>
可以換成別的前標 <ol type=""> 另外ol允許在li中再嵌套
ul 無序列表全部都是一個圓也可以改樣式 disc默認實心圓 cricle空心圓 square小方塊 none不顯示也允許嵌套

快速生成：ul>li*3（任意數量）
-------------------------------------------------------------------------------------------------------------------------------------------
<table> 表格 <tr>行 <td>列
<table border="1" width="300px" height="100px"> //線的粗細
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
</table>
快速生成: table>tr*3>td*3{我是} 用>分隔
合并單元格:colspan 水平向右合并 rowspan垂直向下合并如<td colspan="2"> 則合并了該兩列

<form action="服務器地址" name="="區分不同表單" method="get|post"></form>
get一般用于提交少量數據 post用來提交大量數據

用戶名：<input type="text" name="">
密碼：<input type="password" name="password" >
<input type="submit" value="提交">
—————————————————————————————————————————————————————————————

CSS

基礎

css 選擇器屬性值這里tr就是選擇器對哪個元素的值更改后面用大括號把屬性和其對應值包裹起來
如果寫在html里，<style>應該寫在title與head之間
<style>
tr{
color:aliceblue;
font-size: 12px;
}

全局生效: 寫一個.css的文件，在里面定義各種屬性，然后讓其他html表去鏈接到它
寫法：<link rel="stylesheet" href="要鏈接到的表名"> 寫在title與head中間外部樣式的寫法可省略style
p 如果寫*號則對所有標簽生效優先級最低
{
color :red;
font-size: 17px; .class1{ color =red;} <h2 class="class1"> 類選擇器可以對多個標簽生效
} 可以寫多個類 <h2 class="class1 class2"> 空格即可不要寫兩個class
id選擇器只對該元素生效一次類可以重復 id是唯一的
<h2 id="id1"> #id1 { color:red;}
合并選擇器 .class1,.class2 { 因為這兩個選擇器的樣式是一樣的情況}
全局選擇器：*
元素選擇器：標簽名稱
類選擇器：.
id選擇器：#
合并選擇器：，優先級內聯>id>類calss>元素選擇器>全局> 作用范圍越大優先級反而越低
---------------------------------------------------------------------------------------------------------------------------------
color：red #FF04F3 rgb(0,255,255) rgba(0,0,255,0) a透明度
font-size：40px
font-weight：boid 粗 bolder更粗 lighter 更細 100-900，定義粗細，400等于等同 700為boid左右
font-style: normal 正常 italic 斜體
font-family: "微軟雅黑";
background-color: 背景顏色;
background-image: 背景圖片;
background-position: 背景圖片位置;
background-repeat: 背景圖片如何填充; repeat填充 -x 水平填充 -y 垂直填充 none不填充
background-size: 背景圖片大小; length percentage cover填充，多余部分裁剪 contain 填充，不足部分有黑邊
文本
text-align: center;
text-decoration: 下劃線underline; 上劃線overline 刪除線line-through
text-transform: 全部大寫uppercase ; 全部小寫上劃線 lowercase 首字母大寫capitalize
text-indent：50px 設置首字母縮進
table,td{ ←想讓里面也有線則讓td也使用
border: 1px solid red; 設置表格邊框大小和顏色
border-collapse: collapse; 設置邊框是否折疊為一根
}
td{
padding: 3px;
color: aqua;
background-color:black;
vertical-align: bottom; 垂直對齊
text-align: center; 水平對齊一般都加給td
}
---------------------------------------------------------------------------------------------------------------------------------
選擇器
E F{} 選擇所有被E包含的F E>F{} 僅有子元素，孫元素不算 E+F{} 選擇第一個同級的F E~F{} 選擇E之后的所有同級F

盒子模型

盒子模型是什么：外邊距（ margin），邊框（border），內邊距（padding），實際內容（content）
所有的html元素都可以看做是盒子，可以更好的調整它的布局
padding ：寫兩個值的話，第二個值代表左右，會填充文字區域
border：圍繞在內邊距之外的一圈線，可以修改線的粗細
margin：看不見透明的，用于隔開其他盒子模型
padding允許分開來寫 padding-left：50px padding-right：50px padding-top：50px padding-bottom：50px //margin同理
---------------------------------------------------------------------------------------------------------------------------------
彈性盒子模型：通過設置display屬性的值為 flex ，可以自適應不同屏幕大小。
彈性盒子只定義了彈性子元素如何在彈性容器內布局，子元素內和彈性容器外是正常渲染的
<div class="bagBox"> 大盒子
<div class="minibox1">小盒子1</div>
<div class="minibox2">小盒子2</div>
<div class="minibox3">小盒子3</div>
</div>
display：flex 開啟彈性盒設置彈性子元素在彈性父元素中的位置 flex-direction： row | row-reverse | column | column-reverse （子元素中設置flex:1 代表占比的權重）
一般記一下縱向就行了（默認）橫向從左向右 | 反轉橫向排列 | 縱向排列 | 反轉縱向排列
justify-content：flex-start | flex-end | center 內容對齊(與橫軸對齊)
彈性項目向行頭緊挨著填充 | 向行尾緊挨著填充 | 居中填充
align-items: center; （一樣，但與縱軸對齊）豎著對齊

子元素上的屬性：
flex ：根據彈性盒子所設置的拓展因子作為比率來分配剩余空間，默認為0 給每個子元素分權重
flex =2 flex=2 flex=1 假如有五份那么12就會占用2份和2份，3占用1份優先級大于寬高度，豎向則高度失效。橫向排列則寬度失效
---------------------------------------------------------------------------------------------------------------------------------

Float浮動流、動畫

float 浮動流 left right 向左向右比如填充兩張圖片間的空隙但浮動流會影響后續元素，所以需要清除浮動
1.可以設父對象高度來清除浮動 2.受影響的元素增加clear屬性 3.overflow清除浮動 4.偽對象方式 clear:both
如果使用第三種方式需要同時給父對象設置clear:both 和overflow：hidden 并且這種方案使用較多

position 指定元素的定位類型 relative相對定位 absolute絕對定位 fixed 固定定位
絕對定位和固定定位會脫離文檔流，設置定位后可以進行四個方向的調整 right left top bottom
position:relative; left: 500px; 那么此時內容就會離左邊500 不管頁面如何滾動，固定定位都會在屏幕上的相同位置
另外相對定位和絕對定位都是相對于父物體的。

Z-index : 1 設置堆疊順序，高的會在低的上面
border-radius：10px 設置圓角可以設置1到4個參數 4口 3Z 2X 1全部
box-shadow：h-shadow、v-shadow、blur、color 水平陰影、垂直陰影、模糊距離、陰影顏色
margin：0 auto 讓左右平均分配，效果上看起來像居中對齊了

CSS動畫：form和to 等同于0%和100% ，動畫的開始和結束
@keyframes 測試動畫名 { name可以任意取
from | 0% {css樣式} percent | 50% {css樣式} to | 100% {css樣式}
} percent是百分比，可以加任意多個，代表動畫的一個階段
h1{
animation: 測試動畫名 3s linear infinite; 需要利用animation控制動畫

動畫名、持續時間、動畫速率、延時執行、播放幾次、播放方向、播放狀態
} （running播放，paused停止播放)
：hover 鼠標滑到這個元素上產生的效果如div：hover { }
具體動畫N多參數用到了再查

---------------------------------------------------------------------------------------------------------------------------------

設置mate標簽在 <head>標簽里加入meta標簽
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,userscalable=no">
寬度=設備寬度初始縮放比例允許用戶縮放到的最大比例用戶是否可以手動縮放

媒體查詢語法： @media screen and(max-width:768px) {
設備小于768px加載樣式
}
@media screen and(max-width:992px) and (min-width:768px) {
設備大于768px但小于992加載樣式
}
@media screen and(min-width:992px) {
設備大于992px加載樣式
}
display：none 將元素隱藏 display：inline 設置為一個行內元素 display：block 設置為一個塊元素

雪碧圖：把所有小圖全部做在一張大圖里，在顯示的時候調整位置展示大圖的不同部位。這樣不需要加載很多小圖，節省性能。
字體圖標：需要去網絡下載，將其css引入本地，調用的時候 class="iconfont 圖標名字類名(可以不寫)"
_____________________________________________________________________________