网页的基本结构_第1页
网页的基本结构_第2页
网页的基本结构_第3页
网页的基本结构_第4页
网页的基本结构_第5页
已阅读5页，还剩3页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、 网页的基本结构 <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=20pxcolo

2、r=redwidth=100%/> (&lt;)< (&gt;)> 图片标签 <img src=”图片路径” alt=图片提示信息 height,width,align=文本与图片的对齐方式/> 滚动标签 <marquee direction=up></marquee> 超链接<a href=连接到页面的地址 target=blank(在新的选项卡打开)></a> 锚点连接：进行页面定位 <a href=#名称></a> 定义锚点 <a name=></a&g

3、t; 排列网页内容 无序列表<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=”单元

4、格间距”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/&

5、gt;</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/> 下拉列表&

6、lt;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/>框架组合网页框架结构介绍框架集使用：

7、没有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

8、”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;

9、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

10、: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"&

11、gt;#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 so

12、lid 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属性可以改变元素的性质盒子的

13、定位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;colo

14、r: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">第二个层

15、</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;retur

16、n 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(

17、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/ja

18、vascript">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"

19、 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&

20、gt;<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();"><

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论