前端
一、day01
1、资源分类`
- 静态资源:使用静态网页开发技术发布的资源。
特点:所有用户访问,得到的结果是一样的。
如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态支援的解析引擎,可以展示静态资源。 - 动态资源:使用动态网站开发技术发布的资源。
特点: 所有用户访问,得到的结果可能不一样。
如:jsp/servlet,php,asp…
如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,再发送给浏览器
2、HTML
2.1、概念:
是最基础的网页开发语言,超文本标记语言(有标签构成的语言,标记语言不是编程语言)
2.2、快速入门
- html文档后缀名.html或者.tml
- 标签分类:围堵标签、自闭和标签:开始标签和结束标签在一起
- 在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可)引起来
- html的标签不区分大小写,但是建议使用小写。
2.3、标签学习
-
文件标签:构成html最基本的标签
- html:html文档的根标签
- head:头标签。用于指定html文档的一些属性。引入外部的资源
- title:标题标签。
- body:体标签
- :html5中定义该文档是html文档
- html:html文档的根标签
-
文本标签:和文本有关的标签
- 注释:
-
to
:标题标签 - h1~h6:字体大小逐渐递减
-
:段落标签
:换行标签-
:展示一条水平线 - 属性: - color:颜色 - width:宽度 - size:高度 - align:对其方式 - center:居中 - left:左对齐 - right:右对齐 - :字体加粗
- :字体斜体
- :字体标签
-
:文本居中 - 属性: - color:颜色 - size:大小 - face:字体 - 属性定义:
- color:
- 英文单词:red,green,blue
- rgb(值1,值2,值3):值的范围:0~255 如 rgb(0,0,255)
- .# 值1值2值3:值的范围:00~FF之间。如: #FF00FF
- width:
- 数值:width=‘20’ ,数值的单位,默认是 px(像素)
- 数值%:占比相对于父元素的比例
- color:
-
图片标签
img:展示图片
* 属性:
* src:指定图片的位置* 代码: <!--展示一张图片 img--> <img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/> <!-- 相对路径 * 以.开头的路径 * ./:代表当前目录 ./image/1.jpg * ../:代表上一级目录 --> <img src="./image/jiangwai_1.jpg"> <img src="../image/jiangwai_1.jpg">
-
列表标签:
有序列表
无序列表
-
链接标签
点我
* herf :指定访问资源的URL(统一为资源定位符)
* target:指定打开资源的方式:_self,当前页面打开。_blank,在空白页打开。 -
div和span:
- div:每一个div占满一整行。块级标签
- span:文本信息在一行展示,行内标签 内联标签
-
表格标签:
* table:定义表格
* width:宽度
* border:边框
* cellpadding:定义内容和单元格的距离
* cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条、
* bgcolor:背景色
* align:对齐方式
* tr:定义行
* bgcolor:背景色
* align:对齐方式
* td:定义单元格
* colspan:合并列
* rowspan:合并行
* th:定义表头单元格
* :表格标题
* :表示表格的头部分
* :表示表格的体部分
* :表示表格的脚部分
day02 HTML/CSS
1、HTML表单
- input:可以通过type属性值,改变元素展示的样式
- label:指定输入项的文字描述信息
- textarea:文本域
- select: 下拉列表
1.1 . 表单标签定义
用于从采集用户输入的数据,用于和服务器进行数据交互。
<form action="ulr" method="post/get">
<input type="text" name="name" id="id" value="value">
</form>
* action:指定提交数据的URL
* method:指定提交方式
* 分类:一共7种,2种比较常用
* get:
1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
2. 请求参数大小是有限制的。
3. 不太安全。
* post:
2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
2. 请求参数的大小没有限制。
3. 较为安全。
> 表单项中的数据要想被提交:必须指定其name属性
1.2 input属性:
-
text:文本输入框,默认值;
-
password:密码输入框;
-
radio:单选框:
1. 要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样。
2. 一般会给每一个单选框提供value属性,指定其被选中后提交的值
3. checked属性,可以指定默认值 -
checkbox:复选框
1、一般会给每一个单选框提供value属性,指定其被选中后提交的值
2. checked属性,可以指定默认值 -
file:文件选择框;
-
hidden:隐藏域,用于提交一些信息。
-
按钮:
* submit:提交按钮。可以提交表单
* button:普通按钮
* image:图片提交按钮 -
表单练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单标签</title> </head> <body> <form action="#" method="get"> <label for="username"> 用户名 </label>:<input type="text" name="username" placeholder="请输入用户名" id="username"><br> 密码:<input type="password" name="password" placeholder="请输入密码"><br> 性别:<input type="radio" name="gender" value="male" > 男 <input type="radio" name="gender" value="female" checked> 女 <br> 爱好:<input type="checkbox" name="hobby" value="shopping"> 逛街 <input type="checkbox" name="hobby" value="java" checked> Java <input type="checkbox" name="hobby" value="game"> 游戏<br> 图片:<input type="file" name="file"><br> 隐藏域:<input type="hidden" name="id" value="aaa"> <br> 取色器:<input type="color" name="color"><br> 生日:<input type="date" name="birthday"> <br> 生日:<input type="datetime-local" name="birthday"> <br> 邮箱:<input type="email" name="email"> <br> 年龄:<input type="number" name="age"> <br> 省份:<select name="province"> <option value="">--请选择--</option> <option value="1">北京</option> <option value="2">上海</option> <option value="3" selected>陕西</option> </select><br> 自我描述: <textarea cols="20" rows="5" name="des"></textarea> <br> <input type="submit" value="登录" > <input type="button" value="一个按钮" ><br> <input type="image" src="img/regbtn.jpg"> </form> </body> </html>
1.3 label:指定输入项的文字描述信息
label的for属性一般会和 input 的 id属性值 对应。如果对应了,则点击label区域,会让input输入框获取焦点。
1.4 select: 下拉列表
子元素:option,指定列表项
选择国家:<select name="country">
<option value="none"> -- 选择国家--</option>
<option value="China" selected="selected">中国</option>
<option value="USA">美国</option>
<option value="UK">英国</option>
</select>
1.5 textarea:文本域
-
cols:指定列数,每一行有多少个字符
-
rows:默认多少行。
2、CSS样式
2.1 css概念:
- Cascading Style Sheets 层叠样式表。多个样式可以作用在同一个html的元素上,同时生效。
- 1、功能强大
- 2、将内容展示和样式控制分离
- 降低耦合度。解耦
- 让分工协作更容易
- 提高开发效率
2.2 CSS内联样式
在标签内使用style属性指定css代码,通过style属性来实现对内容样式的控制
<div style="color:red;">hello css</div>
2.3 CSS内部样式
在head标签内,定义style标签,style标签的标签体内容就是css代码
<style>
div{
color:blue;
}
</style>
-- 定义style样式
<div>hello css</div> 通过div调用
2.4 CSS外部样式
-
1、首先定义css资源文件。
-
2、在head标签内,定义link标签,引入外部的资源文件。
– 定义css资源文件
div{
color:green;
}
在html文件中定义link标签
引入外部资源
hello css
hello css
3、CSS选择器的使用
选择器:筛选具有相似特征的元素
每一对属性需要使用;隔开,最后一对属性可以不加;
一般定义方式:
选择器 {
属性名1:属性值1;
属性名2:属性值2;
...
}
3.1 基础选择器
- id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一
- 语法:#id属性值{}
- 元素选择器:选择具有相同标签名称的元素
- 语法: 标签名称{}
注意:id选择器优先级高于元素选择器
- 类选择器:选择具有相同的class属性值的元素。
- 语法:.class属性值{}
注意:类选择器选择器优先级高于元素选择器
3.2 扩展选择器
1. 选择所有元素:
* 语法: *{}
2. 并集选择器:
* 选择器1,选择器2{}
3. 子选择器:筛选选择器1元素下的选择器2元素
* 语法: 选择器1 选择器2{}
4. 父选择器:筛选选择器2的父元素选择器1
* 语法: 选择器1 > 选择器2{}
5. 属性选择器:选择元素名称,属性名=属性值的元素
* 语法: 元素名称[属性名="属性值"]{}
6. 伪类选择器:选择一些元素具有的状态
* 语法: 元素:状态{}
* 如: <a>
* 状态:
* link:初始化的状态
* visited:被访问过的状态
* active:正在访问状态
* hover:鼠标悬浮状态
3.2 盒子模型
用来页面控制布局
- margin:外边距
- padding: 内边距-> 默认情况下内边距的大小会影响整个盒子的大小
- box-sizing:border-box;设置盒子的属性,让width和height就是最终盒子的大小
- float:浮动·
- left
- right
day03 JavaScript基础知识
1、JavaScript概述
概念:一门脚本语言,运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎,不需要编译,就可以直接被浏览器解析执行。
作用:用来增强用户和html页面的交互过程,可以用来控制html元素,让页面有一些动态的效果,增强用户的体验。
console.log打印在浏览器的控制台
2、JavaScript基本语法
-
内部JS:
- 定义
3、数据类型
- number:数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
. string:字符串。 字符串 “abc” “a” ‘abc’ - boolean: true和false
- null:一个对象为空的占位符
- undefined:未定义。如果一个变量没有给初始化值,则会被默认赋值为undefined
4、变量
* var 变量名 = 初始化值;
* typeof运算符:获取变量的类型。注:null运算后得到的是object
5、运算符
算数运算符、 赋值运算符、三元运算符和java相同,再次不做介绍
-
比较运算符:> < >= <= == ===(全等于)。
在进行数据比较时,先进行数据类型转换,在进行值的比较。简单来说,在比较时,不考虑数据类型,直接判断数值是否相等。===全等于,先进行类型的比较,在进行比较。如果不一样,则返回false。
-
逻辑运算符 && || !
当数据为0、NaN、空、null、undefined为false,其余为全ture。
6、流程控制语句
3、JavaScript 基本对象
-
Function:函数(方法)对象
方法的定义格式:
* var fun= new Function(形式参数列表,方法体);
* function 方法名称(形式参数列表){
方法体
};
* var 方法名称 = function(形式参数列表){
参数列表
}
特点:length代表形式参数的个数。定义方法是不需要类型和返回值。如果方法名称相同则会覆盖原有的方法。在方法中有一个隐藏的内置对象。
内置对象的使用:
function 方法名称(){
arguments.length:获取传递的参数长度。
arguments[0],arguments[1]:类似于数组,获取传递的参数。
} -
Array:数组对象
数组的创建
var arr = new Array(元素列表);
var arr= new Array(默认长度);
var arr= [元素列表];
方法:join(),将数组中的元素按照指定的参数参数分隔符拼接字符串
push(),向数组的末尾添加一个或更多的元素,并返回新的长度。
4、RegExp:正则表达式对象
定义字符串的组成规则
- 创建
- var reg = new RegExp(“正则表达式”);
- var reg = /正则表达式/;
- 方法
- test(参数):验证指定的字符串是否符合正则定义的规范
4、Global
全局对象,这个Global中封装的方法不需要对象就可以直接调用
方法:
- encodeURI():url编码
- decodeURI():url解码
- encodeURIComponent():url编码,编码的字符更多
- decodeURIComponent():url解码
- parseInt():将字符串转为数字:逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number
- isNaN():判断一个值是否是NaN
- eval():将 JavaScript 字符串,并把它作为脚本代码来执行。
day04 JavaScript高级
1、BOM
Browser Object Model 浏览器对象模型,将浏览器的各个组成部分封装成对象。
组成:
- Window:窗口对象
- Navigator:浏览器对象
- Screen:显示器屏幕对象
- History:历史记录对象
- Location:地址栏对象
1.1 Window:窗口对象
- 与弹出框有关的方法:
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
* 如果用户点击确定按钮,则方法返回true
* 如果用户点击取消按钮,则方法返回false
prompt() 显示可提示用户输入的对话框。
* 返回值:获取用户输入的值 - 与打开关闭有关的方法:
close() 关闭浏览器窗口。
* 谁调用我 ,我关谁
open() 打开一个新的浏览器窗口
* 返回新的Window对象 - 与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式。单次执行
* 参数:
1. js代码或者方法对象
2. 毫秒值
* 返回值:唯一标识,用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。循环执行
clearInterval() 取消由 setInterval() 设置的 timeout。 - 属性:
1. 获取其他BOM对象:
history
location
Navigator
Screen:
2. 获取DOM对象
document
1.2 Location和History对象
- 创建(获取):window.location或者直接使用location;
- 方法:relodoad()重新加在当前文档。
- 设置属性:href,设置url地址值。
- 创建或获取history对象值。window.history、history。
- 方法:back,加载history列表中的的前一个url,意思就是返回上一步。forward()前进。go(参数),加载指定的某个历史记录。
- length 返回当前窗口历史列表中的 URL 数量
2、DOM
概念:Document Object Model 文档对象模型.
将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作.。CRUD增删改查
控制html文档的内容,获取页面标签(元素)对象:Element使用方法:
doccument.getElementById(“id值”):通过元素的id值获取元素对象。在html中定义了元素的id值。
<img src="img/banner_3.jpg" id="img3"/>
//获取 img对象
<script>
var light = document.getElementById("img3");
alert(light);
</script>
作用:修改获取到的对象的属性值、修改标签的具体内容。
light2.onclick = fun2;
title.innerText="我怎么知道你-是谁?"
innerHTML获取标签体之间的内容:什么是标签体,围堵标签之间的内容。不能够获取自闭和标签之间的内容。
创建其他DOM对象
createAttribute(name);
createComment();
createElement();
createTextNode();
3、事件
某些组建被执行了某些操作之后,出发这些代码。
-
事件源:组件。如: 按钮 文本输入框…:比如:汽车
-
监听器:代码。:报警器
-
注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。比如:将报警器安装在汽车上
-
绑定事件:在html代码上指定事件的属性。onclick–单击事件。通过js代码获取元素对象,指定事件属性,设置一个函数。比如:触发报警器,踢一脚汽车。
var img=document.getElementById("img"); img.onclick = fun; function fun() { alert("别点我") } funct
常用事件:
- 点击事件
- 鼠标事件
- 焦点事件
- 加载事件
- 表单提交事件