马士兵html javascript css学习总结
HTML:
1>:html不区分大小写,但推荐用小写。
2>:<style>…</style>定义CSS格式
<Scriptlanguage=“”>…</Script>
用于定义脚本,Eg.Javascript
3>才常见标签:
超级链接,跳转到另一文件
<ahref=“url”target=“TargetWindow”>文字
</a>
*标题字体大小--<h#>#=1、2、3、4、5、6
*分隔线--<hr>
* :空格
*<p>…</p>:分段落现实
*<div>…</div>(一层)<span>…</span>(行内块)
*分块显示:
<ul>…</ul>(列表)
<litype=“disccirclesquare”>…
*符号列表:
<ol>…</ol>
<li>…
*数字列表
*<br>换行
*<nobr>…</nobr>不换行
*<pre></pre>保留原有格式
*<marquee></marquee>跑马灯效果
*<blockquote></blockquote>
*<dl><dt><dd>
*对齐—align
<h1align=“”>
<divalign=“”>
<tablealign=“”>
<hralign=“”>
……
取值:leftrightcentertopmiddlebottom
*<imgsrc=“”align=“”alt=“”border=“”>
Src图片路径,一般使用相对路径
Alt图片无法显示时显示的文字
Border边框的厚度
Align=leftrighttopmiddlebottom图文混排时用于和图片的对齐
4>表单:<form>……</form>
*<form>的属性
Method:(getpost)
Get发送较少数据(256byte),显示在url中,url/userinfo?username=张三&password=hehe
Post数据长度无限制,不会显示在url中
Action:Form中数据交给服务器端哪个程序进行处理
*eg:<formmethod=“post”action=“user.jsp>……</form>
**位于<form>之中,接收用户输入:
格式:<inputtype=“”name=“”>
type:
textradiocheckboxpasswordhiddenselectsubmitresetbuttontextareaimage
name:
提交到服务器端的变量的名字
文本框text
<inputtype=“text”name=“”value=“”maxlength=“”size=“”>
maxlength–最大字符长度
size–文本框宽度(字符)
密码区域—特殊的单行文本输入框password
<inputtype=“password”name=“”value=“”size=“”maxlength=“”>
单选按钮
<inputtype=“radio”name=“”value=""checked>
典型用法:同一名字,不同的值
错误的用法:不同的名字
复选框
<inputtype=“checkbox”name=“”value=“”checked>
典型的用法:同一name,不同的value
隐藏域
<inputtype=“hidden”name=“”value=“”>
不显示在网页中
通常用作向下一个页面传输已知信息或表单的附加信息
*分块:
<framesetcols=“20%,*”><framename=“left”src=“a.htm”><framesetrows=“40%,*”><framename=“righttop”src=“b.htm”><framename=“rightbottom”
src=“c.htm”></frameset></frameset>
html中username表单的验证:
<inputtype=textname="username"size="30"maxlength="10"onblur="checkUserName(this.value.toLowerCase())">
<spanid="usernameErr"></span>
js代码:
functioncheckUserName(ssn){
if(ssn.length<3||ssn.length>18){
document.getElementById("usernameErr").innerHTML="<fontcolor='red'>请输入正确的用户名,用户名长度为3-18位!</font>";
form.username.focus()
returnfalse;
}
CSS:(不用记忆,会改即可)
1>字体属性:
属性含义属性值
font-family字体各种字体
font-style字体样式italic、oblique
font-variant小体大写small-caps
font-weight字体粗细bold、bolder、lighter…
font-size字体大小absolute、relative、%
color字体颜色颜色值
2>颜色与背景属性:
属性含义属性值
Color颜色颜色值
Background-color背景色颜色值
Background-image背景图案图片路径
Background-repeat背景图案重复方式Repeat-x|repeat-y|no-repeat
Background-attachment背景的滚动Scroll|fix
Background-position背景图案初始位置%|nem|top|left|right|bottom
3>文本属性:
属性含义属性值
word-spacing单词间距nem
letter-spacing字母间距nem
text-decoration装饰样式underline|overline|line-through|blink
vertical-align垂直方向位置sub|super|top|text-top|middle|bottom|text-bottom
text-transform转为其他形式capitalize|uppercase|lowercase
text-align对齐left|right|center|justify
text-indent缩进nem|%
line-height行高pixels、nem、%
4>边距属性:
属性含义属性值
margin-top上边距nem|%
margin-right右nem|%
margin-bottom下nem|%
margin-left左nem|%
5>边框属性:
属性含义属性值
Border-top-width上边框宽度nem|thin|medium|thick
Border-right-width右同上
Border-bottom-width下同上
Border-left-width左同上
Border-width四边同上
Border-color边框颜色Color
Border-style边框样式Dotted|dash|solid|double|groove|ridge|inset|outset
Border-top|right|bottom|left上(右|底|左)所有属性Border-width|border-style|color
6>图文混排:
属性含义属性值
Width宽度nem|%
Height高度nem
Float文字环绕Left|right
clear去除文字环绕Left|right|both
7>列表属性:
属性含义属性值
Display是否显示Block|inline|list-item|none
White-space空白部分Pre|nowrap|normal(是否合并)
List-style-type项目编号Disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none
List-style-image项目前图片Img-url
List-style-position第二行位置Inside|outside
List-style全部属性Keyword|position|url
8>鼠标属性:
属性值含义属性值含义
Auto自动N-resize上箭头
Crosshair"+"Se-resize右下
Default默认Sw-resize左下
Hand手形S-resize下箭头
Move移动W-resize左箭头
E-resize右箭头Text"I"
Ne-resize右上Wait沙漏
Nw-resize左上help帮助
JavaScript
1>:JavaScript(ECMAScript)
基础语法
DOM
DocumentObjectModel
BOM
BrowerObjectModel
2>:通过在网页中加入<Script>…</Script>标记JavaScript的开始和结束,将JavaScript代码放到<Script>…</Script>之间
也可以引入一个外部的JavaScript文件,这个JavaScript文件一般以.js作为扩展名
原则上,放在<head></head>之间。但视情况可以放在网页的任何部分
一个页面可以有几个<Script>…</Script,不同部分的方法和变量,可以共享。
3>JavaScript基本语法:
*变量:
JavaScript是一门弱类型的语言,所有的变量定义均以var来实现
JavaScript的变量建议先定义,再使用
JavaScript区分大小写
虽然JavaScript可以不需定义即可直接使用变量,但不建议这么做
*数组定义:
vararr=newArray(3);
通过arr.length取得数组的长度
*注释的写法--》和java的一样
4>Date对象:
创建方式:
myDate=newDate();
日期起始值:1970年1月1日00:00:00
主要方法
getYear():返回年数setYear():设置年数
getMonth():返回月数setMonth():设置月数
getDate():返回日数setDate():设置日数
getDay():返回星期几setDay():设置星期数
getHours():返回小时数setHours():设置小时数
getMinutes():返回分钟数setMintes():设置分钟数
getSeconds():返回秒数setSeconds():设置秒数
getTime():返回毫秒数setTime():设置毫秒数
5>JavaScript事件处理:
*onFocus:在用户为了输入而选择select、text、textarea等时
*onBlur:在select、text、password、textarea失去焦点时
*onChange:在select、text、textarea的值被改变且失去焦点时
*onClick:在一个对象被鼠标点中时(button,checkbox,radio,link,reset,submit,text,textarea等)
*onLoad:出现在一个文档完成对一个窗口的载入时
*onUnload:当用户退出一个文档时
*onMouseOver:鼠标被移动到一个对象上时
*onMouseOut:鼠标从一个对象上移开时
*onSelect:当form对象中的内容被选中时
*onSubmit:出现在用户通过提交按钮提交一个表单时
如下为一个javacript的一个重要功能应用,利用onsubmit表单认证
<html>
<head>
<scripttype="text/javascript">
fuvtioncheck(){
if(document.text.t.value==""){
alert("字符不能为空");
returnfalse;
}
returntrue;
}
</script>
</head>
<body>
<fromname="test"action="test.html"onsubmit="returncheck()">
<inputtype="text"name="t">
<inputtype="submit"value="OK">
</body>
</html>
6>:for…in循环语句
In后跟一个对象,对此对象中的所有元素循环一次
***HTML、CSS、JavaScript学习重点掌握表单输入的判断**