网页设计复习
网页设计复习
第一单元 网页设计基础
1、 url 统一资源定位符
2、 网站的制作流程：客户的需求分析 策划方案 制作 测试 使用 售后
3、 HTML 超文本标记语言
4、 制作网页的工具：1、记事本 2、Dreamweaver 3、sublime 4、 vs
5、 网页基本结构
<DOCTYPE html>---文档类型声明
<html>---- 结构
<head>----头部
<meta charset=”UTF-8”>---字符编码：UTF-8英文版国际通用GB-2312或GB-2313简体中文版
<title></title>---网页标题
</head>
<body>
</body>----主体
</html>
注意：1、标签不区分大小写
2、标签分为单标签和双标签
3、标签要写尖括号里，用/ 结束（闭合）
4、内容放在双标签之间
6、 标签的分两类： 单标签和双标签
单：meta img hr br
双：html body title
7、 站点
1、 必备的文件 index.html主页 (或 default.html 默认主页) style.css
2、 常用站点文件夹 css html images
8、 文件和文件夹的命名规则
1、 只能用字母 下划线 数字
2、 不能用中文
3、 不能数字开头
4、 最好见名知意
PS部分
1、 专业的切图工具：切片工具
2、 网页图片三种格式：png(支持透明) gif(支持透明) jpg(jpeg) 颜色丰富成千上万种
3、颜色有三种表示方式：
1、英文单词
red红色 green 绿色 blue蓝色
2、十六进制
#000000 简化#000 黑色
#ffffff 简化#fff 白色
#f00 = #ff0000红色 #0f=#00ff00绿 #00f=#0000ff蓝色
3、RGB
例如 rgb（255,0,0）红色，最大不超过255
4、PS快捷方式
1、F8显示隐藏信息面饭
2、Ctrl+R显示隐藏标尺
3、Ctrl+T 自由变换
4、Ctrl++放大 Ctrl+-缩小 Ctrl+滚轮
5、Ctrl+A 全选 Ctrl+C复制 Ctrl+V 粘贴 Ctrl+X 剪切 Ctrl+P打印
第二单元 标签的属性和属性值
1、 标签的属性：标签的特征。
属性值：为标签赋的值。
<标签名 属性1=”属性值1” 属性2=”属性值2” 属性3=”属性值3”></标签名>
注意：1、属性与属性值之间用=相连
2、标签名与属性之间用空格隔开
3、属性值放在双引号或者单引号之间（英文状态）
4、多个属性之间用空格隔开
5、属性一定要放在起始标签
2、 标题标签
<h1>~<h6>
字号最大<h1></h1>字号最小<h6></h6>
属性：align:left(默认) center right;
3、 段落P
<p align=”left center right ”></p>
4、<img>图片 属性
1、src路径
2、width宽度
3、height高度
4、Alt 图片非正常显示时提示文字信息
5、title 鼠标滑过时文字提示 所有标签都有title属性 除<br/>无title
6、border边框
5、hr水平线属性
1、color颜色
2、size粗心
3、width宽度
4、align水平对齐方式
6、常用的文本标签
B 加粗 I 倾斜 U下划线 em强调倾斜 strong 强调加粗
<font size=”1-7” color=” ”></font>字
1、 Size大小 1-7
2、 color 颜色
7、特殊符号
1、&emsp ; 一个字空格
2、   ; 英文半角空格
3、© ; © 版权
4、® ; ® 注册
5、< ; <小于号
6、> ; >大于号
8、路径分为：相对路径和绝对路径
相对路径：例如： images/tp.png css/style.css www.baidu.com
绝对路径: 例如: c:\web\images\tp.jpg http://www.sina.com
9、 代码注释html
<!—注释的内容-->
注释作用：解释说明代码的用途。
注意：注释里面的内容，浏览器不执行、不解析、不显示。
CSS代码注释
/*注释内容*/
第三单元 列表和超链接
一、超链接
1、 超链接 <a href=”#”></a>
属性：href超链接的路径
target打开方式
1_self原窗口（默认值） 2、_blank新窗口 3 、top 主框架4、parent父框架
2、 关系：一对一；
3、 链接源：文字和图片。
4、 超链接类型: 邮件超链接 空链接 锚点链接 图片链接 下载链接
二、列表
1、列表的类型：无序列表 有序列表 自定义列表
无序<ul type=””> 类型：默认实心圆disc 正方块square 空心圆circle
<li>列表项</li>
</ul>
2、有序列表<ol type=”” reversed=”” 反转属性 start=”数字”> 类型 数字1 罗马字符I II 字母A a I i
<li>列表项</li>
</ol>
3、 自定义列表
<dl>
<dt></dt>定义项
<dd></dd>描述项
</dl>
第四单元 表格
1、表格标签<table></table>
表格基本结构
<table>
<tr>
<th></th>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
单元格:th标题单元内容自动加粗居中 td 普通单元格
2、table属性 表格
1、width 2、height 3、border 边框 4、align 对齐 5、bgcolor背景色
6、cellspacing单元格间距默认2px 7、cellpadding单元格边距 (表格特有属性)
3、tr 属性 行
1、height 2、align 对齐方式 3、bgcolor背景色 4、valign垂直 值：top middle bottom
4、td单元格 属性
1、width 宽 2、align 水平对齐方式 3、bgcolor背景色 4、valign垂直 值：top middle bottom 5、colspan 水平合并（合并列）6、rowspan垂直合并（合并行）
|
垂直 （合并行） |
水平（合并列） |
|
|
|
|
||
|
|
|
|
|
时代 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
注意：默认单元格内容对齐方式：水平靠左垂直居中;
cellspacing 属性设置单元格间距，默认值为2px;
cellpadding 属性设置单元格边距，默认值为1px.
5、1像素细线表格制作步骤：
1、第一步：给表格添加背景色bgcolor（细线颜色）;
2、第二步：给单元格添加背景色bgcolor（一般给tr加）;
3、第三步: border为0,cellspacing单元格间距为1
第五单元 表单form
一、 form
<form action=”” target=”” ></form>
属性：action提交地址 target提交方式 :_self原窗口 _blank新窗口
二、 常用表单控件
1、<input >输入框
属性：type 类型 value赋值 name checked默认选中
注意：placeholder表单新增属性 模糊提示
Checked默认选中
2、常用的表单控件
1、text文本框
2、password密码框
3、radio单选框 Checked默认选中（如果实现单选必须放在同一组 name=“”给相同名字）
4、CheckBox复选框Checked默认选中
5、<select><option selected=“默认选中”>1月</option>2月<option></option></select>下拉列表
6、file文件域
7、image图像域按钮
8、按钮类型：submit提交 reset重置 button普通按钮
9、<textare cols=”宽度/列” rows=”高度/行” maxlength=“最大字符数”> </textare>多行文本域
10、hidden隐藏
3、新增的表单控件
1、email邮箱
2、url网址
3、tel电话
4、number数值
5、date日期
6、search搜索
第六单元 CSS
一、 css （cascading style sheets）层叠样式表，控制网页的外观。
二、 css样式。
1、 行内样式 例：<p style=”color:red;”></p>
2、 内嵌样式 <style><style>
3、 外部链接 <link href="css/style.css">
4、 导入样式 <style> @import url(css/style.css); <style>
注意： 1、属性和属性值之间用冒号
2、属性值放在双引号里
3、属性值后用分号结束
优先级：行内样式>内嵌样式>外部链接
三、基本选择器
1、*全局选择器 0
2、标签选择器 1
3、class选择器(类选择器) 10
4、ID选择器 100
style 1000
优先级：
ID选择器>class选择器>标签选择器>全局选择器
伪类选择器:选择一种状态
a:link 未访问的状态
a:visited 访问后的状态
a:hover 鼠标滑过时的状态
a:active 点击时的状态
规则:遵循L-V-H-A顺序
四、复合选择器
1、群组选择器 div,p,h3{} 1
2、后代（包含）选择器 div p{} 2
第七单元 文本属性
字体 1、font-size：数值加单位px（像素）
2、font-family：楷体,隶书,微软雅黑;优先使用第一个字体
3、font-weight:normal默认值正常
数值不加单位：100-500正常 600-900加粗
关键字：bold bolder
4、font-style:字体风格 normal默认值正常 italic倾斜
5、color颜色 关键字 十六进制 rgb(0,0,0)
段落：1、text-align:文本对齐方式 left center right
2、line-height行高 单位可以：20px 2倍数 200%;
3、text-indent首行缩进 单位：20px 2em 200%;
4、text-decoration:文本修饰underline 下划线 overline上划线
Line-through删除线 none无修饰
第八单元 背景和列表属性
一、 背景
1、 background-color:背景色
2、 background-image:url(../)； 背景图
3、 background-repeat 背景平铺
默认值repeat、水平平铺repeat-x 、垂直平铺repeat-y、不平铺no-repeat
4、 background-position: 水平% 垂直%；
背景位置（默认位置0px 0px、left top。）
数值：20px 30px; 50% 50%; 可以为负值
关键字：水平left center right 垂直top center bottom
5、background-attachment 背景附件 scrol l默认滚动 fixed 固定
复合属性：
Background:背景色 背景图 背景平铺 背景位置 背景附件;
注意：属性值不存在先后顺序
多个属性值之间用空格
二、 列表
list-style-type 列表样式类型
属性值：disc实心圆默认 square正方块 circle空心圆 none无项目符号
List-style-image:url(../)；定义图片为项目符号
List-style-position:列表位置
属性值:outside外侧默认 inside内侧
复合属性 List-style:类型 图片 位置；
注意：属性值不存在先后顺序
多个属性值之间用空格
第九单元 盒模型
一、 盒模型组成部分
1、content内容 （width height）
2、border 边框
3、Padding 内边距
4、margin 外边距
二、 边框border
1、 border-width 边框的宽
2、 border-color 边框的颜色
3、 border-style 边框样式
属性值：solid实线 dashed虚线 dotted点线 none无边线
注意：边框的宽度和颜色可以省略、线型必须有（默认颜色文字颜色、粗细3px）
复合属性：border:宽度 颜色 线型;
某一条边框的所有样式：border-方向：
Border-top：上边框
Border-bottom：下边框
Border-left：左边框
Border-right：右边框
改变某一条边的某一个效果：
例如：Border-top-width:上边框的粗细
Border-top-color上边框的颜色
Border-top-style上边框的样式
三、 padding内边距 内容到边框的距离； 数值+px
padding-top：上内边距
padding-bottom：下内边距
padding-left：左内边距
padding-right：右内边距
注意：内边距不能用负值
复合属性:
padding:10px;上右下左 都是10px
padding:10px 20px;上下为10px 左右为20px
padding:10px 20px 30px；上为10px 左右为20px 下为30px
padding:10px 20px 30px 40px上为10 右为20px 下为30px 左为40px
三、margin内边距 元素与元素之间的距离；数值+px
margin-top：上内边距
margin-bottom：下内边距
margin-left：左内边距
margin-right：右内边距
复合属性:
margin:10px;上右下左 都是10px
margin:10px 20px;上下为10px 左右为20px
margin:10px 20px 30px；上为10px 左右为20px 下为30px
margin:10px 20px 30px 40px上为10 右为20px 下为30px 左为40px
注意：1、外边距可以用负值 auto;
2、元素在页面水平居中：margin:0 auto;
3、上下盒子 外边距取大 左右相加
元素占页面空间计算:width+左外边距+左内边距+左边框+右外边距+右内边距+右边框
元素的实际宽度：width +左内边距+左边框+右内边距+右边框
第十单元 浮动
1、浮动目的让元素在页面水平显示
float属性值： none默认值不浮动
left左浮动（元素顺序向左）
right右浮动（元素倒序向右）
clear:清除浮动
属性值：none默认值不清除
Left左清除
Right右清除
Both全部清除
第十一单元 display 与overflow
一、元素分类：
1、行内(内联)元素：特点在一行显示宽高不生效
a span font b I u em strong
2、块元素：特点独占一行宽高生效
Div H P ul ol li dl dt dd form table
3、行内块元素：特点 在一行显示又可以设置宽高
Img input
二、display元素类型
属性值：1、inline行内元素 把元素定义为行内元素
2、block 块元素 把元素定义为块元素
3、inline-block行内块 把元素定义为行内块元素
4、none隐藏元素 不占物理空间
Visibility:元素的可见性（显示）
属性值1、visible默认可见
2、hidden隐藏元素占用物理空间
注意：隐藏元素
1、display:none 隐藏元素不占物理空间
2、visibility:hidden隐藏元素占物理空间
三、overflow溢出
属性值: 1、visible默认溢出可见
2、hidden溢出内容隐藏
3、scroll 显示滚动条
4、auto 自适用当溢出时显示滚动条、不溢出不显示
第十二单元 position定位
一、 Position:属性值
1、static默认值 静态定位
2、relative相对定位
参照物：最原始的位置
3、absolute 绝对定位
参照物：默认body 如果有父元素、（参照物就是父元素）父元素给相对定位。
4、fixed固定定位
参照物：浏览器
偏移量：top bottom left right
二、层叠顺序z-index：属性值
1、z-index默认值auto 默认层0
2、值越大越在上层
3、数值（无单位） 0 5 3 -6 5 -2（零 整数 正整数 负整数）
4、后来者居上
第十四单元：CSS3新增选择器（重点）
1、伪类选择器：作用在状态上的样式【并不是直接作用在标签】
（1）E：disabled；选择不可用的元素【主要针对input标签】
（2）E：enabled：选择可用的元素
（3）E：checked：元素处于选中状态时的样式【单选框、复选框】
（4）E：：selection；元素处于选中时的样式【针对文字】
注意：不可以设置border属性
2)针对超链接a标签设计
：link：未访问前的样式
：visited：访问之后的样式
：hover：鼠标滑过设计样式（鼠标经过）
：active：激活状态（正在点击状态）
3)序号伪类选择器：
（1）E：first-child：匹配父元素中第一个子元素，为其设计样式
（2）E：last-child：匹配父元素中最后一个子元素，为其设计样式
（3）E：nth-child（n）：匹配父元素中第n个子元素，为其设计样式
nth
（4）E：nth-last-child（n）：匹配父元素中倒数第n个子元素
（5）E：nth-child（3n）：匹配父元素中序号是3的倍数的子元素
（6）E：nth-child（odd）：匹配父元素中序号是奇数的子元素
（7）E：nth-child（even）：匹配父元素中序号是偶数的子元素
2、属性选择器：
（1）CSS2中的属性选择器：
1）E[att]：匹配具有att属性的E元素
2）E[att=”avl”]：匹配具有att属性且属性值为val的E元素
（3）CSS3中的属性选择器：
1）E[att^=”val”]：匹配的具有att属性且属性值以val开头的E元素
2）E[att$=”val”]：匹配的具有att属性且属性值以val结束的E元素
3）E[att*=”val”]：匹配的具有att属性且属性值包含val的E元素
3、关系选择器：
（1）后代选择器，又被称为派生选择器、包含选择器
<p>
<span></span>
</p>
p span{color:red;}【优先级高】
span{color:blue;}
第十六单元复习：transition过渡属性
1、复合属性：
transition：属性 动画持续时间 持续速度 动画延迟时间
属性：需要设计动画效果的属性，如果不写，默认值是all，状态伪类选择器中所有的属性【而不是元素本身所具有的属性】
例如：.Div{
width：200px;
transition:2s;
}
.Div:hover{
注意：只会更改背景，宽度不会改变
}
2、分开设计属性：
（1）transition-property：定义需要设计动画效果的属性
注意：如果不写参数，默认值是all
（2）transition-duration：定义动画持续时间，默认值是0，如果不写，动画效果无法实现
（3）transition-timing-function：定义动画的速度，默认值：ease（先慢再快再慢）
属性值：linear：以相同的速度开始和结尾（匀速）
ease-in：以慢速度开始，逐渐加速（加速）
ease-out：以慢速结尾，逐渐减速（减速）
ease-in-out：先快再慢再快
ease（先慢再快再慢）【默认值】
（4）transition-delay：定义动画延迟时间，默认值：0
注意：时间单位：秒（s）或毫秒（ms）
3、transition动画必须通过伪类选择器触发，才能生效
触发动画的伪类：:hover、:focus、:checked、:active、js触发
