w3c

html----------------------
标题<h1>--<h6>
段落<p>
链接<a>
图像<img>
换行<br/>
水平线<hr/>

文本格式化标签

样式表
外部，内部，内联

书签/锚点
<a name="tips">...</a>
<a href="#tips">

图像映射
可供点击区域的图像地图
<map>
<area>...</area>
</map>

表格(不是用来布局的，只是用来展示数据的)
<table>
<thead><tr><th></th></tr></thead>
<tfoot></tfoot>
<tbody></tbody>
</table>

列表
无顺序(可以用作导航条) ul-li
有顺序 ol-li
自定义 dl-dt-dd

div
块级元素

span
内联元素

表单<input type=""/>
文本 text
单选 radio
复选 checkbox
提交 submit
按钮 button
重置 reset

其他
下拉 select - optgroup - option
文本域 textarea
标题框 fieldset/legend

框架 -- 导航框架
<frameset><frame>

html元素
<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>

头部标签
title
base <base target="_blank"/> 所有超链接都新开窗口
meta Content-Type content="text/html;charset=gb2312"
Refresh content="5;url=重定向"
link 外部样式表
script
style 内部样式表

URL编码
URL只能使用ASCII字符集
用%后跟随两个十六进制数来替换非ASCII字符
用+来替换空格

Object元素
插件视频

XHTML
没人用的e

JavaScript--------------------------------
现在只用<script> 不用 type="text/javascript"
外部脚步不能包含<script>标签

document.write
alert
onclick
document.getElement("p").innerHTML="hello world";
改变属性 XX.src
改变样式 XX.style.color
JS验证 XX.value

数组
var cars=["a","b","c"]

对象
var person={firstName:"a",lastName:"b",id:123}
person.firstName

循环
for(i=0;i<cars.length;i++){
document.write(cars[i] + "<br/>");
}

for(x in cars){
document.write(x + "<br/>");
}

while 和 for很像，可以被代替

JS跳出标签
cars = ["a","b","c"];
list:{
document.write(cars[0]);
document.write(cars[1]);
break list;
document.write(cars[2]);
}

java中的跳出标签只能用在循环中

JS的try catch throw

DOM 文档对象模型
Document Object Model

DOM 事件
鼠标点击等

动态创建/删除HTML元素
child.parentNode.removeChild(child)

JQuery-------------------------------------------------------------------
$("#test") id选择器
$(".test") 类选择器
$("p") 标签选择器
$(this) 当前元素
$("p.intro") 派生选择器
$("[href='#']") 属性选择器

文档就绪函数
$(document).ready(function(){

})
等待文档完全加载后再运行jQuery代码

JQuery是为了处理html事件而特别设计的
传统JS 需要在元素中用onclick或是事件动作来注册一个事件,这样DOM就依赖于JS
而JQuery用选择器将该事件注册到DOM上去，这样JS反而依赖于DOM
实现JS和HTML解耦

JQuery DOM操作
text(), html(), val(), attr("href")

添加/插入/删除DOM元素
append, prepend, after, before, remove, empty.

CSS操作
addClass, removeClass, toggleClass

遍历DOM树
parent(), parents(), parentsUntil()
children(), find()
siblings(), next(), prev()
过滤 first(), last(), eq(), filter(), not()

JQuery与Ajax
$(selector).load(url)
$.get(url,callback)
$.post(url,data,callbace)

noConflict
改名字-->jq
继续使用$

CSS--------------------------------------------------
cascading style sheet 层叠样式表
p{color:red}

选择器和JQuery相同

CSS框架模型
margin - border - padding

CSS定位
相对 relative
绝对 absolute
浮动 float

内联元素 display:inline <p> 都不会换行了
块元素 display:block <span> 也会换行

导航条
链接列表 ul li

TCP/IP -------------------------------------
TCP 应用程序之间的通讯
IP 计算机之间的通讯
TCP/IP 协同工作

猜你喜欢