九江市建设局官方网站不属于网络推广方法
但凡是和输入、写入相关的一定要预防别人植入恶意代码！
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 图标名字 类名(可以不写)"
_____________________________________________________________________________
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("显示在界面上");