HTML(二)列表与表格的使用

HTML(二)列表与表格的使用

---

一、列表标签

1、无序列表：列表项没有先后顺序

<ul type="disc">
	     <li>列表项</i>
		 <li>列表项</i>
		 <li>列表项</i>
		 <li>列表项</i>
		 ......
	   </ul>

type属性：表示的是项目符号的类型
circle：空心圆圈
disc：实心圆点(默认类型)
square：实心方块

<ul type="circle">
        <li>咸阳</li>
        <li>西安</li>
        <li>宝鸡</li>
    </ul>
    <hr />
    <p>四大传说</p>
    <ul type="square">
        <li>白蛇传</li>
        <li>孟姜女</li>
        <li>牛郎织女</li>
        <li>梁山伯与祝英台</li>
    </ul>
    <hr />
    <p>四大古都</p>
    <ul type="disc">
        <li>北京</li>
        <li>西安</li>
        <li>洛阳</li>
        <li>南京</li>
    </ul>

2、有序列表:列表项有先后顺序

<ol>
		   <li>列表项</i>
		   <li>列表项</i>
		   <li>列表项</i>
		   <li>列表项</i>
		   ......
		</ol>	

type属性：表示的是项目符号的类型
1：项目符号是数字
a或A：项目符号是26个字母
i或I：项目符号是罗马数字
start属性：表示项目符号的起始值，属性值必须是数字

<ol start="5">
        <li>西安交大</li>
        <li>西北工业大学</li>
        <li>西北农林</li>
    </ol>
    <hr  color="blue" size="4" />
    <p>各省的GDP</p>
    <ol type="A" start="8">
        <li>广东</li>
        <li>江苏</li>
        <li>山东</li>
    </ol>
    <hr color="pink" size="4" />
    <p>网红城市</p>
    <ol type="i" start="3">
        <li>西安</li>
        <li>北京</li>
        <li>南京</li>
    </ol>

3、定义列表(项目列表)：对项目的解释说明，列表项前没有项目符号

<dt>
		   <dd>列表项</dd>
		   <dd>列表项</dd>
		   <dd>列表项</dd>
		   ......
		</dt>

<dt>
        <dd>财务管理</dd>
        <dd>考勤管理</dd>
        <dd>市场管理</dd>
        <dd>人力资源管理</dd>
    </dt>

4、列表的嵌套：在列表项下嵌套列表，可以表示分类

<ul>
		  <li>列表项</li>
		     <ol>
			    <li>列表项</li>
			 </ol>
		</ul>

 <ol>
              <li>西安</li>
                <ul type="circle">
                    <li>长安区</li>
                      <ol type="a" start="10">
                        <li>西安邮电大学</li>
                        <li>陕西师范大学</li>
                        <li>西北政法大学</li>
                        <li>西北大学</li>
                      </ol>
                    <li>碑林区</li>
                    <li>莲湖区</li>
                </ul>
              <li>咸阳</li>
              <li>商洛</li>
          </ol>

二、表格标签

1、<table></table>：表示一个表格
2、<thead></thead>：是一个语义标签，表示表格的头部(表头)
3、<tr></tr>：是表格中的行标签
4、<td></td>：表示单元格(列)
5、<th></th>：表示列标题，默认居中、文字加粗
6、<tbody></tbody>：语义标签，表示表格的主体部分
7、<caption></caption>：表示表格的标题

table标签的属性：
border：表格的边框线
bgcolor：表示表格的背景色
background：表格的背景图片
cellspacing：表示单元格之间的空白间距
cellpadding：表示单元格内容与单元格边框之间的空白间距
width：表格的宽度
height：表格的高度

th、td的属性：
width：表示列宽
align：表示水平对齐方式(left、center、right)
valign：垂直对齐方式(top、middle、bottom)
bgcolor：表示单元格的背景色
background：单元格的背景图片
height：单元格高

tr的属性：
align：表示水平对齐方式(left、center、right)
valign：垂直对齐方式(top、middle、bottom)
bgcolor：表示行的背景色
background：行的背景图片
height：行高

跨行、跨列的表格：即合并单元格
跨列属性：colspan=“列数”
跨行属性：rowspan=“行数”
表格举例

<table border="1" bgcolor="pink"> 
        <caption>学生信息表</caption>
        <thead>
            <tr>
                <th width="100">学号</th> <!--表示列标题-->
                <th width="100">姓名</th>
                <th width="100">性别</th>
                <th width="100">年龄</th>
                <th width="100">出生日期</th>
                <th width="200" colspan="2">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr align="center">
                <td>001</td>
                <td>小王</td>
                <td>女</td>
                <td>20</td>
                <td>2000-01-01</td>
                <td>修改</td>
                <td>删除</td>
            </tr>
            <tr align="center">
                <td>002</td>
                <td>小李</td>
                <td>女</td>
                <td>20</td>
                <td>2000-06-01</td>
                <td>修改</td>
                <td>删除</td>
            </tr>
            <tr align="center">
                <td>003</td>
                <td>小张</td>
                <td>男</td>
                <td>21</td>
                <td>1999-09-01</td>
                <td>修改</td>
                <td>删除</td>
            </tr>
        </tbody>
    </table>

合并单元格举例

<table border="1">
        <thead>
           <tr>
                <th colspan="3">学生成绩表</th>
           </tr>
        </thead>
           <tr>
               <th width="100">语文</th>
               <th width="100">数学</th>
               <th width="100">英语</th>
           </tr>
        <tbody>
            <tr align="center">
                <td>95</td>
                <td>89</td>
                <td>90</td>
            </tr>
        </tbody>

<table border="1">
        <tr>
            <th rowspan="3">早餐食谱</th>
            <td>面包</td>
            <td>牛奶</td>
        </tr>
        <tr>
            <td>饮料</td>
            <td>牛奶</td>
        </tr>
        <tr>
            <td>甜点</td>
            <td>巧克力 </td>
        </tr>
    </table>

三、块级标签

<p> 内容 </p>    自动换行
<span> 内容 </span>   不会自动换行
<label> 内容 </label>

举例

<span>西安邮电大学</span>
    <span>西安科技大学</span>
    <span>西安建筑科技大学</span>
    <hr />

    <p>西安邮电大学</p>
    <p>西安科技大学</p>
    <p>西安建筑科技大学</p>
    <br />
    <label>用户名</label><span>  </span>
</body>

四、网页的布局

网页的布局：框架(不能放在中)



举例

<frameset  rows="15%,*" border="5">
    <frame src="top.html" />
    <frameset cols="10%,*">
         <frame src="left.html">
         <frame src="004.html" name="right">
    </frameset>
</frameset>

<ul type="circle">
        <li>
            <a href="001.html" target="right">财务管理</a>
        </li>
        <li>
            <a href="002.html" target="right">资源管理</a>
        </li>
        <li>
            <a href="../html/004.html" target="right">项目管理</a>
        </li>
        <li>
            <a href="../html/003.html" target="right">考勤管理</a>
        </li>
    </ul>

<body>
    <p>西安邮电大学</p>
</body>

结果如图
这种框架在HTML中不常用，若制作简单的页面框架可以使用