9.19笔记

<!--

        表格有table标签定义，每个表格由若干个行组成（tr定义行）；每行被分为若干个单元格（td定义单元格）

     -->

    <table><!-- 定义表格 -->

        <tr><!-- 定义行 -->

            <td></td><!-- 定义单元格---- 内容水平局左，垂直居中 -->

            <!--

                单元格里面可以包含文本、图片、链接、列表、段落、表格

             -->

             <th></th><!-- 定义表头单元格 ---字体加粗、内容水平居中，垂直居中-->

        </tr>

    </table>

  table属性

            border ：边框

                作用：使表格具备边框，可以显示一个带有边框的表格

                注意：不定义表格边框，默认是不显示

            width/height:

                作用：设置表格的宽高

                注意：省略单位： 默认px

            cellspacing：

                作用:设置单元格和单元格之间的间距

            cellpadding：

                作用：设置单元格中内容和边框之间的距离

        td，th属性：

            width/height:

                作用：定义单元格的宽度和高度

            align:

                作用：设置单元格的水平方向对齐方式

                取值：

                    left 左对齐

                    center 居中对齐

                    right 右对齐

            valign：

                作用：设置单元格的垂直方向对齐方式

                取值：

                    top 顶对齐

                    center 居中对齐

                    bottom 底部对齐

        合并单元格

            rowspan  跨行合并

            colspan  跨列合并

            步骤：1、确定是跨行还是跨列

                2、找到目标单元格，添加合并属性

                3、删除多余单元格

 <!-- css 内部样式 -->

    <style>

        table{

            /* 表格中，识别和并边框 */

            border-collapse: collapse;

        }

        th,td{

            /* 边框 */

            border:1px solid red;

        }

    什么是 css？

        Cascading Style Sheets css样式表或者层叠样式表（级联样式表）

        作用：html页面中元素的位置、排班、样式外观等，

 

        css语法规范：

            由选择器、一条声明或对多条声明组成

            选择器：通常是需要改变样式的html标签

            声明组：以大括号{}括起来的

            选择器{

                属性:属性值;

                属性:属性值;

     宽200px

        高300px

        背景颜色  红色

     -->

     <!--

        行内样式

            语法：

                <开始标签 style="属性1:属性值1;属性2:属性值2;---"></结束标签>

            注意：任何html元素都可以设置行内样式。

            优缺点：

                比较直观；相同的样式需要重复定义，造成代码冗余；作用范围小，不利于后期代码维护代

        /*

        *通配符选择器

         语法：  *{样式声明}

         作用：选择任意类型的html元素

        */

        *{/* 页面上的所有元素都会被选择 */

            /* 样式声明 */

            background-color: pink;

        }

        /*

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

            *{

                margin: 0;

                padding: 0;

            }

        */

  标签选择器

        语法：

            元素名称{样式声明}

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

        */

        p{/* 页面中所有的p标签都会被选中 */

            background-color: pink;

        }

        div{/* 页面中所有的div标签中 */