黑马程序员技术交流社区

标题: java前端笔记 [打印本页]

作者: 金星君 时间: 2019-6-6 12:26
标题: java前端笔记

前端笔记

1、文件标签

html:html文档根标签

head ：头标签。定义文档属性，引入资源

tiltle：标题标签

body：体标签

<!DOCTUPE html> ：h5定义该文档是html文档

2、文本标签

：注释<h1>to<h6>：标题

<p>：段落

<br>：换行

<hr>：显示一条水平线

<b>：加粗

<i>：斜体

<font>：设置字体

<center>：居中

属性定义：1、color：英文单词rgb(值1，值2，值3)：值范围0~255#值1值2值3：值范围00~ff2、width1、数值：默认单位像素2、%数值：占比3、图片标签

<img src="相对路径" />：展示图片

相对路径：以‘.’开头的路径

./：当前目录

../：上级目录

4、列表标签

ol：有序列表

ul：无序列表

li：列表项

dl -> dt -> dd 无type列表

5、超链接标签

<a href="资源位置"></a>：定义一个超链接

属性

1、href:指定访问资源的url ，资源位置可以是#，也可以为空

2、target：指定打开方式

_self：默认，当前页面打开

_blank：在空白页面打开

6、表格标签

table：定义表

属性： width宽度， border边框，cellpadding内容与单元格之间距离，cellspacing单元格之间距离，bgcolor背景色，align对齐方式

caption：表格标题

tr：行

属性：gbcolor背景色，align文本对齐方式

td：单元格

属性：colspan合并列，rowspan合并行

th：表头单元格

thead：表示表格头

tbody：表示表格体

tfoot：表示表格尾

7、块标签

span:文本信息在一行表示。行内标签。内联标签

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

8、语义化标签

定义：h5提高程序可读性的标签

header

footer

1、 form表单1、表单定义：用于采集用户输入的数据2、form标签1、定义数据采集范围2、属性1、action:指定提交数据的url2、method：指定提交方式1、get：

1、请求参数会在地址栏显示（封装到请求行中）

2、请求参数长度有限

3、安全性低

2、post：

1、请求参数会封装在请求体中

2、请求参数大小无限制

3、安全性相对较高

3、注意：表单项中的数据要想被提交，必须指定其name属性3、表单项1、input: type属性指定展示样式1、text：文本输入框1、value指定默认值2、placeholder 指定提示信息2、password：密码输入框placeholder 指定提示信息3、radio：单选框1、多个radio的name值指定为相同2、用value属性来指定提交值的名称3、checked 指定默认值4、 checkbox：复选框1、需要指定name和value2、checked 指定默认值5、<label></label>用于修饰表单项外的文本for属性与input的id属性对应。如果对应，点击label区域，会让input输入框获取焦点。6、 file 文件选择框7、hidden 隐藏域用于提交一些信息 value设置提交值8、submit 提交按钮9、button 普通按钮10、 img 图片提交按钮11、color 取色器12、date 日期年月日13、datetime-local 日期年月日时分14、email 邮箱会进行正则校验15、number 数字框，可以增减2、select：下拉列表(双标签)1、<option></option> 设置列表值1、 value指定提交值2、selected设置为默认值3、textarea：文本域（双标签）1、cols 设置列数，每行多少个字符2、rows设置行数2、css1、定义：层叠样式表，级联样式表2、层叠：多个样式同时作用于一个html元素3、优点：解耦，提供效率4、使用：css与html结合方式1、内联：在标签内使用style属性指定css代码2、内部样式：在head标签内定义style，style标签体内容就是css代码3、外部样式：定义css资源文件，在head标签内用link标签引用 <link rel="stylessheet" href:"#">4、css语法1、格式:选择器{属性名:属性值}2、；选择器筛选具有相的特征的元素5、选择器1、基本选择器1、id选择器

选择指定id的元素

#id属性值{}

2、元素选择器标签名

选择具有相同标签名的元素

标签名称{}

3、类选择器 .

选择相同class的元素

.class属性值{}

4、优先级 id>class>元素2、扩展选择器1、选择所有元素 *{}2、并集选择器 ,

选择器1，选择器2 {}

3、子选择器 & nbsp;

选择器1 选择器2 {}

筛选选择器1下的选择器2的元素

4、父选择器 >

父选择器 > 子选择器 {}

筛选父选择器的直属子选择器元素

