各种笔记大杂烩。。。

1.网站软件体系结构：

B/S  Browser浏览器  |  Server服务器    
1.浏览器---浏览器厂商
    谷歌
    火狐
    Opera
    Safari
2.服务器端 PHP
C/S
对应的客户端 对应服务器端

2.HTTP协议(超文本传输协议)

http://www.baidu.com:80/

1.基于请求(回车)和响应(页面html)
2.请求方式：GET方式 POST方式
3.响应状态码：状态码列表见word文档  200 OK  304未改变  常见状态码
4.无状态协议(不能跟踪用户状态) (Cookie+Session)
5.默认向80端口发起请求(端口：一个软件对应一个端口) 80端口对应的软件Apache(发布网站)

3.LAMP

L  --  Linux系统
A ---  Apache服务器|WEB服务器 (发布网站)
M ---- MySQL数据服务器(存放网站数据)
P ---- PHP脚本语言 PHP解析器

4.LNMP

L  --  Linux系统
N ---  Nginx服务器|WEB服务器 (发布网站)
M ---- MySQL数据服务器(存放网站数据)
P ---- PHP脚本语言 PHP解析器

5.网站组成

客户端浏览器
超文本标记语言 HTML
层叠样式表 CSS
服务器端脚本语言 PHP
数据库管理系统 MySQL
web服务器 Apache
网站特效 Javascript

6.URL地址组成：

http://localhost:80/aa/bb/a.html
http://localhost:80/aa/bb/a.php?uid=4&name=zhu&age=23

协议：http://
域名：localhost本机域名  www.baidu.com
端口：默认80
路径：目录(文件夹)+文件(扩展名|后缀名).txt|.conf|.pptx
     目录与文件的分割符使用正斜线  /   
     /  DocumentRoot "D:/wamp/www" apache配置文件决定

参数：?uid=4&name=zhu    
     ?
     名称=值
     多对名称=值的写法使用 & 进行分割

7.W3C制定标准组织前端(HTML+CSS+JS)

8.WEB工作原理

1.用户在浏览器地址栏中输入URL地址 回车 向服务器发送请求

2.Apache接收请求  进行判断
    如果是.html的文件  直接返回给客户端浏览器
    如果是.php文件  去找Apache上加载的扩展php解析器(动态生成html) 去解析php文件   再返回给客户端浏览器

3.由客户端浏览器进行解析

1.什么是HTML?

超文本标记语言,由客户端浏览器直接解析

2.编写一个HTML页面

创建一个文件后缀名为.html 或者 .htm

使用编辑器打开格式–转为utf-8无BOM格式

HTML标准 <!DOCTYPE html>

3.HTML注释

注释作用：

解释说明

利于团队合作开发

利于排错帮助进行开发

写过功能不需要尽量加注释

注释注意事项：
能注释多行的注释不能嵌套使用

错误例子：<!--<!--....-->-->

4.body体中的内容

标题hn(1-6) 效果：加粗换行

段落p 上下各空一行
链接 a :

必须属性：href链接地址路径：绝对路径相对路径

可选属性：target链接的打开方式默认当前窗口打开,target=”_blank” 新窗口打开

a链接的另一个应用：锚点

设置锚点：<a name=”锚点名称” id=”锚点名称”></a>
访问锚点：<a href=”url#锚点名称”>链接名称</a>

5.图像 img

src
width
height
alt 图像加载失败显示的信息

浏览器有容错性只能通过显示效果去判断标签是否正确

6.全局属性:几乎所有标签都可以使用的属性

id
class
style
title 鼠标放上去提示的信息

7.双标签：

<标签名称 属性名称="属性值" 属性名称="属性值">内容</标签名称>

8.单标签:

<标签名称 属性名称="属性值" 属性名称="属性值">
<标签名称 属性名称="属性值" 属性名称="属性值" />

1.文本标签

换行单标签 br

加粗 b

强调加粗 strong

