HTML页面布局

1：列表
1：无序列表<ul></ul>
无序列表指没有进行编号的列表
<li>type的属性值默认的项目符合是实心圆
type属性大全
type="disc"   实心圆
type="circle"  空心圆
type="square"  小方块
  <ul>
        <li type="circle"></li>
        <li type="disc"></li>
        <li type="square"></li>
    </ul>
2：有序列表<ol></ol>
type的属性
type=1
type=A
基本语法
<ol type=编号类型 start=value>
代码如下
<ol type="1" start="3">
    <li ></li>
    <li ></li>
    <li ></li>
</ol>
3：嵌套列表
    <ul type="square">
        <li>你在想什么
                <ol type="1">
                <li>你觉得呢</li>
                <li>你觉得呢</li>
                <li>你觉得呢</li>
                </ol>
        </li>
        </ul>
4：定义列表标签<dl>，<dt>,<dd>
定义列表由<dl>开始，术语由<dt>开始，术语的解释说明由<dd>开始
基本语法
<dl>
    <dt>中国画</dt><dd>中国画是什么.....</dd>
    <dt>第二项</dt><dd>注释2</dd>
    <dt>第三项</dt><dd>注释3</dd>
</dl>
5：表格
标签：
<table></table>---定义一个表格的开始和结束
<tr></tr>--定义表格的行
<td></td>--定义表格的列
要求：在一个最基本的表格中，至少要包含一组<table>标签，<tr>,<td>
需求：
添加一个两行两列的表格
 <table border="3">
        <tr ><td>第一行第一列</td><td>第一行第二列</td></tr>
        <tr><td>第二行第一列</td><td>第二行第二列</td></tr>
    </table>
6：表格<table>标签的属性
bordercolor--边框颜色
bordercolorlight---边框明亮部分（左上边框）的颜色
bordercolordark--边框昏暗部分（右下边框）的颜色
cellspacing--单元格之间的间距
cellpadding--单元格内容与单元格边距之间的距离
代码如下：
<table border="3" cellpadding="3" cellspacing="3" bordercolor="red">
7:表格的标题标签<caption>和表头标签<th>
基本语法
<caption algin="值" valign="值">表格标题</caption>
algin属性设置位于文档的左，中，右
valign属性设置标题位于表格的上方或下方
注意：
<caption>标签必须在<table>标签之内，<tr>之前
代码如下：
  <table border="3" cellpadding="3" cellspacing="3" bordercolor="red" align="center">
        <caption>表格</caption>
        <tr ><td>第一行第一列</td><td>第一行第二列</td></tr>
        <tr><td>第二行第一列</td><td>第二行第二列</td></tr>
    </table>
8：=====================
表格的边框显示状态
通过frame属性，可以将四个边框设置为显示或者隐藏状态
=================
box    显示整个边框
void   不显示表格边框
hsides  只显示表格的上下边框
等等===
代码如下


    <table border="3" bordercolor="red" align="center" frame="hsides">
==============
9:设置分割线的显示状态
基本语法
<table rules="值">
rules的属性值如下：
all ------ 显示所有的分割线
groups---显示组与组的分割线
rows----显示行与行的分割线
等等
代码如下
<table border="3"  bordercolor="red" align="center" frame="hsides" rules="rows">
10：单元格的设置
属性
colspan---单元格向右横跨的列数
rowspan--单元格向下跨越的行数
align--单元格内容的水平对齐方式
valign--单元格内容的垂直对齐方式
代码  <tr ><td rowspan="2">第一行第一列</td><td>第一行第二列</td></tr>