HTML+CSS+JS+MYSQL入门总结：_html-js-css

HTML+CSS+JS+MYSQL入门总结：

HTML：

概念：最基础的网页开发语言--->Hyper Text Markup Language超文本标记语言

*超文本：用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。

*标记语言：由标签构成的语言。<标签名称>

#标记语言不是编程语言。

2、语法：

*html文档后缀名为 .html 或者 .htm

*标签分类：

#围堵标签：有开始和结束标签。

eg: xxx>

#自闭和标签：开始和结束标签在一起。

eg：

*标签之间可以嵌套

*开始标签之中可以定义属性。属性由键值对构成，值需要用引号引起来（单双引都可）。

*html的标签不区分大小写，但平时书写时建议小写。

3、标签分类：

*文件标签：构成html的最基本的标签。

。html：该标签为html文档的根标签，其中包含网页中的所有内容。

。head：头标签--->用于指定html文档的一些属性，也可引入外部资源--->主要包含给浏览器的信息，如网页的编码格式，网页标题等。

。title：网页标题标签。

。meta:元标签。

。body：体标签，其中主要包含给用户看的内容，如文本，图片，视频等。

。<！DOCTYPE HTML>:html5中定义该文档为html文档。

*文本标签：和文本有关的标签。

。注释：

。标题标签：h1-h6--->字体大小逐渐递减。

。段落标签：

。换行标签：

。水平线：

。字体加粗:

。字体斜体：

。字体标签：

。大号字：big

。小号字：small

。强调字体：em

。文本居中：

#属性：

color：颜色。

width：宽度。

height：高度。

size：大小

align：对其方式--->center居中 --->left左对齐 --->right右对齐

#属性定义：

color：a、英文单词：red、green、blue

b、rgba(值1，值2，值3，透明度)：值的范围在0-255之间，透明度0-1 之间。

c、#值1值2值3：值的范围：00~FF之间。

width：a、数值的单位默认是px即像素。

b、数值%：占比相对于父元素的比例。

*图片标签：

img：展示图片--->属性为src-->用于指定图片的位置-->位置可填绝对路径。

align：对齐方式。

alt：提示信息，值自定义。

*媒体标签：

。音频：audio

#属性：controls-->控制器

src-->播放的音频资源地址，值自定义

autoplay-->自动播放

loop：循环播放

。视频：video

#属性同上。

注意：音频标签与视频标签兼容性不好，导致有些属性某些浏览器不支持，需要兼容 *** 作。

*列表标签：

。有序列表：ol li

#属性：1--->数字类型

a--->小写字母类型

A--->大写字母类型

i--->小写古罗马

I--->大写古罗马

。无序列表：ul li

#属性：type--->类型

circle--->实心圆

square--->黑色方块

none--->取消

*链接标签：

。a：定义一个超链接。

#属性:href-->指定访问资源的url(统一资源定位符)。

target-->指定打开资源的方式。

_self:默认值，在当前页面打开。

_blank:在空白页面打开。

*div和span：

。div：每一个div占满一整行，块级标签。

。span：文本信息在一行展示，不换行--->行内标签，内联标签。

*语义化标签：

。
：页眉

。
：页脚

*表格标签：

。table：定义表格。

#width-->宽度。

#border-->边框。

#cellpadding-->定义内容和单元格的距离

#cellspacing-->定义单元格之间的距离(如果指定为0，则单元格的线会合并为一条)

#bgcolor：背景色

#align：对齐方式

。tr：定义行

。td：定义单元格。

#colspan：合并列

#rowspan：合并行

。th：定义表头单元格

。：表格标题

。:表格的头部分

。:表格的体部分

。:表格的脚部分

*表单标签：

#表单：用于采集用户输入的数据，用于和服务器进行交互。

#form：定义表单，可以定义一个范围，范围代表采集用户数据的范围。

。属性：

~action：指定提交数据的url

~method：指定提交方式，分为7种，其中常用的有2种。

a、get:

1、请求参数会在地址栏中展示，会封装到请求行中。

