标签：
列表的分类：
1、无序列表
使用<ul>标签作为无序列表的声明，使用<li>标签作为每个列表项的起始。<ul>标签有一个type属性，这个属性的作用就是制定在显示列表时所采用的项目符号类型。
type属性的取值
|
取值 |
说明 |
|
disc |
项目符号显示为实体圆心，默认值 |
|
square |
项目符号显示为实体方心 |
|
circle |
项目符号显示为空心圆 |
2、有序列表
无序列表与有序列表的区别就在于，有序列表的各个列表项有先后顺序，所以会使用数字进行标识。有序列表使用<ol>和<li>标签组成，使用<ol>标签作为有序列表的声明，同样使用<li>标签作为每个列表项的起始。
与无序列表一样，有序列表的项目符号也可以进行设置。在<ol>中也存在一个type属性，作用同样是用于修改项目列表的符号。
type属性的取值
|
取值 |
说明 |
|
1(数字) |
使用数值作为项目符号 |
|
A/a |
使用大写/小写字母作为项目符号 |
|
I/i |
使用大写/小写罗马数字作为项目符号 |
3、定义列表
定义列表是一种很特殊的列表形式，它是标题及注释的结合。定义列表的语法相对于无序和有序列表不太一样，它使用<dl>标签作为列表的开始，使用<dt>标签作为每个定义列表项的起始，而对于每个列表项的定义则使用<dd>标签来完成。
3种列表的比较
|
类型 |
说明 |
项目符号 |
|
无序列表 |
以<ul>标签来实现 |
通过type属性设置项目符号包括disc（默认）、square（三级默认）和circle（二级默认） |
|
有序列表 |
以<ol>标签来实现 以<li>标签来表示列表项 |
通过type属性设置项目顺序包括1（数字，默认）、A（大写字母）、 a（小写字母）、I（大写罗马字母）和I（小写罗马字母） |
|
定义列表 |
以<dl>标签来实现 以<dt>标签定义列表项 以<dd>标签定义内容 |
无项目符号或显示顺序 |
总结：
1、无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般都是相对简单的标题性质的网页内容。而有序列表则会依据列表项的顺序进行显示。
2、在实际的网页应用中，无序列表ul-li比有序列表ol-li应用得更加广泛，有序列表ol-li一般用于显示带有顺序编号的特定场合。
3、定义列表di-dt-dd一般适用于带有标题和标题解释性内容或者图片和文本内容混合排列的场合。
表格
表格是块状元素，该标签用于显示表格数据。
表格的基本组成：单元格（表格的最小单位），行，列
表格的基本语法：创建表格一般分为下面3步。
第一步：创建表格标签<table>……</table>。
第二步：在表格标签<table>……</table>里创建行标签<tr>……</tr>，可以有多行。
第三步：在行标签<tr>……</tr>里创建单元格标签<td>……</td>,可以有多个单元格。
为了显示表格的轮廓，一般还需要设置<table>标签的“border”边框属性，指定边框的宽度。
表格的对齐方式
表格的对齐方式用来控制表格在网页中的显示位置，常见的对齐方式有默认对齐、左对齐、居中对齐和右对齐。而实现表格对齐的属性就是align属性，align属性有3个值，分别对应左对齐、居中对齐、右对齐，当省略该属性时，则系统自动采用默认对齐方式。
1、默认对齐
表格已经创建，便显示为默认对齐。默认对齐状态下表格以实际尺寸显示在左侧，如果旁边有内容，这些内容会显示在表格的下方，不会在表格的两侧进行排列。
2、居中对齐
有时候，希望表格显示在页面的中间位置，这样会使页面显得对称，浏览效果较好，这时候就需要对表格设置居中对齐。
3、左对齐、右对齐
如果对表格设置左对齐或者右对齐，表格会显式在页面的左侧或者右侧，其他内容会自动排列在表格旁边的空白位置。
经验：表格的左对齐和右对齐在网页应用中相对比较少，一般用于显示广告，如网页中常见的画中画广告等。
4、单元格对齐
除了表格可以设置对齐方式，对于单元格也同样可以设置对齐方式，单元格对齐则分为水平对齐和垂直对齐两个方向。水平对齐与垂直对齐的属性及取值，如下表所示
单元格的对齐方式
|
属性 |
值 |
说明 |
|
align (水平对齐方式) |
left center right |
左对齐 居中对齐 右对齐 |
|
valign (垂直对齐方式) |
top middle bottom baseline |
顶端对齐 居中对齐 底端对齐 基线对齐 |
表格的跨行与跨列
1、表格的跨列
跨列是指单元格的横向合并，语法如下。
<table>
<tr>
<td colspan="所跨的列数">单元格的内容</td>
</tr>
</table>
col为column(列)的缩写，span为跨度，所以colspan的意思为跨列。
2、表格的跨行
跨行是指单元格在垂直方向上的合并，语法如下。
<table>
<tr>
<td rowspan="所跨的行数">单元格的内容</td>
</tr>
</table>
row为行的意思，rowspan为跨行。
3、表格的跨行与跨列
有时表格中既有跨行又有跨列的情况，从而形成了相对复杂的表格显示。
经验：跨行和跨列以后，并不改变表格的特点，同行的总高度一致，同列的总宽度一致。因此表格中各单元各的宽度或高度相互影响，结构相对稳定，但缺点是不能灵活地进行布局控制
框架
A、为什么使用框架
框架是HTML早期的应用技术，但目前还有部分网站在使用。使用框架技术具有以下好处。
1、在同一个浏览器窗口显示多个页面。使用框架能有机的把多个页面组合在一起，但各个页面间相互独立。
2、可以实现页面复用。例如，为了保证统一的网站风格，网站每个页面的底部和顶部一般都相同。因此，可以利用框架技术，将网站的顶部或底部单独作为一个页面，方便其他页面复用。
3、实现典型的“目录结构”，及左侧目录、右侧内容，当用户单击左侧窗口的目录时，在右侧窗口中显示具体内容，如网上在线学习课程、论坛、后台管理、产品介绍等网页都是这样的页面结构。当然，这种结构除能用框架技术实现外，也可以采用其他技术实现。
B、常用的框架技术有以下两种。
1、框架（<frameset>）：这是早期的框架技术，页面个窗口全部用<frame>实现，形成一个框架。这种结构非常清晰，适用于整个页面都用框架实现的场合。
2、内联框架（<iframe>）：页面中的部分内容用框架实现，一般用于在页面中引用站外的页面内容，使用比较方便、灵活。
<frameset>框架
框架包含<frameset>和<frame>两个标签，其中<frameset>描述窗口的分割，<frame>定义放置在每个框架中的HTML页面。基本语法如下。
<frameset cols="25%,50%,*" rows="50%,*" border="5">
<frame src="the_first.html">
<frame src="the_second.html">
……
</frameset>
其中，<frameset>标签的cols属性表示将页面横向分割为几列。例如，cols="25%,50%,*"表示将页面分割为3列，第一列占浏览器窗口总宽度的25%，第二列占50%，第三列占剩余部分。各列的宽度值也可使用具体数值（单位为px）。同理，“rows”属性表示将页面纵向分割为几行。另外，<frame>标签的“src”属性类似于<img>标签的“src”，表示页面的路径。下面逐一讲解框架的纵向、横向及横纵向同时分割的实现方法。
1、纵向分割窗口
A、页面窗口的划分情况：页面纵向被分割为3个窗口，即3行，显然应使用<frameset>标签的“rows”行数属性。
B、各框架对应的页面情况：使用<frame>标签的“src”属性引用各框架对应的页面文件，同时还可以使用“name”属性标识各框架窗口。
需要注意的是，<frameset>标签和<body>标签不能同时使用，所以需要使用“<frameset>”代替页面中的“<body>”标签。
2、横向分割窗口
横向分割窗口的思路与纵向分割窗口很类似，例如，要实现如图2.21所示的横向分割的页面效果，只需要设置<frameset>的“cols”列数属性即可。
3、横向和纵向同时分割窗口
以典型的2行2列结构为例，来分析其实现思路。
A、页面结构分析
I、整个页面纵向分割为上、下两部分，高度分别为窗口的20%和80%，对应的关键代码如下。
<frameset>
<frame src="Top窗口对应文件"/>
<frame src="下部分窗口对应文件"/>
</frameset>
II、下部分再次横向分割为左、右两部分，宽度分别为窗口的20%和80%。即需要把上述第二个<frame>改为<frameset>实现，对应的关键代码如下。
<frameset>
<frame src="Top窗口对应文件"/>
<frameset cols="20%,*">
<frame src="Left窗口对应文件"/>
<frame src="Left窗口对应文件"/>
</frameset>
</frameset>
B、框架修饰分析
要实现上述框架结果，除边框外，还需要用到框架的其他修饰属性。例如，是否允许调整各框架窗口的大小，则使用“noresize”属性设置；当框架内的页面内容较多时，是否需要显示滚动条，则使用“scrolling”属性设置。框架<frame>常用的属性如下表所示。
框架<frame>的常用属性
|
属性 |
作用 |
举例 |
|
Frameborder |
是否显示框架周围的边框 |
frameborder="1" |
|
Name |
框架标识名 |
name="mainFrame" |
|
Scrolling |
是否显示滚动条 |
scrolling="no" |
|
Noresize |
是否允许调整框架窗口大小 |
noresize=“noresize” |
C、如何实现窗口间的关联
实现框架窗口间的关联，关键在于设置超链接的“target”目标窗口属性，具体的实现思路如下。
I、在框架页面中，为右侧框架窗口添加“name”名称标识，如rightframe。关键代码如下。
<frame src="subframe/right.html" name="rightframe" />
II、在左侧窗口对应的页面中，设置超链接“target”目标窗口属性为希望显示的框架窗口名，在右侧窗口显示的代码如下。
<a href="right.html" target="rightFrame">……</a>
target属性的取值
|
属性值 |
含义 |
|
_blank |
在新窗口中打卡链接 |
|
_self |
在链接所在页面的自身窗口中打开链接 |
|
框架窗口名 |
在指定的框架窗口中打开链接 |
|
_parent |
在父框架集中打开链接，如果不是框架网页，则含义同“_self” |
|
_top |
在顶级窗口(及整个浏览器窗口)中打开链接 |
除_parent和_top两个属性值外，其他属性值都学过，下面讲解_parent和_top两个属性值的用法。修改本例左侧窗口对应的left.html页面，分别设置链接打开的目标窗口为“_parent”和“_top”，对应的HTML代码分别如下。
<a href="buy.html" target="_parent">……</a>
<a href="buy.html" target="_top">……</a>
上面两行代码的运行效果一样，都在整个框架页的浏览器窗口中显示。究其原因，是因为本例只有两个层次的二级框架，所以框架页所在的浏览器窗口是左侧窗口的父窗口，同时也是框架页面的顶级窗口。
<iframe>内联框架
前面学习了框架<frameset>，它适用于整个页面都用框架实现的场合，本节将学习<iframe>内联框架，它适用于将部分框架内嵌入页面的场合，一般用于引用其他网站的页面。例如，在自己制作的网页中引用搜狐网页的新闻页面等。
1、<iframe>的用法
<iframe>的用法和<frame>比较类似，其语法如下。
<iframe src="引用页面地址" name="框架标识名" frameborder="边框" scrolling="是否出现滚动条"……></iframe>
2、常用属性
类似于前面学习的<frameset>框架，<iframe>内联框架的常用属性包括name、scrolling、noresize和frameborder。其中name、noresize和scrolling与表中所列<frame>属性的作用一样。
S1/使用HTML语言和CSS开发商业站点/02-列表、表格和框架
标签：
原文地址：http://www.cnblogs.com/water5832/p/5721896.html
