HTML+CSS+JS学习总结
2016-05-14 09:55
489 查看
HTML:
什么是 HTML?
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言,而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
1>:html不区分大小写,但推荐用小写。
2>:<style>…</style>定义CSS格式
3>:常见标签:
4>表单:<form>……</form>
*分块:
* 始终为属性值加引号
属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。
在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name='Bill "HelloWorld" Gates'
每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)
*HTML参考手册
CSS:(不用记忆,会改即可)
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
下面这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。
在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。
下面的示意图为您展示了上面这段代码的结构:
1>字体属性:
2>颜色与背景属性:
3>文本属性:
4>边距属性:
5>边框属性:
6>图文混排:
7>列表属性:
8>鼠标属性:
JavaScript
1>:JavaScript (ECMAScript) :JavaScript 是脚本语言。浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。
2>:JavaScript:
3>JavaScript基本语法:
4>Date对象:
5>JavaScript事件处理:
如下为一个javacript的一个重要功能应用,利用onsubmit表单认证
6>:for…in循环语句
In后跟一个对象,对此对象中的所有元素循环一次
***HTML、CSS、JavaScript学习重点掌握表单输入的判断***
关于该阶段的学习任务需要边学边做实验,个人认为比较不错的学习网站:http://www.w3school.com.cn
什么是 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> * :空格 *<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
< is the same as < > 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
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>:for…in循环语句
In后跟一个对象,对此对象中的所有元素循环一次
***HTML、CSS、JavaScript学习重点掌握表单输入的判断***
关于该阶段的学习任务需要边学边做实验,个人认为比较不错的学习网站:http://www.w3school.com.cn
相关文章推荐
- 【Web】Javascript、Python、Django模板配合处理URL Encode
- JavaScript创建对象时常用的设计模式
- js中push的定义和用法
- 用JavaScript开发的桌面应用
- setTimeout
- 小代码js
- [Javascript] Advanced Console Log Arguments
- [Javascript] Log Levels and Semantic Methods
- 高性能的JavaScript库---Lodash
- 中国天气网接口返回json格式分析及接口(XML、图片接口)说明!
- Json 和 Jsonlib 的使用
- json-lib.jar开发包及依赖包的下载地址
- javascript中的那些让人摸不着头脑的不=
- JSP EL表达式使用
- jstl标签库
- 下拉菜单 JavaScript
- JS 处理Json 时间带T 时间格式
- js清空array数组的方法
- js类型转换,运算符,语句
- Json介绍及Jsoncpp简单使用(测试代码+测试实例)