青岛理工大学Web前端开发技术期末复习大纲.docx

1、第一篇 HTML 1. 页面的头部标记： 1) head：包含title meta 等标记，内容不会直接显示在网页上2) title：设置网页标题3) metaa) 关键字(name=”keywords” content=” ”)b) 描述信息(name=”description” content=” ”)c) 字符集(忽略此处-equiv=”Content-Type” content=”。”)d) 自动刷新(忽略此处-equiv=”refresh” content=”3”页面每隔3秒刷新一次)2. 主体标记a) 可以设置网页正文颜色与背景b) 可以设置网页背景图片c) 可以设置网页链接文字颜

2、色d) 可以设置网页边距3. 常用的文字与段落标记（【注意水平线标记和标题标记的差别】）4. 列表标记：a) 有序列表 ，ol的 type属性和start属性，注意start属性值，start=1表示项目序号从1开始，start=2表示项目序号从2开始b) 无序列表 c) 定义列表5. 图片标记6. 多媒体：文字滚动的属性，如direction=”right”表示从左到右滚动7. 超链接、书签a) Href 属性指定超链接的目标端点，目标端点可以是其它网页、本网页中的书签、其它网页中的书签b) Name属性定义书签名c) target属性指定目标窗口8. 表格标记：跨行、跨列、嵌套表格9. 表

3、单标记：单行文本框元素、密码元素、提交按钮、重置按钮。的设置方法第二篇 CSS1. 选择器的类型、优先级2. CSS在HTML中的应用方式3. 盒子模型：boder、padding、margin属性；浮动与定位第三篇 Javascript1. 在HTML中的应用方式2. 常用的数据类型、内置对象3. 常用的运算符4. 函数的使用5. 浏览器对象：window、document6. Form对象的使用、获取子元素的途径重要习题1. P106， 示例10-16，10-17 （表格）2. P261, 示例22-14 (javascript-form)3. P317, 第26章4. P334，第27章

4、5. 如下图所示的灰色（gray）十字架可以采用2个DIV制作得到，根据如下的HTML代码，完成该页面中的CSS属性设置（注：十字架的位于页面的中央）。答案：#heng,#shuleft:50%;top:50%;position:absolute; background-color:gray;#shuwidth:50px;height:150px; margin: -75px 0 0 -25px;#hengwidth:150px;height:50px; margin: -25px 0 0 -75px;6. 实验三的内容（答案见附件）7. 某页面中的内容如下： logo内容，宽200px,高1

5、00px 菜单内容，宽550px,高20px flash内容，宽800px，高150px 边栏内容，距顶280px，宽200px，高250px 主要内容，距顶280px，宽570px，高250px 页脚内容距离边栏和主要内容的下边缘20px，宽度800px依据每个div块中的格式要求，完成该页面中的CSS属性设置，使页面的显示效果如下图所示（注：页面整体居中，其中所有边框宽度为1px）：答案：body text-align: center;body * border: black 1pt solid;#container width: 800px;position: relative;marg

6、in: 0 auto;#head position: relative;width: 800px;#logo float: left;width: 200px;height:100px;#menu padding-top: 80px;width:550px;height:20px;float: right;width:#flash width: 800px;height: 150px;clear:both;#aside position: absolute;top: 280px;width: 200px;height: 250px;margin: 0; left:0;#main position: absolute;top: 280px;width: 570px;height:250px;margin: 0;right: 0;text-align: left;#footer width: 800px;position: absolute;top: 550px;margin: 0px;padding: 0px;