HTML和CSS整理

最新推荐文章于 2024-07-21 17:58:14 发布

lizhiqiang987

最新推荐文章于 2024-07-21 17:58:14 发布

阅读量210

点赞数

文章标签： html css 布局结构文本

本文链接：https://blog.csdn.net/lizhiqiang987/article/details/75041064

版权

5.2table的布局

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

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

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

页面的布局可以通过table来实现，一个单元格就是一个布局区域单位。该区域的大小可以通过height和width属性来设置，位置通过单元格的相对位置来提现的。同时可以结合rowspan和colspan两个属性来完成单元格的合并。
当布局比较复杂时，可以使用table的且套来实现，即在某个单元格中再嵌入一个table进行划分。

5.Div

6.1写法

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

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

6.标签总结

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

div、h1-h6、p、hr、table、ul、ol、dl、tr、option、caption、dd、dl

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

img、input、a、td、textarea、span、label、select、th、button

内联标签一般不能嵌套

Css基础知识

1.1基本概念

Css指层叠样式表（Cascading Style Sheets）

为什么需要用css？

HTML描述了要呈现的内容，而css则定义了这些内容的呈现形式，比如字体、颜色等。使用css能够将页面内容和呈现形式有效分离，有利于分工合作，也有利于快速更换不同的呈现形式。

使用样式表可以有三种方式

(1)内联样式

<p style="font-size: 24px;color: green">内联样式的演示</p>

将样式定义在style属性中。
内容好呈现形式高度耦合，维护困难，不利于分工合作。
只能应用于当前标签。
2）内部样式
<style>
        p{
            font-size: 36px;
            color: red;
        }
    </style>
</head>
<body>
    <p style="font-size: 24px;color: green">内联样式的演示</p>
    <p>内部样式的演示1</p>
    <p>内部样式的演示2</p>
</body>
在head中通过<style>标签来定义
内容表现形式的耦合程度降低了，但都还是在html文件中，没有实现完全分离。
定义的样式只能在本页面中使用
3）外部样式
首先需要定义一个样式表文件（.css），
/*定义了应用于段落的样式:
字体大小：36px
颜色：红色*/
p{
    font-size: 36px;
    color: blue;
}
css中也可以使用注释，形式为/*……*/
然后再需要使用这些样式的html文件中引入该样式表文件
<head>
    <meta charset="UTF-8">
    <title>外部样式表</title>
    <link rel="stylesheet" type="text/css" href="css/E2-01-02.css">
</head>