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不为变量如果要直接连接，还是建议加中括号

占位符形式。sprintf可以先把输出存起来，等一些东西执行完再输出

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

JavaScript 

基础

<script>

    var num =10;                       JS写在html的script标签里

</script>

console.log("hello world");   在页面控制台输出，不会显示在页面上

引入方法：①直接写 ②本地引入<script src="./javaLocal.JS"> </script>  ③网络引入 写在头之间

 css是<link rel="stylesheet" href=“路径”>   js 是<script src=“路径”></script>

ctrl+ / 也可以注释

输出方式：alert("浏览器弹出框")    document.writes("显示在界面上");