黑马程序员技术交流社区
标题:
【石家庄校区】WEB阶段day01-day08
[打印本页]
作者:
syc123
时间:
2018-1-23 14:54
标题:
【石家庄校区】WEB阶段day01-day08
本帖最后由 syc123 于 2018-1-23 16:32 编辑
WEB阶段day01-day08
【HTML的概述】
什么是HTML
HTML:Hyper Text Markup Language --- 超文本标记语言.
* 标记语言：指的是通过一组标签的形式描述事物的一门语言.
* 超文本：比普通的文本更强大.
【HTML的列表标签】
有序列表
<ol>
<li></li>
</ol>
无序列表
<ul>
<li></li>
</ul>
HTML的结构标签
* 跟标签:<html></html>
* <head> -- html的头标签
* <body> -- html的体标签
<font>标签:HTML中的字体标签.
使用：<font>文字</font>
* <font>标签的属性:
* <标签 属性名=”属性值” 属性名=”属性值”></标签>
HTML的排版标签】
标题标签：h标签<h1>...<h6>
<!-- HTML的标题标签 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
段落标签：p标签
居中标签：<center>标签
图片标签:<img>
* 属性:
* src :图片的来源.
* width :图片的宽度.
* height:图片的高度.
* alt :图片找不到显示的内容.
HTML的超链接标签：<a>
* 属性:
* href :链接的路径
* target :打开的方式
* _self :在自身页面打开
* _blank :新打开一个窗口
【HTML的块标签】
<div></div> :默认一个div独占一行.
<span></span> :默认在同一行.
【HTML的表单标签（*****）】
HTML的表单标签：<form>
* 常用属性:
* action属性:提交的路径.默认提交到当前页面
* method属性:请求的方式.GET和POST.默认是GET.
***** GET方式和POST方式的区别?
* GET :数据会显示到地址栏中.GET方式提交是有大小的限制.
* POST :数据不会显示到地址栏中.POST方式提交的是没有大小限制.
* <input>
* type=”text”:文本框
* type=”password”:密码框.
* type=”radio”:单选按钮.
* type=”checkbox”:复选框.
* type=”file”:文件上传.
* type=”hidden”:隐藏字段.
* type=”submit”：提交按钮.
* type=”reset”:重置按钮.
* type=”button”:普通按钮.
* type=”image”:图片按钮.
* <select>:下拉列表.
* <textarea>:文本区
CSS的选择器
元素选择器：
div{
border:1px solid blue;
width:40px;
height:45px;
}
ID选择器:
#d1{
border:2px solid red;
}
类选择器：
.divClass{
border:2px solid yellow;
}
* CSS的选择器：(****)
* 元素选择器:
* ID选择器：
* 类选择器：
* 后代选择器：
* 子元素选择器：
* CSS的样式：
* 文本
* 背景
* 字体
* 列表
* CSS的概述：层叠样式表.
* 修饰HTML的页面.使页面与样式分离.
* CSS的语法：
* 选择器{属性名:属性值;属性名:属性值;...}
* CSS的引入方式：
* 行内样式：在html元素上使用style属性设置
* 内部样式：在html中使用<style></style>进行设置
* 外部样式：定义一个css文件,在html中引入该文件.<link href=”” type=”” rel=””/>
【CSS的显示和隐藏的属性】
* display
* block：显示元素：
* none：隐藏元素：
* CSS的盒子模型：
* 内边距：padding
* 边框：border
* 外边距：margin
* CSS的悬浮和定位：
* 悬浮：float属性设置悬浮.
* 清除悬浮：clear属性清除.
* 定位：position属性设置定位.
* 使用left和top属性控制位置.
* display属性：控制元素的显示方式：
* block--显示的, none--隐藏的,inline--显示到一行.
【CSS中的定位】
position属性设置定位：
* relative:相对定位
* absolute:绝对定位
使用另外两个属性:left,top
【JS的数据类型】
JS将数据类型分成两类：
* 原始类型：
* undefined：未定义类型
* boolean:布尔类型
* number:数字类型
* string:字符或字符串.
* null：空
* 引用类型：
* 对象类型.对象类型默认值是null.
* JS的组成：ECMAScript，BOM，DOM.
* JS的语法：
* JS的变量声明:
* JS的数据类型：
* 原始类型：undefined,boolean,string,number,null
* 引用类型：
* JS的运算符：
* 与java中基本一致.有一个 === 类型与值都相同的情况下才会为true.
* JS的语句：
* 与Java中的语句一致.
【JS的通常开发的步骤】
JS通常都由一个事件触发.
触发一个函数,定义一个函数.
获得操作对象的控制权.
修改要操作的对象的属性或值.
js三步
确定事件 触发函数 操作控件
定义函数:
* function 函数名称(){
// 函数体
}
【JS的引入方式】
通常两种方式：
一种：页面内直接编写JS代码,JS代码需要使用<script></script>.
二种：将JS的代码编写到一个.js的文件中,在HTML中引入该JS代码即可.
正则的匹配:
JS中有两种匹配正则的方式:
* 使用String对象中的match方法.
* 使用正则对象中的test方法.
js的事件
onfocus 获得焦点
onblur 失去焦点
onsubmint 提交的时候
【JQuery的概述】
什么是JQuery:
JQuery是一个JS的框架（JS的类库）.对传统的JS进行了封装.
现在企业的开发中往往不会使用传统的JS进行开发，通常都会使用JS框架进行开发.
JS的常用的框架:
JQuery,ExtJS,DWR,Prototype...
* JQuery的使用:
* 引入JQuery的JS.
* window.onload和$(document).ready(function(){});区别?
* onload页面加载完成后才会执行.执行一次
* ready在页面的DOM树绘制完成就会执行.执行多次.
* JS对象与JQuery对象的转换.
* JS-->JQuery: $(JS的对象)
* JQuery-->JS: JQ对象.get(0), JQ对象[0]
* JQuery的选择器：(*****)
* 基本选择器：
* ID选择器，类选择器，元素选择器，通配符选择器，选择器并列.
* 层级选择器：
* 空格 ,> ,+ ,~
* 过滤:
* :first,:last,:eq(),:even,:odd...
* 属性选择器:
* [属性名],[属性名=’属性值’]...
* 表单选择器:
* :input,:text,:password,:radio...
* 可见性:
*
* 表单对象属性：
* :checked,:selected,:enable,:disable
* JQuery实现效果:
* show(),hide(),slideDown(),slideUp(),fadeIn(),fadeOut(),animate()
* JQuery样式操作:
* css();
* JQuery属性操作的方法:
* attr(),removeAttr(),prop(),removeProp(),html(),text(),val(),addClass(),removeClass()
* JQuery文档处理:
* append(),appendTo(),insertBefore(),insertAfter(),remove(),clone(),replaceAll()
* JQuery的事件:
* click(),change(),submit(),dblclick(),keyUp(),keyDown()...
* toggler(),hover() ---进行事件的切换.
【JQuery的DOM操作】
* 常用的方法:
* append(); ---在某个元素后添加内容.
* appendTO(); ---将某个元素添加到另一个元素后.
* remove(); ---将某个元素移除.
【JQuery的遍历】
遍历的方式一：
* $.each(objects,function(i,n){
});
遍历的方式二:
* $(“”).each(function(i,n){
});
JQ的事件切换：
* toggle(); --单击事件的切换
* hover(); --鼠标悬停的切换
【DOM的概述】
什么是DOM
DOM：Document Object Model：文档对象模型.
将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子.
DOM的使用：
知道document，element，attribute中的属性和方法
【DOM的常用的操作】
获得元素：
* document.getElementById(); -- 通过ID获得元素.
* document.getElementsByName(); -- 通过name属性获得元素.
* document.getElementsByTagName(); -- 通过标签名获得元素.
创建元素：
* document.createElement(); -- 创建元素
* document.createTextNode(); -- 创建文本
添加节点：
* element.appendChild(); -- 在最后添加一个节点.
* element.insertBefore(); -- 在某个元素之前插入.
删除节点：
* element.removeChild(); -- 删除元素
BootStrap：
* 响应式的HTML,CSS,JS的框架.
* 响应式设计：
* 设计一套页面,适配不同的设备,在手机,PAD,PC端都能够正常浏览.
* 响应式原理：
* 使用CSS3的媒体查询,根据屏幕的分辨率匹配不用的样式.
* BootStrap:
* 全局CSS：
* 栅格：
* 表单:
* 按钮...
* 组件:
* 导航条：
* 分页栏:
* 标签页:
* JS的插件：
* 图片轮播.
数据库：就是一个文件系统,这个文件必须通过标准的SQL访问.
SQL:结构化的查询语言.
SQL分类:
DDL:数据定义语言
* create,alter,drop...
DML:数据操纵语言
* update,insert,delete
DCL:数据控制语言
* grant,if..
DQL:数据查询语言
* select
【创建数据库】
语法:
* create database 数据库名称 [character set 字符集 collate 字符集校对];
练习:
* 创建db1;
* create database db1;
* 创建一个带有字符集的数据库db2;
* create database db2 character set gbk;
* 创建一个带有字符集和校对规则的数据库db3;
* create database db3 character set utf8 collate utf8_bin;
【查看数据库】
语法:
* 查看数据库服务器中所有的数据库:
* show databases;
* 查看某个数据库的定义信息.
* show create database 数据库名;
* 查看当前正在使用的数据库信息.
* select database();
【删除数据库】
语法:
* 删除数据库:
* drop database 数据库名;
【修改数据库】
语法:
* 修改数据库修改的是的数据库的字符集和校对规则.
* alter database 数据库名 character set 新字符集 collate 校对规则;
【切换数据库】
语法:
* use 数据库名称;
【创建表】
语法:
* create table 表名 (
字段名 类型(长度) 约束,
字段名 类型(长度) 约束,
字段名 类型(长度) 约束
);
***** MYSQL中除了字符串类型需要设置长度其他的类型都有默认长度.
约束：
单表约束：
* 主键约束：primary key (默认就是唯一非空的)
* 唯一约束：unique
* 非空约束：not null
【表的修改】
修改表添加列：
* alter table 表名 add 列名 类型(长度) 约束;
* alter table employee add image varchar(50);
修改表删除列：
* alter table 表名 drop 列名;
* alter table employee drop job;
修改表的列的类型长度及约束:
* alter table 表名 modify 列名 类型(长度) 约束;
* alter table employee modify image varchar(80) not null;
修改表的列名
* alter table 表名 change 旧列名 新列名 类型(长度) 约束;
* alter table employee change image eimage varchar(60);
修改表名
* rename table 旧表名 to 新表名;
* rename table employee to user;
修改表的字符集：
* alter table 表名character set 字符集;
* alter table user character set gbk;
【插入记录】
语法
* insert into 表名 (列名,列名,...) values (值1,值2,...); ---插入指定列的值
* insert into 表名 values (值1,值2,...); ---插入所有列的值
注意事项：
* 列名的个数与值的个数对应.
* 列的类型与值的类型对应.位置也要对应.
* 列的类型如果是字符串或者日期,写值的时候使用单引号将值引起来.
* 插入的值的最大长度不能超过列的最大长度
【修改记录】
语法：
* update 表 set 列名=值,列名=值 [where 条件];
注意事项：
* 列名和值类型也要一致.
* 值不能超过列的最大长度.
* 值是字符串或日期,需要使用单引号.
【删除记录】
语法：
* delete from 表 [where 条件];
注意事项：
* 删除表中的一行记录,不能删除某列值
* 如果没有条件删除表中的所有列
【基本查询】
查询语句：
* select [distinct] *|列名 from 表 [where 条件];
【SQL的查询语句的总结】
顺序: s...f...w...g...h...o...
【多表的设计】
一对多的关系的建表原则：
* 在多的一方创建一个字段,这个字段作为外键执向一的一方的主键.
多对多的关系的建表原则：
* 创建一个第三种表，中间表中至少需要两个字段分别作为外键执向多对多双方的各自的主键.
一对一的关系的建表原则：
* 唯一外键对应：假设一对一的双方是一对多的关系.在多的一方创建外键执向一的一方的主键.需要在外键上添加一个unique约束.
* 主键对应：将一对一的双方的主键建立映射
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2