HTML

最新推荐文章于 2023-12-05 01:36:46 发布

Wolf-Z

最新推荐文章于 2023-12-05 01:36:46 发布

阅读量944

点赞数 1

分类专栏： java 文章标签： web

本文链接：https://blog.csdn.net/zhang_ye_ye/article/details/88194755

版权

java 专栏收录该内容

108 篇文章 1 订阅

订阅专栏

HTML

JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。
http://www.w3school.com.cn/
HTML：超文本标记语言（HyperText Markup Language）
xml dhtml(包含动画) jsp、PHP(动态的 )

HTML(view)

后缀为.htm和.html
标签不能交叉

<html>
	<head>
		<title>首页</title>
	</head>
	<body>
		Hello World
		</body>
</html>

字面值：书写什么就是什么别写单词

标签：<关键字属性=“值”>

1、< hr color=“blue” width=“100%” >一条横线
2、< br/ >换行符
3、< font color=“blue” size=“1~7 +N -N”>Hello< /font>
4、< b >加粗< /b >
5、< i >斜体< /i >
6、< u >下划线< /u >
7、< hn >标题< /hn > n:1~6
8、2< sup >4< /sup > 2的四次方
9、H< sub >2</ sub >O 水的书写
10、< strong > < s >中划线< /s > < blink >闪烁< /blink >
11、& nbsp;代表空格
12、&的代表&+amp;
13、&lt代表小于 &gt 代表大于
14、商标注册：& reg; R+圆圈 & copt; C+圆圈 & trade; 小写的TM & quot; 双引号
15、< p style=“background-color:red”>默认前后各空一行</ p>
16、< div style=“background-color:blue”>层块< /div>
17、< ul> < li>无序列表< li>< /ul> < ol>有序列表< /ol>

<font color="red" size=4>
		<ol type="i">四大名著
			<li>西游记</li>
			<li>红楼梦</li>
			<li>水浒传</li>
			<li>三国演义</li>
		</ol>
	</font>
	<hr>
	<font color="red" size=4>
		<ul type="square">四大名著
			<li>西游记</li>
			<li>红楼梦</li>
		</ul>
	</font>

18、图片：< img src=“绝对地址或相对地址” style=“width:400px;” align=“center/top/buttom”/>
19、align 属性：水平体积的html和文字组合的时候，三个取值：top center buttom
20、valign 属性：垂直三个取值：left middle right
21、链接：< a href=“目的URL” target="_blank">在一个新的空白页打开< /a>
22、同一网页回到顶部

<a name="top">锚点</a>

<a href="#top">回到顶部</a>

23、背景设置：< body bgcolor=""/background=“图片地址”>
24、表格：
属性：border:边框 align 水平方式 cellpadding 内边距
cellspacing 外边距

<table width="200px" border="1px" align="center" sellpadding="10px" cellspacing="0px" bgcolor="red">
	<tr>
		<th>第一行加粗</th>
	</tr>
	<tr>
		<td></td>
	</tr>
</table>

合并单元格

<tr>
	<td colspan="2">两列合为一列</td>
	<td rowspan="2">两行合为一行</td>
</tr>

表单（form）

输入属性

拥有获取用户录入信息的HTML元素

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>form</title>
<style>
	#table{
			text-align:center;
			
		}
		.t1{
			text-align:right;
			letter-spacing: 10px;
			}
			.t2{
			text-align:left;
			letter-spacing: 10px;
			}
	</style>
