马士兵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>

*&nbsp:空格

*<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学习重点掌握表单输入的判断**

相关推荐