html学习笔记4

5.2表格的布局

布局：是一个页面的整体结构，

结构特点：从上往下，从左往右，一般每一行高度是一致的

<table width="100%">
    <tr>
        <td colspan="3" style="height: 120px;background-color: red"></td>
    </tr>
    <tr>
        <td style="height: 400px;background-color:green;width: 150px"></td>
        <td style="width: 700px;background-color:darkblue"></td>
        <td style="width: 150px;background-color: pink"></td>
    </tr>
    <tr>
        <td colspan="3" style="height: 100px;background-color:yellow"></td>
    </tr>
</table>

页面的布局可以通过table来实现，一个单元格就是一个布局区域单位，该区域的大小可以通过height和width属性来设置，改变位置通过单元格的相对位置来实现，同时可以结合rowspan和colspan两个属性来完成单元格的合并

当布局较为复杂的时，可以使用table的嵌套来实现，即在某个单元格中再嵌入一个table进行划分

 

 

6.div

6.1写法

<div style="border: dashed; width: 100px; height: 100px" ></div>

显示特点：在新的一行进行显示。块（级）标签

Division定义一个分块

块级元素和内联元素的区别

块级元素占满行，而内联元素会按照顺序从左至右依次排列

 

7标签总结

块级标签：在新的一行进行显示

div、h1~h6、p、hr、table、ul、pl、dl、tr、option、caption、dd

内联标签：不会新起一行显示

Img、inpu、a、td、textarer、span、label、select、th、button、

内联标签一般不能嵌套块级标签