2、请求参数大小是有限制的。

3、不太安全。

b、post：

1、请求参数不会在地址栏中显示，会封装在请求体中。

2、请求参数的大小没有限制。

3、较为安全。

。表单中的数据要想被提交，必须为其指定name属性。

*表单项标签：

1、input：可以通过type属性值，改变元素展示的样式。

。type属性：

#text：文本输入框，默认值。

#placeholder：指定输入框的提示信息，当输入框内容发生变化，会自动清空提示信息。

#password：密码输入框

#radio：单选框。

a、要想让多个单选框实现单选的效果，则多个单选框的name属性值相同

b、一般会给每一个单选框提供一个value属性，指定其被选中后提交的值

c、checked属性，可以指定默认值

#checkbox：复选框

a、一般会给每一个单选框提供一个value属性，指定其被选中后提交的值

b、checked属性，可指定默认值。

#file：文件选择框。

#hidden：隐藏域，用于提交一些信息。

#按钮：

a、submit：提交按钮，可以提交表单。

b、button：普通按钮

c、image：图片提交按钮--->src指定图片的路径

2、label：指定输入项的文字描述信息。

label的for属性一般会和input的id数据值对应，如果对应了，则点击label区域，会让 input输入框获取焦点。

3、select：下拉列表--->子元素option：指定列表项

4、textarea：文本域

#cols：指定列数，每一行有多少个字符

#rows：默认多少行。

css：

1、概念：Cascading Style Sheets--->层叠样式表

层叠-->多个样式可以作用在同一个html的元素上，同时生效。

2、优点：a、功能强大

b、将内容展示和样式控制分离

---->降低耦合度

---->让分工协作更容易

---->提高开发效率

3、使用-->css和html的结合方式

a、内联样式-->在标签内使用style属性指定的css代码

b、内部样式-->在head标签内定义style标签，style标签的标签体内容就是css代码

c、外部样式-->定义css资源文件--->在head标签内，定义link标签，引入外部的资源文件

4、语法：

选择器{

属性名1：属性值1；

属性名2：属性值2；

}

选择器--->筛选具有相似特征的元素

注意：每一对属性需要使用；隔开，最后一对属性可以不加。

5、选择器：筛选具有相似特征的元素。

#分类：

a、基础选择器：

。id选择器

。元素选择器

。类选择器

b、扩展选择器：

。统配选择器

。并集选择器

。子选择器

。父选择器

。属性选择器

。伪类选择器

6、属性：

a、字体和文本：font-size--->字体大小

color---->文本颜色

text-align---->对齐方式

line-height---->行高

b、背景：background

c、边框;border

d、尺寸：width height

e、盒子模型--->控制布局

margin：外边距

padding：内边距

*默认情况下内边距会影响整个盒子的大小

box-sizing：border-box

设置盒子的属性，让width和height就是最终盒子的大小

7、定位;float浮动

left right

8、定位position：

absolute：绝对定位

relative：相对定位

fix：固定定位（浏览器定位）

js：

JavaScript是一门客户端脚本语言，运行在客户端浏览器中。每一个浏览器都有JavaScript的解析引擎。 JavaScript是一门弱类型语言，在定义变量时，其语法格式为：

①var 变量名 = 初始化值；

②var 变量名；

变量名 = 初始化值；

注意：在JavaScript中，var可以定义任意类型的变量。

其数据类型分为6种。分别为：

1、number：数字。（整数/小数/NAN）；

2、string：字符串。在JavaScript语言中，无字符概念，单引号与双引号定义出的都是字符串。

3、boolean:true/false。

4、null：一个对象为空的占位符。

5、undefined：未定义。如果一个变量没有给初始化值，则其会被默认赋值为undefined。

6、object：对象。

---------------------------------------------------------------------------------------------------------------------------------函数定义以及调用：

在JavaScript中，函数定义分为两种方式。

1、定义：

function 函数名（形参列表）{

逻辑代码；

输出语句；（document.write（“xxx”）；）

}

调用：

单独调用。

函数名称（实参列表）；

