网页的基本结构.docx
- 文档编号：10744945
- 上传时间：2023-05-27
- 格式：DOCX
- 页数：12
- 大小：17.96KB
网页的基本结构.docx
《网页的基本结构.docx》由会员分享，可在线阅读，更多相关《网页的基本结构.docx（12页珍藏版）》请在冰点文库上搜索。
网页的基本结构
网页的基本结构
<title></head><body></body></html></p><p>文本标签</p><p>标题标签<h1></h1>……..<h6></h6></p><p>段落标签<palign=’center,left,right’><fontcolor,face,size>字体标签</font></p></p><p>换行标签<br/></p><p>水平线标签<hrsize=’20px’color=’red’width=’100%’/>（<）<（>）></p><p>图片标签<imgsrc=”图片路径”alt=’图片提示信息’height,width,align=’文本与图片的对齐方式’/></p><p>滚动标签<marqueedirection=’up’></marquee></p><p>超链接<ahref=’连接到页面的地址’target=’blank’（在新的选项卡打开）></a></p><p>锚点连接：</p><p>进行页面定位<ahref=’#名称’></a></p><p>定义锚点<aname=’’></a></p><p>排列网页内容</p><p>无序列表<ultype=’项目符号’><li></li></ul></p><p>有序列表<oltype=’a’><li></li></ol></p><p>定义列表：</p><p>用于产品的解释用于图文混合的布局<dl><dt>标题</dt><dd></dd></dl></p><p>表格标签<tableborder=’1’width=’500px’,height=’300’,bgcolor=’red’background=”背景颜色”cellspacing=”单元格间距”cellpadding=’单元格与内容的间距（填充）’><tralign=’center,left,rigth’><tdcolspan=’3’>跨列</td><tdrowspan=’1’>跨行</td></tr></table></p><p>DIV标签（层标签）<div></div></p><p><span>行内标签</span>作为文本容器</p><p>传递网页数据</p><p>表单的使用<formnamemethodaction><inupttype=”text”name/></form></p><p>Get与post的区别：</p><p>post不会显示用户的密码并且提交数据的长度没有限制</p><p>常见的表单元素：</p><p>文本框<inputtype=”text”name=”username”/></p><p>密码框<inputtype=”password”></p><p>单选按钮<inputtype=”radio”value=”男”name=”sex”></p><p>复选框<inputtype=”checkbox”value=”篮球”checked=”checked”/></p><p>文件域<inputtype=”file”name/></p><p>下拉列表<selectname=””size（显示的行数）=”3”><optionvalue=”湖北省”selected=”selected”>湖北省</option></select></p><p>多行文本域：</p><p>自我介绍<textareanamecols=’列’rows=”行”></textarea></p><p>提交按钮<inputtype=”submit”value=按钮显示的值”name/></p><p>重置按钮<inputtype=”reset”value=”重置”name/></p><p>框架组合网页</p><p>框架结构介绍</p><p>框架集使用：</p><p>没有body部分</p><p><framesetcols/rows（页面按行割）=”25%,50%,*”bordercolor=”red”border=”5”><framesrc/></frameset></p><p>行列混合的页面</p><p><framesetrows=”25,*”></p><p><framesrc=”top.html”/></p><p><framesetcols=”25%,*”><frame/></p><p></frameset></p><p></frameset></p><p>内嵌框架</p><p><iframesrc=””name=””frameborder=”1”scrolling=”auto”width=”700px”height=”300px”></iframe></p><p> </p><p>CSS样式表的使用</p><p><ul><liclass=”red”>fdjkjifd</li><liid=”news”>fdjkjifd</li><li>fdjkjifd</li><li>fdjkjifd</li></ul></p><p><styletype="text/css"></p><p>Li（标签选择器）</p><p>{color:</p><p>#DF0E11;</p><p>font-size:</p><p>9px;</p><p>font-family:</p><p>黑体;</p><p>}</p><p>.red（类选择器）</p><p>{</p><p>Color:</p><p>red;</p><p>}</p><p>#news（id选择器）</p><p>{</p><p>Background-color:</p><p>red;</p><p>}</p><p></style></p><p>选择器的优先级ID选择器》类选择器》标签选择器</p><p>文本和字体属性</p><p><!</p><p>doctypehtml></p><p><html></p><p><head></p><p><metacharset="utf-8"></p><p><title>无标题文档
p{
color:
red;
font-size:
20px;
font-family:
微软雅黑;
letter-spacing:
10px;/*字符间距*/
text-align:
right;/*文本的对齐方式*/
text-decoration:
underline;/*文本修饰*/
line-height:
30px;/*文本行高*/
font:
bold20px微软雅黑;
}
css是一种页面修饰梅花技术
CSS盒子模型
#box1
{
border-width:
5px;
border-color:
red;
border-style:
dashed;/*边框的风格*/
border:
5pxsolidred;
padding-top:
20px;/*填充*/
width:
300px;只有块级元素才能修饰
height:
600px;
background-repeat:
no-repeat;/*背景的平铺方式*/
background-color:
red;
background-image:
url（）;
}
body
{
margin:
0px;
}
#box2{
margin-top:
30px;/*盒子之间的间距*/
border:
5pxsolidred;
}
盒子2
网页布局设计
标准文档流
行内元素从左到右解析文档
块级元素从上到下解析元素
Display属性可以改变元素的性质
盒子的定位
title>盒子的定位
#wrapper
{
border:
1pxsolidblack;
}
#box1,#box2,#box3
{
border:
1pxsolidblack;
margin:
5px;
height:
40px;
width:
300px;
}
#box1
{
background-color:
red;
color:
yellow;
position:
absolute;/*绝对定位脱离标准文档流*/
top:
30px;
left:
100px;
}
#box2
{
background-color:
green;
color:
white;
position:
relative;/*相对原来的位置进行偏移*/
left:
50px;
top:
-20px;
}
#box3
{
background-color:
yellow;
color:
black;
position:
fixed;/*固定定位*/
top:
30px;
left:
100px;
}
第一个层
第二个层
第三个层
盒子的浮动
Float:
left;
Clear:
both;overflow：
hidden解决浮动塌陷
常用流行布局的实现
自适应width：
80%当改变窗口的大小时，页面内容始终是窗口的80%
JavaScript基础知识
定义函数
functiongetArea（width,height）
{
varre=width*height;
returnre;
/*document.write（"面积：
"+re）;*/
}
vararea=getArea（3,4）;
document.write（area）;
系统函数
varr=parseInt（"123"）+parseFloat（"456"）;
document.write（r）;
varx="ABC";
vary=123;
document.write（isNaN（y））;
输入x返回true表示x不是数字
Varr=””1+2+3+4;
r=eval（r）;
document.write（r）;
eval返回运算数的计算结果
匿名函数
（function（width,height）{document.write（"面积：
"+width*height）;}）
（3,4）
函数也是一种数据类型function类型
匿名函数作为函数的参数来传递
Vararea=function（width,height）{
Document.write（“面积：
”+width*height）;
};
Area（3,4）;
常用事件、
functionfun（obj）
{
obj.style.fontSize="30px";
}
事件绑定
This表示事件源p；
window.onload=function（）{alert（"欢迎来到美淘网"）;}
（1）.jpg"width="300"height="300"alt="1"/>
浏览器默认处理程序
functionCheck（）
{
event.returnValue=false;
}
functionCheck（）
{
varusername=document.getElementById（"name"）.value;
if（username==""）
{
alert（"请输入用户名"）;
returnfalse;
}
returntrue;
}
window对象
window.alert（）;
varname=window.prompt（"请输入姓名：
"）;
window.alert（"欢迎"+name）;
确认对话框
varflag=window.confirm（"确认删除吗？
"）;
if（flag）
window.alert（"执行删除操作"）;
else
window.alert（"取消删除操作"）;
varnewWin;
window.onload=function（）
{newWin=window.open（"index.html","index",""）;
}
newWin.close（）">关闭窗口
闹钟函数
/*setTimeout（"alert（'Hello'）",2000）;*/
setInterval（"alert（'Hello'）",6000）;
感谢下载!
欢迎您的下载，资料仅供参考
《工程造价案例》期末考试复习题及参考答案.docx
