网页设计考点复习

1、1 网页设计基础 考点复习 2 基本语法+标记符基础 p7-14 在 HTML 中，所有的标记符都用尖括号括 起来。例如，、。 HTML 标记符是不区分大小写的。、 和没有区别。 注意：XHTML要求标记符区分大小写 3 标记符基础 绝大多数标记符都是成对出现的，包括开 始标记符和结束标记符。某些标记符，例如 ，只要求单一标记符号。 开始标记符与结束标记符的区别在于：结 束标记符多一个斜杠“/”（不是反斜杠 “”！） 4 背景图案 使用 BODY 标记符的 BACKGROUND 属 性可以设置背景图案。HTML语句为： 注意：html中没有，所有设定在css中 5 小节 HTTP超文本传输协议

2、 三种颜色表示方法：颜色名称、 #RRGGBB、含量#FF0000（p11-12） 创建网页的步骤： 标记符 常用物理字符样式标记符有： 黑体标记 斜体标记 下划线标记等。 （必考标记符，之前讲 eg：加粗） 在 HTML 中，用户可以通过 Hn 标记符 来标识文档中的标题和副标题，其中 n 是1至6的数字；H1表示最大的标题， H6表示最小的标题。使用标题样式时， 必须使用结束标记符。 注意：使用标题时应按照其逻辑含义， 而不是按照其显示效果！ eg：有h4 前面一定有h1/h2/h3 与字体大小无关 块元素和行内元素 块元素(自动换行） 行内元素inline在行内嵌入相当于一个字 块（换行

3、）：h1-h6, p, ul, li 行内(字符)：a， img， strong （块元素） aah（行内元素） 文本元素总结 块元素 h# (heading) p (paragraph) pre (preformatted text) address blockquote (lengthy quotation) 行内元素 em strong sub sup 换行 br 通用元素通用元素 div span 列表 ul ol li b big i u font hr 核心文档结构标记 h1h4 p ul, ol, li div ，span 有序无序p32-34 有序列表 定义有序列表需要使用有序

4、列表标记符 和列表项（List item）标记 符/（结束标记符可省略）， 语法如下： List item 1 List item 2 无序列表 无序列表（Unordered list）也称强调式列表， 它是一种在表的各项前显示有特殊项目符号 的缩排列表。 p36-38 使用超链接（必会） 超链接基础 URL（Universal Resources Locator）用 于定位Web上的文档信息。 一个 URL 包括 3 部分：协议、计算机地址、 文件路径。 协议：/计算机/文件路径 超链接基础绝对URL 绝对URL是指资源的完整地址，包括URL 的所有3个部分，即： 协议：/计算机/文档名 超

5、链接基础相对URL 相对URL是指Internet上资源相对于当前页 面的地址，它包含从当前页面指向目标页 面位置的路径。 使用相对URL的好处：易于维护 超链接基础相对URL 使 用 相 对 U R L 时， 经 常 使 用 两 个 与 D O S 类 似 的 符 号： 句 点 （. ） 表 示 当 前 目 录 . / i m a g e. g i f 双 重 句 点 （. .） 表 示 当 前 目 录 的 上 一 级 目 录 . / p u b l i c / i n d e x. h t m 超链接基础相对URL 必考类型：p47-6、p62-6 不同类型的超链接 根据超链接的目标文件不

6、同，分为： 网页之间的超链接 页面内的超链接 文件下载超链接 Email超链接 空超链接 创建超链接 A 标记符用于创建超链接（结束标记符不能省 略），href 属性用于指定超链接的目标文件。 内部网页超链接： 单击 此处 获取关于魔兽 世界的更多信息 (相对URL) 外部网页超链接：link (绝对URL) 创建超链接锚点链接 使用页面内的超链接，首先需要定义锚点，然 后在超链接中指向该锚点。 定义锚点应使用目录 指向锚点的超链接为：返回目 录 大题 制作矢量格式图像的软件有 Freehand、Illustrator、 CorelDraw、AutoCAD 常用的位图编辑软件有 Firewor

7、ks、Photoshop、 ImageReady、PhotoImpact 图像文件 常用Web图像格式 常用的Web网页图像格式包括： GIF JPEG PNG GIF GIF（Graphics Interchange Format， 图形交换格式）格式的特点： 无损压缩 最多256色 能够使用透明色 交错式Gif（interlaced gif） 动画Gif 30/60 JPEG JPEG（Joint Photographic Expert Group，联合图形专家组）格式的特点： 有损压缩 没有颜色限制 可以控制压缩比 渐进式JPEG（progressive JPEG） 31/60 PNG

