（X）HTML有三种主要的列表形式

无序列表

...

无序列表中的列表项

有序列表：

...

定义列表：

按照定义的顺序显示信息

定义列表

...

一项

一个定义

内联元素：

（只能包含文本和其他内联元素，不能包含块元素。

）

短引用元素...

引用元素...

定义术语元素...定义的术语设置为蓝色文字

锚元素

空元素

没有文本内容，只是用来提供一些简单的指令

如图像（img）元素、
、

HTML和（X）HTML中空元素的语法有所差异

HTML，空元素不使用关闭标签，如

hello!

welcome

（X）HTML中，所有的元素都必须关闭，包括空元素

hello!

welcome

特性

特性是用来阐明或修改元素的指示

（SRC和ALTSRC指定图片路径，ALT为替换文本；多特性之间用空格隔开，用等号分隔的特性名和特性值）

泛型元素（div和span）

div元素用来表示泛型块级元素，span元素用于表示泛型内联元素

可以用id和class特性为泛型元素命名

div元素用于确定一个块级文本区，可将div当作网页上的容器使用。

特殊字符

字符

描述

命名

数值

字符空格

 ；

&

表示and的符号

&

&

'

撇号

'

'

<

小于号

<

<

>

大于号

>

>

©

版权

©

©

®

注册商标

®

®

添加链接

锚元素结构：

链接文本或图像

例：

Gotosina

href特性（超文本引用）

邮件链接：

alklecker@”>ContactAlklecher

相对路径与绝对路径

（略，参考课件：

第三讲幻灯片10-17）

网页中插入图片

（XHTML）（HTML）（img内嵌元素、置换元素、空元素）

在图片中使用src、alt、width、height等属性

图片在网站上的出现方式

背景图片

内嵌图片

内嵌图片在网页中的应用方式

作为简单图像

作为链接

作为图像地图

可内嵌于网页中的图像格式

GIF、JPEG、PNG

图像文件后缀名gif、jpg（jpeg）、png

src和alt属性是必需的

src告诉浏览器图片文件的地址

当图片无法显示时，alt属性提供显示用的替换文本

img属性

border指定图片边框的宽度，可用CSS中的border值代替

align改变图片垂直和水平方向上的对齐方式。

可用CSS中的float值进行代替

hspace在使用align属性移动图片时，用它来设置左右边缘的空白；可用CSS中的margin值实现

vspace在使用align属性移动图片时，用它来设置上下边缘的空白；可用CSS中的margin值实现

图像地图

usemap="#veggies"/>

href="tomato.html"alt="tomatoicon"/>

alt="carroticon"/>

基本表格标记

table、tr、td

列合并

使用td或th元素中的colspan属性进行列合并

合并行

使用rowspan属性来合并行

单元格填充与间距

使用cellpadding和cellspacing属性实现

width

以像素或百分比的形式指明表格宽度

border

在单元格及表格周围添加3D阴影边框

align

设置单元格的水平对齐方式

valign

设置单元格的垂直对齐方式

bgcolor

为单元格、行或整个表格提供固定的背景颜色

rules

在行、列或组之间添加边线

表单

表单控件：

按钮、文本域和下拉菜单等，用于收集来自用户的信息；

服务器端的应用程序或脚本，处理由表单收集来的信息，并进行适当地回复。

表单控件的任务是从用户收集信息；

表单元素

form元素（见课件第五讲第六页）

form元素将表单添加到网页中

是所有表单内容的容器，包括很多表单控件

可包含块元素（如h1、p、列表）

不能包含其他form元素

注：

不要嵌套form元素，也不要重叠；一个form元素必须在下一个form元素打开前关闭。

action特性

.pl后缀表示表单由perl脚本处理

.php，表示PHP程序工作，最常用于ApacheWeb服务器

.asp，用于微软的ASP程序环境，在IIS服务器上运行

.jsp，用于Java服务器网页。

method特性

将编码数据发送到服务器的方法：

POST和GET，使用method特性来指定

POST

浏览器发送独立的服务器请求，请求包括一些特殊的报头和后面的数据

只有服务器才能看到请求的内容

POST是发送保护信息的最好方法

还适用于发送大量数据

GET

编码后的表单数据附加到URL中，并发送到服务器

问号标记字符将URL和后面的数据分开

例：

mailinglist.pl?

name=sally%20strongarm&email=strongarm

%

不适合发送保护信息

添加到URL中的字符限制为256个，因此不能用于发送大量数据

name特性

所有的表单控件必须包含一个name特性

标签（labels）

label元素用于将描述性文本与各自的表单域关联起来。

每个label元素只与一个表单控件关联

隐式关联：

将控件及其描述嵌入label元素

显示关联：

将标签与控件的id引用进行匹配，for特性表示标签用于哪个控件

当源码中的控件不是直接与它的描述性文本相邻的时候，该方法很有用

另一潜在优势：

能保持标签和控件元素相互独立。

字段集（fieldset）和legend

fieldset元素用于表示表单控件的一个逻辑组合。

一个字段集还可以包括一个legend元素，legend元素为内部的域提供标题

重要表单控件

文本输入控件

单行文本输入域

多行文本输入域...

密码输入域

提交及重设按钮

单选按钮和复选框

下拉菜单和滚动菜单

文本选择和上传控件

隐藏域控件

提交和重设按钮

提交：

重置：

图像按钮

自定义按钮

创建用脚本语言自定义的按钮

button元素

...

用于创建类似于input元素创建的自定义按钮

button元素的内容显示在按钮上

单选按钮和复选按钮

单选按钮

name特性是必需的

所有的input元素变量名都相同，但是值不同

