#第一章 Web基础知识
Web开发基本概念
1、万维网是一个由许多相互链接的超文本组成的系统，通过互联网访问。
2、web：worldwideweb，万维网，简称web，www，通常称为网页。
3、web开发：进行网页页面制作及其阁下你给功能开发。
4、浏览器：显示网页内容，并让用户与这些文件交互 一种软件。（常用：IE、谷歌、火狐）
5、web服务器：提供web服务的计算机。
6、URL（统一资源定位符）：互联网上标准资源的地址，可以从互联网上得到资源的位置和访问方法。
组成：协议、服务器地址、资源路径。
7、网页文件的扩展名：html、htm。文件内容：HTMl代码和文本内容。
8、网页：浏览器中打开的一个页面。网站：一组域名相同的网页的集合。
9、B/S架构：不需要下载客户端，通过URL访问。有跨平台能力。无缝升级，客户端免维修。不能直接使用客户端硬件资源，用户体验单一。
10、C/S架构：需要安装特定的客户端程序。针对不同平台开发不同版本。升级应用需要重新安装。充分应用客户端硬件资源，构建大型3D效果应用。
11、互联网发展：web1.0 web2.0 移动互联网
12、web开发过程：项目提出、需求分析、设计（UI设计、系统设计）、开发（前端开发、后台开发）、系统测试、发布维护。
13、网站类型：(1)、按网站主体性质划分：政府网站、教育科研网站、企业网站、商业网站、个人网站
(2)、按网站功能划分：宣传展示型网站、营销型网站、电子商务、网上购物、门户网站
14、树形结构：有主页有分支有叶子。扁平结构：扁平结构可以理解为是一种特殊的树形结构， 只有主干和树叶，是当前流行的一种网站结构，对 搜索引擎特别友好。
15、页面分类：首页：也称主页，是一个网站的入口网页。
列表页：一般都是二级页面，是栏目的具体展示页。
内容页：一般就是具体内容的页面。
16、页面元素：文字、表单、视频、图片、音频、动画。
万维网:www，通常也称网页。
网页：浏览器中打开的一个页面。
网站：一组域名相同的网页的集合。
浏览器：显示网页内容，并让用于与这些文件交互的一种软件。
服务器：提供web服务的计算机。
URL：统一资源定位符，协议、域名、资源路径。
网站访问过程：
⑴ 通过输入网址（URL）指定要访问的网页。
⑵ 浏览器向服务器发送请求：请把XXX网页文件传送给我。
⑶ 服务器做出响应：把XXX网页文件传送给浏览器。
⑷ 浏览器解析网页文件，呈现出网页。
软件架构分类及各自特征：
B/S架构
无需安装特定客户端程序，通过URL访问
跨平台能力（Windows、Linux、Android、IOS…）
无缝升级，客户端免维护
不能直接使用客户端硬件资源，用户体验单一
C/S架构
需要安装特定客户端程序
针对不同平台开发不同版本
升级应用须重新安装
充分应用客户端硬件资源，构建大型3D效果应用
web系统开发过程，及相关知识体系。
项目提出--需求分析--设计（UI、系统）--开发（前端、后台）--系统测试--发布/维护
网站类型
主体性质（政府网站、教育科研网站、企业网站、商业网站、个人网站）
功能划分（宣传展示型网站、营销型网站、电子商务、网上购物、门户网站、企业门户、在线 交易平台、政府门户）
网站结构（树型结构、扁平结构（特殊））
网站页面
页面分类（主页、列表页、内容页）
页面元素（文字、图片、表单、视频、 音频、动画）
学习Web开发的意义
掌握HTML、CSS语言
能够构建内容丰富、界面美观的Web页面
掌握相关开发、调试工具的使用方法
为后续Java、PHP等 课程打下基础
#第二章 HTML语言基础
网页与网页文件。
网页：浏览器中打开的一个页面
网页文件：文本文件，扩展名html、htm，内容为HTML代码和文本内容。
网页与网页文件的关系：浏览器中看到的网页实质为：网页文件
网页页面的组成：内容+结构。
HTML简介
语言特点
发展过程
应用领域
HTML基本语法：语法、语义、词汇。
HTML标记分类（单/双标记），HTML属性的概念。
HTML文档结构（文档声明、html、head、body、title、meta）。
开发工具简介
编辑器
浏览器
浏览器开发工具
帮助手册
#第三章 构建页面（一）
网页元素包含内容：图片、文字、列表、超链接
在网页中插入文字（文字、实体、注释）
标题<h1>--<h6>
段落<p>
换行<br/>
水平线<hr/>
实体:
< > & "
注释:<!--...-->
在网页中插入列表及相关属性的设置。
有序列表
<ol>
<li>..</li>
</ol>
无序列表
<ul>
<li>..</li>
</ul>
#第四章 构建页面（二）
在网页中插入图片及常用相关属性（src、alt）。
在网页中设置热区。
<img src="#" alt=".." usemap="#ming">
<map name="ming" id="ming">
<area shape="circle" coords="180,139,14" href="url" alt=".."></area>
<area shape="rect" coords="0,0,110,260" href="url" alt=".."></area>
<area shape="toly" coords="180,139,14" href="url" alt=".."></area>
</map>
·id属性和name属性表示名称，设置为相同值，与<img />标签的usemap属性匹配。创建 图像与热区之间的关系
·alt属性：该区域的替代文本；
shape属性：该区域的形状；（rect、circle、poly）
coords属性：该区域在原始图片上的坐标值。
href属性：该区域的链接地址；
在网页中插入超链接及常用相关属性（href、target）
href:链接地址
target：目标窗口在何处打开
_blank：在新窗口打开
_self：在当前窗口打开
_parent：在父窗口打开
_top：在顶层窗口打开
锚的应用。
锚点：网页中的某一位置。
锚点链接：在同一个页面跳到指定位置的方式。
创建锚点链接：
①建立锚点
<a name=“锚点名称”>锚（显示在页面上的文本）</a>
②创建指向该锚的链接
<a href=“#锚点名称”>……</a>
相对路径、绝对路径的概念。
在网页中使用内联框架（iframe）。
<iframe>标签的常用属性是:
src：文件的路径
width： “内联框架”区域的宽度
height：“内联框架”区域的高度
scrolling：规定是否在 iframe 中显示滚动条：
No：不出现滚动条 Yes：显示滚动条 Auto：自动出现滚动条
frameBorder：设置是否显示框架的边框。(1，0)
name：框架的名字，用来进行识别。
<iframe src="URL" width="x" height="y" scrolling="[OPTION]" frameborder="x" name="main"></iframe>
#第五章 构建页面（三）
在网页中插入表格及简单样式修饰。
词汇(标签)：<tr></tr>
语法：1. 成对出现 2. 嵌套于<table></table>标签内
语义：定义一行
词汇(标签)：<th></th>
语法：1. 成对出现 2. 嵌套于<tr></tr>标签内
语义：定义表头
词汇(标签)：<td></td>
语法：1. 成对出现 2. 位于<tr></tr>内
语义：定义一个单元格
相关属性
width:规定表格元素的宽度（pixels或%）
bgcolor：表格背景颜色
background：表格背景图
align：表格的对齐方
border： 表格边框的宽度（pixels）
bordercolor：表格边框的颜色
cellpadding : 单元边沿与其内容之间的距离
cellspacing : 单元格之间的空白（pixels或%）
colspan:跨列
rowspan:跨行
在网页中插入表单及简单样式修饰。
标签：<form action="" method=""> </form>
action：规定当提交表单时向何处发送表单数据 值：URL
method：规定用于发送 form-data 的 HTTP 方法。 值：get/post
标签：<input type=".." name=".." value="..">
text
password
radio
checkbox
file
submit
button
reset
<textarea rows="3" cols="2">...</textarea>
<select name="..">
<option value="..">..</option>
<option value="..">..</option>
<option value="..">..</option>
</select>
#第六章 HTML4.01与HTML5
HTML5与HTML4.01。
<object> 定义嵌入对象 html4 html5
<emject> 定义外部交互内容或插件 html5
<audio> 定义声音内容 html5
<video> 定义视频 html5
HTML多媒体概述。
video与audio
object与embed
多媒体元素基本属性和常用方法。
Canvas基础知识。
使用canvas绘制简单图形。
HTML样式修饰性标签介绍
font规定文本的字体、字体尺寸、字体颜色。
< font color=“red” size=“5” face=“黑体”>< /font >
strong用于强调文本
<strong>你好</strong>
b规定粗体文本
<b>你好</b>
#第七章 CSS语言基础
为什么使用CSS。
1、针对元素样式设置的属性太少
2、修改元素样式太麻烦
3、控制元素样式的代码冗余度过高
更专业的样 式修饰方法
更简约的布 局方法
更简便的样 式修饰方法
改一处动全局的方法
CSS简介。
CSS是 Cascading Style Sheet 的缩写。译作 「层叠样式表」。 是用于(增强)控制网页样式 并允许将样式与网页 内容分离的一种标记性语言。
CSS的基本语法：CSS代码是由一条条语句构成，而每一条语句的结构，都基本相同
样式写法：选择器 {属性：属性值；属性：属性值；..... }
选择器
1、标签选择器——选择器是HTML标签。影响整个页面中该种标签的样式。
2、类选择器——以“.”开头定义的选择符。影响所有以class属性引用该类的标签样式。
注意：类名的第一个字符不能使用数字
元素可以加入多个类。把各个类名放在class属性中，各个类名之间用一 个空格分 隔。类名的顺序并不重要。
3、id选择器——以“#”开头定义的选择符。影响以id属性引用该选择符的标签样式。
单一页面中，一个id选择器只能使用一次！
样式表
1、行内样式——在元素标签内通过style属性添加样式
用途：指定网页中个别元素的显示效果。不符合 样式与内容分离原则不推荐用
2、页内样式——在head部分的style标签内添加样式
用途：对页面中某些标签或元素设置样式风格。控 制当前页面样式，维护较困难
3、外部样式——引用外部建立的.css文件
用途：可同时控制多个页面，适用于各类大型网站， 可用性最强，推荐使用。
样式优先级：
1、ID选择器 > 类选择器> 标签选择器
2、行内样式>页内样式>外部样式
3、就近原则，距离元素最近的样式优先级最高
注释方法： /*…*/ 多行注释
多个样式，在同一内容上共同实现， 叫做：CSS样式的叠加
文档中的某些元素，将沿用为其父元素所设置的 样式，这种特点叫做：CSS样式的可继承性
结构和样式分离思想。
CSS基本应用示例。
#第八章 文本样式和字体样式
CSS字体相关类样式修饰。
字体系列：font-family：‘宋体’，‘仿宋’；
字体大小：font-size：20px;(2em;)
字体风格：font-style:italic(normal\italic\oblique);
字体加粗：font-weight:900;(100~900;)(lighter\normal\bold\bolder)
字体综合设置：font:italic bold 36px '宋体';
CSS文本类样式修饰。
文本缩进：text-indent:2em;(20px;)
水平对齐：text-align:left(right\center)
文本修饰：text-decoration:none;(underline\line-through\blink)
文本颜色：color:red;(#000000;)
行高：line-height:2em;(20px;)
#第九章 超链接和伪类
CSS超链接的修饰。
未被访问的超链接a:link
鼠标经过超链接a:hover
链接被点击的那一刻a:acitve
访问过的超链接a:visited
特定顺序设置： :link ，:visited，:hover, :active
超链接应用
CSS伪类的使用方法。
CSS伪元素的使用方法。
#第十章 背景样式和列表样式
CSS背景类样式修饰
背景色：background-color
关键字（gray）
十六进制表示方式（#808080）
rgb表示方式，如：rgb（128,128,128）
背景图像：background-image
background-image:url(images/f1.png)
背景重复：background-repeat:repeat-x;
repeat;默认
repeat-x;
repeat-y;
no-repeat;
inherit;继承父元素
背景定位：background-position:50%50%;
center
top
bottom
right
left
背景综合属性：background
background:red url(images/11.png) no-repeat center;
CSS列表类样式修饰
列表类型：list-style-type
none 无
circle 空心圆
square 实心方块
decimal 数字
lower-alpha 小写英文
列表项图像：list-style-image
url（images/f1.png）
列表标志位置：list-style-position
outside
inside
列表综合设置
list-style:square inside url(images/f1.png)
#第十一章 网页布局
布局简介: 网页布局是指网页内容 在页面上所处位置的设计。
布局概念
页面尺寸：
分辨率:800x600时，页面尺寸:780x428个像素
分辨率:640x480时，页面尺寸:620x311个像素
分辨率:1024x768时，页面尺寸:1005x600个像素
布局常见版式
布局的方法
布局思想：由整体到局部
结构性标签div、span
Div
• div相当于一个容器（盒子）
• div标签可以把文档分割为独立的、不同的部分
• 通过id或class属性区分不同的容器
div具有盒子模型的所有属性， 布局时用来控制元素之间的距离和相对位置
应用浮动float
浮动：定义元素在哪个方向浮动，改变页面中对象的前后流动顺序
Left 左浮动
Right 右浮动
None 不浮动
Inherit 继承父元素float属性
float所产生的问题
1. 浮动元素距离父元素边框的位置，是该侧的父元 素padding+自身margin的值
2. 通常不会超过父元素的边界
3. 元素一旦浮动就不属于父元素了
4. 浮动元素不会相互重叠
5. 不能上下浮动，通常只设一种浮动即可
6. 如果父元素宽度不够，浮动元素会另起一行显示。
Overflow
1、父元素不设高度并且子元素浮动时，使父元素高度自 动适应子元素高度。
2、父元素设置的高度或宽度小于子元素时，使父元素出 现相应滚动条或隐藏子元素超出部分内容
Clear
用来设置该元素边上没有其他元素可以浮动
clear: left / right / both / none
相对定位、绝对定位
✓ 绝对定位
✓ position:absolute
•1、与left，right，top，bottom等属性共同使用
•2、如果父元素未设置position属性，则以浏览器 窗口左上角为起始位置
•3、如果父元素设置了position属性，则以父元素 左上角为起始位置
✓ 相对定位
✓ position:relative
•1、与left，right，top，bottom等属性共同使用
•2、以自身本应在的位置为起始位置
float和position相似点：
1、都是将元素浮动起来
2、元素一旦设置就与父元素没关系了 float和position
不同点：
1、position与top、left等配套使用
2、float位置移动通过margin、padding等实现
3、overflow和clear对position无效
4、布局通常使用float，而不是position
布局示例。
#第十二章 CSS盒子模型
行内元素、块级元素的概念及display属性的用法。
CSS盒子模型简介。
Web中的盒子：一个矩形区域，内容包裹在盒子中。盒子的 堆叠与嵌套形成整个页面的内容排布。
盒子模型
宽度
高度
边框
内边距
外边距
根据HTML元素的显示特征，可分为：
➢块级元素（block level element）
• 元素在显示时会独占一行，并同时具有宽、高、内外边距特征。
• 举例：form – 交互表单 ，h1 – 1级标题 ，hr – 水平分隔线 ，p – 段落 ，table – 表格 ，ul – 无序列表
➢行内元素（inline element）
• 在显示时通常不会以新行开始，横向排列，到最右端自动折行。
• 举例：a – 链接 ，img – 图片 ，input – 输入框 ，select – 项目选择 ，font – 字体设定 ，b – 粗体 ，i – 斜体 ，strong – 粗体强调
Display：block/inline/none；
border-top 上边框
border-right 右边框
border-bottom 下边框
border-left 左边框
➢边框的宽度：border-width
➢边框的颜色：border-color
➢边框的样式：border-style
border-width：20px；四面
border-width：20px 10px；上下，左右
border-width：20px 10px 5px 10px；上右下左
复合
border：width style color； border:1px solid #cccccc；
padding、margin与border相同
#第十三章 CSS高级内容
CSS高级选择器
分组选择器
派生选择器
属性选择器
后代选择器
子元素选择器
相邻兄弟选择器
导航栏
图片库
图片透明
CSS颜色
CSS单位
网络安全字体
CSS听觉参考手册
#第十五章 浏览器兼容性调整
浏览器兼容性问题简介。
常见的浏览器兼容性问题。
1、网页居中问题。问题症状：IE6下常规设置无法使页面居中。
解决方案：body{text-align:center}
2、某些浏览器不支持某些属性。问题症状：IE6下不支持min-width、max-height等属性。
解决方案：具体情况具体分析
3、png透明图片支持问题。问题症状：IE6下不支持透明图片。
解决方案：js方法或css滤镜
4、不同浏览器的标签默认的外边距和内边距不同。问题症状：不加样式控制的情况下，各自的margin 、padding、p等差异较大。
解决方案：CSS里 *{margin:0; padding:0;}
5、块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
问题症状：常见症状是IE6中后面的一块被顶到下一行。
解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性；或使用hack方法
CSS Hack跨浏览器解决方案。
1、使用合适的文档声明（DOCTYPE）
2、对标准浏览器进行兼容
-
- 编写代码时，要了解客户群的浏览器使用情况。
- 编写代码时，以标准浏览器（Firefox/Chrome）为参考，暂时不考虑特殊浏览器行为（IE6类）。
- 一般情况下，先做一些通用设置，把兼容性问题扼杀在萌芽中。
3、标准的网页代码
-
- 尽量使代码符合w3c标准
- 借助w3c提供的HTML验证器和CSS验证器对代码进行网上标准化验证
4、借助浏览器开发者工具调试
IE条件注释。
1、HTML头部引用Hack（条件注释法）
<!--[if IE]>这段文字只在IE浏览器显示<![endif]-->
<!--[if IE 6]>这段文字只在IE6浏览器显示<![endif]-->
<!--[if gte IE 6]>这段文字只在IE6以上(包括)版本IE浏览器显示<![endif]-->
<!--[if ! IE 8]>这段文字在非IE8浏览器显示<![endif]-->
<!--[if !IE]>这段文字只在非IE浏览器显示<![endif]-->
2、CSS类内部Hack（类内属性前缀法）
属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。
#第十六章 网页视觉设计
网页布局
网页尺寸
栅格布局（页面栅格、产品栅格）
- 栅格系统
- 栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。（维基百科）
- 网页设计中的栅格系统
- 以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。
栅格系统的设计原理及应用
-
- 在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A” 。
留白
１、版块间距均为10px
２、版块与内容间距为10px
３、内容单元之间间距为10px
4、内容的间距均为10px
网页风格
版式（轴型、自由型、框型、T字型、标准T字型、同字型、混合型）
1、轴型：图片和文字内容集中在页面的中轴位置，可以是横轴也可以是纵轴分布。
2、焦点型：图片和文字集中在页面的某一位置，用对比强烈的颜色或者图片表达。
3、格型：图片和文字被比较均匀的方格所划分。
4、框型：主要内容在中间的较大区域，而导航栏和常规栏目则分布在类似边框的周围区域。
4、自由型：没有固定的版式和风格，完全随意安排文字和图片的位置。
5、混合型：两种或两种以上的页面版式结合使用。
风格
欧美风格
欧美国家惯用的设计风格，一类简洁明了、色彩单一；一类构图复杂、色彩浓烈。
韩国风格
韩国惯用的界面设计，色彩清爽、多用蓝、绿色、多用大图片、渐变色、人物和卡通矢量图。
中国风格
具有中国古典风格的设计，古色古香，以具有中国特色的花纹或图案来装饰。
网页用色（色彩原理、色彩的心理感受、网页色彩运用）
网页设计趋势
#第十七章 网页元素设计
文字设计
字体、字体
标题、正文文字设计
文字颜色
行、与段落
图片设计
logo设计
banner设计
背景图片设计
网页配图
图文混排
表单设计
Tab设计
按钮设计
图标设计
#第十八章 网页设计规范
页面规划
尺寸兼容
栏目
布局
页面元素
颜色运用
创意设计
细节设计
交互设计
统一设计
醒目
用户体验友好性设计
