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 图标名字类名(可以不写)"
_____________________________________________________________________________