网页设计基础知识
第一单元 html基础
1. ps 快捷键
放大 ctrl++
抓手 空格
信息面板 F8 单位
标尺 ctrl +R
自由变换 ctrl +T
2. 切片工具
存储web格式
文件名：字母
类型：仅限图像
切片：所有用户切片
3. 网页三种格式
Gif 最多256色 透明 动画
Jpg 颜色好 1670万 文件小 颜色多大图 不能透明
Png 无损压缩 文件大 透明 半透明
Bmp 位图 百万 psd不能用于网页
4. html---hypertext markup language 超文本标记语言 描述网页 直接执行
5. 标记 标签 元素 <>
6. 标签分类：双标签 单标签
7. 双标签
<body> </body>
<head></head>
<p></p> 段落
<table></table> 表格
<h1></h1>…标题
8. 单标签 空标签
<img/>图片
<br/>换行
<input/>输入
<meta/>
9. html基本标签结构
<html>
<head>
<title></title> 标题
<meta charset=”utf-8”/> 语言声明
<style></style> 内部样式
<link/> 链接样式
</head>
<body>
<p></p>
<img/>
</body>
</html>
<html><head><title></title> </head><body></body></html>
10. 命名规范：字母 数字 下划线组成 且不以数字开头 class=”2”
11. 站点
Baidu
Html 网页 css样式表 images 图片 index.html 首页 文件
12. 静态网页：.html .htm
动态网页：.php .asp jsp
13. <!DOCTYPE>[定义文档类型]
位于文档中的最前面的位置，处于<html>标签之前。可告知浏览器文档使用哪种HTML或XHTML规范
14. <meta charset=”utf-8”/> 单标签 语言声明
第二单元 文字图片
<img/> <br/>
1. 标题字h1-h6 默认加粗 <h1 align=”center”></h1> hn h
align=”left/center/right”
对齐 左 中 右
2. 段落<p></p> 换行<br/>
3. 半角空格 ; 版权符© © < < left > > right
4. 粗体<b></b> bold
5. 倾斜<i></i> italic
6. 下划线<u></u> underline
7. 强调<em></em>
8. 加强调<strong></strong>
9. 水平线标记<hr />,单标签
a) color 颜色，
b) size 粗细，单位像素
c) Width 宽度
d) align 对齐
<hr color=”red” size=”5” width=”800” align=”left”/>
10. 图片
网页三种格式
Gif 最多256色 透明 动画
Jpg 颜色好(千万色) 文件小 大图
Png 无损压缩 文件大 透明 半透明
Bmp（百万色） psd不能用于网页
<img src="1.jpg" alt="logo" width="200" height=”200” border=”5”/>
Text 没有
源文件 提示文本 宽 高 边框
路径分为绝对路径和相对路径
绝对路径：完整描述文件位置
C:/image/1.jpg
相对路径：站点内部
Images/1.jpg
1. jpg
../images/1.jpg 上一级 ../../ 上上级
第三单元 列表 超链接
1. 无序列表ul 导航 新闻
<ul type=”disc circle square”>
<li>列表项</li>
<li>列表项</li>
。。。
</ul>
2. 有序列表ol
<ol type=”1/a/A/i/I”>
<li>列表项</li>
<li>列表项</li>
…
</ol>
3. 自定义列表dl
<dl>
<dt>定义项</dt>
<dd>描述项</dd>
<dd>描述项</dd>
</dl>
<dl><dt><dd></dd></dt></dl> 错误的
<dl><dd></dd><dt></dt> </dl> 错误
<dl><dt></dt> <dd></dd></dl>
超链接 a 一对一 行内元素
1. 给文字加 <a href=“1.html“>秦鹏</a>
2. <a herf=“1.html“>秦鹏</a>
3. 给图片加 <a href=“1.html“><img src=”a.jpg” /></a> img{border:none;/border:0;}
4. 空链接 <a href=“#“>首页</a>
5. 新空白窗口打开 <a href=“1.html“ target=”_blank“>秦鹏</a>
6. target 窗口打开方式
_self 当前窗口打开 默认
_blank 新窗口打开
_top 顶层框架
_parent 父框架
第四单元 表格
表格 <table></table>
行 <tr></tr>
单元格<td></td> 列 内容
表头 th 加粗 居中
|
|
|
|
|
|
|
|
<table>
<tr>
<td></td><td></td>
</tr>
<tr>
<td></td><td></td>
</tr>
</table>
Table的属性
<table width=”800/40%” height=”500” 默认内容一样宽 不是100%
Border=”10” 外边框>
Align
Bgcolor 背景色
Background=背景图
表格特有属性：
Cellspacing=20 单元格间距 外
Cellpadding 单元格边距（内）
tr的属性
1. align 水平对齐 left center right
2. valign 垂直对齐
top 顶部
Middle 中部
Bottom 底部
td的属性
1. colspan 水平合并
2. rowspan 垂直跨度
|
Colspan=”2” |
Rowspan=”4” |
|
|
|
|
|
|
|
|
|
|
|
|
|
1px细线表格：
v 表格Table中
n border=0
n cellspacing=1
n Bgcolor=边框色
v 行Tr
n Bgcolor=白色
Css
Table{border-collapse: collapse }相邻边框合并
Td{ border:1px #f00 solid;}
第五单元表单
1. 表单
<form
name=”form1”
action=”url” 提交地址 php asp
method=“get/post” 提交方法=“获取/传送”
target=”_blank” >
</form>
表单三元素：input select textarea
2. 输入标签
<input type=”10个值” name=”sex” value=”值” checked=”默认选中”/>
类型
文本框 <input type=”text” value=”请输入姓名”/> 值
密码框 <input type=”password”/> *…
单选框<input type=”radio” name=”sex” checked=” checked”/> 男 默认选中
<input type=”radio” name=”sex” /> 女
复选框<input type=”checkbox” checked=” checked”/>
文件域 <input type=”file”/>
四种按钮
提交 <input type=”submit” value=”提交”/> action=”url”
重置 <input type=”reset” value=”重置”/> reset replay rename
普通按钮<input type=”button” value=”找回密码”/>
图像域 <input type=”image” src=”1.jpg/>
3. 下拉菜单
<select name=”diqu”>
<option value=“bj”>北京</option>
<option value=“sh”selected=” selected”>上海</option> 默认选中
</select>
4. 文本域（多行文本框）
<textarea cols=”40” rows=”5” name=”beizhu”>提示文字标签之间</textarea>
列数 行数
没有value属性
第六单元Css样式
Css—cascading style sheet
层叠 样式 表 用于控制网页外观
Css样式由三部分组成：选择器、属性、属性值
选择器{
属性: 属性值;
属性: 属性值;
}
五大选择器
全局选择器 *{margin:0; padding:0;} 所有标签
标签选择器 h1{} p{} a{} ul{} 元素选择器
类别选择器 .red{} <h1 class=”red”></h1> 多次
Id选择器 #red{} <h1 id=”red”></h1> 同一id只能用一次
伪类选择器 作用在标签状态
A:link{} 点击前
A:visited{} 点击后
A:hover{} 放上去 鼠标滑过
A:active{} 按下去 点击瞬间
四种样式表
行内样式<p style=”color:red; …”></p> 行内优先级最高style=””属性
内部样式（内嵌） <style></style> 标签
链接样式 <link href=”” type=”text/css” rel=”stylesheet”/> 外部
导入样式 @import url( )
第七单元 文字 背景属性
文字属性
Color:#f00; font-color 错误的
十六进制颜色 #FF 00 00 RGB 红绿蓝 00---FF
#FF0000 红色 #F00
#00FF00 绿色 #0F0
#0000FF 蓝色 #00F
#000000 黑色 #000
#FFFFFF 白色 #FFF
灰色 红绿蓝值相同 #C0C0C0 #666 #ccc #333
字号 Font-size:12px/14px;
字体 Font-family:宋体, 楷体；多个字体逗号分隔
加粗 Font-weight:bold normal; 100-900
倾斜 Font-style:italic normal
段落属性
文本装饰Text-decoration:overline上划线
Line-through 删除线
Underline 下划线
None 去掉超链接下划线
文本对齐Text-align: left center right 水平居中
首行缩进Text-indent:100px 2em -100px; 负值 百分比
行高 Line-height:25px 180%百分比 垂直居中
背景属性
Background-color:red;
Background-image: url(1.jpg); 设置图地址参数
Background-repeat: repeat;（默认）
No-repeat
Repeat-x
Repeat-y
Background-position:right bottom;
left 100px
水平 垂直
背景复合属性：
Background: #f00 url(1.jpg) No-repeat right bottom;
列表样式
群组选择器
Ul , ol
列表样式 {list-style：none } 去点
列表样式类型 list-style-type :none (去点)
disc (实心圆)
square（小正方形）
circle （空心圆）
列表图片： list-style-image: url()
列表符号位置：list-style-position: inside/ outside
第八单元 盒模型
盒子实际大小=内容+ 填充+ 边框+ 边距
Width、height+padding+border+margin
填充：padding 边框与内容距离
padding：100px 四边相同
padding：100px 200px 上下 左右
padding：100px 200px 300px 上 左右 下
padding：100px 200px 300px 400px 上右下左
padding-left:100px
边框：
边框宽度 Border-width:1px;
边框颜色Border-color:#f00;
边框样式 Border-style:solid实线
dashed虚线
dotted点线
border-css 不是
边框复合属性
Border: #f00 1px solid; 不可三缺一
Border-bottom:1px #0f0 dashed;
Border-left:none; 左边框无
外边距 内容与内容之间距离
margin-left:100px 元素向右移动
margin-right:100px 后面元素向右移动
第九单元 布局
浮动： Float: none（默认） left right 3
清除浮动Clear: none left right both 全部 4个值
块级元素 div p h ul li 。。。 独占一行 自动换行
行内元素（内联）a span img input 不独占一行 不自动换行 没有宽 高
可变元素
<div><a></a></div>
<a><div></div></a> 错误的
显示属性：Display:block 块
Inline 行内
None 不显示
定位
Position: static; 默认 静态
Relative 相对定位
Absolute 绝对定位
Fixed 固定定位
Inherit 继承
1. 相对定位 相对自己原来位置
2. 绝对定位 相对父元素
<div class=”father”>
<div class=”son”></div>
</div>
.father{position:relative;}
.son{position:absolute;
Left:100px;
Top:50px;}
偏移量 left right top bottom 可以是负值
z-index 设置绝对定位元素 层叠顺序
默认为0，可以为负值，值越大越靠前
周考关键点
1. 以下是图像域的属性的是
A name B src C href D type
<input type=”image” src=”1.jpg” name=”tuxiangyu”/>
1. 下面元素(标签)选择器书写正确的是：A div{} B html div{} C div p{} D a{}
2. 关于css样式，下列描述不正确的是：：
A 链接外部样式表使用link标签 B 行内样式的优先级没有链接样式的优先级高
C 行内样式使用link属性 style D 行内样式的优先级最高
3. 下列属于外部链接样式的是
A<p style="color:red;">段落</p> 行内
B<link href="index.css" rel="stylesheet" type="text/css" /> 链接
C <style> p {color:red;} </style> 内部 内嵌
D<style type="text/css"> @import url(index.css) </style> 导入
2. （ ）单选框在同一组中的选项可以使用不同名称
Name=”sex” 男
Name=”sex” 女
3. （ ）文本域标签是<textarea>,可以通过标签中的height属性来设置文本域有多少行：：cols 列数 rows行数
4. （ ）option标记的checked属性用来设置默认选中：：selected
5. 以下属于input属性的是:
A type B value C name D method
6. 下列属于标签input类型的属性是
A type B method C top D bottom
7. 不属于标签input类型的属性是
A type B method C top D bottom
8. ( )利用html标签属性为td设置背景色为红色的代码是：<td bgcolor="#f00"></td>
9. ( )利用html标签属性为td设置背色为红色的代码是：<td style="bgcolor:red"></td> background-color
10. 关于网站头部信息说法 正确的是 ABC
A网页中的头部相当重要，通常一个网站页面左上角放置的都是网站的标志（Logo）
B为了提高网站的搜索引擎，一般的LOGO图片需写Alt属性
C头部还会展示出网站的帮助信息、登录信息和收藏网站的链接等
D网站的logo必须使用背景图片来实现 错误 <img/>
1. 关于网站头部信息说法 正确的是 ABCD
A 网页中的头部相当重要，通常一个网站页面左上角放置的都是网站的标志（Logo）
B 为了提高网站的搜索引擎，一般的LOGO图片需写Alt属性
C 头部还会展示出网站的帮助信息、登录信息和收藏网站的链接等
D 网站的logo不必使用背景图片来实现 对
1. 以下标签可以写在<head></head>中的是
A、img B、p C、title D、meta
2. 以下标签可以写在<head></head>中的是：
A style B img C Link D title
<img src=””
<a href=”” target = _self _blank _top _
Align= left
center
right
valign=top
middle
bottom
colspan 横向 cellspan 间距
rowspan 竖向 th 表头
原<ul><li></li></ul>
新<d>…………<d/>
<
