网页设计考点复习

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

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

3、）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 fonthr核心文档结构标记 h1h4 p ul, ol, li div ，span有序无序p32-34有序列表定义有序列表需要使用有序列表标记符和列表项（List item）标记符/（结束标记符可省略），语法如下： List item 1 List

4、 item 2无序列表无序列表（Unordered list）也称强调式列表，它是一种在表的各项前显示有特殊项目符号的缩排列表。p36-38使用超链接（必会）超链接基础 URL（Universal Resources Locator）用于定位Web上的文档信息。 一个 URL 包括 3 部分：协议、计算机地址、文件路径。 协议：/计算机/文件路径超链接基础绝对URL 绝对URL是指资源的完整地址，包括URL的所有3个部分，即： 协议：/计算机/文档名超链接基础相对URL 相对URL是指Internet上资源相对于当前页面的地址，它包含从当前页面指向目标页面位置的路径。 使用相对URL的好处：易

5、于维护超链接基础相对URL 使用相对URL时，经常使用两个与DOS类似的符号：句点（.）表示当前目录 ./image.gif双重句点（.）表示当前目录的上一级目录./public/index.htm超链接基础相对URL必考类型：p47-6、p62-6不同类型的超链接 根据超链接的目标文件不同，分为：网页之间的超链接页面内的超链接文件下载超链接Email超链接空超链接创建超链接 A 标记符用于创建超链接（结束标记符不能省略），href 属性用于指定超链接的目标文件。内部网页超链接：单击 此处 获取关于魔兽世界的更多信息(相对URL)外部网页超链接：link(绝对URL)创建超链接锚点链接使用页面

6、内的超链接，首先需要定义锚点，然后在超链接中指向该锚点。 定义锚点应使用目录指向锚点的超链接为：返回目录大题制作矢量格式图像的软件有 Freehand、Illustrator、CorelDraw、AutoCAD 常用的位图编辑软件有 Fireworks、Photoshop、ImageReady、PhotoImpact 图像文件常用Web图像格式常用的Web网页图像格式包括： GIF JPEG PNGGIFGIF（Graphics Interchange Format，图形交换格式）格式的特点： 无损压缩 最多256色 能够使用透明色 交错式Gif（interlaced gif） 动画Gif30

7、/60JPEGJPEG（Joint Photographic Expert Group，联合图形专家组）格式的特点： 有损压缩 没有颜色限制 可以控制压缩比 渐进式JPEG（progressive JPEG）31/60PNGPNG（Portable Network Graphics，可移植的网络图形）格式的特点： 无损压缩 没有颜色限制 支持透明度在网页中插入图像IMG 标记符WIDTH 和 HEIGHT 属性指定图像的显示大小BORDER 属性指定图像的边框align属性设置对齐方式hspace属性设置水平方向的空白vspace属性设置垂直方向的空白使用css样式三种方法直接在标记符中嵌套p

8、133 HTML 标记符的 style 属性 例如： 其中，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: 点

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

10、何class属性为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:hovercolor:r

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

12、，取值为字体名称 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-indentCSS属性颜色与背景属性 background-image background-attachment(scroll/fixed（

13、静止）) background-repeat(no-repeat/repeat/repeat_x)CSS属性定位属性position (static/relative/absolute)Absolute：相对于根元素或第一个非静态布局(position:absolute:right:10pxRelative：相对于自身Fix:相对于视口（view point）top和leftwidth和heightz-index布局填充padding-边框border-边界margin上右下左float：left表格的组成l 表格标记符tablel 表格标题 captionl 表格行 tr （table row）l 表格数据 td （table data）l 表格表头 th （table heading）表格的构造p65l 在 TH 或 TD 标记符中使用 rowspan 属性进行行合并l 在 TH 或 TD 标记符中使用 colspan 属性进行列合并文本框 单行文本框 口令框 Javascripta+aA=i+; a=i; i=i+1;A=+i; i =i+1 ;a=ieg:a=3;b=3;+a*+b 16+a*b+ 12控制语句条件语句(p165):if ( 2 1 ) alert(something is wrong);if ( 2