1、#*HTML 知识点一、功能用来制作静态网页，网页中的全部内容都是通过 Html 语言展现出来。使用场合：开发静态网页。二、思想一切功能都由标签实现，标签具有四要素。三、常用标签标签关键字 功能 常用属性设置字体,字号,颜色 face, color, size换行居中对齐设置标题级别H1 最大 h6 最小align插入水平线 size, width, align划分段落, align创建有序编号列表 type, start定义一个列表项定义无序符号列表 type插入图片 src,width,height,border, title,alt插入表格 border,width,height, bg
2、color,bordercolor, cellpadding,cellspacing创建一行创建一列 colspan, rowspan创建一列，元素居中，粗体设置表格的标题收集用户输入信息,并提交给服务器action, method创建文本框 name, valuereadonly, disabled创建密码框创建单选按钮 checked创建下拉列表框 name创建列表项 value, selected#*创建复选框 checked创建文本区域 name,rows, cols创建隐藏控件创建提交按钮创建重置按钮超级链接,网页跳转 href, target指定快速的查询到该网页的关键字 /提供网
3、页内容的描述信息/指定文档类型和页面字符集四、案例1、诗篇2、学生课程表 3、注册页#*CSS 知识点一、功能1、css 格式化页面中的各组成元素2、css 决定元素在页面的具体位置二、思想属性是 css 最小构成单元，每个属性都有特定功能，多个属性构成样式，由样式修饰 html 语言的标签。三、样式修饰标签1、style 属性html 标签添加 style 属性，属性值是多个 css 属性的组合。2、标签选择器样式名与标签关键字相同，根据名称相同自动关联。3、ID 选择器1样式名以 #开始；2 标签添加 id 属性与样式关联。4、类选择器1样式名以 . 开始；2 标签添加 class 属性与
4、样式关联。5、属性选择器标签名属性名=属性值，根据标签关键字和属性值自动关联。6、包含选择器1子样式名中间加 或空格分隔 (直接包含)；2看最后一个子样式是什么选择器就如何关联标签。7、多个样式名同一样式体1样式名中间加逗号分隔；2根据样式类型决定如何与标签关联。8、多条件同时成立选择器#*1多个子样式名紧挨着 2一个标签必须同时具备这多个条件才可以被该样式修饰9、各选择器使用场合1)如果想根据标签名用一个样式修饰所有同名标签时，用标签选择器；2)如果一个样式只想修饰唯一的一个标签时，用 id 选择器；3)如果一个样式想修饰多个任意标签时，用类选择器；4)尽量使用包含选择器。四、元素定位1、盒
5、子模型通过设置标签的内外边距从而改变元素的位置，没有脱离标准文档流。相关属性：marging-top：外上边距margin-right：外右边距margin-bottom：外下边距margin-left：外左边距margin：同时设置上右下左四个外边距 (顺时针)padding-top：内上边距padding-right：内右边距padding- bottom：内下边距padding-left：内左边距padding：同时设置上右下左四个内边距border-top：设置上边线的粗细,颜色,线型border-right：设置右边线的粗细 ,颜色,线型border-bottom：设置下边线的粗细
6、,颜色,线型border- left：设置左边线的粗细,颜色,线型border：同时设置四个边线的粗细,颜色,线型border-width：只设置 4 个边线的宽度(粗细) border-color：/只设置 4 个边框的边框颜色 border-style：只设置 4 个边框的边框线型#*2、绝对定位有 2 套坐标系统：1)如果该元素所有父标签都没有设置相对定位，那么浏览器左上角为坐标原点，根据 left 与 top 值确定元素的位置。2)第一个设置相对定位的父标签左上角为坐标原点，根据 left 与 top 值确定元素的位置。脱离标准文档流相关属性：position: absolute;/表
7、示绝对地址定位,通过绝对定位,元素可以放置到页面上的任何位置。left:100px /绝对定位时表示与浏览器左边框距离。top:100px/绝对定位时表示与浏览器上边框距离。z-index: /在绝对定位层改变各元素层叠顺序 属性值是整数 越大越在上方。3、相对定位元素原位置(标准文档流的位置)左上角为坐标原点，根据 left 与 top 值改变位置。没有脱离标准文档流。相关属性position: relative;/表示相对地址定位,通过相对定位；元素可以放置到页面上的任何位置。left:100px /相对定位时表示与元素原始位置的左边距离。top:100px /相对定位时表示与元素原始位置
8、的上边距离。4、浮动定位把元素靠在在父容器左边或右边. 兄弟元素都设置浮动后成为一行，脱离标准文档#*流。相关属性float : 设置浮动定位clear: 清除浮动定位的影响5、各定位方式使用场合1)靠左或靠右，兄弟标签一列变一行，文字环绕浮动定位。2)移动位移比较小，用盒子模型。3)移动位移比较大，父容器相对定位，子元素绝对定位。五、添加独立 css 文件 3 步骤1、创建子文件夹和 css 文件2、在 html 页面用标签导入独立 css 文件3、定义样式并修饰各 html 标签六、静态网页开发思想1、对网页元素通用属性进行设置。2、分析页面的组成，整个网页布局划分为多个矩形区域，在矩形区
9、域内部又可以划分子矩形区域，每个矩形区域都用标签实现。3、用 html 标签把实际元素放在标签中，再用 css 实现元素定位和格式化(对每个元素和 div)，依次类推，搞定每个 div 区域。七、css 常用属性属性名 功能 属性值font-size 设置字号 1)像素 2)百分比color 设置字体颜色 1)英文单词 2)rgbfont-family 设置字体 宋体|黑体font-weight 设置文字粗体 normal、lightar、boldfont-style 设置字体斜体 normal、italicfont 设置字体所有属性 必须按顺序设置text-decoration 设置文本下划
10、线格式 none、underline、line-throughtext-align 元素中的内容水平方向对 left、rigth 、 center#*齐方式line-height 设置行高 像素vertical-align 元素中的内容垂直方向的对齐 top、bottom、middletext-indent 段落首行缩进 1)像素 2)emtext-transform 控制英文字母大小写 none、capitalize 、uppercase、lowercasewidth 设置元素的宽度 像素heigth 设置元素的高度 像素background-color 设置背景颜色 1)英文单词 2)rg
11、bbackground-image 设置背景图片 url(图片路径)background-repeat 设置背景图像重复方式 repeat、no-repeatrepeat-x、repeat-ybackground-size 设置背景图像的大小 1)像素 2)百分比background-position 设置背景图片的出现位置 像素background /设置所有背景属性display 设置元素是否可见 none、block、inlineoverflow 设置内容超出父区域时如何处理 hidden、visiblelist-style-type 设置列表符号类型 disc、 circle、 non
12、elist-style-image 用图片作为编号 url(“图片路径“)opacity 设置元素的透明度 从 0.0（完全透明）到1.0（完全不透明）cursor 设置鼠标到达元素上的鼠标形状 pointer、textborder-radius 设置圆角矩形 像素八、案例1、房地产首页 2、注册页 3、登录页 4、二级菜单#*JavaScript 知识点一、功能浏览器执行 html 代码后实现动态改变网页内容和格式从而实现动态效果二、思想1、分析有哪些动态效果，确定事件三要素并关联从而实现一切功能。2、要实现某功能找已经存在的对象和方法。三、html 导入独立的 js 文件的步骤1、创建文件
13、夹和独立 js 文件。2、用 标签在 html 页面中导入。3、在 js 文件中定义方法，并与 html 页面的标签关联。四、事件关键字1、onclick：鼠标单击时触发。2、onload：页面全部内容被加载后立即触发，该事件源是 body。3、onmouseover：鼠标进入区域时触发。4、onmouseout ：鼠标退出区域时触发。5、onmousemove：鼠标在某区域移动时触发。6、onchange ：内容改变时触发。7、onsubmit ：表单提交数据时触发。8、onblur：控件失去焦点时触发。9、onfocus：控件获取焦点时触发。五、浏览器对象和方法1、特性所有对象都是由浏览器
14、负责提供的，编程时可以直接调用方法，又称 BOM 对象。2、浏览器对象的方法总结内置对象名 功能 常用方法#*1、window 代表浏览器窗口 alert(“提示内容“)setInterval(“方法名()“, 数值)clearInterval(对象名)setTimeout(“方法名()“,时间) open(“, “_blank“, “width=800, height=500“);parseInt(数值)eval()prompt(“提示信息“,“ 默认信息“)/弹出对话框,接受文本框内容 confirm(“对话框上的提示信息“)/弹出对话框,有确定和取消 2 个2、document 代表整个
15、网页 getElementById(“标签的 id 属性“)getElementsByTagName(“标签关键字“)getElementsByName(“标签的name 属性值“)createElement(“标签关键字“)write(“内容“)3、event 事件对象 event.x 鼠标此时位置的横坐标event.y 鼠标此时位置的纵坐标4、location window. location= locationlocation.href(“地址”)六、DOM 对象的方法1、原理Dom 对象可以获取 html 文档的每个标签，以及该标签的属性和内容，并可以对这些标签，属性和内容进行修改从而
16、实现动态的改变网页内容和格式。2、DOM 对象方法总结方法 功能 说明getElementById(“标签的 id 属性“) 根据标签的 id 获取标签对象1)任何标签对象可以调用2)document 对象都可以调用getElementsByTagName(“标签名“)根据标签名获取包含全部标签的数组 2 个getElementsByName(“name属性值“)根据标签的 name 的属性值获取所有标签对象数组1)只有 document 对象可以调用该方法#*createElement(“标签关键字“) 根据标签关键字创建标签对象 1)只有 document 对象可以调用该方法appendC
17、hild(node) 把参数对象添加到父标签内 2 个insertBefore(newnode,oldnode)为父标签对象增加一个子标签对象 2 个removeChild(node) 为父标签对象删除一个子标签对象 2 个getAttributeNode(“属性名“) 根据属性名获取属性对象 1)标签对象可以调用该方法setAttribute(“属性名“,“属性值“)为标签对象添加一个新的属性或改变它现有属性的值1) 标签对象可以调用该方法属性 意义innerHTML 用来获取或修改标签对象中的文本内容 1)标签对象可以调用该方法parentNode 返回子标签的父标签对象 1)标签对象可以
18、调用该方法2)文本对象firstChild 用来获取父标签的第一子标签对象 1)标签对象可以调用该方法lastChild 返回父标签的最后一个子标签对象 1)标签对象可以调用该方法childNodes 返回父标签所有子节点对象 1)标签对象可以调用该方法nextSibling 返回当前标签对象的下一个兄弟节点 1)标签对象可以调用该方法2)属性对象previousSibling 返回当前标签对象的上一个兄弟节点 1)标签对象可以调用该方法2)属性对象七、正则表达式1、正则表达式使用场合客户端表单数据校验2、创建正则表达式的对象1 var regex = new RegExp(“.6$“);2 var pwdRegex = /.6$/;RegExp 类的方法：test()/ 检测字符串是否与正则表达式匹配3、正则表达式各通配符 （1）字符匹配符:：匹配多个字符中的任意一个字符例如：
