2022.9.19

        今天是自学html的第三天， 嘿嘿，元气满满的一天当然要加大力度啦！

今天学习了表格标签，嚯嚯，说起这个表格标签呀，那还是真的多，就让我好好罗列一下吧

1.      table是表格标签，用来定义表格

        tr标签是来定义行

        td标签定义单元格

        th标签定义表头单元格----字体加粗，内容居住，垂直居中

        单元格里可以包含文本，照片，链接，段落，表格         

        

2、        table 属性

            border  

                作用:是表格具备边框

                注意:如果不定义表格边框,默认不显示

            width/height

                作用:设置表格宽高

                注意:省略单位:  默认px

            cellspacing

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

            cellpadding

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

        td,th 属性：

            width/height

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

            align

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

                取值：

                    left 左对齐

                    center 居中

                    right 右对齐

            valign：

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

                取值：

                    top 顶对齐

                    center 居中对齐

                    bottom 底部对齐

            合并单元格

                rowspan  跨行合并

                colspan  跨列合并

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

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

   3.表格的结构化

        caption         定义表格的标题        

        tobody          表格的主体内容        一个表格里允许出现多个tbody   

        tfoot               表格的页脚内容            

        每个表格只能定义一个标题

        thead、tbody、tfoot，划分表格语义，实现长表格分布加载，改变结构顺序，优先加载tbody。

  table{

            表格中，识别和并边框*

            border-collapse:collapse;

        }

        th,td{

             边框 

            border:1px solid red;

             设置像素的纯色表格 

        }        

总结：  

        1.未定宽度的表格，单元格会适应内容

        2.在同一行当中，他只会识别一个高，取最大值

        3.在同一列当中，他只会识别一个宽，取最大值

        4.表格可以包含其他的HTML标签以及【表格】

4.

什么是css？

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

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

        css的语法规范：

            由选择器和我们的一条声明和多条声明组成  

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

            声明组：以大括号括起来的就是我们的声名组

            选择器 {

                属性：属性值；

                属性：属性值；       

5.

行内样式

                语法：

                    <开始标签 style=“属性1：属性值1；属性值2；--- ></结束标签>

        注意事项：

                任何的html元素都可以设置行内样式；

            优缺点：

                1.比较直观；

                2.相同的样式需要重复定义，造成代码的冗余；作用范围小，

                不利于后期代码的维护；代码不能重复使用，结构样式不分离；

6.内部样式

优缺点：

                优点：相对于行内样式来说，代码可以重复使用；作用范围大于行内样式；结构样式半分离：

7.

 总结：

        行内样式：适用于某个元素拥有特殊样式时使用，结构样式【不分离】

        内部样式：适用于单个页面拥有特殊样式时使用，结构样式【半分离】

        外部样式：适用于多个页面拥有特殊样式时使用，结构样式【相分离】

8.

通配符选择器

        语法：*{样式声明}

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

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

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

  9.

标签选择器

    语法：

        元素名称{样式声明}

    作用：

        选择所有同一元素名称的所有元素

10

        id选择器

        html--id属性进行定义

            <开始标签 id=“id名称”></结束标签>

        css --用#进行标识

            #id名称{样式声明}

        注意：id选择器具有唯一性。

11.

类选择器：

            语法：

            html --- 通过class属性定义

                <开始标签 class=“class名称”></结束标签>

            css ---通过、进行标识

                .class名称{样式声明}

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

            注意：

            class可以重复使用，但是id不能

        多类名使用（词列表）

            语法：空格隔开

            <div class="color1 box box1">1</div>    

        类和id选择器的名称规则：

            1.见名如意，尽量用英文

            2.建议使用只能由数字、字母、下划线、$符组成        

            3.一定不能以数字开头

            4.多个单词尽量使用驼峰命名法  fontColorOrr(每个单词首字母大写)

                                        中划线、下划线也行，但不建议，尽量驼峰命名法

好啦，今天的分享就到这啦，望每位前端学习者都能不忘初心，共同努力！