</head>
<body>
	<center>
		<h1>表单+表单元素</h1>
	</center>
	<form action="1.html" method="get">
		<table id="table" border="1px" width="400px" cellspacing="0px" cellpadding="0px"
			align="center">
			<tr>
				<th width="100px">项目</th>
				<th>内容</th>
			</tr>
			<!-- 输入框 -->
			<tr height="35px">
				<td class="t1">姓名:</td>
				<td class="t2"><input size="40px" type="text" name="username" /></td>
			</tr>
			<tr height="35px">
				<td class="t1" align="right">密码:</td>
				<td class="t2"><input  size="40px" type="password" name="userpass" /></td>
			</tr>
			<!-- 单选框 -->
			<tr height="35px">
				<td class="t1">性别:</td>
				<td class="t2">男:<input type="radio" name="sex" checked value="男"/> 女:<input
					type="radio" name="sex" value="女"/>
				</td>
			</tr>
			<!-- 复选框 -->
			<tr height="35px">
				<td class="t1" align="right">爱好:</td>
				<td class="t2">篮球:<input type="checkbox" name="hobby" checked value="篮球"/> 足球:<input
					type="checkbox" name="hobby" value="足球"/> 健身:<input type="checkbox"
					name="hobby" value="健身"/>
				</td>
			</tr>
			<!-- 下拉列表 -->
			<tr height="35px">
				<td class="t1">地址:</td>
				<td class="t2"><select name="地址" size="2">
						<option value="西安">西安</option>
						<option selected value="咸阳">咸阳</option>
						<option value="宝鸡">宝鸡</option>
				</select></td>
			</tr>
			<!-- 文本域 -->
			<tr class="t1" name="备注">
				<td class="t1">备注:</td>
				<td class="t2"><textarea rows="8" cols="" size="50px">
			
		</textarea></td>
			</tr>
			<!-- 三种按钮 -->
			<tr height="35px">
				<td align="center" colspan="2"><input type="button"
					value="按  钮" /> <input type="submit" value="提  交" /> <input
					type="reset" value="清  除" /></td>
			</tr>
		</table>
	</form>
</body>
</html>

HTML常见属性

表单元素全是通过name值传递信息的get传值多个信息用&连接
input name(别名) value（要获取的值） id(唯一)
size=“1”（一个单位长度）maxLength=“最长字符” readonly只读
单选框 name一致 value不同
下拉菜单 name、value选中选项的值 size下拉列表展示的行数

frameset框架

将浏览器分割，用不同的网页填充
rows 上下切割
cols 左右切割
切割方式 rows/cols(rows=“值1，值2，…，*所有剩余”)
frame填充 scrolling=“no” 设置滚动条
noresize 不可拖动，固定大小

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>frameset</title>
</head>

	<frameset rows="20%,*,5%">
		<frame src="head.html" scrolling="no" noresize/>
		<frameset cols="20%,*">
			<frame src="menu.html"/>
			<frame src="content.html" name="show"/>
		</frameset>
		<frame src="tail.html"/>
	</frameset>

</html>


<html>
	<head>
		<title>menu</title>
		</head>
		<body>
			<div align="left">
				<ul>
				<li><a href="1.html" target="show">目录</a></li>
				<li><a href="2.html" target="show">诗歌鉴赏</a></li>
				<li><a href="3.html" target="show">简历表格</a></li>
			</ul>
			</div>
		</font>
		</body>
</html>

在一个网页中呈现另一个网页

<div>
	<iframe src="test.html"/>
</div>

CSS(层叠样式表Cascade Style Sheet)

< font size color>

分类：

位置：
1、行内样式表：标签/元素上 style=“样式属性1：值1；…”
2、内嵌样式表：写在head里创建< style>< /style>可以写注释/**/
3、外联样式表：创建一个css文件，将样式文件引入到目标页面

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

行内>>内嵌/外联，内嵌/外联就近原则

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>frameset</title>
<style>
	#div1{
			color:blue;font-size:60px;
		}
	
	</style>
	<link rel="stylesheet" type="text/css" href="cs.css" />
</head>
<body>
	<font color="blue" align="right" size="6">
		西安工业大学  敦德励学、知行相长
	</font>
	<div style="color:red;font-size:50px;">
		西安工业大学  敦德励学、知行相长
	</div>
	<div id="div1">
		西安工业大学  敦德励学、知行相长
	</div>
	<div id="div2">
		西安工业大学  敦德励学、知行相长
	</div>
</body>

</html>

#div2{
		color:#c0cf0f;
		font-size:30px;
	}

类型：
1、id 通过id来访问标签，改变标签样式 #id值来访问
2、类 .class值来访问
3、标签标签名来访问
id>>类>>标签