2、定义：

function 函数名（形参列表）{

逻辑代码； return 结果；

}

调用：

赋值调用。

var 结果变量名 = 函数名（实参列表）；

*注意事项：

1、JavaScript是弱类型语言，定义函数时，参数名称不能携带var。

2、JavaScript定义时，没有返回值类型，但是函数中可以携带return语句，代表方法结束。

3、JavaScript中没有函数重载的概念，如果方法名相同，后面定义的函数会将前面的覆盖掉。

4、a、当实参列表<形参列表时，函数依然会被调用，不过值为“NAN”，因为剩余的形参没有被赋值。

b、当实参列表>形参列表时，会将实参的值赋值给形参，多余的实参，直接忽略不计。

5、隐藏一个数组名称：arguments

其作用是将实参绑定给形参。

---------------------------------------------------------------------------------------------------------------------------------for-in类似于Java中的增强for循环，即foreach。

通常在遍历数组或遍历对象的属性时使用。

格式：for（var 变量名 in 数组名或对象名）{

document.write（数组名【变量名】）；

}

date对象的使用之网页时钟的 *** 作流程。

当前系统时间为：

mysql：

USE demo02; CREATE TABLE student( id INT, NAME VARCHAR(20), age INT, gender VARCHAR(20), math DOUBLE, english DOUBLE );

SHOW TABLES; DESC student;

SELECT id '序号', NAME '姓名', age '年龄', gender '性别', math '数学', English '英语' FROM student; INSERT INTO student VALUES(1,'李明',13,'男',78.5,96), (2,'李红',11,'女',89,92), (3,'李江',14,'男',91,82), (4,'李北',11,'女',90,73), (5,'李南',12,'男',85,36), (6,'李东',13,'女',54,73); SELECT * FROM student; SELECT * FROM student WHERE age <> 13; SELECT * FROM student WHERE age BETWEEN 12 AND 14; SELECT * FROM student WHERE English IN(96,73,36); SELECT * FROM student WHERE gender = '男'; -- 关于int字段求和时,注意:int类型+null值 = null; SELECT NAME '姓名', (math+English) '总分' FROM student; INSERT INTO student(id,NAME,age,gender,math) VALUES(7,'李希',12,'女',77); SELECT * FROM student;

SELECT NAME '姓名', (math+IFNULL(English,0)) '总分' FROM student;

-- where条件后加入模糊查询 --->关键字like SHOW VARIABLES LIKE '%character%'; -- select 字段列表 from 表名 where 字段名称 like '%xxx%'; -- % 代表任何多个或某个字符 -- _下划线代表单个字符

SELECT * FROM student WHERE NAME LIKE '%李%'; SELECT * FROM student WHERE NAME LIKE '%_江%';

SELECT * FROM student WHERE NAME LIKE '%___%';

SELECT * FROM student; SELECT DISTINCT age FROM student;

-- 聚合函数查询-->int类型使用居多-->单行单列数据 -- select 聚合函数 from 表名 -- count(字段名称):查询表中记录,字段名称使用一般都为id(非业务字段). -- avg(字段名称):查询这个字段中平均值 -- sum(字段列表):求和 -- max(字段名称):最大值 -- min(字段名称):最小值

SELECT COUNT(IFNULL(English,0)) '总记录数' FROM student; SELECT COUNT(id) '总记录数' FROM student; SELECT AVG(math) '数学平均分' FROM student;

SELECT SUM(math+IFNULL(English,0)) '总分' FROM student; SELECT MAX(math) FROM student; -- 使用where条件运算符... -- select语句嵌套select语句--->子查询 -- 1.查询数学平均分 SELECT AVG(math) FROM student; -- 2.查询大于数学平均分的学生信息 SELECT * FROM student WHERE math > 80.64285714; -- 两步合一步 SELECT * FROM student WHERE math > (SELECT AVG(math) FROM student);

SELECT MAX(math) FROM student; SELECT NAME, age, gender, math FROM student WHERE math = 91;

