商务网站页面设计技术,宝塔为什么要安装Wordpress,shop商城系统,网站首页模块如何做链接但凡是和输入、写入相关的一定要预防别人植入恶意代码！ HTML部分 语句格式 br hr 分割符 p插入一行 按住shift 输入！ 然后按回车可快速输入html代码(VsCode需要先安装live server插件)
html：h1标题 数字越大越往后/h1 p…
但凡是和输入、写入相关的一定要预防别人植入恶意代码！ 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不显示 也允许嵌套
快速生成 ：ulli*3（任意数量） ------------------------------------------------------------------------------------------------------------------------------------------- table 表格 tr行 td列 table border="1" width="300px" height="100px" //线的粗细 tr td第一行第一列/td td第一行第二列/td /tr /table 快速生成: tabletr*3td*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 EF{} 仅有子元素，孙元素不算 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是linkrel="stylesheet" href=“路径” js 是script src=“路径”/script
ctrl+ / 也可以注释
输出方式：alert("浏览器弹出框") document.writes("显示在界面上");