<style>
	#div1{
			color:blue;font-size:60px;
	}
	.d{
		color:red;font-size:60px;
	}
	div{
		color:green;font-size:60px;
	}
</style>

样式共用

并列使用，将一个样式作用在多个标签上
包含使用空格隔开

<style>
	#div1{
			color:blue;font-size:30px;
	}
	.d{
		color:red;font-size:60px;
	}
	#div1,.d p{
		color:#00ffff;
	}
</style>

字体、背景、文本…

http://www.w3school.com.cn/css/css_background.asp

<style>
	#div1{
			color:blue;
			font-size:60px;
			font-family:Sans-serif;
			font-weight:60px;
			font-variant:small-caps;
	}
	#div2{
			color:blue;
			font-size:80px;
			font-family:Cursive;
			font-weight:60px;
			font-style:italic;
			font-variant:small-caps;
	}
	#div3{
			color:blue;
			font-size:100px;
			font-family:Monospace;
			font-weight:60px;
			font-style:oblique;
			font-variant:small-caps;
	}
	body{
		background-image: url(E:/BaiduNetdiskDownload/我的图片/296473.jpg);
		background-repeat:no-repeat;
		background-position:50%;
		background-attachment:fixed;
		}
</style>

链接

链接的四种状态：（顺序不能变）
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

定位与浮动

CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

CSS position 属性

static ：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative ：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute:元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed:元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>div-js</title>
	<style>
		#div1{
				position:relative;
				left:200px;
			}
		#div2{
				position:absolute;//元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样
				left:200px;
			}
		#div3{
				position:fixed;
				left:200px;
			}
		</style>
</head>
<body>
	<div id="div1" align="center">
		<p>你好啊，你好啊你好啊你好啊你好啊你好啊</p>
	</div>
	<div id="div2" align="center">
		<p>你好啊，你好啊你好啊你好啊你好啊你好啊</p>
	</div>
	<br>
	<div id="div3" align="center">
		<p>你好啊，你好啊你好啊你好啊你好啊你好啊</p>
	</div>
</body>
</html>

图片处理

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>photo</title>
	<style>
	
		#main{
			width:1200px;
			height:260px;
			margin:70px 200px;
		}
		div.show{
				float:left;
				width:350px;
				height:auto;
				border:1px solid #333333;
				padding:30px;
			}
		#img1{
				-webkit-filter:saturate(800%);
			}
		#img1:hover{
				-webkit-filter:saturate(100%);
			}
		#img2{
				-webkit-filter:grayscale(100%);
			}	
		#img2:hover{
				-webkit-filter:grayscale(0%);
			}
		#img3{
				-webkit-filter:drop-shadow(8px 8px 10px red);
			}	
		#img3:hover{
				-webkit-filter:drop-shadow(0px 0px 0px red);
			}
		#img4{
				-webkit-filter:invert(100%);
			}	
		#img4:hover{
				-webkit-filter:invert(0%);
			}
		div.desc{
				text-align:center;
				color:blue;
				
			}
		</style>
</head>
<body>
<div id="main">
	<div id="div1" class="show">
		<img id="img1" src="photo.jpg" width="300px"/>
		<div class="desc">色调加深</div>
	</div>
	<div id="div2" class="show">
		<img id="img2" src="photo.jpg" width="300px"/>
		<div class="desc">灰度</div>
	</div>
	<div id="div3" class="show">
		<img id="img3" src="photo.jpg" width="300px"/>
		<div class="desc">阴影</div>
	</div>
	<div id="div4" class="show">
		<img id="img4" src="photo.jpg" width="300px"/>
		<div class="desc">位素翻转</div>
	</div>
</div>
</body>
</html>

js(JavaScript特效)

Java和JavaScript的区别
1、js客户端脚本 Java客户端语言
2、基于对象 Java面向对象
3、Java编译执行 js解释执行
4、Java强语言 js弱语言
js组成：核心（core）、DOM（文本对象） BOM（浏览器对象）
写法：
1、写在head里页面内容加载之前
2、写在body里写在哪在哪加载
3、js文件

document.write("Hello");//js文件内容

<script type="text/javascript" src="js.js"></script>