5、属性选择器

元素名称[属性名=属性值] {}

选择指定属性值的元素

6、伪类选择器

元素:状态 {}

选择一些元素具有的状态

如：<a> 的状态link 初始状态hover 鼠标移动到链接上active 点击后visited 访问后

6、属性1、字体、文本

1、font-size ：字体大小

2、color：文本颜色

3、text-align：对齐方式

4、line-height：行高

2、背景

1、background：设置背景，复合属性，背景颜色和背景图片

2、定义格式：background : url("地址") 是否重复位置;

3、边框

1、border：设置边框，复合属性，包括上下左右四个边

4、尺寸

1、width：宽

2、height：高

5、盒子模型

1、作用：控制布局

2、常用属性

1、margin：外边距,复合属性

2、padding：内边距，复合属性，默认情况下会影响外盒子的大小。通过设置盒子属性 box-sizing:box，让width和height就是盒子最终大小

3、浮动float：让多个div显示在一行

1、左浮动 left

2、右浮动 right

1、(ECMA)JavaScript1、概念：客户端脚本语言

运行在客户端浏览器中，每一个浏览器都有javascript的解析引擎

1、脚本语言：不需要编译，直接就可以被浏览器解析执行2、功能：增强交互，控制html元素2、基本语法1、结合方式1、内部js：定义<script>,标签体内容就是js代码2、外部js：通过<script>的src属性导入外部js文件3、注意：<script>可以定义在任何地方，但会影响执行顺序。可以定义多个<script>2、注释1、单行注释：//2、多行注释:/**/3、数据类型1、原始数据类型1、number：数字。整数/小数/NaN(not a number 一个不是数字的数字类型)2、string：字符串。单双引定义出来的是字符串3、boolean：true/false4、null：一个对象为空的占位符，也可以作为常量5、undefined：未定义。如果一个变量没有给初始化值，则会被默认为undefined。也可作为常量2、引用数据类型：对象4、变量的定义1、变量：一小块存储数据的内存空间2、JavaScript是弱类型语言1、强类型：必须指定变量存储的数据类型2、弱类型：不定义存储数据类型，申请的空间可以存放任意数据类型的数据3、定义格式

var 变量名 = 变量值;

4、变量输出到页面上的格式

document.write(变量名); //查看数据的类型typeof(变量名);//弹框输出alter(变量名);

5、运算符1、一元运算符: ++ -- +（正号）    - (负号)1、自增自减->在前先自增，在后先运算2、正负号：表示数值的正负，默认为正3、注意：在js中如果运算数不是运算符所要求的类型，js引擎自动将运算数进行类型转换。4、其它类型转number

//string转number：按照字面值转换。如果字面值不是数字，则转为NaN//boolean转number：true转为1，false转为0

2、算术运算符 + - * / %注意：js中，整数除以整数，可以直接返回小数3、赋值运算符 = += -=4、比较运算符 > < >= <= == ===(全等于)比较方式：

//1、类型相同：直接比较//字符串：按照字典顺序，按位逐一比较，直到得出大小为止//2、类型不同：先进行类型转换，再比较//全等于(===)：在比较之前，先判断类型，若不一样直接返回false

5、逻辑运算符 && || ！1、其它类型转boolean

//number转boolean：0或NaN为假，其他为真//string转boolean：除了空字符串("")，其他字符串都是真//null&undefined转boolean：都是false//对象转boolean：都是true //作用：if(对象名){} -> 防止空指针异常/判断字符串是否为空//java中if内只能写boolean类型，而js的if内可以写任意类型

6、三元运算符？：6、特殊语法1、语句以;结尾，如果一行只有一条语句则可以省略分号2、变量的定义使用var关键字，也可以不使用。1、用：定义的是局部变量2、不用：定义的是全局变量7、流程控制语句1、if...else2、switch1、在java中参数可以为：byte，short，int，char，枚举，String2、在js中参数可以是任意原始数据类型3、while4、do...while5、for注意：java中有增强for，而js是for(..in..)循环8、基本对象1、Function：函数（方法）对象1、创建方式

//方式一var fun = new Function(形参列表，方法体);//方式二function 方法名(形参列表){ 方法体; }//方式三var 方法名 = function(形参列表){ 方法体 };

2、方法3、属性

//1、length：形参列表的个数

4、特点

