HTML+CSS+JS学习总结

HTML：

什么是 HTML？

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
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=“”>

 不显示在网页中

 通常用作向下一个页面传输已知信息或表单的附加信息

*分块：

 <frameset cols=“20%,*”>    <frame name=“left” src=“a.htm”>    <frameset rows=“40%,*”>       <frame name=“righttop” src=“b.htm”>       <frame name=“rightbottom” 

 src=“c.htm”>    </frameset> </frameset> 

 html中username表单的验证：

 <input type=text name="username" size="30" maxlength="10" onblur="checkUserName(this.value.toLowerCase())">

 <span id="usernameErr"></span>

 js代码：

 function checkUserName(ssn){

 if( ssn.length<3 || ssn.length>18 ) {

 document.getElementById("usernameErr").innerHTML = "<font color='red'>请输入正确的用户名,用户名长度为3-18位！</font>";

 form.username.focus()

 return false;

 }

* 始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='Bill "HelloWorld" Gates'

*HTML颜色值

颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。

每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）

*HTML参考手册

HTML Basic Document

<html>

<head>

<title>Document name goes here</title>

</head>

<body>

Visible text goes here

</body>

</html>

Text Elements

<p>This is a paragraph</p>

<br> (line break)

<hr> (horizontal rule)

<pre>This text is preformatted</pre>

Logical Styles

<em>This text is emphasized</em>

<strong>This text is strong</strong>

<code>This is some computer code</code>

Physical Styles

<b>This text is bold</b>

<i>This text is italic</i>

Links, Anchors, and Image Elements

<a href="http://www.example.com/">This is a Link</a>

<a href="http://www.example.com/"><img src="URL"

alt="Alternate Text"></a>

<a href="mailto:webmaster@example.com">Send e-mail</a>A named anchor:

<a name="tips">Useful Tips Section</a>

<a href="#tips">Jump to the Useful Tips Section</a>

Unordered list

<ul>

<li>First item</li>

<li>Next item</li>

</ul>

Ordered list

<ol>

<li>First item</li>

<li>Next item</li>

</ol>

Definition list

<dl>

<dt>First term</dt>

<dd>Definition</dd>

<dt>Next term</dt>

<dd>Definition</dd>

</dl>

Tables

<table border="1">

<tr>

  <th>someheader</th>

  <th>someheader</th>

</tr>

<tr>

  <td>sometext</td>

  <td>sometext</td>

</tr>

</table>

Frames

<frameset cols="25%,75%">

  <frame src="page1.htm">

  <frame src="page2.htm">

</frameset>

Forms

<form action="http://www.example.com/test.asp" method="post/get">

<input type="text" name="lastname"

value="Nixon" size="30" maxlength="50">

<input type="password">

<input type="checkbox" checked="checked">

<input type="radio" checked="checked">

<input type="submit">

<input type="reset">

<input type="hidden">

<select>

<option>Apples

<option selected>Bananas

<option>Cherries

</select>

<textarea name="Comment" rows="60"

cols="20"></textarea>

</form>

Entities

&lt; is the same as <

&gt; is the same as >

© is the same as ©

Other Elements

<!-- This is a comment -->

<blockquote>

Text quoted from some source.

</blockquote>

<address>

Address 1<br>

Address 2<br>

City<br>

</address>

CSS:(不用记忆，会改即可)

CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

h1 {color:red; font-size:14px;}

下面的示意图为您展示了上面这段代码的结构：

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    背景图案初始位置    % | n em | top | left | right | bottom

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) ：JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

 基础语法

 DOM

 Document Object Model：用以访问 HTML 元素的正式 W3C 标准。

 BOM

 Brower Object Model

HTML DOM （文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

HTML DOM 树:

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

2>:JavaScript:

 通过在网页中加入<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表单认证

 <html>

 <head>

 <script type="text/javascript">

 fuvtion check(){

 if(document.text.t.value==""){

 alert("字符不能为空");

 return false；

 }

 return true；

 }

 </script>

 </head>

 <body>

 <from name="test" action="test.html" onsubmit ="return check()">

 <input type="text" name="t">

 <input type="submit" value="OK">

 </body>

 </html>

6>:JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对HTML 表单中的这些输入数据进行验证

被JavaScript 验证的这些典型的表单数据有：

用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域 (numeric field) 中输入了文本？

***HTML、CSS、JavaScript学习重点掌握表单输入的判断***

关于该阶段的学习任务需要边学边做实验，个人认为比较不错的学习网站：http://www.w3school.com.cn