变量类型

Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

数组

数组内容可以由不同类型组成

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>div-js</title>
	
</head>
<body>
	<script type="text/javascript" src="js.js"></script>
	<script>
		var nums=[2,"ss","true"];
		document.write("<br>"+"数组内容："+nums+"<br>");
		var num1="a"+nums[0];
		document.write("数字转字符："+num1+" "+typeof(num1)+"<br>");
		var num2=2+true;
		document.write("Boolean转数字："+num2+" "+typeof(num2)+"<br>");
		var num3=parseInt(nums[1]);
		document.write("将字符转数字："+num3+" "+typeof(num3)+"<br>");//NaN  not a number
		document.write("数组越界："+nums[10]+"<br>");//undefined
		nums.length=0;//清空数组
		document.write("清空数组之后："+nums[2]+"<br>");
		
		</script>
</body>
</html>

字符串

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>divs</title>
</head>
<body>
	<script>
		var str="afafae-DWDWF-324cv";
		document.write("字符长度为："+str.length+"<br>");
		document.write("使用big函数："+str.big()+"<br>");//字号增大
		document.write("使用bold函数："+str.bold()+"<br>");//变粗
		document.write("使用italics函数："+str.italics()+"<br>");//斜体
		document.write("使用strike函数："+str.strike()+"<br>");//删除
		document.write("使用函数："+str.italics().big().bold()+"<br>");
		document.write("大写转化："+str.toUpperCase()+"<br>");
		document.write("第三个："+str.charAt(2)+"<br>");
		document.write("找字符af："+str.indexOf("af")+"<br>");
		document.write("找字符af："+str.lastIndexOf("af")+"<br>");
		//分割
		var strs=str.split("-");
		document.write("分割之后的数组："+strs+"<br>");
		//截取
		document.write("从第三个往后（不包含）"+str.substr(3)+"<br>");
		document.write("从第三个往后（不包含）"+str.substring(3)+"<br>");
		document.write("从第三个往后4个（不包含）"+str.substr(3,4)+"<br>");
		document.write("从第三个到4个（左闭右开）"+str.substring(3,4)+"<br>");
		
		</script>
</body>
</html>

将字符串包装为链接

var x="baidu".link("https://www.baidu.com");
		document.write(x);

运算符

比较运算符：

字符	含义
>	大于
<	小于
<=	小于等于
>=	大于等于
==	等于
!=	不等于
===	恒等（判断数据类型）
!==	恒不等

==注意：js里对真假界定宽泛，记住假值：0 false null undefined NaN(not a number) “”(空字符串)

对象运算符

instanceof 检测一个对象是不是某个类的对象

<script>
		var x="sdaf";//不能认定为String类型
		var x1=new String("sa");
		var num=new Number(3);
		if(x instanceof String){
			document.write("Hello");
			}
			if(x1 instanceof String){
			document.write("字符串<br>");
			}
			if(num instanceof Number){
			document.write("数字");
			}
		</script>

语法

<html>
	<head>
		<title>script用法</title>
	</head>
	<body>
		<script>
			var ss=true;
			if(ss){
				document.write("真"+"<br>");
			}else{
				document.write("假"+"<br>");
				}
			var str=4;
			switch(str){
				case 1:
					document.write("电视机"+"<br>");
					break;
				case 2:
					document.write("音响"+"<br>");
					break;
				case 3:
					document.write("冰箱"+"<br>");
					break;
				default:
					document.write("电脑"+"<br>");
					break;
				}
				//循环
				var index=0;
				while(index<4){
					document.write("hello"+index+"<br>");
					index++;
				}
				//输入对话框  有返回值 
				var d=prompt("请输入你需要的：","黄瓜");
				document.write(d);
				var s=alert(d);//信息提示框无返回值
				alert(s);
				var f=(3>2)?"是的":false;
				document.write("<font size='7' color='blue'>"+f+"</font>");
			</script>
	</body>
</html>

函数

