网页的基本结构

网页的基本结构 文本标签 标题标签 . 段落标签字体标签 换行标签 水平线标签 (<) 图片标签 滚动标签 超链接 锚点连接：进行页面定位 定义锚点 排列网页内容 无序列表 有序列表 定义列表：用于产品的解释 用于图文混合的布局 标题 表格标签跨列跨行 DIV标签（层标签） 行内标签作为文本容器 传递网页数据 表单的使用 Get与post的区别：post不会显示用户的密码并且提交数据的长度没有限制 常见的表单元素：文本框 密码框 单选按钮 复选框 文件域 下拉列表 湖北省 多行文本域： 自我介绍 提交按钮 重置按钮 框架组合网页框架结构介绍框架集使用：没有body部分 行列混合的页面 内嵌框架 CSS样式表的使用 fdjkjifd fdjkjifd fdjkjifd fdjkjifd Li(标签选择器) color:#DF0E11;font-size:9px;font-family:黑体;.red(类选择器) Color:red;#news（id选择器）Background-color:red;选择器的优先级 ID选择器类选择器标签选择器 文本和字体属性无标题文档pcolor:red;font-size:20px;font-family:微软雅黑;letter-spacing:10px; /*字符间距*/text-align:right;/*文本的对齐方式*/text-decoration:underline;/*文本修饰*/line-height:30px;/*文本行高*/font:bold 20px 微软雅黑;css是一种页面修饰梅花技术CSS盒子模型#box1border-width:5px;border-color:red;border-style:dashed;/*边框的风格*/ border:5px solid red; padding-top:20px;/*填充*/ width:300px;只有块级元素才能修饰 height:600px; background-repeat:no-repeat;/*背景的平铺方式*/ background-color:red; background-image:url();bodymargin:0px;#box2margin-top:30px;/*盒子之间的间距*/border:5px solid red; 盒子2网页布局设计标准文档流行内元素从左到右解析文档块级元素从上到下解析元素Display属性可以改变元素的性质盒子的定位title盒子的定位#wrapperborder:3px solid black;#box1,#box2,#box3border:3px solid black;margin:5px;height:40px;width:300px;#box1background-color:red;color:yellow;position:absolute;/*绝对定位 脱离标准文档流*/top:30px;left:100px;#box2background-color:green;color:white;position:relative;/*相对原来的位置进行偏移*/left:50px;top:-20px;#box3background-color:yellow;color:black;position:fixed;/*固定定位*/top:30px;left:100px;第一个层第二个层第三个层盒子的浮动Float:left;Clear:both; overflow：hidden解决浮动塌陷常用流行布局的实现自适应 width：80% 当改变窗口的大小时，页面内容始终是窗口的80%JavaScript基础知识定义函数function getArea (width,height)var re=width*height;return re;/*document.write(面积：+re);*/ var area=getArea(3,4); document.write(area);系统函数var r=parseInt(123)+parseFloat(456);document.write(r);var x=ABC;var y=123;document.write(isNaN(y);输入x返回true表示x不是数字Var r=”1+2+3+4;r=eval(r);document.write(r);eval返回运算数的计算结果匿名函数(function (width,height)document.write(面积：+width*height);)(3,4)函数也是一种数据类型 function类型匿名函数作为函数的参数来传递Var area=function(width,height)Document.write(“面积：”+width*height);Area(3,4);常用事件、function fun(obj)obj.style.fontSize=30px;事件绑定This表示事件源p；window.onload=function()alert(欢迎来到美淘网);浏览器默认处理程序function Check()event.returnValue=false;function Check() var username=document.getElementById(name).value; if(username=)alert(请输入用户名);return false;return true; window对象window.alert();var name=mpt(请输入姓名：);window.alert(欢迎+name);确认对话框var flag=window.confirm(确认删除吗？);if(flag)window.alert(执行删除操作);elsewindow.alert(取消删除操作);var newWin;wind