最好把输入按钮和文本标签都包含在一个label元素里，这样，用户点击整个label元素的任何位置，都可以选中按钮

复选框

菜单

提供一组选择的另一方案

菜单控件...

菜单中的选项...

菜单中的逻辑选项组...

下拉菜单：

当没有指定size特性，或size特性设置为1时，select元素默认显示为下拉菜单，下拉菜单中只能选择一项

滚动菜单：

使用size特性指定你想看到的行数，可将菜单显示为滚动列表

组合菜单选项：

可使用optgroup元素，创建概念上的选项组，必需的label特性为选项组提供标题

文件选择控件

可将外部文档添加到表单中

必须要指定表单的编码方式（enctype特性）为multipart/form-data

指定POST方法

隐藏控件

需要将并非来自用户的信息，发送给表单处理程序，这时可使用隐藏表单控件

CSS基础

样式表由一个或多个样式指令（又叫规则）组成，这些指令描述了元素或元素组将如何显示

每条规则选择一个元素并声明它的外观

例：

h1{color:

green;}

p{font-size:

small;font-family:

sans-serif;}

规则包括两个主要的部分

用来标识受影响的一个或多个元素的选择器（selector）

提供显示指令的声明（declaration）：

声明由属性和它的值组成，由冒号和空白隔开

将样式附加到文档

外部样式表

嵌入样式表

内嵌样式

red">Introduction

样式冲突：

重叠

样式表层级

浏览器默认设置

用户样式设置（在浏览器中作为“读者浏览器”设置）

链接的外部样式表（用link元素添加）

导入的样式表（使用@import功能添加）

嵌入样式表示（由style元素添加）

内联样式表（由开标签中的style特性添加）

任何被作者标记为!

important的样式规则

任何被读者（用户）标记为!

important的样式规则

盒子模型

理解盒子的最好方法：

想象浏览器将网页中所有元素都看作被包含在一些矩形盒子里，可以应用属性到这些盒子里。

组合选择器

如果需要应用相同的样式规则到多个元素，可把这些选择器组合成一个规则，通过逗号隔开。

例：

h1,h2,p,em,img{border:

1pxsolidblue;}

格式化文本

字体属性

文字字体font-family

大小font-size

粗细font-weight

特殊样式等font-style（斜体）font-variant（小型大写字母）

改变文本颜色color

字行设置line-height

缩进text-indent

水平对齐text-align

下划线和其他的“修饰”text-decoration

改变字母大写text-transform

空格letter-spacing（字母之间）word-spacing（单词之间）

在CSS规范中，em是行距

颜色和背景

颜色名：

CSS1和CSS2引入16个标准颜色名，CSS2.1引入orange，共17个。

例：

color:

silver;

background-color:

gray;

border-bottom-color:

teal;

RGB颜色值

CSS中有四种形式来表示RGB值

rgb（255,255,255）

rgb（100%,100%,100%）

#FFFFFF

#FFF

前景色

元素的前景由文本和边框组成，使用color属性指定前景色。

背景色background-color属性，填充元素后面的背景，包括内容区域，内容周围的任意padding区域，并且一直扩展到边框的外边缘

伪类选择器

锚伪类

a:

link应用样式到未点击的链接

a:

visited应用样式到已点击的链接

a:

hover当鼠标悬停在链接时应用该样式

a:

active鼠标键按下之后应用该样式

伪类用冒号:

表示

选择器总结

元素类型选择器p{property:

value;}

组合选择器p,h1,h2{property:

value;}

后代（关联）选择器olli{property:

value;}

ID选择器#sidebar{property:

value;}

div#sidebar{property:

value;}

类选择器p.warning{property:

value;}

.warning{property:

value;}

通用选择器*{property:

value;}

伪类选择器锚伪类a:

linka:

visiteda:

hovera:

active

伪元素选择器:

first-line:

first-letter

背景图像

属性名称：

background-image

例：

background-image:

url（/image/background.jpg）

背景图像拼贴：

属性名称：

background-repeat

背景位置：

background-position属性

背景附加方式：

background-attachment

外部样式表

使用链接元素引用外部样式表

使用@import导入例：

@importurl（"/path/stylesheet.css"）;

p{font-face:

Verdana;}

组件样式表

可以直接使用该方法来重用样式表的集合，该集合是常用的与其他集合混合搭配的样式。

元素盒子的组件

内容区域

内边缘

填充

边框

空白边

外边缘

设置内容区域

使用width和height属性指定元素内容区域的宽和高。

em、像素和百分比值是最常用的度量元素大小的方法。

处理溢出

当元素设置得太小，容不下内容时，可使用overflow属性来指定如何处理内容不适合的问题。

属性名称：

overflow

属性值：

visible|hidden|scroll|auto|inherit

默认值：

visible

适用对象：

块级别元素和可替换的内嵌元素

是否可继承：

否

填充

padding属性。

属性名称：

padding-top、padding-right、padding-bottom、padding-left

边框（border）样式

边框宽度（厚度

边框颜色

空白边

添加在边框外面可选数量的空间；

空白边保证了元素间互不冲撞或不冲撞浏览器窗口的边线。

属性名：

margin-top，margin-right，margin-bottom，margin-left

浮动与定位

float

属性值：

left|right|none|inherit

默认值：

none

适用对象：

所有元素

清除浮动元素

Clear属性

属性值：

left|right|both|none|inherit

默认值：

none

应用对象：

仅块级元素

定位基础

定位的类型

属性名：

position

Static

普通的定位方案，元素将如同在普通文档流中一样定位。

Relative

相对定位将盒子相对于它在流中的原始位置移