SELECT NAME '姓名', age '年龄', gender '性别', math '数学成绩' FROM student WHERE math = (SELECT MAX(math) FROM student);

SELECT * FROM student; UPDATE student SET math = 99 WHERE id = 3;

SELECT MAX(IFNULL(English,0)) FROM student; SELECT * FROM student WHERE english = (SELECT MAX(IFNULL(english,0)) FROM student); -- 排序查询 order by -- select 字段列表 from 表名 order by 字段名称排序规则； -- 排序规则-->asc默认升序(默认不写排序规则,就是升序) desc默认降序 -- 同时有条件合order by 时,条件写在前面->先满足条件,才能排序 -- 多个字段同时排序时,首先第一个字段排序规则,然后才是第二个字段 UPDATE student SET English = 97 WHERE id = 7;

SELECT * FROM student ORDER BY math; SELECT * FROM student WHERE math > 56 ORDER BY math DESC; SELECT * FROM student ORDER BY math DESC,English ASC;

-- 查询所有学生 SELECT * FROM student;

/* 1、分组 GROUP BY select 字段列表 from 表名 where 条件 group by 分组字段名称; 注意：1、查询的字段列表可以使用分组字段 2、group by 之后不能使用聚合函数 */ -- 需求：按性别分组，查询出成绩的平均分 SELECT gender '性别', AVG(math) '数学平均分' FROM student GROUP BY gender;

-- 带条件的分组查询：where条件必须放在group by 之前，否则语法错误 -- 数学成绩大于70分的分组 SELECT gender '性别', AVG(math) '数学平均分' FROM student WHERE math > 70 GROUP BY gender;

/* 2、筛选 HAVING（与group by 一起使用时，放在group by之后）-->先条件，在分组，最后筛选 select 字段列表 from 表名 where 条件 group by 分组字段 having 筛选字段注意：having后可以跟聚合函数，group by不可以 */ -- 需求：查询数学成绩大于70，以性别分组，并且id>2的男生和女生人数，以及他们的数学平均分 SELECT gender '性别', COUNT(id) '总人数', AVG(math) '数学平均分' FROM student WHERE math > 70 GROUP BY gender HAVING COUNT(id) > 2;

-- 优化 -- 人数第一次可带单引号，第二次不可带/或者两次均不带。 SELECT gender '性别', COUNT(id) 人数, AVG(math) '数学平均分' FROM student WHERE math > 70 GROUP BY gender HAVING 人数 > 2 ; /* 3、分页查询 limit select 字段列表 from 表名 limit 起始行数,每页显示的条数; 起始行数 = （当前页码-1）* 每页显示的条数 -- 每页显示条数，是从前端传过来的数据 */

INSERT INTO student VALUES(8,'李花',10,'女',78,99),(9,'李草',11,'女',72,96),(10,'李树',13,'男',62,53); SELECT * FROM student; -- 每页显示3条 -- 第一页 SELECT * FROM student LIMIT 0,3; -- 第二页 SELECT * FROM student LIMIT 3,3; -- 第三页 SELECT * FROM student LIMIT 6,3; -- 第四页 SELECT * FROM student LIMIT 9,3;

-- 每页显示4条 -- 第一页 SELECT * FROM student LIMIT 0,4; -- 第二页 SELECT * FROM student LIMIT 4,4; -- 第三页 SELECT * FROM student LIMIT 8,4;

/* 分页查询，后期需要接收前端两个参数 1、currentPage-->当前页码 2、pageSize-->每页显示的条数封装一个类PageBean：自定义分页插件 1、int currentPage-->当前页码 2、intpageSize-->每页显示的条数 3、int totalPage-->总页数 ----可以计算（totalCount/pageSize） 4、int totalCount-->总记录数 5、list list -->分页的列表数据

技术JDBC：java连接数据库

分页列表数据 select * from 表名 limit （currentPage-1）*pageSize，pageSize; select count(id) from 表名;

后端返回PageBean实体对象给前端

*/