8、PNG（Portable Network Graphics，可移植 的网络图形）格式的特点： 无损压缩 没有颜色限制 支持透明度 在网页中插入图像 I M G 标 记 符 W I D T H 和 H E I G H T 属 性 指 定 图 像 的 显 示 大 小 B O R D E R 属 性 指 定 图 像 的 边 框 a l i g n 属 性 设 置 对 齐 方 式 h s p a c e 属 性 设 置 水 平 方 向 的 空 白 v s p a c e 属 性 设 置 垂 直 方 向 的 空 白 使用css样式三种方法 直接在标记符中嵌套p133 HTML 标记符的 style 属性

9、 例如： 其中，style属性的取值形式为： “CSS属性:CSS属性值” 多个属性用分号分隔 在STYLE 标记符定义样式 中 样式定义 样式定义的方式为 Selectorproperty1:value1;property2:value2; property3:value3; 链接外部样式表文件 LINK 标记符 正文内容 CSS属性单位（长度、颜色、其他） 相对值 em: 相关字体的font-size值 ex: 相关字体的x-height值 px: 像素值, 与设备相关 绝对值 in: 英寸 1 英寸= 2.54 厘米 cm: 厘米 mm: 毫米 pt: 点 CSS 2.1 用的1点= 1

10、/72英寸 pc: 皮卡 1 皮卡= 12 点 常用选择器类型 HTML标记符 具有上下文关系的选择器 用户定义的类 用户定义的ID 虚类 HTML标记符 HTML标记符是最常用的selector，它重新 定义了HTML标记符的显示效果。例如： H1text-align:center;color:red 使所有用H1标记符修饰的内容都居中和用红色 显示。 具有上下文关系的选择器 如果选择器之间用空格分开，就表示 具有上下文关系的选择器。 例如 p b color:red 表示位于p标记符中的b标记符采用相 应格式。 用户定义类 .classnameproperty:value 表示任何clas

11、s属性为classname的标记符都 采用所定义的样式。 eg：H1.color_redcolor:red 用户定义ID #IDname property:value; 表示id属性为 Idname的标记符采用 所定义的样式。 eg: #container width: 46em; margin: 0 auto; border: 1px solid #000000; 虚类选择器 a:link 未访问过的超链接 a:visited 访问过的超链接 a:hover 悬停状态的超链接 a:active 活动超链接 所有超链接去下划线：atext- decoration:none 悬停变色a:hove

12、rcolor:red 样式优先级 （1）外部样式表-站点样式表 （形成站点风格css） (2)页内样式表 (形成单独页面的风格) （3）行内样式表 font-weight:bold (仅在测试时用) 样式的优先级（基本） 样式的优先级遵循“就近优先”的原则， 也就是说，距离所修饰对象越近的样式， 其优先级越高。 样式如果冲突，则采用高优先级样式；如 果不冲突，则采用叠加的样式效果。 P color: red 正文内容 其中，test.css 的内容如下： P color: green 红色 P color: red 正文内容 其中，test.css 的内容如下： P color: green

13、绿色 CSS属性字体属性 font-family，取值为字体名称 font-style (normal/italic斜体/oblique斜体) font-weight (normal/bold/bolder/lighter/100/) font-size (绝对大小/相对大小/长度值/百分 比) CSS属性文本属性 line-height text-align(left/right/center/justify) text- decoration(none/underline/overline) text-indent CSS属性颜色与背景属性 background-image backgro

14、und-attachment(scroll/fixed（静 止）) background-repeat(no- repeat/repeat/repeat_x) CSS属性定位属性 position (static/relative/absolute) Absolute：相对于根元素或第一个非静态布局 (position:absolute:right:10px Relative：相对于自身 Fix:相对于视口（view point） top和left width和height z-index 布局 填充padding-边框border-边界margin上右 下左 float：left 表格的组成

15、 l 表格标记符table l 表格标题 caption l 表格行 tr （table row） l 表格数据 td （table data） l 表格表头 th （table heading） 表格的构造p65 l 在 TH 或 TD 标记符中使用 rowspan 属性 进行行合并 l 在 TH 或 TD 标记符中使用 colspan 属性 进行列合并 文本框 单行文本框 口令框 Javascript a+ +a A=i+; a=i; i=i+1; A=+i; i =i+1 ;a=i eg: a=3; b=3; +a*+b 16 +a*b+ 12 控制语句 条件语句(p165): if ( 2 1 ) alert(something is w