Day01-05知识回顾

Posted on: 2016年8月15日 2016年8月15日
Categories: Java

Day01.html:

1.排版标签:

（1）.标题标签:<hn>: 包含<h1>-<h6>

（2）.水平分割标签:<hr>: 用于创建一条水平分割线,定义内容中的主题变化

（3）.字体标签:<font>: 用于设置字体尺寸颜色等

（4）.格式化标签: 粗体<b> 斜体<i>

（5）.段落标签:<p>:定义段落,p会自动在其前后创建一些空白; <br>:插入单个换行

2.图片标签<img>:在html页面中引入一张图片

属性:

（1）src:指定要显示图片的路径(url)

（2）alt:图片无法显示时的替代文本

（3）title:鼠标移到图片上会显示信息

3.列表标签:

（1）有序列表:<ol> 属性:type列表类型:取值1、A、a、I、i

（2）无需列表<ul> 属性:type列表类型:取值:disc 实心圆，square 方块， circle 空心圆

（3）列表项<li> 定义列表项，是<ul>或<ol>的子标签

4.表格标签:

（1）<table>:是父标签，相当于整个表格的容器

属性：

border：表格的边框高度

cellpadding：单元边沿与其内容之间的空白

cellspacing：单元格之间的空白

bgcolor：表格的背景颜色

（2）行标签<tr>

（3）列标签（单元格）<td>

属性：

colspan：单元格可横跨的列数

rowspan:单元格可横跨的行数

align：单元格内容的水平对齐方式

5.超链接标签：<a>提供一种可以访问其他位置的实现方式

属性：

href：用于确定需要显示页面的路径（URL）

target：确定以何种方式打开href所设置的页面，取值：_blank:在新窗口中打开；_self:默认方式，在当前页面打开

6.框架标签：

（1）<framest>:是多个窗口页面整合在一起的一个集合框架

属性：

rows：用来确定行数，取值：值1，值2，值3，…一个值表示一行，多值使用逗号分隔，值可以是10px、10%等，最后一个值如果不想计算可以使用*匹配剩余值

cols属性：用来确定列数，取值：值1，值2，值3，…一个值表示一列，多值使用逗号分隔，值可以是10px、10%等，最后一个值如果不想计算可以使用*匹配剩余值

（2）<frame>用于设置<frameset>框架集中的一个页面（框架）

属性：

src：确定页面路径

noresize：框架分隔先不能移动

target：确定需要显示的页面在何处显示

day02.html & css

表单标签<form>：在html页面创建一个表单，表单标签在浏览器中没有任何显示，如果数据需要提交到服务器，负责搜索数据的标签必须存放在表单标签内。

属性：

action：请求路径，确认表单提交到服务器的地址

method：请求方式,取值：get与post

get：相对来说不安全；浏览器地址显示；提交较小数据

post：相对来说安全；提交的信息不会在浏览器地址栏显示；可以提交较大数据，如上传文件
输入框标签<input>:用于获取用户输入的信息

属性：

type：

        text：文本框。单行输入字段，默认宽度20个字段

        password：密码框。字符以黑圆显示

        radio：单选框。

        submit：提交按钮。把表单数据发送到服务器

        checkbox：复选框

        file：文件上传组件。提供浏览，按下可以选择需要上传的文件

        hidden：隐藏字段。数据会发送到服务器，但浏览器不进行显示

        reset：重置按钮。将表单恢复至默认值

        image：图形提交按钮。通过src给按钮设置图片

        button：普通按钮。

name：元素名。如果需要表单数据提交到服务器，必须提供name属性，服务器通过属性值获得提交的数据

value：设置input标签默认值

size：大小

readonly：是否只读

disabled：是否可用

maxlength : 允许输入最大长度
下拉列表标签<select>：可以进行单选或多选，需要使用<option>指定列表项

属性：

name：发送给服务器的名称

multiple：不写默认单选，取值为”multiple”表示多选

size：多选时，可见选项的数目

<option>子标签：下拉列表中的一个选项

属性：

selected：勾选当前列表项

value：发送给服务器的选项值

文本域标签<textare>:多行的文本输入控件

属性：

rows：文本域的行数

