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=" .baidu ">测试</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");