斜体 i

上标 sup

下标 sub

删除线 del

水平线 hr

2.列表标签

无序列表 ul li

有序列表 ol li

自定义列表dl dt dd

3.表格标签

表格属性：边框 border 单元格之间距离 cellspacing

table表格行:tr 列:td | th加粗居中

表格标题 caption

合并单元格：rowspan=” “ colspan=” “

4.表单标签 form

表单标签：form 必须属性：提交地址action=” “ 提交方式method=” “ get默认 post
get与post的区别?

get地址栏可见相对不安全搜索地址栏有长度限制 2kb

post地址栏不可见相对安全长度没有限制(通过配置去修改)

5.表单项

单标签 input 必须属性：1.type 2.name 3.value=” “

文本框：text name=” “

密码框：password name=” “

单选按钮：radio name=” “ name值必须相同 value=” “ 值一般选择数字

多选按钮：checkbox name=” “ 值必须不同或者名称相同加[]建议 value=” “

文件域：file name=” “

提交按钮：submit value=”按钮上的文字” 具有提交作用

图像按钮：image src=” “ 具有提交作用

重置按钮：reset value=” “ 恢复打开表单时的状态

普通按钮：button value=” “ 没有任何作用配合js

下拉框：select name option value

多行文本域：textarea name=” “ rows=” “ cols=” “

6.几乎所有表单项的默认值(修改)

文本框：value
单选按钮：checked
多选按钮：checked
文件域：<img src=" ">
下拉框：selected
多行文本域：双标签之间

属性名称与属性值相同：checked 或 checked=”checked”

7.框架标签

<iframe src=" " width=" " height=" " frameborder="0">
    ...
</iframe>

8.标签是可以嵌套使用,嵌套合理(通过浏览器解析)并且正确

块元素p可以嵌套行内元素b i a

块元素和行内元素的区别：

块元素：css中块可以设置宽高、占住一块

行内元素：不可以设置宽高、背景颜色、内容多少就占位多少

9.无意义标签

div 无意义块标签

span 无意义行内标签

10.命名规则：

由数字、字母、下划线组成数字不能开头

要求有意义

1.html常用实体:

&lt;  <
&gt;  >
&nbsp; 空格
&copy; 版权符号

浏览器解析特性：多个空白、回车解析时只能解析成一个可以使用空格实体去做

2.表单属性：

Required 必填项
Autofocus自动获取焦点
placeholder="请输入一个符合要求的邮箱"  提示信息

3.什么是css?

层叠样式表(修饰html)

由客户端浏览器直接解析

4.css语法?

选择器{属性名称:属性值; 属性名称:属性值; ….}

P{text-indent:2em;}

5.在html中如何引入css 三种方式

外部样式:

在head头中
单标签：<link href=”css文件地址” rel=”stylesheet”>

内部样式:

在head头中
<style>
Css语法
P{text-indent:2em;font-size:12px;}
</style>

行内样式:

<标签名称 style=”css语法”>
<div style=”width:100px;height:100px;background:red;”>
    ... ...
</div>

6.三种方式，选择哪儿个更好?

外部样式除首页外

内部样式首页

行内样式修改页面

优先级问题：就近原则

7.作用范围

外部可以应用于任何一个页面

内部当前页面

行内当前标签

8.css选择器

1. html标签选择器

使用标签名称作为选择器
2.id选择器唯一性

标签中使用id属性值要求有意义

#id属性值{属性名称:属性值;...}

3. class选择器重复使用

标签中使用class属性值要求有意义

.class属性值{属性名称:属性值;....}

Class属性的值可以给多个使用空格分开

<li class="one two four">aaaaaaa</li>

9.css注释

/ 注释内容 /

注意：能注释多行的注释不能嵌套使用

1.选择器

关联选择器

使用空格分开

标签嵌套关系

组合选择器

使用逗号隔开

并列关系多个元素使用同样样式

伪元素选择器

a标签