-- 数据库的备份和还原 /* 方式1、图形界面化备份：选中库名，右键--》backup/export 备份导出--》选中sql脚本，存储到本地某个磁盘上--》structureAndData：表的结果和数据

还原：现在sqlyog中将库删除，新建一个库，右键选择--》import导入--》选中执行execute sql脚本方式2、命令行备份：以管理员身份进入DOS，不需要登陆mysql，但输入指令mysqldump -uroot -p密码库名>磁盘上的路径 -- 大于号是保存到指定路径上还原：进入dos控制台，登陆mysql（dos中不要有中文路径出现）先将库删除，新建一个库使用这个库 use 库名; 加载指定路径的sql脚本 source 备份的sql脚本路径例：（D：\EE_2003|DAY9\CODE\mysql——01.sql）

/ -- 数据库的约束 -- 意义：限制用户 *** 作数据库的一种行为（非法行为-->直接插入空值或重复插入某个非业务字段id). / 1、默认约束：default 2、非空约束： notnull 3、唯一约束： unique 4、主键约束: primary key 5、自增长约束： auto——increment 6、外键约束：foreign key */

-- 1、默认约束：default SHOW TABLES; CREATE TABLE stu( id INT, NAME VARCHAR(20), gender VARCHAR(5) DEFAULT '男' ); INSERT INTO stu(id,NAME) VALUES(1,'小草'),(2,'小花'),(3,'小树'); SELECT * FROM stu; -- 去掉默认约束 ALTER TABLE stu MODIFY gender VARCHAR(5); INSERT INTO stu(id,NAME) VALUES (4,'小明'); -- 添加默认约束 ALTER TABLE stu MODIFY gender VARCHAR(5) DEFAULT '女'; INSERT INTO stu(id,NAME) VALUES (5,'小菜');

-- 2、非空约束： notnull -- 当一个字段设置为notnull约束时，如果插入空值，会报错。 CREATE TABLE stu1( id INT, NAME VARCHAR(20), gender VARCHAR(5), address VARCHAR(50) -- not null ); INSERT INTO stu1 (id,NAME,gender) VALUES(1,'薄荷','女'),(2,'小五','女');-- 此时不可插入，因为地址没有默认值，不能为空 SELECT* FROM stu1; DROP TABLE stu1; -- 去掉非空约束 -- alter table 表名 modify 字段名字段类型; ALTER TABLE stu1 MODIFY address VARCHAR(50); INSERT INTO stu1 (id,NAME,gender) VALUES(1,'薄荷','女'),(2,'小五','女'); -- 加上非空约束 -- alter table 表名 modify 字段名字段类型 notnull; DROP TABLE stu1; ALTER TABLE stu1 MODIFY address VARCHAR(50) NOT NULL; INSERT INTO stu1 (id,NAME,gender) VALUES(3,'雪糕','女'),(2,'阿毛','女'); -- 此时不可插入，因为地址没有默认值，不能为空

-- 3、唯一约束： unique-->索引 -- 限制字段不能为重复字段 CREATE TABLE stu2( id INT, NAME VARCHAR(20), phonenumber VARCHAR(20) ); INSERT INTO stu2 VALUES (1,'小红','13477777777'),(2,'小明','1236666666666'); INSERT INTO stu2 VALUES (3,'小江','13477777777');-- 号码与1重复，3仍可插入，不合理，所以设为唯一约束 SELECT * FROM stu2; DROP TABLE stu2; CREATE TABLE stu2( id INT, NAME VARCHAR(20), phonenumber VARCHAR(20) UNIQUE ); INSERT INTO stu2 VALUES (1,'小红','13477777777'),(2,'小明','1236666666666'); INSERT INTO stu2 VALUES (3,'小江','13477777777');-- 号码与1重复，不合理，所以设为唯一约束,此时3不能插入

-- 删除唯一约束 -- alter table 表名 drop index 字段名称; ALTER TABLE stu2 DROP INDEX phonenumber; -- 此时重复值可以插入 -- 添加唯一约束 DELETE FROM stu2 WHERE id=3; ALTER TABLE stu2 MODIFY phonenumber VARCHAR(20) UNIQUE; -- 添加唯一约束之后，重复值不可再加入

