网页的基本结构.doc
网页的基本结构 <html> <head><title><title></head><body></body></html> 文本标签 标题标签 <h1></h1>.<h6></h6> 段落标签<p align=center,left,right><font color,face,size>字体标签</font></p> 换行标签<br/> 水平线标签<hr size=20pxcolor=redwidth=100%/> (<)< (>)> 图片标签 <img src=”图片路径” alt=图片提示信息 height,width,align=文本与图片的对齐方式/> 滚动标签 <marquee direction=up></marquee> 超链接<a href=连接到页面的地址 target=blank(在新的选项卡打开)></a> 锚点连接：进行页面定位 <a href=#名称></a> 定义锚点 <a name=></a> 排列网页内容 无序列表<ul type=项目符号><li></li></ul> 有序列表<ol type=a><li></li></ol> 定义列表：用于产品的解释 用于图文混合的布局 <dl><dt>标题</dt><dd></dd></dl> 表格标签<table border=1width=500px,height=300,bgcolor=red background=”背景颜色” cellspacing=”单元格间距”cellpadding=单元格与内容的间距（填充）><tr align=center,left,rigth><td colspan=3>跨列</td><td rowspan=1>跨行</td></tr></table> DIV标签（层标签）<div></div> <span>行内标签</span>作为文本容器 传递网页数据 表单的使用<form name method action><inupt type=”text” name/></form> Get与post的区别：post不会显示用户的密码并且提交数据的长度没有限制 常见的表单元素：文本框<input type=”text”name=”username” /> 密码框<input type=”password”> 单选按钮 <input type=”radio” value=”男” name=”sex”> 复选框<input type=”checkbox” value=”篮球” checked=”checked”/> 文件域 <input type=”file” name/> 下拉列表<select name=” size（显示的行数）=”3”> <option value=”湖北省”selected=”selected”>湖北省</option> </select> 多行文本域： 自我介绍<textarea name cols=列rows=”行”></textarea> 提交按钮 <input type=”submit” value=按钮显示的值” name/> 重置按钮 <input type=”reset”value=”重置” name/>框架组合网页框架结构介绍框架集使用：没有body部分 <frameset cols/rows(页面按行割)=”25%,50%,*” bordercolor=”red”border=”5”><frame src/></frameset> 行列混合的页面 <frameset rows=”25,*”><frame src=”top.html”/><frameset cols=”25%,*”><frame/></frameset></frameset>内嵌框架<iframe src=”name=”frameborder=”1”scrolling=”auto”width=”700px”height=”300px”></iframe> CSS样式表的使用<ul> <li class=”red”>fdjkjifd</li> <li id=”news”>fdjkjifd</li> <li>fdjkjifd</li> <li>fdjkjifd</li> </ul><style type="text/css">Li(标签选择器) color:#DF0E11;font-size:9px;font-family:黑体;.red(类选择器) Color:red;#news（id选择器）Background-color:red;</style>选择器的优先级 ID选择器类选择器标签选择器 文本和字体属性<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style typ="text/css">pcolor:red;font-size:20px;font-family:微软雅黑;letter-spacing:10px; /*字符间距*/text-align:right;/*文本的对齐方式*/text-decoration:underline;/*文本修饰*/line-height:30px;/*文本行高*/font:bold 20px 微软雅黑;</style></head><body><p>css是一种页面修饰梅花技术</p></body></html>CSS盒子模型<style type="text/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; </style></head><body><div id="box1"><img src="images/2015.03.14.jpg" height="500" width="300"></div><div id="box2">盒子2</div></body>网页布局设计标准文档流行内元素从左到右解析文档块级元素从上到下解析元素Display属性可以改变元素的性质盒子的定位title>盒子的定位</title><style type="text/css">#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;</style></head><body><div id="wrapper"><div id="box1">第一个层</div><div id="box2">第二个层</div><div id="box3">第三个层</div></div></body>盒子的浮动Float:left;Clear:both; overflow：hidden解决浮动塌陷常用流行布局的实现自适应 width：80% 当改变窗口的大小时，页面内容始终是窗口的80%JavaScript基础知识定义函数<script type="text/javascript">function getArea (width,height)var re=width*height;return re;/*document.write("面积："+re);*/ var area=getArea(3,4); document.write(area);</script>系统函数<script type="text/javascript">var r=parseInt("123")+parseFloat("456");document.write(r);</script>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);常用事件、<script type="text/javascript">function fun(obj)obj.style.fontSize="30px"</script><p onClick="fun(this)">事件绑定</p>This表示事件源p；window.onload=function()alert("欢迎来到美淘网");<body onUnload="alert('触发onload事件')"><marquee direction="right" onMouseOver="stop()" onMouseOut="start()"><img src="images/psb (1).jpg" width="300" height="300" alt="1"/></marquee>浏览器默认处理程序<script type="text/javascript">function Check()event.returnValue=false;</script><body><form action="index.html" onSubmit="return false;"><input type="submit" value="确定"/></form>function Check() var username=document.getElementById("name").value; if(username="")alert("请输入用户名");return false;return true;</script><body><form action="index.html" onSubmit="return Check();"><input type="text" id="name"/><input type="submit" value="确定"/></form></body> window对象window.alert();var name=window.prompt("请输入姓名：");window.alert("欢迎"+name);确认对话框var flag=window.confirm("确认删除吗？");if(flag)window.alert("执行删除操作");elsewindow.alert("取消删除操作");var newWin;window.onload=function()newWin=window.open("index.html","index","");</script><body><a href="javascript:newWin.close()">关闭窗口</a>闹钟函数/*setTimeout("alert('Hello')",2000);*/setInterval("alert('Hello')",6000);8 / 8
