关键字搜索：<meta name=”keywords” content=”关键字” />
<meta name=”description” content=”文章描述内容” />
跳转 <meta http-equiv=”refresh” content=”3;URL=’http://www.baidu.com'” />
<!–强制性调用网上最新版本–>
<meta http-equiv=”pragna” content=”no-cache” />
<!–表示文档的原始地址–>
1. <base href=”http://www.baidu.com” />
2. <base target=”_blank” /><!–打开新窗口在整个页面里所有的HTML连接都打开新窗口–>
<!–是这目的框架名target=”mainFram”–>
3. <base target=”mainFrame” /><!–所有的连接都显示这个框架下边–>
12.<script type=”text/javascript”>
function msover(obj){
obj.className=”tdh”;
* cursor: pointer<!–手形–>
}
function.msout(obj){
obj.className=”tdd”;
}
</script>
13.<script>
ul li{list-style-image:url(images/lfv.gif)}
</script>
<title></title>
</head>
<body>
1. <!–HTML的链接使用<a href=”test.html” target=”_blank”<!–在新窗口打开–>
target=”_parent”<!–在副窗口打开–>
target=”_self”本身窗口打开
target=”_top” 顶部打开
>测试</a>–>
2.<a href=”test.html” target=”mainFrame”>测试1</a>
<a href=”test.html”>测试2</a>
<a href=”test.html”>测试3</a> <br />
<iframe frameborder=”0″ width=”100%” height=”400″ name=”mainFrame”></iframe><!–显示到挡墙窗口的下面–>
3.<a href=”test.html”>测试1</a>
<a href=”test.html”>测试2</a>
<a href=”test.html”>测试3</a> <br />
<iframe frameborder=”0″ width=”100%” height=”400″ name=”mainFrame”></iframe><!–显示到挡墙窗口的下面–><br />
4. <a href=”#”<!–#表示链接地址斩为空–>>首页</a> <a href=”#”>产品</a> <a href=”#”>联系我们</a>
5.<body link=”#ff0000″<!–link：设计窗口连接的颜色–>
vlink=”0000ff”<!–vlink：页面访问时（过，参观过）的颜色–>
alink=”999999″<!—alink:页面点击（连接被）激活时的颜色->
text=”#ff00ff”<!–设置body体内文本的颜色–>
<!–将连接时的颜色和访问时的颜色最好设施成一样的–>
>
<a href=”#”<!–#表示链接地址斩为空–>>首页</a> <a href=”#”>产品</a> <a href=”#”>联系我们</a>
测试（body体内文本的颜色）
6.样式：</head><style type=”text/css” >
a:link{color:#oocc33;}
a:vlink{color:#oocc33;}
a:active{color:#999999;}<!–连接激活时的颜色–>
a:hover{color:#00ffff;}<!–鼠标悬停时的颜色–>
</style>
<body>
7.<body bgcolor=”#ffffcc”<!–背景颜色–>
background=”images/lfv.jpg”<!–背景图片–>
style=”background-repeat:inerit <!–继承–>
no-repeat <!–不重复–>选着这个
repeat <!–重复默认值–>
repeat-x <!–在X轴上重复–>
repeat-y” <!–在Y轴上重复–>
style=”background-attachment:fixed;固定的”<!–背景不动文字动–>
>
8.边距属性<body leftmargin=”0″ topmargin=”0″>
9.设置缩略图<body>
<img src=”images/lfv.jpg” width=”200″ height=”200″ alt=”这里风景真美”<!–文本替换–>/>
*图片加上链接<a href=”#”><img src=”images/lfv.jpg” width=”200″ height=”200″ alt=”这里风景真美”<!–文本替换–>
border=”0″<!–去掉图片边框–>
/></a>
另一种显示图片的方式:
<input type=”image” src=”images/lfv.jpg” width=”200″ height=”200″ />
文字和图片的排布：
<a href=”#”><img src=”images/lfv.jpg” width=”200″ height=”200″ alt=”这里风景真美”
border=”0″ style=”float:left;”
/></a>
10.div(是层)+css
<center>
<div style=”width:1000px; height:100px;”>
<div style=”width:100px; height:100px; background-color:#ff0000″ float:left;> </div>
<div style=”width:200px; height:100px; background-color:#00ff00″ float:left;> </div>
</div>
</center>
11.colspan列和并 rowspan行合并
表格 <table broder=”1″<!–边框–> width=”600″ align=”center” cellpadding=”0″<!–文字到单元格的填充距–>
cellspacing=”1″<!–边框间距–>
>
</table>
12.<tr background-color=”” οnmοuseοver=”msover(this)”<!–当鼠标放上去的时候–>
οnmοuseοut=”msout(this)”<!–当鼠标里开时–>>
<td></td>
</tr>
13.<hr width=”100%” />
<ul type=”square”>
<li>html</li>
<li>jsp</li>
</ul>
14.表单
用户名：<input type=”text” name=”username” id=”user” readonly=”true”<!–文本框为只读的–>
value=”admin”<!–赋一个默认的值–> />
密码：<input type=”passworld” name=”password”<!–只是一个名称–> /><br/>
性别：<input type=”radio”<!–单选按钮–> value=”男” checked=”checked”<!–默认的被选中–>
name=”sex”<!–name值相同表示的是同一组–>/>男
<input type=”radio”<!–单选按钮–> value=”女” name=”sex” />女
<input type=”radio”<!–单选按钮–> value=”保密” name=”sex”/>保密<br/>
复选按钮：
爱好：<input type=”checkbox” value=”打球” name=”hobby” />打球
<input type=”checkbox” value=”听音乐” name=”hobby” />听音乐<br/>
上传头像：<input type=”file” />
显示图片：<input type=”image” src=”images/lfv.jpg” width=”” height=”” />
15.form表单post 把参数隐藏起来 get显示出来
<input type=”rest” value=”重置” />
<input type=”button” value=”测试” οnclick=”alert(“你好”)；” /><!–button必须和js结合才可用–>
<input type=”hidden” /><!–隐藏表单–>
16.框架(不用body体)
a.<!–一个窗口分隔成两行的–>
<frameset cols=”50%,*” ><!–将窗口分割成两列50%代表第一列，*代表剩下的–>
<frame name=”top” src=”a.html”>
<frame name=”bottom” src=”b.html”>
</frameset>
b.<!–将一个窗口分隔成三行–>
<frameset rows=”80,*,80″>
<frame name=”top” src=”a.html”>
<frame name=”middle” src=”b.html”>
<frame name=”bottom” src=”c.html”>
</frameset>
c.<!–嵌套–>
<frameset cols=”150,*”><!–页面分割成两列，再把一列left分成两行–>
<frameset rows=”80,*”>
<frame name=”upper_left” src=”a.html”>
<frame name=”lower_left” src=”b.html”>
</frameset>
<frame name=”right” src=”c.html”>
</frameset>
d.<!–嵌套–>
<frameset rows=”80,*”><!–页面分割成两行，再把一行分成两列–>
<frame name=”top” src=”a.html”>
<frameset cols=”150,*”>
<frame name=”lower_left” src=”b.html”>
<frame name=”lower_right” src=”c.html”>
</frameset>
</frameset>
e.<!–嵌套–>
<frameset cols=”150,*”><!–页面分割成两列，再把一列right分成两行–>
<frame name=”left” src=”a.html”>
<frameset rows=”80,*”>
<frame name=”upper_left” src=”b.html”>
<frame name=”lower_right” src=”c.html”>
</frameset>
</frameset>
*<frameset rows=”100,*”>
<frame src=”img.html” frameborder=”0″<!–框架边框为0–> scrolling=”no”<!–没有滚动条–> />
<frameset cols=”100,*” >
<frame scroling=”no” src=”left.html”/>
<frame frameborder=”0″ src=”table.html” name=”mainFrame” />
</frameset>
</frameset>
在left页面增加 <base target=”mainFrame” />是链接内容显示在right页面
f.<!–将另一个页面嵌套在当前页面下面–>
<iframe frameborder=”0″ width=”100%” height=”400″ name=”mainFrame”></iframe>
<iframe frameborder=”0″ width=”100%” height=”400″ name=”mainFrame”></iframe>eq
<form action=”table.html” method=”post” target=”mianFrame”>
j.宝马灯效果
(1)<marquee width=150>I’m a small</marquee>
(2)<marquee behavior=slide>This is a slide</marque>
(3)<marquee behavior=alternate>撞来撞去，我晕了</marquee>
(4)<marquee behavior=5 scrolamount=50>太快了，我又晕了</marquee>
17.CSS样式
a.行内样式<p style=”font-size:18px; color:#ff0000″></p>
b.内部样式（定义在文档的内部）
<head>
<style type=”text/css”>
span{<!–本页面所有span的都引用该样式，span是元素选这符或类型选则符–>
color:#0000ff;
}
</style>
</head>
<body>
<span>这是内部样式</span>
</body>
c.外部样式
<link rel=”stylesheet”<!–样式表–> type=”text/css”<!–指定引用的类型–> href=”commom.css” />
d.类选择符（border是边框）
<style type=”text/css”>
.td_border_left{border-style:none<!–把四个边框都禁掉–>
border-bottom:1px<!–宽度–>
dotted #9d9d9d9d;<!–颜色–>
border-right:1px,dotted #9d9d9d;
}
.td_border_right{border-style:none<!–把四个边框都禁掉–>
border-bottom:1px<!–宽度–>
dotted #9d9d9d9d;<!–颜色–>
}
</style>
<body>
<table width=”1000″ border=”0″ align=”center”>
<tr>
<td class=”td_border_left”></td>
<td class=”td_border_right”></td>
</tr>
</body>
e.鼠标属性
<body>
<input type=”button” value=”测试” style=”cursor:help;<!–帮助属性–>
move;<!–移动–>
pointer<!–手形–>
“/>
</body>
18.CSS定位
a. <img src=”../images/lfv.jpg” style=”position:absolute;<!–绝对定位–> left:0px;top:0px;” />
<img src=”../images/lfv1.jpg” style=”position:absolute;<!–绝对定位–> left:50px;top:50px;” />
b.层定位<div>
<body>
<div style=”width:150px; height:150px; background-color:#ff0000″ position:absolute;<!–绝对定位–>
left:0px;top:0px; z-index:3;<!–空间定位，将其中设为最大的在最上边–>
overflow:hidden;<!–隐藏–>
scrool;<!–内容溢出时滚动–>
visible;<!–内容溢出时显示出来–>
visibility:<!–控制可见和不可见的–>
hidden;<!–隐藏–>
visible;可见
></div>
<div style=”width:150px; height:150px; background-color:#00ff00″ position:absolute;<!–绝对定位–> left:75px;top:75px; z-index:2;></div>
<div style=”width:150px; height:150px; background-color:#0000ff” position:absolute;<!–绝对定位–> left:150px;top:150px; z-index:1;></div>
</body>
*<script type=”text/javascript”>
function msover(obj){
obj.style.visibility=”hidden”;
}
function msout(obj){
obj.style.visibility=”visible”;
}
</script>
<div style=”width:150px; height:150px; background-color:#ff0000; position:absolute; left:0px; top:0px; z-index:3; οnmοuseοver=””msover(this)” οnmοuseοut=”msout(this)”></div>
c.ID选择符
<style type=”text/css”>
div div.d{}<!–div 下得div class=d才会引用该样式–>
#test{width:150px; height:150px; background-color:#0000ff; position:absulote; left:150px; top:150px; z-index:1;}
</style>
<div id=”test”></div>
19.边框（border）
<style type=”text/css”>
input{border-bottom-color:#717171;
border-bottom-style:solid;
border-bottom-width:1px;
border-left-style:none;
border-top-style:none;
border-right-style:none;
}
</style>
<input type=”test” />
20.JS
<body>
21.正则表达式（输入电话号码）
<script type=”text/javascript”>
function test(){
var obj=document.getElementById(“phone”);
var p=obj.value;
var reg=/^13[4-8]\d{8}$/;
if(!reg.test(p)){
alert(“号码格式不正确”)；
obj.value=””;
obj.focus();
return;
}else{
alert(“正确”);
}
}
</script>
<input type=”text” id=”phone” /><input type=”button” value=”测试” onClick=”test()” />
b.邮箱验证
<script type=”text/javascript”>
function test(){
var obj=document.getElementById(“email”);
var email=obj.value;
if(email==””){
alert(“邮箱不能为空”);
obj.focus();
return;
}else{
var pos=email.lastIndexof(“@”);
if(pos>0&&pos<email.length=1){
var p=email.lastIndexOf(“.”);
if(p>(pos+1)&&p<email.length-1){
alert(“邮箱格式正确”);
}else{
alert(“邮箱格式不正确”);
obj.value=””;
obj.focus();
return;
}
}else{
alert(“邮箱格式不正确”);
obj.value=””;
obj.focus();
return;
}
}
function check(){
var obj=document.getElementById(“emali”);
var email=obj.value;
var reg=/^\w+@\w{2,3}.\w{2,3}/;
if(!reg.test(email)){
alert(“邮箱格式不正确”);
obj.value=””;
obj.focus();
return;
}else{
alert(“邮箱格式不正确”);
}
}
}
</script>
<body>
<input type=”text” id=”email” /><input type=”button” value=”检查” οnclick=”test()” />
<input type=”text” id=”email” /><input type=”button” value=”检查” οnclick=”check()” />
</body>
22. 数组
<script type=”text/javascript”>
function init(){
var myarray=new Array(23,,”hello world!”,new Date());
document.write(myarray[0]);
}
</script>
23.自定义函数function
对象是属性和。。的组合
function test(){
(1) var obj=document.all.username;//获得的是对象input<!–(2)var obj=document.getElementById(“user”)//根据
ID获取队对象–>//获取表单值
alert(obj.type);//input.type;
var v=document.all.username.value();//获得的是input内的属性
(3) var obj=document.form1.username;
<form1>
<input type=”text” name=”username” id=”user” value=”admin” />
<input type=”button” value=”测试” onClick=”test()” />
</form1>
}
<body>
<input type=”text” name=”username” id=”user” value=”admin” />
<input type=”button” value=”测试” onClick=”test()” />
24.聚焦失焦事件 a b
function focuss(){
document.getElementById(“good”).value=””;
}
function blurs(){
var good=document.getElementById(“good”).value;
alert(good);
}
<input type=”text” value=”请输入你要查询的商品” id=”good” style:”#ADADAD” οnfοcus=”focuss()” οnblur=”blurs()” />
c.登陆页面：用户名为空不能提交
<script type=”text/javascript”>
function check(){
var obj=document.all.username;
var name=obj.value;
if(name==””){
alert(“用户名不能为空”);
obj.focus();
return false;
}
return true;
}
<form action=”add.html” οnsubmit=”return check();”>
用户名：<input type=”text” name=”username” /><br />
<input type=”submit” value=”登陆” />
</form>
d.连接当中调用JS方法
<script type=”text/javascript”>
function del(){
if(confirm(“确定要删除吗？”)){
alert(“删除成功”);
}else{
alert(“取消删除”);
}
}
</script>
<body>
<a href=”javascript:del()”>删除</ br>
</body>
e.打开一个新窗口
<input type=”button” value=”打开” οnclick=”window.open(‘add.html’,null,’width=400,height=300′)” />
function qq()
{
var obj=document.getElementById(“qq”);
var q=obj.value;
var reg=/^\d{6,11}$/;
if(!reg.qq(q))
{
alert(“号码格式不正确”)；
obj.value=””;
obj.focus();
return;
}else
{
alert(“正确”);
}
}