//1、方法定义时，形参的类型可以不写，返回值类型也可不写//2、方法是一个对象，定义名称相同的方法，会直接覆盖//3、在js中，只与方法的名称有关，与参数列表无关//4、在方法声明中，有一个隐藏的内置对象arguments，是一个数组，用于封装接收到的所有参数

5、调用

方法名(实际参数列表);

6、概念

//1、作为方法//2、作为对象function X(){}X.a = 1; //给x对象动态绑定a变量，值为1X.b = function(){}  //给X对象动态绑定一个函数//3、作为构造器,用于创建对象,隐藏了*prototype对象，是一个可以存放键值的对象

2、Array：数组对象1、创建

//方式一var arr = new Array(元素列表);//方式二var arr = new Array(默认长度);//方式三var arr = [元素列表];

2、方法

//1、join(参数):将数组中的元素按照指定的分隔符拼接为字符串，参数为指定的分隔符//2、push(参数):向数组尾部添加一个或多个元素，参数为要添加的元素

3、属性

//length：数组长度

4、特点

//1、js中，数组的元素类型可变//2、js中，数组的长度可变

3、Date：日期对象1、创建

var date = new Date();

2、方法

//1、toLocalString():返回当前date对象对应的时间本地字符串格式//2、getTime():获取毫秒值。（时间戳）

4、Math：数学对象1、不用创建，直接使用2、方法

//1、random()：返回[0,1)之间的随机数//2、ceil(x)：向上取整//3、floor(x)：向下取整//4、round(x)：四舍五入

3、属性

//PI：圆周率

5、RegExp：正则表达式对象1、正则表达式：定义字符串的组成规则

//1、单个字符：[] //特殊符号代表特殊含义的单个字符       // \d：单个数字[0-9]       // \w：单个单词字符[a-zA-Z]//2、量词符号 // ? ：表示出现0次或1次 // * ：表示出现0次或多次 // + ：出现1次或多次 // {m,n}：表示 m<= 数量 <=n//3、开始结束符号 // ^ ：开始 // $ ：结束

2、正则对象

//1、创建： //方式一 var reg = new RegExp("正则表达式"); //方式二 var reg = /正则表达式/; //例如： var reg = /^\w{m,n}$/;//2、方法 test(参数); 验证指定的字符串是否符合正则定义的规范

6、Global

1、特点：全局对象，这个Global封装的方法可以直接调用。方法名（）；

2、方法

//url第一组//encodeURI(): url编码//decodeURI()： url解码//url第二组//encodeURIComponent：url编码 //decodeURIComponent：url解码//例如：金叁=%E9%87%91%E5%8F%81//以一个字节的16进制，%为分隔符表示的汉字。gbk两字节，utf-8三字节//parseInt()：字符串转数字，把内容逐一比较并转换，直到不是数字。如果第一位不是数字，就直接转为NaN类型//isNaN():判断一个值是否是NaN。NaN类型与任何值进行==比较都为false//eval()：将js字符串转成脚本来执行//例如：eval("alert(123)");

JavaScript:

1、ECMAJavaScript：基础语法，基本对象

2、BOM

3、DOM

1、事件

1、DOM：文档对象模型1、功能：控制html文档内容。（增删改查）2、获取页面（标签）元素对象 Element

//通过元素id获取元素对象document.getElementById("id值");//document可以当成html文件的一个对象//写一个入口函数，当页面加载完后，执行该函数中的内容window.onload = function(){ }

3、操作Element1、修改属性值1、明确获取的对象2、查看API文档，确认可以修改的值2、修改标签体内容1、属性：innerHTML（设置标签体内容）2、事件1、功能：某些组件被执行了某些操作后，触发某些代码的执行2、绑定事件1、在html标签上，指定事件的属性，属性值是js代码事件：onclick 单击事件2、通过js获取元素对象,绑定事件

//1、获取对象var a = documnet.getElementById("b");//2、绑定事件a.onclick = function(){}

3、BOM:浏览器对象模型1、定义：将浏览器的各个部分封装成对象1、浏览器对象 Navigator2、窗口对象 Window1、创建2、方法1、与弹出框有关方法

//alert()：弹出警告框//confirm()：确认取消对话框 //点击确认按钮返回true，点击取消返回false//prompt()：输入对话框 //返回值是用户输入的值

2、打开关闭方法

//open()：打开新窗口。默认操作当前窗口，可以传参，参数可为网页url。返回值为一个Window对象//close()：关闭当前窗口