a:link
a:visited
a:hover
a:active

2.css3选择器

属性选择器:

[attr] 具有此属性的元素

[attr=val] 具有此属性并且属性值为val

[attr~=val] 具有此属性并且属性值使用空格格开的其中一个值为val

[attr|=val] 具有此属性并且属性值使用a-

[attr^=val] 具有此属性，属性值以val开头的

[attr$=val] 具有此属性，属性值以val结尾的

[attr*=val] 具有此属性，属性值含有val的

关系选择器(标签嵌套):

父子关系：选择器 > 选择器

相邻关系 | 兄弟中的第一个 :选择器 + 选择器

兄弟关系 | 兄弟中的所有：选择器 ~ 选择器

可以混搭:

Div > p + h3 
#one > .two  ~ li
Table > tr > td

伪类选择器:

设置第一个字符的样式 :first-letter

设置第一行的样式 :first-line

设置第几个孩子的样式 :nth-child(n)

设置倒数第几个孩样式 :nth-last-child(n)

设置鼠标移上去的样式 :hover

设置元素获取焦点时的样式 :focus

设置元素鼠标选择时的样式 ::selection

3.属性与属性值

字体颜色 color:red;

文本修饰 text-decoration:none | underline;

字体大小 font-size:18px;

背景颜色 background-color:blue;

设置元素的宽 width:300px;

设置元素的高 height:400px;

4.颜色的属性值

英文单词 red,

十六进制3,6 工具 0-9a-f #6个数字 #abcdef #234abd

Rgb 工具 rgb(13,123,232) 三个数 0-255

Rgba a 透明度 0-1 rgba(13,123,232,0.7)

Hsl h 0-360 s,l 0%-100% hsl(234,50%,50%)

Hsla hsla(234,50%,50%,0.6)

1.字体属性

第一种方式：具体属性具体写

字体大小 font-size

px 像素

cm 厘米

ex 1/2

em 1em 2em 2倍

设置值的时候注意一下单位

字体颜色 color

参考颜色取值方式

字体族科 font-family

依赖客户端系统中的字体可以使用逗号分开给多个值

如：font-family:楷体,黑体,宋体;

字体是否是斜体 font-style:italic;

字体是否加粗 font-weight:bold;

是否是小型大写字母体font-variant:small-caps;

第二种方式：简写方式

注意顺序
font:斜体  小型大写字母字体  加粗  字体大小  字段族科
值之间使用空格隔开
没有此属性跳过
如：font:small-caps bold 3em 楷体,黑体,宋体;
如：font:italic small-caps bold 3em 楷体,黑体,宋体;

2.文本属性

首行缩近：text-indent:2em;

文本水平对齐方式：text-align:left | center | right

文本修饰(有无下划线):text-decoration:none|underline |line-through === del

垂直居中 height 与 line-height行高值相同

行高属性line-height:30px;

字间距：letter-spacing:1px;

文本阴影: text-shadow:1px 1px 0 green;

3.边框属性

solid实线 dashed 虚线

设置四个边的边框

Border:1px solid red;

设置单独某一个边的边框

上边框：border-top:1px dashed blue;
右边框：border-right:1px solid blue;
下边框：border-bottom:1px solid yellow;
左边框：border-left:1px solid green;

边框圆角：border-radius:10px;

正圆：元素宽高一致值设置为宽的一半或高的一半即可

4.背景属性

背景图像：background-image:url(图像路径);

背景是否平铺：background-repeat:repeat | no-repeat | repeat-x | repeat-y

背景定位：background-position:水平垂直

1.公共样式

标签默认自带 margin 或 padding

统一设置为 0

2.内填充 padding

含义：边框与内容之间的留白
特点：撑开所在元素需要重新计算大小

使用：padding有四种设置值的方式

padding:10px; 四个边
padding:10px 20px; 上下  左右
padding:10px 20px 30px; 上  左右  下
padding:10px 20px 30px 40px; 上 右 下 左

