标签：
HTML标签：
一.通用标签（一般标签）
1.格式控制标签
<font color="#6699aa" face="楷体" size="24">文字</font>
<b>加粗</b>
<i>倾斜</i>
<u>下划线</u>
<br/>换行 **
空格 **
<center>居中</center> *
2.内容标签
<h1>--<h6>标题标签 *
<p>段落</p> *
<div></div>层标签，默认占一行 **
<span></span>层标签 **
<ol>有序列表 type属性 可以选择序号的方式，每一个列表项是<li> *
<ul>无序列表,每一个列表项是<li> **
二：常见标签
<a href="http://www.baidu.com">这是超链接</a> **
<img src="8243992_184923477108_2.png" width="200" height="200" /> **
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table> 表格标签 **
表格：width:宽度; border:边框;align:对齐方式;bgcolor:背景色;rowspan:合并行;colspan:合并列
锚点：
1.设置锚点：在a标签里加个name属性来声明锚点的名字
<a name="">内容</a>
2.设置跳转超链接
<a href="#锚点名">超链接内容</a>
input 输入类型用这个
option 选择类型 用这个
target:超链接的打开方式
alt：img标签里的一个图片替代文字
body的几个属性：
background:背景图片
bgcolor:背景颜色
text：文字颜色
../上层目录
Form表单：
<form name="zhuce" method="post" action="Untitled-2.html" >
</form>
method=""提交方式，一般分为post或者get
action=""提交到哪个页面来处理
一.文本输入
1.<input type="text" value="" name="" />单行文本输入框
2.<input type="password" value="" name="" />密码框
3.<textarea rows="10" value="" name=""></textarea> 文本域
4.<input type="hidden" value="" name="" />隐藏域
二.按钮
1.<input type="submit" value="注册" name="" />提交按钮
2.<input type="reset" value="重置" name="" /> 重置按钮
3.<input type="button" value="检查" name="" />普通按钮
4.<input type="image" src="" width="100" height="30" value="" name=""/>图片按钮
三.选择输入性的
1.<input type="radio" name="sex" checked="checked" value="true" />单选按钮
如果让多个单选按钮成为一组，把他们的name值设置为相同的值。
2.<input type="checkbox" value="" name="" /> 多选按钮
3.<select name="">
<option value="01">张三</option>
<option value="02">李四</option>
<option value="03">王五</option>
</select>
下拉列表，每一个option是一个列表项，加上属性multiple="multiple"之后变为多选的列表
4.<input type="file" name=""/>选择文件，上传文件
CSS:层叠样式表，作用是美化网页
样式格式：样式名:样式值;样式名:样式值;
/* 注释语句 */
分类：
1.内联式，直接写在标签里 style=""
<div style=""></div>
2.内嵌式，写在head里面
<style type="text/css">
*
{
font-size:36px;
}
</style>
3.外部样式
新建一个样式表文件，用附加样式表引用到网页内
选择器：
一：普通选择器
1.标签选择器：用标签名来选择元素控制样式
div{
font-size:48px;
}
2.class选择器
.aa{
font-size:48px;
}
3.id选择器，唯一的
#aa
{
font-size:48px;
}
4. * 代表所有的
优先级：id选择器--class选择器--标签选择器--*
二：复合选择器
1. 用,隔开 #aa,#cc 并列关系
2. 用空格隔开 #aa div 后代关系
3. 用.隔开 div.bc 筛选，在div里面筛选class为bc的标签
样式：
一：背景与前景
background-color:背景色
background-image：背景图片
background-repeat：背景图片布局方式
background-size：背景大小
background-attachment：fixed背景图片的固定
background-attachment：scroll背景图片的滚动
background-position:center居中
background-position：top left 左上角
background-position:top 10px left 50px 距离上10像素 距离左50像素
font-family：字体
font-size：字体大小
font-weight：字体粗细 bold加粗
font-style：文字风格 italic倾斜
color：字体颜色
text-decoration：underline加下划线 overline上划线 line-through删除线
text-indent：首行缩进多少像素
二：对齐方式
text-align:水平对齐方式 center剧中 left靠左 right靠右
vertical-align:垂直对齐方式 middle居中 bottom靠下 top靠上
line-height:行高
三：其它
display: none 隐藏 block显示
overflow：hidden超出隐藏 scroll超出部分出现滚动条
四：列表和方块
width,height(top.bottom.lefr.right)只有在绝对坐标下才有用
list-style:none 取消序号
list-style:circle 序号变成圆圈
list-style-image:URL（图片地址）：图片做序号
list-style-position:outside 序号在内外
list-style-position:inside： 序号跟内容在一起
五：边界和边框
border（表格边框，样式表），margin（表外间距），padding（内容与单元格间接）
border：5px solod blue: 四边框 5个像素宽度 实线 蓝色
margin： auto 居住 top上 bottom 下 left 左 right右
padding ：top上 bottom 下 left 左 right右
四、格式与布局
（一）流式布局
float:left/right
clear:both
一旦float起来，它将脱离原来网页的层面。后会的没有float起来的层顶上去。
1.并行排列：
a.假设中间有一个float起来的层，不会影响前面的，但会影响后面的（会顶上去）;
b.在相应位置上加上一个空的<div style="clear:both"></div>，截断流式布局。
2.嵌套排列：
a.嵌套float的一般规则：
默认情况下，里层的会把外层的给撑开；
当里层float起来，外层没有float，外层不会被撑开。
如果里层，外层都float起来，里层又能撑开外层。
b.如何设置布局的居中？
第一步：设一个最外层的div。宽度是100%
第二步：在上个div的里面，设一个居中的div。设置宽度（960-980），margin:auto
第三步：在第二步的div中编辑网页内容即可。
（二）定位布局
p
{
width:62px;
height:19px;
padding-top:7px;
font-weight:normal;
color:#F00;
float:left;
}
#shuru
{
float:right;
width:195ox;
height:26px;
background-color:#999;
color:#FFF;
}
tupian
{
float:left;
width:25;
height:25px;
}
avaScript：
几个问题：
1.JavaScript是个什么东西？——脚本语言。
JavaScript,Java,JScript
Sun/Oracle Java
网景NetScape
微软 Win98 IE3
2.什么是脚本语言？
不能独立运行，必须嵌在宿主文件中才能运行的语言。
嵌入语法：
<script language="javascript">
</script>
一、类型与变量
数据类型：字符串、整型、浮点型、布尔型、日期时间、对象型
变量类型：只有一种变量类型——通用类型
弱类型的语言。
解释运行的语言。
强制类型转换：
1.其它类型转成整数：
var a = "5";
a = parseInt(a);
2.其它类型转成小数：
var a = "5.2";
a = parseFloat(a);
3.判断是否是数字：
isNaN(a)——判断是否是个合法的数字，返回bool型
true——不是个数字；false--是数字
二、运算符
（一）算术运算符 7
+ - * / % ++ --
（二）关系运算符 6
== != > < >= <=
（三）逻辑运算符 3
&& || !
（四）其它运算符
= ?: += -= *= /= %=
三、语句
（一）顺序
（二）分支
1.if(表达式){}
2.if(表达式){} else {}
3.if(表达式){} else if(表达式){}....else{}
4.if(表达式){if(表达式){}}
例子：
1.判断是否是闰年
2.相亲
3.身高与体重
4.一元二次方法根的情况
（三）循环
四要素：初始条件、循环条件、循环体、状态改变
for(初始条件;循环条件;状态改变)
{
循环体;
}
for(var i=0;i<10;i++)
{
alert("你好");
}
两大类问题：穷举和迭代
穷举：求100以内所有与7相关的数字
迭代：求100以内所有数的和
例子：
1.画星号
2.买东西
3.百马百石
4.兑硬币
5.配等式
6.侦察兵
7.猴子吃桃
8.算年龄
9.折纸
10.棋盘分粮食
四、数组
五、函数
一：window.open() 打开一个窗口
四个参数：
1.要打开的网页地址
2.打开方式
3.打开的网页属性设置
二：window.close() 关闭窗口
window.opener.close();关闭源窗口
三：间隔和延迟
var one = window.setInterval("openone()",1000); 间隔1秒钟执行openone()函数，一直执行
window.clserInterval(one); 清除间隔执行
var aa = window.setTimeout("openone()",1000); 延迟1秒钟执行openone()函数,执行一次
window.clearTimeout(aa); 清除延迟执行
四：调整页面
window.navigate() 跳转页面
window.moveTo(x,y) 移动页面至坐标x,y
window.resizeTo(宽，高) 调整页面大小
window.scrollTo(x,y) 滚动页面
五：模态对话框 和 非模态对话框
window.showModalDialog();打开模态对话框
window.showModelessDialog(); 打开非模态对话框
六：window.history
window.history.back();后退
window.history.forward();前进
window.history.go(n); 如果n是正数则前进n个页面 如果n是负数则后退n个页面
七：window.location
window.location.href 获取页面地址
window.location.href=""; 跳转页面
八：window.status
window.status=“”; 设置状态栏显示
window对象：
alert()——显示警告窗口
confirm() ——显示确认窗口，返回bool型
open()——打开新页面窗口——三个参数，返回被打开的窗口。
close()——关闭窗口
setTimeout(代码,毫秒数)——多长时间之后执行指定的代码
setInterval(代码,毫秒数)——每隔多长时间执行指定的代码
resizeTo(),moveTo(),scrollTo()....
history对象。location对象。document对象。status对象
history对象：
go(整数值)
location对象：
reload() ——重新加载页面
href——指定页面的URL地址 URL——统一资源定位器
status对象：
document对象：
一、找到指定的元素。
1.根据id找元素——找一个
2.根据name找元素——找一组
3.根据标签名找元素——找一组
二、操作元素
（一）、操作属性
1.获得属性值
2.添加/修改属性
3.删除属性
（二）、操作样式
1.直接操作样式属性
a.获得样式属性的值
b.设置或修改样式属性的值
2.操作元素的class
a.获得class
b.设置class
（三）、操作内容
1.表单元素
a.取值
b.赋值
2.非表单元素
a.取值
b.赋值
（四）、元素整体操作
1.创建
2.添加
3.复制
4.替换
5.删除
三、相关联元素
同辈
子辈
父辈
操作元素：
（一）定位关联元素：
parentNode——直接父级元素
childNodes - 所有的直接子级元素
nextSibling - 下个兄元素——注意回车
previousSibling - 上个兄弟元素 ——注意回车
案例：
1.操作父级元素：
var t = document.getElementById("tt");
t.parentNode.className="y"; //操作父元素
2.操作子及元素：
var t = document.getElementById("tt");
var cs = t.childNodes;
for(var i=0;i<cs.length;i++)
{
cs[i].className="y";
}
3.操作兄弟元素：
var t = document.getElementById("tt");
t.nextSibling.className="y";
（二）操作元素对象
创建
var a = document.createElement("标签名");
添加
var d = document.getElementById("dd");
d.appendChild(a);
删除
var t = document.getElementById("tt");
var d = document.getElementById("dd");
t.removeChild(d);
复制
var d = document.getElementById("dd");
var s = d.cloneNode();
替换
var t = document.getElementById("tt")
var d = document.getElementById("dd");
var n = document.createElement("div");
t.replaceChild(n,d);
Html 内嵌 选择器属性 Dom操作 JavaScript 事件
标签：
原文地址：http://www.cnblogs.com/tianxuan/p/4836907.html