3、定时器方法

//参数： //1、js代码或方法对象（计时完后执行的代码） //2、毫秒值 //3、返回值：唯一标识，用于取消定时器//一次性定时器//setTimeout()：设置时间，有返回值//clearTimeout()：传入设置返回值，取消定时器//循化定时器//setInterval()//clearInterval()

3、属性1、获取其他BOM对象

history，location，navigator，screen

2、获取DOM对象

document

4、特点1、不需要创建，可以直接使用。window.方法名()2、window引用可以省略。方法名();3、地址栏对象 Location1、创建：window.location location2、方法：reload：刷新，重新加载当前文档3、属性：href：设置或获取url，（跳转到指定url）4、历史记录 History1、方法1、back()：加载history列表中的前一个url2、forward()：加载history列表中的下一个url3、go(参数)：加载history列表中指定的页面。参数：正数，前进几个页面；负数，后退几个页面2、属性：length：返回当前窗口历史列表的url数量5、显示器对象 Screen

4、（增强）DOM:文档对象模型1、定义：将标记语言文档的各个组成部分，封装为对象。2、核心DOM模型基本对象1、Document：文档对象1、创建：window.document document2、方法1、获取Element方法

//1、getElementById();根据id值获取元素对象//2、getElementsByTagName()：根据元素名称获取元素对象，返回一个数组//3、getElementsByClassName()：根据class属性值获取元素对象，返回值数组//getElememtsByName():根据name属性值获取元素对象，返回值数组

2、创建其他DOM对象

//1、createElement()：创建元素//2、createTextNode():创建文本//3、createComment()：创建注释//4、createAttribute()：创建属性

2、Element：元素对象1、获取创建，通过document2、方法1、removeAttribute()：删除属性2、setAttribute()：设置属性3、Node：节点对象（元素、属性、文本）1、特点：所有DOM对象都可以被认为是一个节点2、方法

CRUD DOM树：

//1、appendChild()：向节点的子节点列表的结尾添加新的子节点。//2、removeChild()：删除（并返回）当前节点的指定子节点。//3、replaceChild()：用新节点替换一个子节点。

3、属性：parentNode 返回节点的父节点。4、Text：文本对象5、Comment：注释对象6、Attribute：属性对象5、HTMLDOM控制样式

1、获取对象

2、控制样式方式

1、标签名.style.属性名 = "属性值"

2、创建css类选择器，标签名.className = "css选择器名"

3、标签名.style = "属性名:属性值";

1、DOM事件 Event1、概念：某些组件被执行了某些操作后，触发了某些代码的执行1、事件：某些操作2、事件源：组件，html标签3、监听器：代码4、注册监听：将123结合在一起。事件源发生事件触发监听器2、常见事件1、点击事件*1、单击：onclick2、双击：ondblclick2、焦点事件*1、失去焦点：onblur （表单校验）*2、获得焦点：onfocus*3、加载完成事件 onload （window.onload）4、鼠标事件（onmouse--）1、按下：onmousedown

1、定义方法，定义形参，接收event对象

2、event对象可以用来获取按下的键

2、松开：onmouseup3、移动：onmousemove4、移开：onmouseout5、移动到：onmouseover5、键盘事件1、按下：onkeydown

2、Bootstrap1、概念：一个前端开发的框架1、框架：一个半成品软件2、优点：1、定义了许多css样式和js插件2、响应式布局：同一套页面可以兼容不同分辨率设备（依赖于栅格系统）2、栅格系统1、定义：将一行平均分成12格，可以规定元素的占格数2、步骤：1、定义容器。1、分类//1、container 固定宽度，有留白//2、container-fluid 100%宽度2、定义行：样式：row3、定义元素：指定该元素在不同设备上所占格数样式：col-设备代号-格数1、设备代号//1、xs：超小，手机//2、sm：小，pad//3、md：中等，笔记本//4、lg：大，台式显示器2、格式

<div class="container"> <div class="row"> <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"></div> </div></div>

3、注意1、超出12格会自动换行2、栅格类属性可以向上兼容。即小到大所占格数一样3、如果真实设备宽度小于设置栅格类属性的设备代码的最小值，默认一个元素占一行3、css样式和js插件1、全局css样式1、按钮2、图片3、表格4、表单2、组件1、导航条2、分页条3、插件1、轮播图

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2