学习前端的知识总结3

4.1表格标签

1.表格标签的主要作用：
主要用来展示数据
2.基本语法：

<table>#用于定义表格
    <tr>#定义行，必须在table之中
        <td></td>#定义单元格，必须在tr之中
    </tr>
</table>

例：

<table>
<tr><td>姓名</td> <td>性别</td> <td>年龄</td></tr>
<tr><td>刘德华</td> <td>男</td> <td>56</td></tr>
<tr><td>张学友</td> <td>男</td> <td>58</td></tr>
<tr><td>郭富城</td> <td>男</td> <td>57</td></tr>
<tr><td>黎明</td> <td>男</td> <td>51</td></tr>
</table>

姓名	性别	年龄
刘德华	男	56
张学友	男	58
郭富城	男	57
黎明	男	51

4.2表头单元格标签

代码：<th></th>
表头单元格标签：里面的文字会加粗并且居中

4.3表格相关属性

以下五种标签必须写到table中
1.align：规定表格相对周围元素的对齐方式，center为居中，left为居左，right为居右；
2.border为加边框：默认为不加边框，1为有边框；
3.cellpadding:规定单元格与其内容的空白，默认为1像素；
4.cellspacing:规定单元格之间的空白，默认值为2像素； 
5.width:规定表格的宽度 height：规定表格的高度 
例：

<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="250">

4.3

案例1

3.16

4.4 表格结构标签

<thead></thead>#表哥的头部区域
<tbody></tbody>#表格的主体区域 
作用：用于区分标题行和主体，并且可以收缩起来 
已上两个标签，全部处于<table></table>标签中

4.5合并单元格

1.两种方式：
跨行合并：rowspan="数量"
跨列合并：colspan="数量"
2.目标单元格：
跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码
3.合并单元格三部曲：确定跨行还是跨列；找到目标单元格，写数量；删除多余单元格

4.6列表标签

列表是用来布局的，表格是用来展示数据的；
列表最大的特点就是整齐、整洁、有序。
1.无序列表：各项之间无顺序之分，是并列的

<ul>#之间只能放li标签
    <li>内容1</li>#li内可以放任何元素
    <li>内容2</li>
</ul>

例：

<h4>你喜欢的食物</h4>  
<ul>
    <li>橘子</li>
    <li>可乐</li>
</ul>  

你喜欢的食物

• 橘子
• 可乐

2.有序列表：各项之间有一定顺序之分

<ol>#之间只能放li标签
    <li>内容1<li>#li内可以放任何元素
    <li>内容2<li>
</ol>   

例：

<h4>粉丝排行榜</h4>
<ol>
    <li>王俊凯 9211314</li>
    <li>沈倦 111111</li>
    <li>王星越 12344</li>
    <li>李白 10086</li>
</ol>  

粉丝排行榜

1. 王俊凯 9211314
2. 沈倦 111111
3. 王星越 12344
4. 李白 10086

3.自定义列表：对术语或名词进行解释和描述

<dl>#之间只能放dt和dd标签
    <dt>名词</dt>
    <dd>名词解释1<dd>
    <dd>名词解释2<dd>
</dl>

例：

<dl>
    <dt>关注我们</dt>
    <dd>新浪微博</dd>
    <dd>官方微信</dd>
    <dd>联系我们</dd>
</dl>

关注我们

新浪微博

官方微信

联系我们