(六)网页三剑客
html css js(脚本语言,重点)
一、html标签
超链接调用js代码
<a href="javascript:"></a>
锚链接
<a href="help.html#register"></a>
<a name="register"></a>
列表标签:
无序列表
<ul>
<li></li>
<li></li>
</ul>
有序列表
<ol>
<li></li>
</ol>
定义列表
<dl>
<dt></dt> //标题
<dd></dd> //标题对应的内容
</dl>
*表单:
<form action="#" method="">
</form>
action如果为空或#,提交到本页面
method
get(默认) 方法提交参数在浏览器可见
post 一般用于多数据,保密数据提交
<input>标签:
type属性:
text(默认),password,button,
checkbox,radio,submit,reset,
file,hidden
下拉框:
<select></select>
文本域标签:
<textarea></textarea>
关联表单元素
<label for=""></label>
只读:
readonly="readonly"
禁用:
disabled="disabled"
*表格:
<table>
<tr>
<td></td><td></td>
</tr>
</table>
<caption></caption> 表格标题
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
跨列:
colspan
跨行
rowspan
内联框架
iframe
src 文件路径
网页样式css
div+css html5+css3
块元素
独占一行 div p ul li
内联元素:
一行排列显示 span a label img
css标签:
<style type="text/css">
..css代码
</style>
语法:
选择器{
样式1
样式2
}
选择器:
标签选择器
ID选择器
#id名{}
类选择器(重复使用):
.类名{}
优先级:
ID选择器>类选择器>标签选择器
复合选择器:
并集选择器
多个选择器之间可以是多个不同或相同类型;
多个选择器之间必须用英文半角输入法逗号“,”隔开;
交集选择器
p#id{}
后代选择器
p .class{}
css的注释:
/* 注释*/
css三种引入方式:
行内样式:
style属性
内部样式
head标签里
外部样式
<link type="text/css" rel="stylesheet" href="ru.css"/>
优先级:
行内样式>内部样式>外部样式
常用:
font-size 设置字体大小
color: 字体颜色
javascript(弱类型的编程语言)
javascript的三种引入方式
往网页输出
document.write("<br/>")
弹出框:
alert(),prompt(),confirm()
javascript的注释和java一样
javascript的数据类型:
undefined,String,number,Boolean,Null
typeof
声明变量:var
1、数据类型转换
parseInt(); NaN -- not a number
当字符串首字符是数字就可以转换成number
强制类型转换:
Number()
要求字符串都为数字
2、比较运算符:
== js中比较字符串用 ==
=== 判断类型和值都相同才为true
3、循环:
for in
var array = [3,34,"sdf",12.3,true];
//for in
for(var i in array){
alert(array[i]);
}
4、js中怎么定义一个数组?
java
int[] array = new int[2];
int[] array2 = {3,5,6};
int[] array3 = new int[]{33,4,54};
js:
var array = [3,34,"sdf",12.3,true];
var arr2 = new Array();
var arr3 = [];
5、js的函数:
系统函数
parseInt(),Number(),isNaN();
eval();
//将字符串作为脚本来执行
var k = eval("12+6*3");
*自定义函数
a.
function 方法名(参数1,参数2...){
}
b.
回调函数
var 方法名 = function(参数1,参数2...){
}
有返回值的函数
匿名函数:
不需要调用,直接执行
全局变量和局部变量
用法和java一样
6、js代码调试debug
浏览器debug
7、js常用事件:
onload 页面加载执行
onfocus onblur
onmouseover onmouseout
8、try{
}catch(err){
err.message //错误信息
}
console.log("");
BOM 浏览器模型
window:
history
location
Document
window.alert() ---> alert();
window.onload = function(){}//页面加载完毕执行
window.location.href = "url" //设置页面跳转
window.history
back() //返回上一个访问的页面
forward //跳转到下一个访问的页面
go(0) //刷新当前页面
location.reload();//刷新当前页面
超链接调用js代码
<a href="javascript:"></a>
文档对象模型:
dom解析xml
DOM文档对象模型
document对象的属性:
title 获取文档的标题head
document对象的方法:
write();// 往网页输出字符串
getElementById():返回对拥有指定id的第一个对象的引用
getElementsByTagName():返回带有指定名称的对象集合
getElementsByName():返回带有指定名称的对象集合
innerHTML 获取标签体内容
value 获取input的value值
window对象常用的方法:
open();
打开窗口
window.open("test2.html","爱好","height:100px,width:100px,toolbar=1");
setInterval(fn,毫秒值); //循环执行
setTimeout(fn,毫秒值); //只执行一次
节点操作
nodeName(节点名称)
nodeValue(节点值)
nodeType(节点类型)
元素 1 、属性 2、 文本 3、 注释 8、 文档 9
js dom节点操作
创建节点
createElement(tagName)
appendChild 添加子节点
removeChild 删除节点
js内置对象
String
获取字符串长度: length
indexOf(str) 第一次出现的位置
substring(index1,index2) 字符串提取
split(str) 字符串切割
Math:
round();四舍五入的方法
Date:
var date = new Date();
Array
var 数组名称 = new Array(); // 创建空数组对象
var 数组名称 = new Array(size);// 创建size个undefined成员的数组
var 数组名称 = new Array(element0, element0, ..., elementn );
html css js(脚本语言,重点)
一、html标签
超链接调用js代码
<a href="javascript:"></a>
锚链接
<a href="help.html#register"></a>
<a name="register"></a>
列表标签:
无序列表
<ul>
<li></li>
<li></li>
</ul>
有序列表
<ol>
<li></li>
</ol>
定义列表
<dl>
<dt></dt> //标题
<dd></dd> //标题对应的内容
</dl>
*表单:
<form action="#" method="">
</form>
action如果为空或#,提交到本页面
method
get(默认) 方法提交参数在浏览器可见
post 一般用于多数据,保密数据提交
<input>标签:
type属性:
text(默认),password,button,
checkbox,radio,submit,reset,
file,hidden
下拉框:
<select></select>
文本域标签:
<textarea></textarea>
关联表单元素
<label for=""></label>
只读:
readonly="readonly"
禁用:
disabled="disabled"
*表格:
<table>
<tr>
<td></td><td></td>
</tr>
</table>
<caption></caption> 表格标题
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
跨列:
colspan
跨行
rowspan
内联框架
iframe
src 文件路径
网页样式css
div+css html5+css3
块元素
独占一行 div p ul li
内联元素:
一行排列显示 span a label img
css标签:
<style type="text/css">
..css代码
</style>
语法:
选择器{
样式1
样式2
}
选择器:
标签选择器
ID选择器
#id名{}
类选择器(重复使用):
.类名{}
优先级:
ID选择器>类选择器>标签选择器
复合选择器:
并集选择器
多个选择器之间可以是多个不同或相同类型;
多个选择器之间必须用英文半角输入法逗号“,”隔开;
交集选择器
p#id{}
后代选择器
p .class{}
css的注释:
/* 注释*/
css三种引入方式:
行内样式:
style属性
内部样式
head标签里
外部样式
<link type="text/css" rel="stylesheet" href="ru.css"/>
优先级:
行内样式>内部样式>外部样式
常用:
font-size 设置字体大小
color: 字体颜色
javascript(弱类型的编程语言)
javascript的三种引入方式
往网页输出
document.write("<br/>")
弹出框:
alert(),prompt(),confirm()
javascript的注释和java一样
javascript的数据类型:
undefined,String,number,Boolean,Null
typeof
声明变量:var
1、数据类型转换
parseInt(); NaN -- not a number
当字符串首字符是数字就可以转换成number
强制类型转换:
Number()
要求字符串都为数字
2、比较运算符:
== js中比较字符串用 ==
=== 判断类型和值都相同才为true
3、循环:
for in
var array = [3,34,"sdf",12.3,true];
//for in
for(var i in array){
alert(array[i]);
}
4、js中怎么定义一个数组?
java
int[] array = new int[2];
int[] array2 = {3,5,6};
int[] array3 = new int[]{33,4,54};
js:
var array = [3,34,"sdf",12.3,true];
var arr2 = new Array();
var arr3 = [];
5、js的函数:
系统函数
parseInt(),Number(),isNaN();
eval();
//将字符串作为脚本来执行
var k = eval("12+6*3");
*自定义函数
a.
function 方法名(参数1,参数2...){
}
b.
回调函数
var 方法名 = function(参数1,参数2...){
}
有返回值的函数
匿名函数:
不需要调用,直接执行
全局变量和局部变量
用法和java一样
6、js代码调试debug
浏览器debug
7、js常用事件:
onload 页面加载执行
onfocus onblur
onmouseover onmouseout
8、try{
}catch(err){
err.message //错误信息
}
console.log("");
BOM 浏览器模型
window:
history
location
Document
window.alert() ---> alert();
window.onload = function(){}//页面加载完毕执行
window.location.href = "url" //设置页面跳转
window.history
back() //返回上一个访问的页面
forward //跳转到下一个访问的页面
go(0) //刷新当前页面
location.reload();//刷新当前页面
超链接调用js代码
<a href="javascript:"></a>
文档对象模型:
dom解析xml
DOM文档对象模型
document对象的属性:
title 获取文档的标题head
document对象的方法:
write();// 往网页输出字符串
getElementById():返回对拥有指定id的第一个对象的引用
getElementsByTagName():返回带有指定名称的对象集合
getElementsByName():返回带有指定名称的对象集合
innerHTML 获取标签体内容
value 获取input的value值
window对象常用的方法:
open();
打开窗口
window.open("test2.html","爱好","height:100px,width:100px,toolbar=1");
setInterval(fn,毫秒值); //循环执行
setTimeout(fn,毫秒值); //只执行一次
节点操作
nodeName(节点名称)
nodeValue(节点值)
nodeType(节点类型)
元素 1 、属性 2、 文本 3、 注释 8、 文档 9
js dom节点操作
创建节点
createElement(tagName)
appendChild 添加子节点
removeChild 删除节点
js内置对象
String
获取字符串长度: length
indexOf(str) 第一次出现的位置
substring(index1,index2) 字符串提取
split(str) 字符串切割
Math:
round();四舍五入的方法
Date:
var date = new Date();
Array
var 数组名称 = new Array(); // 创建空数组对象
var 数组名称 = new Array(size);// 创建size个undefined成员的数组
var 数组名称 = new Array(element0, element0, ..., elementn );