可以单独设置某一个边

padding-top 上
padding-right 右
padding-bottom 下
padding-left 左

3.外边距 margin

含义：边框与边框之间留白
特点：相邻边框会合并合并以最大值为主
使用：margin有四种设置值的方式
例：
margin:10px; 四个边
margin:10px 20px; 上下左右
margin:10px 20px 30px; 上左右下
margin:10px 20px 30px 40px; 上右下左

可以单独设置某一个边

margin-top 上
margin-right 右
margin-bottom 下
margin-left 左

margin特殊用法：页面居中 margin:0 auto;

4.浮动属性

float:none 所有元素默认值| left左 | right右
浮动层特点：

浮动的元素：脱离文档流,不占用原来文档流的位置
转为浮动层元素
浮起来的元素变为实际大小
浮起来的元素，从当前位置开始浮,不会影响上面的
需要使用clear进行配合
不受浮动元素影响 Clear:both;

5.定位

position:relative相对定位 | absolute绝对定位 | fixed固定定位
position中的所有值都需要配合top left right bottom 来进行位置定位
relative:不脱离文档 0,0 相对于自己进行定位
absolute:完全脱离文档 0,0浏览器随滚动条滚动
Fixed：完全脱离文档 0,0 浏览器不随滚动条滚动
定位到同一个位置数值值越大越在上方显示
z-index:12;

6.其它

列表样式:无
1
2
list-style:none;
list-style-type:none;

display:块与行之间转换需要使用时才去用

display:block; 块
display:inline; 行内
a 标签 行内元素 转为块元素
display:none;

内容超元素大小：如何处理这部分内容

1
2
3

overflow:hidden |scroll | auto;  两个方向
overflow-x 横向滚动
overflow-y 竖向滚动

1.css3属性

鼠标形状 cursor:pointer;
多行文本域 resize:none; 是否允许重新调整大小不允许
html表格属性可以调整相关样式
border-collapse:collapse; 相邻边框合并
caption-side:top | bottom; 表格标题位置
透明属性
opacity:0-1之间

2.关键词

盒子box
变换transform
动画animation
过渡trasition

1.什么是php?

1.超文本预处理器
2.服务器端脚本语言 (在服务器端进行解析执行)
3.由php解析器进行解析(解释型语言)
4.可以与html进行混编

2.编写php文件 php相关语法报错

后缀名.php
php标记

<?php  推荐  纯php文件
<?php....?> 推荐  混编 html+php一个文件中
<%.....%> asp风格标记 asp_tags = Off | On
<script language=”php”>....</script> 长风格
<?....?> 短风格标记 short_open_tag = Off | On

只要修改配置文件必须重启apache服务器(重新加载配置文件)
echo 将内容给浏览器 | 输出给浏览器
每条语句结束必须使用分号 ; 最后一条语句<?php..?>是可以加也可以不加的要求：都加
存放所有与php相关的信息 phpinfo();

3.php注释

单行注释 // #
多行注释 /…../

4.什么是变量?

临时存储值的空间

5.如何声明(定义)一个变量?

$a = 1; 把1赋给变量a
= 赋值符号 从右到左 
变量名称 = 变量值;

6.变量的命名规则

必须是以 $ 开头

由数字、字母、下划线组成，不能以数字开头(数字不能挨着$符)
有意义
变量严格区分大小写

功能：var_dump(变量名称); 输出变量的值和类型
变量值决定变量类型

7.php中八种变量类型

四种标量

整型int

十进制 0-9
十六进制 0x 0-9a-f
八进制 0 0-7
以十进制显示

浮点型float

1
2
3

小数 3.4
科学计数法 2e3 2e-3
永远不要相信浮点型精确到了最后一位

字符型string
布尔型bool

1
2
3

if(表达式){
    语句块;
}

总结：假的情况其余全为真

两种复合类型

数组array
对象object

两种特殊类型

资源resource
空Null