HTML
概要
(1)主要强调HTML的标签都是成对儿的,有开始标签,一般都会有对应的结束标签。
(2)强调代码的合理缩进
(3)强调HTML语法松散不严格
(4)强调HTML不区分大小写
(5)强调标签的属性,每个属性都包括属性名和属性值,属性值可以使用单引号括起来,也可以使用双引号括起来。
(6)强调HTML中的注释怎么写
(7)< meta charset = " UTF-8" /> 该行代码的作用就是告诉浏览器采用哪一种字符编码打开该文件。
解决乱码问题:乱码产生是因为文件采用UTF-8方式,但浏览器打开该文件时采用GBK方式打开的,所以乱码
基本标签
标题字:h1~h6 水平线:< hr/> (独目标记的概念) 粗体:< b> </ b> 斜体字:< i> </ i> 插入字:< ins> </ ins>
删除字:< del> </ del> 右上角加字:< sup> </ sup> 右下角加字:< sub> </ sub> 字体标签:< font> </ font>
图片标签:
(1)< img src = " " width = " " height = " " alt = " " title = " " />
(2)只设置图片的宽度,高度等比例缩放,不建议设置高度,设置高度容易失真。
超链接:
(1)超链接的作用:向服务器发送请求,链接到某个资源
(2)链接到网络中的某个资源< a href = " http://www.baidu.com" > </ a>
(3)链接到本地的某个资源< a href = " 本地文件的相对路径或绝对路径都可以" > </ a>
(4)图片做超链接< a href = " " > < img/> </ a>
(5)超链接的target属性"_blank"、" _self"
(6)用户点击超链接和在浏览器地址栏上直接输入URL是完全相同的效果,只不过超链接更傻瓜式。
列表:
有序:< ol type = " 1/A/a/I" > < li> </ li> </ ol>
无序:< ul type = " disc/circle/square" > < li> </ li> </ ul>
实体符号
空格: 大于号:> 小于号:<
表格
< table border = " 像素" width = " 像素或百分比" height = " 像素或百分比" align = " center" >
< tr align = " center" >
< td align = " center" > test</ td>
< td> test</ td>
</ tr>
</ table>
<--< th> 定义表格的表头。 < thead> 定义表格的页眉。 < tbody> 定义表格的主体。-->
行合并:rowspan 列合并:colspan
表单
< form action = " " >
< input type = " " name = " " value = " " />
</ form>
input输入域标签的tpye属性值:
text、password、 radio、checkbox(默认值:checked)
select(选项:option 默认选项:selected 多选:multiple="multiple" 显示多个条目:size="3" )、
submit、reset、button、textarea、file、hidden
readonly:只读,不能修改,提交表单时数据会提交
disabled:只读,不能修改,提交表单时数据不会提交
maxlength 属性规定输入字段的最大长度,以字符个数计。
form表单的method属性:
(1)method不写或写上get都属于get请求,method写post才是post请求
(2)"get"请求在HTTP协议的请求体中提交数据,最终提交的数据会显示在浏览器地址栏上而"post"不会
(3)只有当使用form表单,并且method属性设置为post才是post请求,其他请求均为get,超链接也是get请求。
action属性等同于超链接的href属性,填写请求的url
表单的提交是发送请求url,并携带数据给服务器。
发送请求并提交数据时,数据格式遵循HTTP协议,所有浏览器都会采用这种格式:
url?name=value&name=value&name=value...,
其中name是input标签的name属性,value是input标签的value属性
DIV (Division)和 span
(1)理解div是一种图层,div主要使用在网页布局方面,通过后期所学的CSS可以设置div的宽度、高度、位置等样式。div比table的布局更加灵活。
(2)div图层可以嵌套使用
(3)默认情况下div独占一行,span不会独占行。
HTML中元素的id属性
讲述HTML文档是一棵树(DOM树),树上有很多节点,每个节点一般都会有id属性,id属性具有唯一性,在同一个文档中不能重复,id是该节点的唯一标识。
Cascading Style Sheets
HTML中嵌入CSS样式的三种方式
内联定义方式:
<div style="font-size:12px; text-align:center;">HTML中引用CSS的行内式方法</div>
样式块:
(1)<style type="text/css">选择器{} 选择器{}</style>
(2)CSS的注释怎么写
引入外部独立的CSS样式文件:
<link href="css文件路径" rel="stylesheet" type="text/css" />
基本选择器:
id选择器->#id{样式名1:样式值1;……}
class选择器->.calss{样式名1:样式值1;……}
标签选择器->标签{样式名1:样式值1;……}
全局选择器->*{样式名1:样式值1;……}
基本选择器优先级:ID选择器>类选择器>标签选择器
扩展选择器:
选择所有元素:
语法: *{}
并集选择器:
选择器1,选择器2{}
子选择器:筛选选择器1元素下的选择器2元素
语法: 选择器1 选择器2{}
父选择器:筛选选择器2的父元素选择器1
语法: 选择器1 > 选择器2{}
属性选择器:选择元素名称,属性名=属性值的元素
语法: 元素名称[属性名="属性值"]{}
伪类选择器:选择一些元素具有的状态
语法: 元素:状态{}
如: <a>
* 状态:
* link:初始化的状态
* visited:被访问过的状态
* active:正在访问状态
* hover:鼠标悬浮状态
样式
字体、文本
* font-size:字体大小
* color:文本颜色
* text-align:文本对其方式,和父标签一致时垂直居中
* line-height:行高
* text-decoration:none:无下划线
背景
* background:
* background-image:url
边框
* border:10px solid red
尺寸
* width:宽度
* height:高度
盒子模型:控制布局
* margin:外边距
* padding:内边距
* 默认情况下内边距会影响整个盒子的大小
* box-sizing: border-box; 设置盒子的属性,让width和height就是最终盒子的大小
布局float:浮动
* left
* right
超链接:
•a:link - 普通的、未被访问的链接
•a:visited - 用户已访问的链接
•a:hover - 鼠标指针位于链接的上方
•a:active - 链接被点击的时刻
定位:
为了将标签放到指定的位置上。通常情况下,能用盒子模型解决,就不要用定位。
样式:position
常用值:
absolute:绝对定位特征:
1)Z轴上往人的方向移动,原本的位置会空出来,后面的标签就会去挤占掉
2)相对于页面的顶点进行移动
relative:相对定位特征:
1)原本的位置会一直保留
2)相对于原来的位置进行偏移
fixed:固定定位特征:
1)原本的位置不保留
2)相对于页面的顶点进行偏移
3)不受滚动条的影响
调整位置的样式:left,right,top,bottom
标签的分类
块标签:
独占一行,自动换行、可以手动设置宽高
比如:< div> ,< p> ,< h*> ,< ol> ,< ul> ,< li> ,< table> ,< form> ……
行标签:
不会自动换行、不能设置宽高
比如:< span> ,< font> ,< strong> ,< b> ,< em> ,< i> ,< a> ,< input> ,< select> ……
行块标签:
不能自动换行、可以设置宽高
比如:< img>
标签类型的转换:
样式:display
常用值:block(转成块标签),inline(转成行标签),inline-block(转成行块标签)
JavaScript
JavaScript包括三块:ECMAScript、DOM、BOM
ECMAScript是ECMA 制定的262 标准,JavaScript和JScript都遵守这个标准,ECMAScript是JavaScript核心语法
DOM 编程是通过JavaScript对HTML 中的dom节点进行操作,DOM 是有规范的,DOM 规范是W3C 制定的。 ( Document Object Model:文档对象模型)
BOM 编程是对浏览器本身操作,例如:前进、后退、地址栏、关闭窗口、弹窗等。由于浏览器有不同的厂家制造,所以BOM 缺少规范,一般只是有一个默认的行业规范。(Browser Object Model:浏览器对象模型)
嵌入JS三种方式以及JS的注释
一、行间事件
(1 )< input type= "button" value= "hello" onclick= "window.alert('hello js')" / >
(2 )JS 是一种基于事件驱动型的编程语言,当触发某个事件之后,执行一段代码
(3 )JS 中的任何一个事件都对应一个事件句柄,例如鼠标单击事件click,对应的事件句柄就是onclick,事件句柄都是以标签的属性方式存在。在事件句柄后面可以编写JS 代码,当触发这个事件之后,这段JS 代码则执行了。
(4 )JS 中的字符串可以使用单引号括起来,也可以使用双引号括起来
(5 )window是JS 中的内置BOM 顶级对象,代表当前浏览器窗口,window对象有一个alert ( ) 函数,该函数可以在浏览器上弹出消息框。
(6 )JS 中的一条语句结束后可以使用“; ”结尾,也可以不写。
(7 )window. alert ( ) 中的window. 可以省略。
二、页面script标签嵌入
(1 )< script type= "text/javascript" > JS 代码< / script>
(2 )window. alert ( ) 的执行会阻塞当前页面的加载
(3 )一个页面中可以写多个脚本块、脚本块的位置没有限制
(5 )暴露在脚本块中的JS 代码在页面打开的时候遵循自上而下的顺序依次逐行执行
三、外部引入
(1 )< script type= "text/javascript" src= "js文件路径" > 这里不能写JS 代码< / script>
变量
变量的声明与赋值
(1 )变量未赋值,系统默认赋值undefined
(2 )JS 是一种弱类型编程语言,一个变量可以接收任何类型的数据
(3 )一行上也可以声明多个变量
函数的定义与调用
(1 )函数类似于java语言中的方法,是一段可以完成某个功能的可以被重复利用的代码片段
(2 )定义函数的两种语法
第一种:普通函数定义
function 函数名 ( 形式参数列表) { 函数体; }
第二种:如果是把函数的声明当做类进行定义
函数名 = function ( 形式参数列表) { 函数体; }
JS 中的函数在调用的时候,实参可以随意,没传的参数都是undefined。
(3 )JS 中的函数定义在脚本块中,页面在打开的时候,函数并不会自动执行,函数是需要手动调用才能执行的。
(4 )由于JS 是一种弱类型编程语言,所以函数不能同名,没有重载机制
(5 )页面打开的时候会先进行所有函数的声明,函数声明优先级较高。
局部变量和全局变量:
局部变量:函数的形参是局部变量,另外使用var 关键字在函数体中声明的变量是局部变量,函数执行结束之后,局部变量的内存就释放了。
全局变量:在函数体外声明的变量属于全局变量,另外不使用var 关键字声明的变量无论位置在哪,它都是全局变量,全局变量在浏览器关闭时销毁。
JS数据类型
typeof 运算符
typeof 运算符运算结果全部为小写字符串:
"undefined" 、"number" 、"string" 、"boolean" 、"object" 、"function"
Undefined:
只有一个值undefined,变量声明没赋值,系统默认赋值undefined
Number:
(1 )Number类型包括哪些值:0 , 1 ,- 1 , 3.14 , 12 , 300 ,NaN ,Infinity
(2)parseInt ( ) 函数
(3)parseFloat ( ) 函数
(4 )Math. ceil ( ) 函数:向上取整
(5)isNaN ( ) 函数
String:
(1 )可以使用单引号,也可以用双引号
(2)字符串中常用方法讲一些,主要讲解字符串的substr ( ) 和substring ( ) 的区别。
(3)去除前后空白方法trim ( ) ;
Null:
(1 )该类型只有一个值:null
(2 )typeof 运算符的执行结果是"object"
Boolean
(1 )只有两个值:true 和false
(2)Boolean ( ) 函数
(3 )JS 中的if 语句自动调用Boolean ( ) 函数。
Object:
(1 )JS 中如何定义一个类。
(2 )JS 中如何创建一个对象。
(3 )JS 中如何访问对象属性,调用对象的方法。
(4 )JS 中的一个函数,既是函数声明,又是类的定义,同时函数名也可以看做构造方法名。直接调用函数表示普通函数调用,如果使用new 运算符来调用该函数则会创建对象。
(5 )使用prototype属性动态的给对象扩展属性以及方法。
null NaN undefined区别
(1 )= 、== 、=== 三者的区别
(2 )null NaN undefined三者类型不同,null 和undefined的值可以等同
JS中的事件
常用事件
(1 )blur失去焦点 (2 )focus获得焦点
(3 )keydown键盘按下 (4 )keyup键盘弹起
(5 )click鼠标单击 (6 )dblclick鼠标双击
(7 )mousedown鼠标按下 (8 )mouseup鼠标弹起
(9 )mouseover鼠标经过 (10 )mouseout鼠标离开 (11 )mousemove鼠标移动
(12 )load页面加载完毕
(13 )change下拉列表选中项改变,或文本框内容改变
(14 )reset表单重置
(15 )select文本被选定
(16 )submit表单提交
注册事件的两种方式:
(1 )在标签中使用事件句柄的方式注册事件
< body onload= "sayHello()" > < / body>
(2 )在页面加载完毕后使用JS 代码给元素绑定事件
< script>
window. onload = function ( ) {
}
< / script>
重点:通过事件注册,理解回调函数的概念
JS 中也可以使用JS 代码调用事件函数来触发事件
格式eg: 元素. click ( ) ;
回车键13,ESC键27
JS运算符之void
javascript: void ( 0 ) 执行某段表达式,但不返回任何结果,包括"" ;
for…in
可以使用for . . in 语句遍历数组,以及遍历一个对象的属性。
JS内置对象
Array
(1 )创建数组用
var a = [ 1 , 2 , 3 , ] var arr1 = new Array ( ) 长度为0 的数组
var arr1 = new Array ( 3 ) 长度为3 的数组 var arr1 = new Array ( 1 , 2 , 3 ) 有元素的
(2 )JS 中的数组特点
长度可变, 会自动扩容,无自动越界问题
(3 )JS 中数组对象常用方法:push ( 新增) ,pop ( 删除) ,join ( 连接) ,reverse ( 翻转) 等。
(4 )数组遍历
Date
(1 )var time = new Date ( ) 获取当前系统时间
(2 )time. getFullYear ( ) 年 time. getMonth ( ) 月 time. getDate ( ) 日
(3 )time. getHours ( ) / getMinutes ( ) / getSeconds ( ) / getMilliseconds ( )
(4 )time. toLocaleString ( ) 转换成具有本地语言环境的格式
(5 )time. getTime ( ) 获取时间戳(1970.1 .1 0 : 0 : 0 到现在的秒数)
BOM和DOM的区别与联系
BOM 包括DOM
window是BOM 的顶级对象
document是DOM 的顶级对象
DOM编程
innerHTML和innerText:
都是属性
innerHtml会将后面的字符串当做一段HTML 代码解释并执行
innerText后面的字符串即使是一段HTML 代码也会当作一段普通文本
查找元素:
document. getElementById ( “id”) ; 通过id属性的值查找元素
document. getElementsByName ( “name”) ; 通过name属性的值查找元素,返回的是元素数组。
document. getElementsByClassName ( “class ”) ; 通过class 属性的值查找元素, 返回的是元素数组。
document. getElementsByTagName ( “标签名”) ; 通过标签名查找元素,返回的是元素数组。
BOM编程
如果当前窗口不是顶级窗口,那就高为顶级窗口
if ( window. top!= window. self) {
window. top. location = window. self. location;
}
window两种定时器:
周期定时器
var id = window. setInterval ( function , time) ; 清除周期定时器:window. clearInterval ( id) ;
超时定时器
var id = window. setTimeout ( function , time) ; 清除超时定时器:window. clearTimeout ( id) ;
window三种弹窗:
警告框: window. alert ( )
确认框: window. confirm ( "确认信息" ) , 返回值为true / false
提示框: window. prompt ( "提示语句" , "默认可选参数" )
location地址对象:
跳转页面的多种方式 ( 发送请求) :
一、直接在浏览器地址栏上写URL
二、点击超链接
三、提交表单
四、window. open ( url, target) 工
五、js代码:
windouw. location. href window. location
document. location. href document. location
history历史对象:
window. history. go ( ) / back ( ) ; 注: go ( ) 的参数也可以是1 / - 1
screen屏幕对象:
screen. width screen. height
document对象:
document. body. offsetWidth: 网页可见区域的宽度
documnt. . body. offsetheight: 网页可见区域的高度
html{ height: 100 % } body{ height: 100 % }
window.eval()函数
< script>
window. eval ( "var i = 100;" ) ;
alert ( "i = " + i) ;
< / script>
JSON
JavaScript Object Notation(JavaScript对象标记),简称JSON 。
( 一种轻量级的数据交换格式特点是:体积小,易解析。)
什么是数据交换:
java和c语言之间交换数据、python和java语言交换数据、js和java之间交换数据等等
JSON 主要的作用是:
一种标准的数据交换格式。(目前非常流行,90 % 以上的系统,系统A 与系统B 交换数据的话,都是采用JSON 。)
在实际的开发中有两种数据交换格式,使用最多
其一是JSON ,另一个是XML 。两种都是标准的数据交换格式
XML 体积较大,解析麻烦,但是有其优点是:语法严谨。(银行相关的系统等使用XML 。)
在JS 中JSON 是以对象的形式存在
JSON 的语法格式:
var jsonObj = { "属性名" : 属性值, "属性名" : 属性值, "属性名" : 属性值, ... . } ;
属性值可以是任意类型;
定义好之后怎么访问属性:
第一种方式: 对象. 属性名的方式-- -- > eg: console. log ( jsonObj. 属性名)
第二种方式: 对象[ "对象名" ] -- > eg: console. log ( jsonObj[ "对象名" ] )
注意:
在JS 当中:[ ] 和{ } 有什么区别?
[ ] 是数组。
{ } 是JSON 。
eval()和JSON联合使用
< script type= "text/javascript" >
var fromJava = "{\"name\":\"zhangsan\",\"password\":\"123\"}" ;
window. eval ( "var jsonObj = " + fromJava) ;
alert ( jsonObj. name + "," + jsonObj. password) ;
< / script>
正则表达式
预定义字符类:
. 表示任意的字符 \. 表示的一个确定的. 这个字符串
\d 表示数字字符
\D 表示非数字字符
\b 匹配单词的开始或结束
\B 匹配不是单词开头或结束的位置
^ 匹配字符串的开始
$ 匹配字符串的结束
\s 表示空格字符
\S 表示非空格字符
\w 表示的[ a- zA- Z0 - 9 _]
\W 表示除了[ a- zA- Z0 - 9 _] 以外的其他字符
数量词:
模糊的数量词
X ? 表示的x这个字符,出现0 次或者1 次
X + 表示x这个字符,出现1 次或者多次
X * 表示x这个字符,出现0 次,1 次或者多次
精确的数量词
X { n} 表示x这个字符恰好出现n次
X { n, } 表示x这个字符至少出现n次
X { n, m} 表示x这个字符至少出现n次,至多出现m次
在JS 中怎么创建正则表达式呢?
第一种方式 ( 主要使用) :
直接量语法
var regExp = / 正则表达式/ 标记;
第二种方式:
使用内置类RegExp类
var regExp = new RegExp ( "正则表达式" , "标记" ) ;
以上的标记是可选项,可选的值有:
g: 全局的 ( global)
i:忽略大小写 ( ignorecase)
gi: 全局扫描并且忽略大小写
正则表达式对象有一个很重要的方法:
正则表达式对象. test ( ) ;
返回值为true 表示匹配成功
JS 中字符串String也是支持正则表达式的:
1 、stringObj. match ( String regex) 判断当前字符串和参数正则表达式是否匹配
2 、stringObj. replace ( regExp, replacetext) 根据正则替换