cols：文本域的列数

注意：标签体内不要有空格或换行

5.<div>:是html的一个普通标签，进行区域划分

特点：独占一行

实际开发的时候很少用table表格来布局。

（1）不够灵活

（2）不利于搜索引擎的搜索

解决方案：

div+css

（1）灵活

（2）利于搜索引擎的搜索

6.css

（1）概述：通常称为CSS样式或层叠样式表，主要用于设置html页面中的文本内容（字体、大小、对齐方式等）、图片的外形（高宽、边框样式、边距等）以及版面的布局等外观显示样式。

（2）作用：可使html页面更好看，CSS色系的搭配可以让用户更舒服，CSS+DIV的布局更加灵活，更容易绘制出用户需求的结构

（3）格式：选择器（属性1,：属性值1；属性2：属性值2；…）

格式解释：”选择器”用于指定CSS样式作用的html对象；花括号内是该对象设置的具体样式。属性和属性值以键值对形式出现，使用英文”：”分隔。多个属性之间使用英文分号”；”分隔。

7.选择器：要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则被称为选择器。

（1）元素选择器：

概述：是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式

格式：标签名{属性1：属性值1；属性2：属性值2；属性3：属性值3；…} 该格式中，所有的HTML标记名都可以作为标记选择器，如：body 、h1、p等

（2）id选择器:

概述：id选择器使用”#”进行标识，后面紧跟id名

格式：#id名{属性1：属性值1；属性2：属性值2；属性3：属性值3；…} 该语法中，id名即为HTML元素的id属性值，元素的id值是唯一的，只能对应于文档中某一个具体的元素

（3）类选择器：

概述：类选择器使用”.”(英文点)进行标识，后面紧跟类名

格式：.类名{属性1：属性值1；属性2：属性值2；属性3：属性值3；…} 该语法中 .类名即为HTML元素的class属性值，大多数HTML元素都可以定义class属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式

（4）属性选择器：

概述：在标签后使用括号标记

格式：标签名[标签属性=”标签属性值”]{属性1：属性值1；属性2：属性值2；属性3：属性值3；…}

（5）包含选择器：

概述：两个标签之间使用空格，给指定父标签的后代标签设置样式，可以方便在区域内编写样式

格式：父标签后代标签{属性1：属性值1；属性2：属性值2；属性3：属性值3；…}

8.css样式：

（1）行内样式：是通过标签的style属性来设置元素的样式

<div style= “font-size: 250px”>行内样式表</div>

（2）内部样式：又称为内嵌式，是将css代码集中卸载html文档的<head>头部标签中，并且使用<style>标签定义

<style>

div{

font-size:
250px;

}

</style>

（3）外部样式：又称为链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link>标签将样式链接到HTML文档中

rel：要引入样式表

type:我们引入的文件要按照css的语法解释

href：我们要引入文件的路径

注意：引入样式的优先级：行内>内部>外部

9.css常用属性和属性值：

（1）边框和尺寸：

border：边框样式。格式：宽度，格式，颜色例如：border：1px，solid，red；

width：设置边框宽度：

height：设置边框的高度

（2）转化display：？

inline：此元素将显示为行内元素（行内元素默认的display属性）

block：此元素将显示为块元素（块元素默认的display属性值）

none：此元素将被隐藏，不显示，也不占用页面空间

（3）字体：

背景色：background-color

字体：color、font-size

（4）布局：

float: 格式：选择器{float：属性值}

常用属性值：

left：元素向左浮动

right：元素向右浮动

none：元素不浮动（默认值）

clear：格式：选择器{clear：属性值}

常用属性值：

left：不允许左侧有浮动元素（清除左侧浮动的影响）

right：不允许右侧有浮动元素（清除右侧浮动的影响）

both：同时清除左右两侧浮动的影响

10．css盒子模型：CSS框模型规定了元素框处理元素内容、内边距、边框和外边框的方式

外边框：margin

边框：border

内边距：padding

Day03.JavaScript

概述：

（1）概念：JavaScript是web上的一种功能强大的编程语言,用于开发交互式的web页面。它不需要编译，而是直接嵌入在HTML页面中，由浏览器执行。

（2）组成：