函数提高代码的复用性
基本使用：函数封装了一段可重复代码
必有返回值：不写return返回值为undefined 函数调用时实参与形参不一致
函数无重载：后面的声明会覆盖前面的声明，函数里声明的参数都存放在arguments里
高级使用：在js里，函数也是数据类型，声明函数时，创造了function对象，对象名就是函数名
作为类的构造如果调用时用new 代表该函数是构造函数
function 方法名(参数列表){
执行语句；
返回值；
}

<html>
	<head>
		<title>script用法</title>
		<script>
			function test(){
				alert("信息提示。。。");
			}
			function get(){
					return "Hello";
			}
			
			function test2(){
					alert(get());
			}
			function show(obj){
					alert(obj.innerHTML);//当前标签下的所有 标签+文本
					obj.innerHTML="<font color='blue' size='8'>新增内容。。。</font>";
				}
		</script>
		<style>
			#div1{
					width:400px;
					height:300px;
					background-color:red;
				}
			
			</style>
	</head>
	<body "test2()"><!--onload表示页面加载时-->
		<div "show(this)" id="div1">
			<p>激动的很</p>
		</div>
	</body>
</html>

类和对象

将一组相关数据和操作封装起来，只使用对象：var 对象名=newObject();
通过Json格式字符串创建对象

<html>
	<head>
		<title>对象用法</title>
	</head>
	<body >
		<h1>普通</h1>
		<script>
			var stu=new Object();
			stu.name="zhangrui";
			stu.age=22;
			stu.hobbys=["足球","篮球"];
			stu.showMe=function(){
				return this.name;
			}
			alert(stu.showMe());
		</script>
		
		
		<h2>Json</h2>
		<script>
			var stu_json={
					name:"张瑞",
					age:23,
					hobby:["A","B","C"],
					showMe:function(){
							return this.name;
						}
				}
				alert(stu_json.showMe());
		</script>
			
	</body>
</html>

事件：种类和绑定

绑定方法：HTML上脚本上
事件分类：
1、body onload事件，页面加载触发
2、鼠标事件：onclick(单击) ondblclick(双击) onmousedown/onmouseup(鼠标按/松) onmouseover/onmouseout/onmousemove移入/移出/移动
3、键盘事件：onkeydown/onkeyup 按下、松开通过keycode得到编号 onkeypress得到编号的值
4、HTML元素事件：
onfocus:得到焦点
onblur:失去焦点
onchange:值改变适用< select>
form:onsubmit 表单提交事件需要返回返回值（Boolean）

form表单

页面

<html>
	<head>
		<title>form表单</title>
	<link rel="stylesheet" type="text/css" href="form3.css" />
	<script src="form3.js"></script>
	</head>
	<body >
		<div id="main">
		<form action="OK.html" method="post" "return confirm()"/>
			<table>
				<tr>
					<td class="t1">姓名：</td>
					<td class="t2">
						<input type="text" name="user" class="input1"/>
						<div id="userTip" class="tip">
							*请输入1-8个字符
						</div>
					</td>
				</tr>
				<tr>
					<td class="t1">密码：</td>
					<td class="t2">
						<input type="password" name="password" class="input1"/>
						<div id="passTip" class="tip">
							*请输入8-16个字符
						</div>
					</td>
				</tr>
				<tr>
					<td class="t1">性别：</td>
					<td class="t2">
						男<input type="radio" name="sex" value="man" checked/>
						女<input type="radio" name="sex" value="woman"/>
					</td>
				</tr>
				<tr>
					<td class="t1">地址：</td>
					<td class="t2">
						<select id="address">
							<option>--西安--</option>
							<option>--咸阳--</option>
							<option>--宝鸡--</option>
							<option>--渭南--</option>
						</select>
					</td>
				</tr>
				<tr>
					<td class="t1">爱好：</td>
					<td class="t2">
						足球<input type="checkbox" name="hobby" value="足球"/>
						篮球<input type="checkbox" name="hobby" value="篮球"/>
						乒乓球<input type="checkbox" name="hobby" value="乒乓球"/>
						羽毛球<input type="checkbox" name="hobby" value="羽毛球"/>
					</td>
				</tr>
				<tr>
					<td colspan="2">
					<input type="submit" value="提  交"/>
				</td>
				</tr>
			</table>
		</form>
	</div>
	</body>
