Html 内嵌 选择器属性 Dom操作 JavaScript 事件

HTML标签：

一.通用标签（一般标签）

1.格式控制标签

<font color="#6699aa" face="楷体" size="24">文字</font>
<b>加粗</b>
<i>倾斜</i>
<u>下划线</u>
<br/>换行 **
&nbsp;空格 **
<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);