-- 4、主键约束: primary key-->索引（非空且唯一）-->一般与auto_increment一起使用-->设置在非业务字段id上 CREATE TABLE stu3( id INT, NAME VARCHAR(20) ); INSERT INTO stu3 VALUES(1,'小明'); INSERT INTO stu3 VALUES(1,'小红'); -- 此时id重复但仍能加入，所以不合理 SELECT * FROM stu3; DROP TABLE stu3; CREATE TABLE stu3( id INT PRIMARY KEY AUTO_INCREMENT, NAME VARCHAR(20) ); INSERT INTO stu3 VALUES(1,'小明'); INSERT INTO stu3 VALUES(1,'小红'); -- 添加主键约束后，id重复，不能插入 INSERT INTO stu3 VALUES(NULL,'小兰');-- 如果主键没有自增长，此时插入会报错 -- 删除主键约束 DROP TABLE stu3; ALTER TABLE stu3 DROP PRIMARY KEY; CREATE TABLE stu3( id INT PRIMARY KEY, NAME VARCHAR(20) ); -- 添加主键约束 ALTER TABLE stu3 MODIFY id INT PRIMARY KEY;

-- 5、自增长约束： auto_increment-->加入自增长约束后，不需要给id赋值，自己自增 -- 可以自己插入新的id，然后在新的id之后继续自增 -- 针对插入有效，修改无效 -- mysql中的last_insert_id();函数，可以获取最后一次自增长主键的值。 -- select last_insert_id();

-- 6、外键约束：foreign key SHOW TABLES; CREATE TABLE employee( id INT PRIMARY KEY AUTO_INCREMENT, NAME VARCHAR(20), gender VARCHAR(5), department VARCHAR(20) -- 员工所属部门 ); INSERT INTO employee (NAME,gender,department) VALUES ('小花','男','开发部'),('小草','女','运维部'),('小树','男','开发部'), ('小石头','男','测试部'),('小美','女','运维部'),('小空','男','测试部'),('小菜','女','测试部'); SELECT DISTINCT department FROM employee;-- distinct去重 SELECT * FROM employee; -- 员工表中包含员工信息以及部门信息，该情况不能出现在数据库中，表要做到一张表只描述一件事情 -- 查询部门数据时，数据冗余，重复性太多 -- 优化：将员工表中的部分信息拆分出来，单独放在部门表中 -- 外键约束 foreign key ，员工表departmentId与部门表主键id关联 -- 加入外键约束：修改和删除很麻烦，需要先修改或删除从表数据，然后修改或删除主表数据

-- 员工表(从表) -- constraint 声明 CREATE TABLE employee1( id INT PRIMARY KEY AUTO_INCREMENT, NAME VARCHAR(20), gender VARCHAR(5), departmentId INT, CONSTRAINT departmentId_employee1_fk FOREIGN KEY (departmentId) REFERENCES department(id) -- constraint 外键名称从表名称fk foreign key (外键字段名) references 主表名(主键字段名); ); INSERT INTO employee1 (NAME,gender,departmentId) VALUES ('小花','男',2),('小草','女',3),('小树','男',2), ('小石头','男',1),('小美','女',3),('小空','男',1),('小菜','女',1); -- insert into employee1 (name,gender,departmentId) values ('小五','女',4);当外键关联时，不可插入非法数据 DROP TABLE employee1; SHOW TABLES; SELECT * FROM employee1; -- 部门表(主表) CREATE TABLE department( id INT PRIMARY KEY AUTO_INCREMENT, -- 部门编号，主键自增长约束 departmentName VARCHAR(20) -- 部门名称 ); INSERT INTO department(departmentName)VALUES('测试部'),('开发部'),('运维部'); DROP TABLE department; SELECT * FROM department; SHOW TABLES;

欢迎分享，转载请注明来源：内存溢出
原文地址:https://54852.com/web/939479.html

HTML+CSS+JS+MYSQL入门总结：

发表评论

评论列表（0条）