</html>

js文件

{var flag=false;
function submit(){
	var str=document.getElementsByName("user");
	var pass=document.getElementsByName("password");
	var hobby=document.getElementsByName("hobby");
	var objuser=document.getElementById("userTip");
	if(str[0].value.length==0||str[0].value.length>8){
		objuser.style.color="red";
		objuser.innerHTML="*请输入1-8个字符的名字";
		flag=false;
	}else{
		objuser.style.color="blue";
		objuser.innerHTML="*请输入1-8个字符";
		flag=true;
	}
	var objpass=document.getElementById("passTip");
	if(pass[0].value.length<8||pass[0].value.length>16){
		
		objpass.style.color="red";
		objpass.innerHTML="*请输入8-16字符的密码";
		flag=false;
	}else{
		objpass.style.color="blue";
		objpass.innerHTML="*请输入8-16字符";
		flag=true;
	}
	/*遍历hobby*/
	flag=false;
	for(var i=0;i<hobby.length;i++){
		if(hobby[i].checked){
			flag=true;	
		}
	}
	if(flag==false){
		alert("至少选一个爱好！");	
	}
}
function confirm(){
		submit();
		return flag;
	}
}

css文件

#main{
		position:absolute;
		top:150px;
		left:400px;
	}
table{
	font-family: cursive;
	font-weight:bold;
	text-align:center;
	letter-spacing:10px;
	width:600px;
	border-collapse:collapse;
}
.input1{
	width:320px;
	height:30px;
	float:left;
	}
.tip{
	letter-spacing:0px;
	color:blue;
	float:left;
	}
tr td{
		height:35px;
		border:1px solid blue;
}
.t1{/*第一列*/
	text-align:right;
	
	}
.t2{/*第二列*/
	text-align:left;
}
#address{
		width:100px;
		height:30px;
		
	}

浏览器对象模型（Browser Object Model）

window:顶级对象，属于自己的特权：访问该对象的时候不需要使用window.
1、窗体方法：
1）alert() 2)confirm() 3)prompt()
2、定时器
1）名字=setTimeout(‘方法/执行语句’，时间毫秒数)经过x毫秒发生一次
2）名字=setInterval(‘方法/执行语句’，时间毫秒数)每经过x毫秒发生一次
3）clearTimeout(名字) 清除发生一次的定时器
4）clearInterval(名字) 清除发生多次的定时器
3、窗口操作
//当前浏览器可视宽度
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
//当前浏览器可是高度
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

screen.availWidth//浏览器可用宽度
screen.availHeight//浏览器可用高度
大小：resizeTo(宽，高) resizeBy(宽，高)
改变坐标：moveTo(x,y) moveBy(x,y);
close();//关闭当前
open();//打开新窗口

