web开发知识点大总结
一、期末考试题型
①单项选择题，共20小题，每题1分，共20分。
②多项选择题，共5小题，每题2分，共10分。
③填空题，共10空，每空1分，共10分。
④简答题，共5小题，每题4分，共20分。
⑤程序题，共4小题，每题10分，共40分。
二、HTML部分知识点总结
1. Web开发基础知识：
（1）Web：全称World Wide Web，万维网。简称：Web，WWW，也称为网页。
Web开发：进行网页页面制作及其各项功能开发。
主流浏览器：IE浏览器、Firefox火狐浏览器、谷歌浏览器Chrome、Opera、苹果浏览器。
服务器：提供Web服务的计算机。根据用户请求将信息资源传递给用户的应用程序。
URL（网址）：统一资源定位符，互联网上标准资源的地址，可以从互联网上得到资源的位置和访问方法。
URL组成部分：协议、服务器地址（域名）、资源路径。三个部分是如何划分的。
网页：浏览器中打开的一个页面。网页本质：文本文件，扩展名是 .html或.htm
网站：相关网页的集合。
（2）网站的访问过程（网页的浏览过程）：
4个步骤。
（3）B/S和C/S应用程序：
B/S：浏览器/服务器模式应用程序
C/S：客户端/服务器模式应用程序
各自优缺点、典型应用
（4）HTML和CSS在网页开发中的作用：
HTML：控制网页结构
CSS：控制网页样式（CSS能够将页面的内容和样式分离）
JavaScript：控制网页行为
HTTP：控制网页双方传输规则（协议）
2. HTML基础：
（1）HTML：Hyper Text Markup Language 超文本标记语言
（2）描述网页与网页文件的联系及区别。
（3）学习html语言三要素，这三要素分别是什么？选择词汇说明之。
词汇、语法、语义。
（4）为什么要设计单双两种标签？每类标签举出几个例子。
双标签：代表标签作用范围。
单标签：无需表达范围，仅在标签出现处有效。
（5）HTML代码的基本结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>……</title>
</head>
<body>
</body>
</html>
（6）<head>标签的意义：浏览器中不显示具体内容，用来设置一些附加信息。
<body>标签：定义文档的主体，即网页显示的主要内容。
（7）哪些标签可以放在头部？
<meta />、<title>、<style>、<link />
（8）编码规范：
文件的扩展名是.html或者.htm。文件名中只可由英文字母、数字或下划线组成。所有的属性必须赋值，所有的属性值必须用引号括起来。
3. 构建页面内容（一）：
（1）文本相关标签：
<h1><h2>…<h6>、<p>、<br /> 注释：<!-- 注释内容 -->
实体符号： < >
在网页中插入文本的几种方式？
（2）图片相关：
图片：<img src="" alt="" /> src : 指明图像的存储位置（路径） alt : 为图片添加替换文本
图片热区：<map>、<area>
绝对路径、相对路径
（3）超链接相关：
<a href="" target=""> href：规定链接目标 target：在何处打开目标
target属性可以取的值有哪些? target默认值为_self
（4）列表相关：
无序列表<ul><li>
有序列表<ol><li>
默认的列表项符号
4. 构建页面内容（二）：
（1）表格相关：
标签：<table border="" cellspacing="" cellpadding="">、<tr>、<td rowspan="" colspan="">、<th>
创建一个表格至少包含哪三个标签？<table>、<tr>、<td>
相关属性：
<table>标签：border（边框），cellpadding（内边距），cellspacing（外间距），align（对齐方式）
<tr>/<th>标签：height（行高），align（对齐方式）
td标签：width（列宽），colspan="3"（跨列显示），rowspan="2"（跨行显示），align（对齐方式）
表格作用：展示数据；页面结构设计、布局（实验5）
注意：表格嵌套问题、跨行/跨列问题
（2）表单相关：
基本结构：<form action="" method="">
表单控件…
</form>
其中action属性：规定向何处发送提交的表单数据。值：URL。
method属性：规定以何种方式将表单数据传送到服务器。值：get/post
input类控件：<input type="" name="" value="" />
type属性的值可以是：text、password、file、radio、checkbox、submit、reset、button
文本输入框：<input type="text" name="" value="" /> name表示控件名称，value表示默认值
密码输入框：<input type="password" name="" value="" />
单选框：同组单选框name属性必须相同，value属性值不同，默认值checked
<input type="radio" name="sex" value="man" checked="checked" />男
<input type="radio" name="sex" value="woman" />女
多选框：同组多选框name属性必须相同，value属性值不同，默认值checked
<input type="checkbox" name="hobby[]" value="music" checked="checked" />音乐
<input type="checkbox" name="hobby[]" value="book" />读书
<input type="checkbox" name="hobby[]" value="sport" />运动
文件上传：<input type="file" name="" />（注意“未选择任何文件”之类的文字是此控件自带的）
提交按钮：<input type="submit" name="submit" value="提交" />
重置按钮：<input type="reset" value="重置" />（注意按钮上面文字是设置在value属性里的）
普通按钮：<input type="button" value="打开新网页" />
下拉列表基本结构：
<select name="">
<option value="">文本</option>
</select>
多行文本域：<textarea name="" rows="" cols=""> </textarea>
注意的问题：
同组单选框的name属性，多选框的name属性（[]）；value属性。
不同表单控件设置默认值的方法（input的value属性，textarea中间的内容，option的selected属性，单选/多选框的checked属性）
5. 构建页面内容（三）：
（1）音频：<audio src="" controls="controls" autoplay="autoplay"> </audio> 视频<video src=""> </video>
热区：在一张图片上定义多个超链接，不同区域应用不同超链接。设置热区的方法和注意事项？
<map name="" id="">
<area shape="" coords="" href="" />
</map>
内联框架：用于在网页内显示另一个网页文件。<iframe src="" width="" height="">
h5绘图动画：<canvas id="">
样式相关：<font color="" size="" face="">、align属性
（2）应用： 多级列表情况：下拉菜单基本结构
表格结构：根据示意图写出表格代码，使用表格对页面进行布局，尤其注意跨行跨列
表单结构：根据示意图写出表单代码
三、CSS部分知识点总结
7. CSS基础
（1）CSS：层叠样式表
为什么要使用CSS？网页结构（内容）与样式分离
（2）CSS基本选择器：
标签选择器：p { } 类选择器：.current { } id选择器：#idv { }
（3）CSS样式表的使用方法：
行内样式：只对当前标签有效 <p style="">……</p>
页内样式（内部样式）：对当前页面有效
<head>
<style type="text/css">
选择器样式
</style>
</head>
外部样式：对引用的页面有效 <link type="text/css" rel="stylesheet" href="……" />
三种方法的对比（各自的优缺点）
应用：已知有如下css样式：text-decoration:none;分别使用行内样式、页内样式、外部样式将此样式应用于html页面。
（4）优先级关系 ID选择器 > 类选择器> 标签选择器 行内样式>页内样式>外部样式 就近原则
（5）CSS注释：/* …… */
8. CSS基本样式修饰（一）：
（1）字体相关：font-family、font-size、font-weight、font-style、font
总结各属性可以设置的值
字体综合设置属性font的设置顺序：必须按照是否倾斜（font-style），是否加粗（font-weight）， 字号（font-size），字体（font-family）的顺序去设置。font: italic bold 2em '宋体';
（2）文本相关：color、text-decoration、text-indent、line-height、text-align
总结各属性可以设置的值
（3）超链接相关：a:link、a:visited、a:hover、a:active 设置顺序
（4）背景相关：background-color、background-image、background-repeat、background-position、background
（5）列表相关：list-style-type、list-style-image、list-style-position、list-style
（6）伪类 ： :link、:visited、:hover、:active、:focus
3. 应用：
（1）超链接的四种状态的设置：下划线问题。如：请为超链接的不同状态设置不同样式：
未访问时，背景图片为a.gif，无下划线。
鼠标经过时，显示下划线，背景图片变为b.gif。
访问过的超链接，背景图片为c.gif，无下划线。
点击超链接时，背景图片为b.gif。
（2）构造导航栏并设置导航栏样式：下划线、背景颜色/背景图片
（3）文字水平居中
9. CSS基本样式修饰（二）：
（1）背景相关：背景颜色、背景图像
background-color: #f00; 背景颜色为红色
background-image: url(images/banner.jpg); 背景图片，注意语法
background-repeat: no-repeat; 背景图片的重复（平铺）效果（repeat、repeat-x、repeat-y、no-repeat）
background-position: center top; 背景图片的位置（center、left、right、top、bottom）
background-position: 50% 50%; 属性值也可以是百分比，或像素值
background: #f00 url(images/banner.jpg) no-repeat center center; 无顺序
若同时设置背景颜色和背景图片，两个都会显示，只是背景图片会覆盖背景颜色；若背景图片不能铺满整个区域，则背景图片不能铺满的区域将会显示背景颜色
（2）列表相关样式：
list-style-type: none; 列表项目符号类型（none、square、circle、decimal）
list-style-image: url(images/list.gif); 用图片表示列表项目符号
list-style-position: outside; 列表项符号位置。 默认为outside，背景不包括项目符号；若设置为inside，背景会包括项目符号
list-style: square inside url(images/arrow.gif); 综合设置，无顺序
应用：超链接、背景样式、超链接样式结合起来容易出制作导航条的题
四、布局相关
10. CSS盒子模型
（1）盒子在web中的作用：
内容的容器；通过盒子与盒子的嵌套、堆叠，控制页面内容的布局。
（2）每个盒子都具有的特征？宽width、高height、边框border、内边距padding、外边距margin
哪些元素具有盒子模型的特征，哪些不具有？
（3）行内元素与块级元素的特征分别是什么，如何进行二者的转化？
display: block; 以块级形式显示元素 display: inline; 以行内形式显示元素 display: none; 不显示元素
常见的块级元素：div, p, h1~h6, ul, li, table, form
常见的行内元素：a, span, img，input, select
（4）盒子模型：
边框相关样式：
四个方向边框：border-top、border-right、border-bottom、border-left
边框的三个属性：border-width、border-color、border-style
border-top-color: #f00; 上边框的颜色是红色
border-top: 1px solid #f00; 上边框属性是：宽度1px，颜色红色，样式实线
border: 1px solid #f00; 四个方向边框一致
宽度和高度：
width: 80%; 宽度为父元素的80% min-width: 200px; 最小宽度 max-width: 1000px; 最大宽度
height: 300px; 高度为300px（可以选择auto，表示随内容的多少而自适应）
内边距：
四个方向：padding-top、padding-right、padding-bottom、padding-left
padding-top: 10px; 上内边距是10px
padding: 10px 20px 30px 40px; 四个方向（上，右，下，左）
padding: 10px; 四个方向内边距均为10px
padding: 10px 20px; 上/下内边距10px，左/右内边距20px
外间距：
四个方向：margin-top、margin-right、margin-bottom、margin-left 均和内边距类似
外间距可以是负数值，而内边距不能使用负数值
11. 网页布局
（1）描述网页布局思想。从大到小，整体到局部，应用盒子模型特征与浮动构建页面布局。
（2）浮动布局float、clear、overflow：
float: left或right; 元素向左（或右）浮动
clear: left或right或both; 清除相应方向浮动对后续元素的影响，该样式属性在已浮动的后续元素中使用
overflow: hidden; 若子元素浮动后，将不再属于父元素（导致父元素高度为0）；可以在父元素中添加该属性，这样父元素仍然包含子元素（高度不再为0，高度为子元素的高度）
（3）定位布局position：
position: fixed; 相对于浏览器窗口绝对定位
position: absolute; 相对于已定位的第1个父元素绝对定位
position: relative; 相对于自身原始位置相对定位
top: 定位元素向下走多少距离；bottom：定位元素向上走多少距离
left：定位元素向右走多少距离；right：定位元素向左走多少距离
（4）顺序堆叠z-index：
z-index: 100; 元素的显示顺序；该值越大，则该元素越在视野上方显示（离眼睛越近）
12. 网页布局实战
（1）网页设计基本流程
（2）两个导航条的例子
13. 浏览器兼容性
（1）解决兼容性问题的原则（思路）：
使用合适的文档声明
针对标准浏览器编码代码（chrome或firefox）
使用校验工具校验HTML和CSS
使用开发者工具调试代码
（2）兼容性问题解决方法：CSS Hack
IE条件注释
CSS属性前缀或属性值后缀
CSS选择器前缀
14. UI常识
（1）UI系统和VI系统概念
（2）分辨率
（3）图片格式
（4）网页组成部分：
网页顶部：logo、导航栏、banner、搜索框、注册登录入口、……
网页正文：内容、栏目、快速导航、搜索、广告、面包屑、……
网页底部：友情链接、版权信息、……
（5）交互设计的原则：
统一性：风格统一、导航统一、操作统一
醒目性：文字醒目、信息醒目、功能醒目
便利性：导航、搜索、文字、指示标与面包屑、反馈、控件、扩展和维护、广告
五、代码设计题
1. 表格和表单综合使用。
2. 二级列表（下拉菜单）的HTML代码结构。
<ul>
<li>首页</li>
<li>
新闻
<ul>
<li>国内</li>
<li>国际</li>
</ul>
</li>
</ul>
3. 水平导航栏的实现。
（1）HTML代码：
<ul class="nav">
<li><a href="index.html">首页</a></li>
<li><a href="">国内</a></li>
<li><a href="">国际</a></li>
</ul>
（2）CSS代码：
ul, li {
list-style: none;
}
ul {
overflow: hidden;
}
li {
float: left;
width: 50px;
}
a:link {
display: block;
}
a:hover {
…
}
4. 竖直导航栏的实现。
（1）HTML代码结构：
<ul class="nav">
<li><a href="index.html">首页</a></li>
<li><a href="">国内</a></li>
<li><a href="">国际</a></li>
</ul>
（2）CSS样式：
ul, li {
list-style: none;
}
li {
width: 50px;
height: 60px;
text-align: center; /* 水平居中 */
line-height: 60px; /* 垂直居中 */
}
a:link {
background: url(images/bg1.jpg);
}
a:hover {
background: url(images/bg2.jpg);
}
5. 两列布局的实现。
（1）HTML代码结构：
<div id="content">
<div id="left">……</div>
<div id="right">……</div>
</div>
（2）CSS样式代码：
#content {
overflow: hidden;
}
#left {
float: left;
width: 30%;
border: 1px solid #ccc;
}
#right {
float: left;
width: 68%;
border: 1px solid #ccc;
}
6. 三列布局的实现。
7. 图文混排。
（1）HTML代码结构：
<div id="content">
<img src="" alt="" />
<div>……</div>
</div>
（2）CSS样式：
#content img {
float: left;
}
8. 基本样式修饰。
9. 垂直居中问题。
（1）HTML代码结构：
<li>……</li>
（2）CSS样式：
li {
height: 60px;
line-height: 60px;
}
10. 水平居中问题。
（1）HTML代码结构：
<div id="content">
<div id="center">……</div>
</div>
（2）CSS样式：
#content {
width: 1000px;
}
#center {
width: 800px;
margin: 0 auto;
}
文章来源: fantianzuo.blog.csdn.net，作者：兔老大RabbitMQ，版权归原作者所有，如需转载，请联系作者。
原文链接：fantianzuo.blog.csdn.net/article/details/126889715
- 点赞
- 收藏
- 关注作者
评论（0）