表格标签html

使用table标签定义表格，每个表格由若干行（由tr定行），每行被分为若干个单元格（由td定义）

表格作用：

以前整个页面的布局都使用的是表格、结构复杂、维护起来麻烦。展示数据时还是选择表格。

表格的结构：

定义表格：

th表头单元格

默认样式：字体加粗、文字水平垂直居中

td单元格

包含各种标签

默认样式：文字居左显示、垂直居中

width/height:

作用：用来定义表格的宽和高

单位：单位可以省略，默认px

cellpadding：用的间距来定义单元格中的内容和边框之间

cellspacing：作用：定义单元格和单元格之间的差距

表格的结构化标签

<caption></caption><!-- 表格标题 必须紧跟着table标签-->

        <thead><!-- 表头内容 -->

            <tr>

                <td></td>

                <td></td>

            </tr>

        </thead>

        <tbody><!--定义表格的主体内容 一个表格里面可以包含多个tbody -->

            <tr>

                <td></td>

                <td></td>

            </tr>

            <tr>

                <td></td>

                <td></td>

            </tr>

        </tbody>

        <tfoot><!-- 定义表格页脚内容 -->

            <tr>

                <td></td>

                <td></td>

            </tr>

        </tfoot>

        <!--

            总结：划分表格的语义，实现长表格的分布加载，改变结构顺序，进行优先加载tbody。

            每个表格只能定义一次标题 caption不可重复使用

         -->

        <!--

            合并单元格

                跨行合并：colspan：n；

                跨列合并：rowspan：n；

            操作步骤：

                1、确定单元是跨行还是跨列

                2、找到目标单元格、添加合并属性colspan/rowspan

                3、删除多余单元格

        -->

        <!--

            表格总结：

                1、未定宽度和高度的表格，单元格的内容自适应

                2、同一行只识别一个高，取最大值

                3、同一列只识别一个宽，取最大值

                4、表格里面可以包含其他任何html标签以及表格

         -->

初识css   什么是css？（Cascading Style Sheets）

表现层、美化html

层叠样式表、css样式表、级联样式表

作用：设置页面中元素的位置、排版、样式外观等

css语法规范：主要由两部分组成：选择器。。。。。

内部样式

 <!-- 头部信息 -->

    <style>

        选择器{

            样式声明；

            属性：属性值；

              }

</style>

内部样式：

语法：使用style标签包裹住样式

使用场景：单个html文档需要设置特定样式时

优缺点：相对于行间样式，代码可以复用；作用范围大于行间样式的范围

           结构样式半分离

外部样式

把css代码单独分离出来

创建一个新的文件，新文件后缀名.css

具体的css写在css文件中

在head内部使用link标签引入刚才新建的css文件

使用场景：多个html文件具有相同样式时使用

优缺点：1、适用范围广，可以重复使用代码

          2、便于代码的修改和维护

3、结构样式彻底分离

<!--引入外部css文件-->

<link rel="stylesheet" href="./style.css">

rel 表示引入文件与当前文件的关系、层叠样式表

        stylesheet：层叠样式表

        href：资源的链接地址

行间样式

使用场景：

单个html标签需要设置特定的样式

优缺点： 优点：比较直观

缺点：相同样式需要重复定义，造成代码冗余

作用范围小，不利于后期维护

代码不能重复使用，结构（html）样式（css）不分离

注意事项：任何html标签都可以设置行间样式  

选择器

选择器的作用：用于选择需要设置样式的html元素

基本选择器：

通配符选择器：

语法：*{样式声明;}

作用：选择页面上的所有html元素

权重0

一般用于清除浏览器的默认样式

*{margin：0；padding：0；}

标签名选择器：

语法:

标签名称{样式声明；}

作用：选择所有同一元素名称的所有元素

权重：1

类选择器:

语法：

html中通过class属性定义:

<p class="class名称">内部的p</p>

css中以点进行标识：

.class名称{样式声明；}

 作用：选择所有带有指定类名的元素

权重：10

多类名：（词列表）

语法：用空格隔开
————————————————
版权声明：本文为CSDN博主「he1729」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/he1729/article/details/127678032