<html>
	<head>
		<title>
			定时器
		</title>
		<script>
			function getTime(){
				var t=new Date();
				var obj=document.getElementById("div2");
				obj.innerHTML=t;
			}
			
			function showTime(){
				show();
				s=setInterval("getTime()",1000);	
			}
			function stopTime(){
				clearInterval(s);
			}
			function show(){
				var w=window.innerWidth
				|| document.documentElement.clientWidth
				|| document.body.clientWidth;

				var h=window.innerHeight
				|| document.documentElement.clientHeight
				|| document.body.clientHeight;
				var div3=document.getElementById("div3");
				div3.innerHTML="当前宽度："+w+",当前高度："+h+"\n可用宽度："+screen.availWidth+"，可用高度："+screen.availHeight;
				
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<input type="button" value="开始" "showTime()"/>
			<input type="button" value="结束" "stopTime()"/>
		</div>
		<div id="div2">
			
		</div>
		<div id="div3">
			
		</div>
	</body>
</html>

location：当前页面的地址
href:修改该属性页面会发生跳转，可以使用location.assign()重新加载文档
用replace修改返回地址（地址会发生改变），若要让浏览器记录不保存可以使用reload
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
History
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同

时间

时间用法

DOM:Document Object Model文档对象模型

属性方法

DOM=document

通过DOM选择对象

1、通过id找到HTML元素document.getElementById()
2、通过标签名找到HTML元素document.getElementsByName()
3、通过类名找到HTML元素document.getElementsByTagName()

用流书写HTML

<div id="div1">
			<script>
				document.write(Date());
			</script>

			内容
</div>

.html元素中的HTML

<html>
	<head>
		<title>
			document
		</title>
		<script>
			function change(){
					<!--根据id获取标签元素-->
					var div3=document.getElementById("div3");
					div3.innerHTML="<p style='background-color:blue;font-size:20px'>重要内容</p>";
				}
				function change2(){
					var ft=document.getElementById("ft");
					//改变标签属性
					ft.color="green";
					ft.size="20px";
				}
		</script>
		<style type="text/css">
  		div{
  			background-color: gray;
  			height:200px;
  			width:200px;
  			border-style: outset;
  			margin:10px;
  			float:left;
  		}
		</style>
	</head>
	<body>
		<div id="div3">	
		</div>
		<div id="div4">
			<font color="red" size="6" id="ft">
				内容
			</font>
		</div>
			<input type="button" value="变色" "change2()"/>
			<input type="button" value="变化" "change()"/>
	
	</body>
</html>

.css

标签对象.style.样式名=“值”
标签对象.style.text(不建议)

<script>
	function select(obj){
			var imgs=document.getElementsByTagName("img");
			for(var i=0;i<imgs.length;i++){
				imgs[i].style.border="1px solid black";
			}
			obj.style.border="5px solid red";
		}
</script>

动态绑定方法

<html>
	<head>
		<title>
		动态绑定
		</title>
	</head>
	<script>
		function change1(){
			var img=document.getElementById("img1");
			var p1=document.getElementById("p1");
			img.style.border="5px solid green";
			p1.innerHTML="再点一下试试";
			img.change2;
		}
		function change2(){
			var img=document.getElementById("img1");
			var p1=document.getElementById("p1");
			img.style.border="5px solid red";
			p1.innerHTML="再点一下^_^";
			img.change1;
		}
	</script>
	<body>
		<div align="center">
			<img id="img1" src="photo.jpg" width="300px" "change1()"/>
			<p id="p1">请点图片</p>
		</div>
	</body>
</html>

用下拉列表选择图片滤镜

function filter(){
					var img=document.getElementById("img1");//获得图片
					var sele=document.getElementById("sele");//获得下拉菜单
					if(sele.selectedIndex==0){
						img.style.WebkitFilter="invert(100%)";//位素反转
					}else if(sele.selectedIndex==1){
						img.style.WebkitFilter="saturate(800%)";//色调加深
					}else if(sele.selectedIndex==2){
						img.style.WebkitFilter="grayscale(100%)";//灰度
					}else if(sele.selectedIndex==3){
						img.style.WebkitFilter="drop-shadow(8px 8px 10px red)";//阴影
					}
				}

利用document提交表单

document.表单名.submit()

<html>
	<head>
		<title>document提交表单</title>
		<script>
			function sub(e){
					e.parentNode.submit();
					//document.form1.submit();
				}
		</script>
	</head>
	<body>
		<form action="ok1.html" method="get" name="form1">
			<input type="button" value="提交" "sub(this)"/>
		</form>
		<form action="ok2.html" method="get" name="form2">
			<input type="button" value="提交" "sub(this)"/>
		</form>
	</body>
</html>

动态创建标签

document属性

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>demo2</title>
<script>
	function change1(){
		var div1=document.getElementById("div1");
		var div2=document.getElementById("div2");
		var font1=document.createElement("font");//创建标签元素
		var new_text=document.createTextNode(div1.innerHTML);//创建文本对象
		font1.setAttribute("color","red");//设置属性
		font1.setAttribute("size","6");
		font1.appendChild(new_text);//将目标元素添加到当前元素的子节点
		div2.appendChild(font1);
	}
</script>
</head>
<body>
	<div id="div1">
		hello<br>
		everybody
	</div>
	<input type="button" value="创建" "change1()"/>
	<div id="div2">
	</div>
</body>
</html>