ECMAScript：语法，语句

DOM:文档对象模型, 操作文档中的元素和内容

Bom:浏览器对象模型

（3）作用：使用JavaScript添加页面动画效果，提供用户操作体验，主要应用有：嵌入动态文本于HTML页面，对浏览器事件作出响应、读写HTML元素、验证提交数据、检测访客的浏览器信息等

引入方式：

（1）内切式：在HTML文档中，通过<script>标签引入

（2）外联式：在HTML文档中，通过<script src=” “>标签引入.js文件

3.基本语法：

（1）变量：

变量的声明：var 变量名；

变量的赋值：var 变量名 = 值；

（2）数据类型：

基本数据类型：

Undefined：该类型只有一个值，即Undefined。当声明的变量未初始化时，该变量的默认值是Undefined

Null:只有一个专用值null，表示空，一个占位符，值undefined实际上是从值null派生而来的，因此，ECMAScript把它们定义为相等的

Boolean：有两个值ture和false

Number：表示任意数字

string：字符串由双引号或单引号声明的，JavaScript没有字符类型

引用数据类型：

引用类型通常叫做类（class），也就是说，遇到引用值，所处理的就是对象

（3）运算符：

特殊介绍：

== 与！= 只判断值

=== 与！== 值和类型都进行判断

基本操作：

decument.getElementById():得到元素对象

innerHTML:向页面某个元素写入信息

value：也可以获得相应的文本值，但是只针对表单标签

函数：

创建函数：

funvtion 函数名{

函数体

}

var 函数名 = function(){

函数体

}

5．事件：我们点击一个按钮，触发一件事—-调用方法。

onclick 点击 onblur 失去焦点 onfocus 得到焦点 onkeydown 按下键盘onkeypress 按住键盘 onkeyout 松开键盘 onmousedown 按下鼠标

onmousepress 按住鼠标 onmouseout 送开鼠标 onmouseover 鼠标表的光标放在上面 onmousemove 移动鼠标的光标 onchange 改变 onload 页面加载完成以后 onsubmit 提交表单

事件的绑定：

6.定时器：

setInterval():

按照指定的周期（以毫秒计）来调用函数或计算表达式

setTimeout():

在指定的毫秒数后调用函数或计算表达式

clearInterval():

取消由setInterval（）设置的timeout

clearTimeout();

取消由setTimeout() 方法设置的timeout

7.BOM简介：

Window：窗口

confim：（你确定要删除吗？）：返回true或false

eval：将字符串转换长脚本

Navigator:浏览器

Screen:浏览器的分辨率

History:历史

back():加载history列表中的前一个URL

forward():加载history列表中的下一个URL

go():加载history列表中的某个具体页面

Location：本地

href：页面跳转

day04.JavaScript

1. 页面加载:

window.onload

函数的动态绑定:

标签对象.事件=function() {}

2.数组：

（1）创建方式:

var arr =new Array();

var arr= new Array(size);

var arr = new Array(element0,element1,element2,…)

var arr = [element0,element1,element2,…]

（2）特点:

数组长度可变

同一数组元素类型可多种

3.document对象：

（1）获得元素对象:

document.getElementById(“id”) //通过id属性获得相应的元素对象

document.getElementsByTagName(“标签名字”)//通过标签名称获得所有的元素

document.getElementsByClassName(“”) //通过class属性值获得所有属性

document.getElementByName(“”) //通过name属性获得所有元素

（2）常见属性:

childNodes:获得所有的子节点

nodeName:返回节点名称

nodeType:返回元素节点类型

nodeValue:返回元素节点值

创建节点：

（1）创建元素(标签)节点:

document.createElement()

（2）创建文本节点:

document.createTextNode()

（3）追加:

appendChild()

（4）设置属性:

setAttribute(“属性”,”属性值”)

全局函数：

（1）字符串转数字

parseFloat():解析一个字符串并返回一个浮点数

parseInt():解析一个字符串并返回一个整数

（2）执行:eval()

计算JavaScript字符串,并把它作为脚本代码来执行

（3）编码

编码:encodeURI():

把字符串编码为URL

解码:decodeURI():

解码某个编码的URL

day05.jQuery

