web里面html,css,js基本知识
来源：互联网 发布：mac osx壁纸 编辑：程序博客网 时间：2024/06/04 18:54
Html5
• html5文档结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>标题一</title>
</head>
<body>
</body>
</html>
• meta标签的常见用法
• 设置中文编码
• 设置网页的关键字
• 设置网页的描述
• 设置网页的跳转
• 转义字符
• 空格
• 版权
• <>
• “ * /
• 标签
• 文本标签
• 粗体 b
• 强调文本 em
• 加强文本 strong
• 斜体 i
• 上标文本 sup 下标文本 sub
• 反序 bdo dir = ‘rtl’
• 文本的排版
• 换行 <br />
• 段落 p
• 标题 h1-h6
• 文字列表
• 有序 ol
• 无序 ul
• 结构 dl>dt dd
• 图片
• 网页中可以放那些格式的图片
• .jpg .jpeg
• .bmp
• .png
• .gif
• Img常用属性 src alt title width aglin
• 相对路径绝对路径网络路径
• 超链接 <a href=’’></a>
• 跳转
• 调用js
• 资源的下载或者预览
• 发邮件
• target
• 标签的分类
• 块状元素
• H1-h6 p div br hr ul li ol dl dt dd
• 行内元素
• A,img b I em strong iframe
• 标签的嵌套
• 内联元素不能嵌套块元素
• <p>元素和<h1~6>元素不能嵌套块元素
• 表单元素
• Form action method enctype
• Input type =text name value placeholder disable readonly maxlength
• Input type =password name value placeholder disable readonly maxlength
• Html5新增元素
• <address>定义一个地址
• <article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
HTML5:<article></article>
HTML4:<div></div>
• <aside>标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
HTML5:<aside>Aside 的内容是独立的内容，但应与文档内容相关。</aside>
HTML4:<div>Aside 的内容是独立的内容，但应与文档内容相关。</div>
• <audio> 标签定义声音，比如音乐或其他音频流。
HTML5:<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>
HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>
• <canvas> 标签定义图形，比如图表和其他图像。这个 HTML元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API展现给客户端 JavaScript以使脚本能够把想绘制的东西都绘制到一块画布上。
HTML5:<canvas id="myCanvas" width="200" height="200"></canvas>
HTML4:<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>
• <command> 标签定义命令按钮，比如单选按钮、复选框或按钮。
HTML5: <command onclick=cut()" label="cut">
HTML4: none
• <datalist> 标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。
HTML5: <datalist></datalist>
HTML4: see combobox.
• <details> 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。与 <legend> 一起使用，来制作 detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail。
HTML5: <details></details>
HTML4: <dl style="display:hidden"></dl>
• <embed> 标签定义嵌入的内容，比如插件。
HTML5: <embed src="horse.wav" />
HTML4: <object data="flash.swf" type="application/x-shockwave-flash"></object>
• <figcaption> 标签定义 figure 元素的标题。”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。
HTML5: <figure><figcaption>PRC</figcaption></figure>
HTML4: none
• <figure> 标签用于对元素进行组合。使用 <figcaption> 元素为元素组添加标题。
HTML5: <figure><figcaption>PRC</figcaption><p>The People's Republic of China was born in 1949...</p></figure>
HTML4: <dl><h1>PRC</h1><p>The People's Republic of China was born in 1949...</p></dl>
• <footer> 标签定义 section或 document的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。
HTML5: <footer></footer>
HTML4: <div></div>
• <header> 标签定义 section或 document的页眉。
HTML5: <header></header>
HTML4: <div></div>
• <hgroup> 标签用于对网页或区段（section）的标题进行组合。
HTML5: <hgroup></hgroup>
HTML4: <div></div>
• <keygen> 标签定义生成密钥。
HTML5: <keygen>
HTML4: none
• <mark>主要用来在视觉上向用户呈现那些需要突出的文字。<mark>标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。
HTML5: <mark></mark>
HTML4: <span></span>
• <meter> 标签定义度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在 min/max属性中定义。
HTML5: <meter></meter>
HTML4: none
• <nav> 标签定义导航链接的部分。
HTML5: <nav></nav>
HTML4:<ul></ul>
• <output> 标签定义不同类型的输出，比如脚本的输出。
HTML5: <output></output>
HTML4: <span></span>
• <progress> 标签运行中的进程。可以使用 <progress>标签来显示 JavaScript中耗费时间的函数的进程。
HTML5: <progress></progress>
HTML4: none
• <rp> 标签在 ruby注释中使用，以定义不支持 ruby元素的浏览器所显示的内容。
HTML5: <ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
HTML4: none
• <rt> 标签定义字符（中文注音或字符）的解释或发音。
HTML5: <ruby>漢 <rt>ㄏㄢˋ </rt></ruby>
HTML4: none
• <ruby> 标签定义 ruby注释（中文注音或字符）。
HTML5: <ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
HTML4: none
• <section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
HTML5: <section></section>
HTML4: <div></div>
• <source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
HTML5: <source>
HTML4: <param>
• <summary> 标签包含 details元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。
HTML5: <details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details>
HTML4: none
• <time> 标签定义日期或时间，或者两者。
HTML5: <time></time>
HTML4: <span></span>
• <video> 标签定义视频，比如电影片段或其他视频流。
HTML5: <video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>
HTML4:<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object>
CSS3
引用方式
• 外部<link rel type href= />
• 内嵌 style type
• 行内 style=””
• 导入 @import url(‘..’)
• 优先级
• 行内>> 内嵌=外部=导入
选择器
元素 所有这个选择器名称的元素
类 id选择器 伪类选择器 属性选择器 组合选择器
• 权重:
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
div{}:所有含div的
.div1{}:class里面的div1
#div1{}:ID里面的div1
input[type],：对有type属性的input元素起作用的css样式
input[type='text'],：对有type属性等于text的input元素起作用的css样式
input[type*='t'],：对有type属性里包含t的input元素起作用的css样式
input[type^='t'],：对有type属性里以t字母为开头的input元素起作用的css样式
input[type$='t']{}：对有type属性以最后一个字母结尾的input元素起作用的css样式
Input:checked{}
Input:enable{}
Input:disable{}
div a{}：div里面包含a元素
div>a{}：div里面的子元素a
Div~a{}:跟在DIV后面的a元素
div.a{}：处于div之间且class属性为a的元素
div,a{}：div和a并列
div:first-child{}:div的第一个字节点元素
div:last-child{}：div的最后一个子节点元素
div:nth-child(odd){}:div第奇数个子节点的元素
div:nth-last-child(1){}：div倒数第一个子节点的元素
div:first-of-type{}：匹配div选择器，且是与它同类型，同级的兄弟元素中的第一个元素
div:last-of-type{}：匹配div选择器，且是与它同类型，同级的兄弟元素中的最后一个元素
div:nth-of-type(1){}匹配div选择器，且是与它同类型，同级的兄弟元素中的第n个元素
div:nth-last-of-type(1){}:匹配div选择器，且是与它同类型，同级的兄弟元素中的倒数第一个元素
div:link{}匹配div选择器未被访问前的元素
div:hover{}匹配div选择器鼠标悬停状态下的的元素
div:active{}匹配div选择器处于被用户激活状态的元素
div:visited{}匹配div选择器未被访问前的元素
div:first-letter{}：该选择器对应的css样式对指定对象内的第一个字符起作用
div:first-line{}：该选择器对应的css样式对指定对象内的第一行内容起作用
div:before{}在div前面插入内容
div:after{}在div后面插入内容
*：对所有元素都起作用的css样式
Div,p,a,dd,dl,dt{}并列
盒子模型
margin: 0;外补丁（设置元素与元素之间的间距，加auto元素水平居中）
padding: 0;内补丁（会改变元素边框的大小）
width: 0;
min-width: 0;
max-width: 0;
height: 0;
min-height: 0;最小高度
max-height: 0;最大高度
border:none;
字体文本样式
font-size: 14px;字体大小{网页当中正文字体大小一般是12px}
font-family: '宋体';字体字形（一般情况下是微软）
font-style: italic;设置字体的风格
font-weight: 900;设置字体是否加粗（
text-decoration: underline;下划线（none无线）
text-transform: capitalize;（针对英文每一个英文的第一个字母大写）
text-align: center;设置文本的水平对齐方式：居中
line-height: 30px;（行高，设置字体具体所占高度，只限于单行文本）
text-indent: 2em;（首行缩进，一个英文字母数字占半个汉字）
vertical-align: middle;（调字体和其他的关系）
color: red;字体颜色
text-shadow: 10px 10px1px red;（水平偏移垂直偏移 阴影 颜色）
overflow:auto;（解决设置的文本超出部分 hidden；超出的文本被剪掉 auto自动为超出部分设置滚动条）
white-space:nowrap;（强制不换行，换行）
text-overflow:ellipsis;（单行文本超出文本后面用省略号，和上面两个一起用）
word-wrap: break-word;
word-spacing: 10px;单词和单词之间的间距
letter-spacing: 10px;汉字之间的间距吗
背景
background-color: red;背景色
background-image: url('');/*多张背景图片*/
background-position:center;背景面的定位
background-repeat: no-repeat;平铺
background-attachment: fixed;
background-clip: content-box;
边框
border-width: 10px;边框的宽度
border-color: red;边框的颜色
border-style: solid;线的风格实线（solid）
border-radius: 10px;边框的弧度（只支持css3.0）
border-image: url('')10/10px stretch;背景图片设置边框
border-collapse: collapse
定位
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
position:absolute;绝对定位 relative作为子元素的绝对定位
z-index: 10;用来设置在绝对定位中谁在最上面
float:left;向左边浮动
clear:both;清除左右两边的浮动
其他
display:block;
visibility:hidden;
opacity: 1;设置透明度
cursor: pointer;设置鼠标
list-style:none;序号框全部去掉
unicode-bidi: bidi-override;
direction: rtl;
resize: none; overflow: auto;
-ms-微软
-moz- 火狐
-o-opert
-webkit- 谷歌
CSS导入服务器字体
@font-face {
font-family: f1;
src: url(fonts/1.ttf);
}
Css分辨率兼容
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<linkrel="stylesheet"type="text/css"href="css/css1.css"/>
<styletype="text/css">
* { margin:0; padding:0; font:20pt/50px '微软雅黑';list-style: none; }
p:first-of-type{ width:100px;height: 180px; left:0; top:200px;position: absolute;background: red; }
p:last-of-type{ width:100px;height: 180px; right:0; top:200px;position: absolute;background: green; }
.divbody { width: 960px; min-height:600px;border: 5px solid blue; margin: 0 auto; }
.div2 { width: 460px; height:150px;background: red;float: left;margin: 10px; }
.div3 { width: 300px; height:150px;background: blue;float: left;margin: 10px }
.div4 { width: 220px; height:150px;background: green;float: left;margin: 10px }
/* 1920 1600 1366 1280 1024 800 500 */
@mediascreen and(min-width:500px) {
.divbody { width: 250px; min-height:600px;border: 5px solid blue; margin: 0 auto; }
.div2 { width: 230px; height:150px;background: red;float: left;margin: 10px; }
.div3 { width: 230px; height:150px;background: blue;float: left;margin: 10px }
.div4 { width: 230px; height:150px;background: green;float: left;margin: 10px }
}
@media screenand (min-width:800px) {
.divbody { width: 540px; min-height:600px;border: 5px solid blue; margin: 0 auto; }
.div2 { width: 250px; height:150px;background: red;float: left;margin: 10px; }
.div3 { width: 160px; height:150px;background: blue;float: left;margin: 10px }
.div4 { width: 115px; height:150px;background: green;float: left;margin: 10px }
}
@media screenand (min-width:1024px) {
.divbody { width: 800px; min-height:600px;border: 5px solid blue; margin: 0 auto; }
.div2 { width: 380px; height:150px;background: red;float: left;margin: 10px; }
.div3 { width: 245px; height:150px;background: blue;float: left;margin: 10px }
.div4 { width: 180px; height:150px;background: green;float: left;margin: 10px }
}
@media screenand (min-width:1280px) {
.divbody { width: 960px; min-height:600px;border: 5px solid blue; margin: 0 auto; }
.div2 { width: 460px; height:150px;background: red;float: left;margin: 10px; }
.div3 { width: 300px; height:150px;background: blue;float: left;margin: 10px }
.div4 { width: 220px; height:150px;background: green;float: left;margin: 10px }
}
@media screenand (min-width:1366px) {
.divbody { width: 960px; min-height:600px;border: 5px solid blue; margin: 0 auto; }
.div2 { width: 460px; height:150px;background: red;float: left;margin: 10px; }
.div3 { width: 300px; height:150px;background: blue;float: left;margin: 10px }
.div4 { width: 220px; height:150px;background: green;float: left;margin: 10px }
}
@media screenand (min-width:1600px) {
.divbody { width: 1360px; min-height:600px;border: 5px solid blue; margin: 0 auto; }
.div2 { width: 660px; height:150px;background: red;float: left;margin: 10px; }
.div3 { width: 432px; height:150px;background: blue;float: left;margin: 10px }
.div4 { width: 320px; height:150px;background: green;float: left;margin: 10px }
}
@media screenand (min-width:1920px) {
.divbody { width: 1600px; min-height:600px;border: 5px solid blue; margin: 0 auto; }
.div2 { width: 660px; height:150px;background: red;float: left;margin: 10px; }
.div3 { width: 432px; height:150px;background: blue;float: left;margin: 10px }
.div4 { width: 320px; height:150px;background: green;float: left;margin: 10px }
}
</style>
<title>首页</title>
</head>
<body>
<p></p>
<p></p>
<divclass="divbody">
<divclass="div2"></div>
<divclass="div2"></div>
<divclass="div3"></div>
<divclass="div3"></div>
<divclass="div3"></div>
<divclass="div4"></div>
<divclass="div4"></div>
<divclass="div4"></div>
<divclass="div4"></div>
<addressstyle="clear:both"></address>
</div>
</body>
</html>
Javascript
Js课程结构
• js语法基础
• Html5+css3不区分大小写的，js是严格区分大小写的
• 每句js的最后加上;
• 基本语法
• 变量的定义
• var 变量 = 值;
• 变量=值;
• =不是等号 赋值 右边的值赋左边
• 命名规范
• 变量的命名规则采用骆驼命名法,尽量要起的有意义
• 由多个单词组成,第一个单词的首字母小写，后面每一个单词的首字母大写 stuAge getName getAgeByClass
• 变量的命名只能包含字母(a-z)数字(0-9)下划线(_),[$]不能以数字开头,不能是js当中现有的关键字。
• var,null,underfind,none
• 变量必须先申明再赋值再使用
• 变量的赋值及其运算
• 赋值 a=b=c=5; a=(b=3,c=5,d=5)
• 运算
• + - * / %
• 布尔>数据>字符
• 自动转换
• 高类型+低类型=低类型;
• 特例 Boolean类型的变量转成数据型 true=1，false = 0
• Boolean类型的变量转成字符型 true=‘true’
• 字符型‘true’-》数据 NaN
• 强制转换
• 字符型->数据型
• ++ --
• 关系运算符和逻辑运算符
• 关系运算符
• > < >= <= != ==（两个变量的值相等） ===（两个值相等，并且他们的数据类型也相等）
• =表示赋值
• ==判断是否相等,==比的是值
• 逻辑运算符（与或非）
• &&(and)
• Case1 && case2
• ||(or)
• Case1 || case2
• !(not)
• !case1
• ^(xor)
• Case1 ^ case2
• 运算符的优先级
• 算术运算符 > 关系运算符 >逻辑运算符>赋值运算
• ! > ++a > * / % > + - > 关系 > && > || > = > a++
• 条件分歧语句
• 三元表达式 ? :
• If else
• If else if
• Switch case
• 作业
• 输入一个月份,判断是大月还是小月
• 输入3个数,求最大数和最小数(4,5)
• 输入一个年份,判断是闰年还是平年
• 输入一个三角形的3条边,判断能否构成三角形
• 判断构成的三角形是什么三角形 等腰 等边 直角 钝角 锐角
• 输入10个数,找最大,最小的
• 输入2个变量,交换他们的值
• 循环结构
• 循环结构的要素
• 定义循环变量
• 循环的执行条件
• 循环执行的语句
• 循环变量的改变
• 1-2+3-4+5-6+7-8...+99-100;
• 2输入一个多位数abcdefg 123 1+2+3
• 鸡兔同笼 头64足160
• 判断一个是数是不是质数
• 1,1,2,3,5,8,13,21,.....,前20项
• 8=2*2*2;
• 用js循环程序,输出一个任意行 10列的表格
• 数组
• 数组的定义
• var arr = [];（一个变量可以赋多个值，可以放任何东西）
• var arr = new Array(length);（长度）
• var arr = new Array(val1,val2,val3..valn);
• 数组的赋值
• a[index]=value;
• 一个长度为n的数组，索引一定是从0到n-1
• Js变量的定义都是var ，js的数组里面可以放任意类型的东西,但是，一般存放同种类型的值
• 基本思想
• 在一个数组中，找出最大的元素或者是最小的元素
• 如何判断2个数组是否相等 如果长度 逐个比较
• 生成20个不重复的随机数 1~100 Math.random(),并且排序` .
•
• 如何判定一个元素在数组中有没有出现过
• 生成一个m到n之间的随机数 Math.random()*(n-m)+m;
• 数组的内置方法
pop()删最后一个 push() 结尾增加
shift()删除头一个 unshift()头添加
join() arr->string把数组里面的每一项连成一个字符串
slice() i1<=x<i2 splice()
sort(function(x,y){
return parsetInt(x)-parseInt(y);
});
Json = hash + hash数组
• 方法
• 古诗词填空
• Js内置对象
• 数学
• 随机数
• 取整
• sin cos tan
• 日期
• 获取
• Json
• Json = hash + hash数组
• 字符串
• 定义字符串
• 字符串内置方法一个indexOf()（查找字符出现的位置） lastIndexOf()（查找字符最后出现的位置）
• charAt() -> []
• split() string - arr（把字符串转化为数组）
• subString() i1<=x<i2截取字符串，一个数后面全部截取（2,4）2表示从第2开始截取，4表示范围
• replace(); replace(new RegExp('a','ig'),'e')替换a,e
• toLowerCase：所有字母转换成小写 toUpperCase所有字母换成大写
• 解析字符串
• 正则表达式
• / /
• ^匹配开头 $匹配结尾
• [a-zA-Z0-9_@!],[!a,e,i,o,u] \w[a-zA-Z0-9_] \W[!a-zA-Z0-9_] \d[0-9] \D[!0-9] \s \S
• {m,n},{m,},{0,n} *{0,} ?{0,1} +{1,}
• Html5当中表单验证
• 浏览器内置对象(bom brower object model)
• Window
• Alert()弹出一个有确定按钮的对话框
• Confirm()弹出一个有确定和取消的按钮
• prompt()弹出一个输入框
• setTimeout()延迟多少秒然后执行某个方法
• clearTimeout()停止上面的
• setInterval(方法名，时间)隔多少毫秒，输出一次方法；
• clearInterval()用于取消setInterval的操作
• Open()
• Close()
• Document
• 获取元素部分
• document.getElementById()->element object通过id 获取
• document.getElementsByName()->arrays根据元素的name值来获取input元素
• document.getElementsByTagName()->arrays根据元素的标签名来获取元素
• 获取元素的后代和父亲(dom)
• 元素设置部分
• 内容
• InnerHTML innerText
• 属性
• 样式
• className
• .style.css=””
• 获取元素的大小
• clientWidth(元素实际可用宽度，除了边框除了滚动条）
• offsetWidth（算上边框滚动条总共的宽度）
• scorllLeft算滚动条拉过去的距离
• clientLeft 边框的大小
• Offsetleft offsetTop
• scorllTop-offsetTop
• 网页本身大小
• document.documentElement.clientWidth获取页面上文档的宽度
• document.body.clientHeight:body里面有多少东西，就有多少高
• Document.document.clientHeight
• document.body.scrollTop
• Location
• Href在js当中设置跳转；还可以获取当前的路径
• Reload刷新
• Histroy
• Forward前进到下一个页面
• Back后退
• Go前进
• Screen
•
• 表单验证
• url解析，
• 动态时钟，
• 图片切换
• js事件
• 事件驱动
事件名称
参数1
参数2
返回值
适用元素
onload
Body元素
onsubmit
True/false
Form元素
onclick
this
all
ondblClick
this
all
onfocus
this
所有可以填写表单元素
onbluer
this
所有可以填写表单元素
onchange
this
有内容的表单元素
onmouuseover
Event.clinetX()
all
onmouuseout
all
onmousemove
Event.clinetX()
all
onkeydown
键盘事件
event.keyCode
window
onkeyup
onkeypress
onscroll
元素拖放事件
• 特效
• Dom模型 bom模型
• 获取元素的父元素
• e.parentNode
• 获取这个元素的子元素
• e.childNodes->array
• e.firstChild - e
• e.lastChild ->e
• 获取这个元素的兄弟元素
• e.previousSibling->e
• e.nextSibling->e
• 设置或者获取元素属性里的值
• setAttribute(‘p’,’v’);
• getAttribute(‘p’);
• JQuery
• 主流的js的框架 bootstap
• Dz论坛。自己设计一个网站—bootstap 网站的后台
Js语法部分
网页中引用js
变量的定义
var name = value;
1，不区分字符和字符串
2，不区分单引号和双引号
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth(包括边线的宽)
网页可见区域高：document.body.offsetHeight(包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop(IE7无效)
网页被卷去的左：document.body.scrollLeft(IE7无效)
网页被卷去的高：document.documentElement.scrollTop(IE7有效)
网页被卷去的左：document.documentElement.scrollLeft(IE7有效)
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth
相对于窗口左上角的X：window.event.clientX
相对于窗口左上角的Y：window.event.clientY
相对于整个页面的X：window.event.X
相对于整个页面的Y：window.event.Y
事件
• 登录验证
• 模仿智联上的城市选择，多选框
• 2级下拉框联动
• Dz论坛导航栏定位效果
• 图片滚动效果走马灯
• Dz导航栏下拉效果
var theEvent = window.event || e;
firstChild ---------------------------------获取元素下的第一个子元素
nextSibling --------------------------------获取元素的同级后面一个元素
previousSibling-----------------------------获取元素的上一个元素
parentNode—---------------------------------获取父亲结点
childNodes----------------------------------获取子结点
document.documentElement--------------------获取文档的根结点
lastChild-----------------------------------获取最后一个孩子
document.createElement---------------------创建一个元素
parent.appendChild(child)------------------追加子元素
parent.removeChild(child)-------------------移除子元素
e.setAttribute(‘name’,’value’)--------------设置元素的属性
e.getAttribute(‘name’)
• 表格单元格移动
• 表格删除添加修改
知识要点
• 基础篇
• 变量
• 算术运算符
• 关系运算符
• 逻辑运算符
• 高级篇
• 数组
• 方法
• 字符串
• 方法
• 函数
• 定义
• 调用
• 参数，返回值
• 日期对象
• 正则表达式
• 数学对象
• 进阶篇
• 浏览器内置对象bom
• Window
• Document
• Location
• History
• Screen
• 事件
• 事件名称
• This
• Event 火狐的兼容性
• Dom模型
- web里面html,css,js基本知识
- Web前端：HTML~CSS~JS
- HTML+CSS的基本知识
- HTML/CSS基本知识
- web标准---html、css、js分离
- API汇总 - Web[JS|HTML|CSS]
- web开发html css js插件
- web server/cgi/html/css/js
- web标准---html、css、js分离
- [HTML/CSS/JavaScript/PHP/MySQL]HTML基本知识
- HTML第九节（css样式基本知识）
- html+css的基本知识总结（一）
- web小知识与问题串烧(html,css,js)
- WEB前端html、css、js分离开发简谈
- web前端常用操作集(涵盖JS、HTML、CSS)
- Django web server: html引用静态文件(css, js)
- 学习Web基础（HTML/CSS/JS)+服务器端技术(LAMP)
- Web前端HTML+CSS+JS初级入门视频课程 001
- JAVA中的MAP及其子类
- 简单的struts2的使用
- Java基础-hashMap的相关问题
- 区块链：「重回现在」的枷锁与契机
- jquery
- web里面html,css,js基本知识
- 软件工程师具备六大基本素质
- java获取URL响应头的日期时间
- jQuery
- 类和对象运行时在内存里是怎么样的？各种变量、方法在运行时是怎么交互的？
- PAT甲级 1007
- redis介绍及安装及redis 集群
- 刷清橙OJ--A1077.坐标排序
- jQuery
