笔记大杂烩

各种笔记大杂烩。。。

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=” “

  1. 文本框:text name=” “
  2. 密码框:password name=” “
  3. 单选按钮:radio name=” “ name值必须相同 value=” “ 值一般选择数字
  4. 多选按钮:checkbox name=” “ 值必须不同 或者 名称相同加[]建议 value=” “
  5. 文件域:file name=” “
  6. 提交按钮:submit value=”按钮上的文字” 具有提交作用
  7. 图像按钮:image src=” “ 具有提交作用
  8. 重置按钮:reset value=” “ 恢复打开表单时的状态
  9. 普通按钮:button value=” “ 没有任何作用 配合js
  10. 下拉框:select name option value
  11. 多行文本域: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.三种方式,选择哪儿个更好?

  1. 外部样式 除首页外
  2. 内部样式 首页
  3. 行内样式 修改页面

优先级问题:就近原则

7.作用范围

  1. 外部 可以应用于任何一个页面
  2. 内部 当前页面
  3. 行内 当前标签

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

伪类选择器:

  1. 设置第一个字符的样式 :first-letter
  2. 设置第一行的样式 :first-line
  3. 设置第几个孩子的样式 :nth-child(n)
  4. 设置倒数第几个孩样式 :nth-last-child(n)
  5. 设置鼠标移上去的样式 :hover
  6. 设置元素获取焦点时的样式 :focus
  7. 设置元素鼠标选择时的样式 ::selection

3.属性与属性值

  1. 字体颜色 color:red;
  2. 文本修饰 text-decoration:none | underline;
  3. 字体大小 font-size:18px;
  4. 背景颜色 background-color:blue;
  5. 设置元素的宽 width:300px;
  6. 设置元素的高 height:400px;

4.颜色的属性值

  1. 英文单词 red,
  2. 十六进制3,6 工具 0-9a-f #6个数字 #abcdef #234abd
  3. Rgb 工具 rgb(13,123,232) 三个数 0-255
  4. Rgba a 透明度 0-1 rgba(13,123,232,0.7)
  5. Hsl h 0-360 s,l 0%-100% hsl(234,50%,50%)
  6. Hsla hsla(234,50%,50%,0.6)

1.字体属性

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

  • 字体大小 font-size
    1. px 像素
    2. cm 厘米
    3. ex 1/2
    4. 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

  1. 含义:边框与内容之间的留白
  2. 特点:撑开所在元素 需要重新计算大小
  3. 使用:padding有四种设置值的方式
    1
    2
    3
    4
    padding:10px; 四个边
    padding:10px 20px; 上下 左右
    padding:10px 20px 30px; 上 左右 下
    padding:10px 20px 30px 40px; 上 右 下 左

可以单独设置某一个边

1
2
3
4
padding-top 上
padding-right 右
padding-bottom 下
padding-left 左

3.外边距 margin

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

可以单独设置某一个边

1
2
3
4
margin-top 上
margin-right 右
margin-bottom 下
margin-left 左

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

4.浮动属性

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

  1. 浮动的元素:脱离文档流,不占用原来文档流的位置
    转为浮动层元素
  2. 浮起来的元素变为实际大小
  3. 浮起来的元素,从当前位置开始浮,不会影响上面的
  4. 需要使用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. 列表样式:无

    1
    2
    list-style:none;
    list-style-type:none;
  2. display:块与行之间转换 需要使用时才去用

    1
    2
    3
    4
    display:block; 块
    display:inline; 行内
    a 标签 行内元素 转为块元素
    display:none;
  3. 内容超元素大小:如何处理这部分内容

    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.关键词

  1. 盒子box
  2. 变换transform
  3. 动画animation
  4. 过渡trasition

1.什么是php?

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

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

后缀名.php
php标记

1
2
3
4
5
<?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.变量的命名规则

必须是以 $ 开头

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

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

7.php中八种变量类型

四种标量

整型int

1
2
3
4
十进制 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

打赏

刘伟 wechat
欢迎您扫一扫上面的微信公众号( 或者搜索:darrenliuwei )订阅
如果觉得本文对您有启发,可以随意打赏一点鼓励我继续更新!