HTML+CSS+JS学习总结

标签：

HTML： 
1>:html不区分大小写，但推荐用小写。 
2>:<style>…</style>定义CSS格式 
<Script language=“”>…</Script> 
用于定义脚本，Eg. Javascript 

3>：常见标签： 
超级链接，跳转到另一文件 
<a href=“url” target=“TargetWindow”>文字 
</a> 
*标题字体大小--<h#> #=1、2、3、4、5、6 
*分隔线--<hr> 
*&nbsp：空格 
*<p>…</p>：分段落现实 
*<div>…</div>(一层) <span>…</span>（行内块） 
*分块显示： 
<ul>…</ul>(列表) 
<li type=“disc circle square”>… 
*符号列表： 
<ol>…</ol> 
<li>… 
*数字列表 
*<br>   换行 
*<nobr>…</nobr>   不换行 
*<pre></pre>保留原有格式 
*<marquee></marquee>跑马灯效果 
*<blockquote></blockquote> 
*<dl><dt><dd> 
*对齐—align 
<h1 align=“”> 
<div align=“”> 
<table align=“”> 
<hr align=“”> 
…… 
取值:left right center top middle bottom 
*<img src=“” align=“” alt=“” border=“”> 
Src 图片路径，一般使用相对路径 
Alt 图片无法显示时显示的文字 
Border 边框的厚度 
Align = left right            top middle bottom 图文混排时用于和图片的对齐 

4>表单：<form>……</form> 
*<form>的属性 
Method: (get post) 
Get 发送较少数据（256byte），显示在url中，url/userinfo?username=张三&password=hehe 
Post 数据长度无限制，不会显示在url中 
Action:Form中数据交给服务器端哪个程序进行处理 
*eg:<form method=“post” action=“user.jsp>……</form> 
**位于<form>之中，接收用户输入: 
格式：<input type=“” name=“”> 
type: 
text radio checkbox password hidden select submit reset button textarea image 
name: 
提交到服务器端的变量的名字 
文本框 text 
<input type=“text” name=“” value=“” maxlength=“” size=“”> 
maxlength – 最大字符长度 
size – 文本框宽度（字符） 
密码区域—特殊的单行文本输入框 password 
<input type=“password” name=“” value=“” size=“” maxlength=“”> 
单选按钮 
<input type=“radio” name=“” value="" checked> 
典型用法 : 同一名字，不同的值 
错误的用法 : 不同的名字 
复选框 
<input type=“checkbox” name=“” value=“” checked> 
典型的用法 : 同一name，不同的value 
隐藏域 
<input type=“hidden” name=“” value=“”> 
不显示在网页中 
通常用作向下一个页面传输已知信息或表单的附加信息 

*分块： 

 1 <frameset cols=“20%,*”>    <frame name=“left” src=“a.htm”>    <frameset rows=“40%,*”>       <frame name=“righttop” src=“b.htm”>       <frame name=“rightbottom” 
 2 
 3 src=“c.htm”>    </frameset> </frameset> 
 4 
 5 html中username表单的验证： 
 6 <input type=text name="username" size="30" maxlength="10" onblur="checkUserName(this.value.toLowerCase())"> 
 7 <span id="usernameErr"></span> 
 8 js代码： 
 9 function checkUserName(ssn){ 
10 if( ssn.length<3 || ssn.length>18 ) { 
11 document.getElementById("usernameErr").innerHTML = "<font color=‘red‘>请输入正确的用户名,用户名长度为3-18位！</font>"; 
12 form.username.focus() 
13 return false; 
14 } 

CSS:(不用记忆，会改即可) 
1>字体属性：

1 属性 含义 属性值 
2 font-family 字体 各种字体 
3 font-style 字体样式 italic、oblique 
4 font-variant 小体大写 small-caps 
5 font-weight 字体粗细 bold、bolder、lighter… 
6 font-size 字体大小 absolute、relative、% 
7 color 字体颜色 颜色值 

2>颜色与背景属性： 

3>文本属性: 
属性 含义 属性值 
word-spacing 单词间距 n em 
letter-spacing 字母间距 n em 
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 缩进 n em| % 
line-height 行高 pixels、n em、% 

4>边距属性: 
属性 含义 属性值 
margin-top 上边距 n em | % 
margin-right 右 n em | % 
margin-bottom 下 n em | % 
margin-left 左 n em | % 

5>边框属性: 
属性 含义 属性值 
Border-top-width 上边框宽度 n em | 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 宽度 n em | % 
Height 高度 n em 
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 
Document Object Model 
BOM 
Brower Object Model 

2>:通过在网页中加入<Script>…</Script>标记JavaScript的开始和结束，将JavaScript代码放到<Script>…</Script>之间 
也可以引入一个外部的JavaScript文件，这个JavaScript文件一般以.js作为扩展名 
原则上，放在<head></head>之间。但视情况可以放在网页的任何部分 
一个页面可以有几个<Script>…</Script，不同部分的方法和变量，可以共享。 

3>JavaScript基本语法： 
*变量： 
JavaScript是一门弱类型的语言，所有的变量定义均以var来实现 
JavaScript的变量建议先定义，再使用 
JavaScript区分大小写 
虽然JavaScript可以不需定义即可直接使用变量，但不建议这么做 
*数组定义： 
var arr = new Array(3); 
通过arr.length取得数组的长度 
*注释的写法－－》和java的一样 

4>Date对象： 
创建方式： 
   myDate = new Date(); 
日期起始值: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表单认证 

 1 <html> 
 2 <head> 
 3 <script type="text/javascript"> 
 4 fuvtion check(){ 
 5 if(document.text.t.value==""){ 
 6 alert("字符不能为空"); 
 7 return false； 
 8 } 
 9 return true； 
10 } 
11 </script> 
12 </head> 
13 <body> 
14 <from name="test" action="test.html" onsubmit ="return check()"> 
15 <input type="text" name="t"> 
16 <input type="submit" value="OK"> 
17 </body> 
18 </html> 

6>:for…in循环语句 
In后跟一个对象，对此对象中的所有元素循环一次 
***HTML、CSS、JavaScript学习重点掌握表单输入的判断***

声明：文章内容来自：http://jtlyuan.iteye.com/blog/1146844,我稍作整理,感谢博文的原作者

HTML+CSS+JS学习总结

标签：

原文地址：http://www.cnblogs.com/ysw-go/p/5491990.html