概述：

（1）概念：jQuery是一个JavaScript的框架,也就是JavaScript的类库

（2）作用：浏览器兼容性更好,方便程序员开发

（3）对象的引入和获取：

导入js库：

基本语法：jQuery(选择器) 或$(选择器)

（4）jQuery对象和DOM转换:

DOM–>jQuery:语法:jQuery(dom对象)

jQuery–>DOM:语法:jQuery对象[0]或者get(0)

页面加载：

（1）js页面加载:

window.onload = function (){//主函数}

（2）jQuery页面加载

$(document).ready(function(){ //主函数 } )

简写:$(function () { //函数体 } )

区别:

js的页面加载方法只能写一个,多写只执行最后一个;jQuery可以写多个

选择器：

（1）基本选择器:

属性选择器: 格式：＄（＂属性名＂）

id选择器: 格式:$(“#id值”)

类选择器: 格式：＄(“.class名”)

（2）层级选择器:

A B ,获得A元素内部所有的B元素. (祖孙)–后代

A>B ,获得A元素下面的所有的B元素. (父子)

A+B ,获得A元素同级下一个B元素 (兄弟)

A~B ,获得A元素同级所有的B元素 (兄弟)

（3）过滤选择器：

基本过滤选择器:

:first 获得符合条件的第一个元素

:last 获得符合条件的最后一个元素

:not(selector) 选择非selector条件的元素

:even 选择索引值为偶数的元素

:odd 选择索引值为奇数的元素

:eq(index) 选择索引值等于多少的元素

:gt(index) 选择索引值大于多少的元素

:lt(index) 选择索引值小于多少的元素

:header 选择标题元素

:animated 匹配动画元素

内容过滤选择器：

:contains(text) ：选择包含某文本的元素

:empty 选择空元素

:has(selector) 选择包含某元素的元素

:parent ：获得非空元素

可见性过滤选择器：

:hidden 获得不可见元素

:visible 获得可见元素

属性过滤选择器：

[attribute]：通过属性名获得相应的元素

[attribute=value] ：获得属性值等于某某的元素

[attribute!=value] ：获得属性值不等于某某的元素

[attribute^=value] ：获取属性值以某某开始的元素

[attribute$=value]：获取以某某结束的元素

[attribute*=value]：获取包含某某属性值的元素

[attrSel1][attrSel2][attrSelN]：组合选择器符合所有的条件

子元素过滤选择器：

:nth-child ：指定子元素

:first-child ：第一个子元素

:last-child : 最后一个子元素

:only-child：仅有一个子元素的子元素

表单过滤选择器:

:input 匹配所有 input, textarea, select 和 button 元素

:text 获得文本框元素

:password 获得密码框元素

:radio 获得单选框元素

:checkbox 获得复选框元素

:submit 获得提交按钮元素

:image 获得图片按钮元素

:reset 获得重置按钮元素

:button 获得button按钮

:file 获得文件框

:hidden 获得隐藏域

表单对象属性:

:enabled ：可用的标签

:disabled ：不可用的标签

:checked：匹配所有选中的被选中元素(复选框、单选框等，不包括select中option)

:selected：匹配所有选中的option元素

（4）效果：

基本效果:

show(speed):显示参数:speed,显示速度,单位毫秒,也可以使用固定字符串:slow,normal,fast

hide(speed):隐藏

toggle(speed):切换

滑动:

slideDown() 显示,高度变大

slideUp() 隐藏,高度变小

slideToggle() 切换

淡入淡出:

fadeIn() 显示

fadeOut() 隐藏

fadeToggle() 切换

fadeTo(speed,opacity) 指定透明度参数opacity:一个0-1之间表示透明度的数字

5.属性操作：

attr(): 设置属性

removeAttr(): 移除属性

prop(): 设置属性

removePrpo() :移除属性

区别:attr用于1.8以及以前的版本,prop用于1.8以后的版本

6.文本操作：

html(); 向开始标签和结束标签中间插入内容

text(): 类似于html但其操作的内容是文本

val(): 类似于js的value操作,表单标签对象

css类的操作：

    addClass()

    removeClass()

    toggleClass()

wenzhongxiang

295