HTML&CSS学习总结-CSDN博客

HTTP报文的分类有两种：请求报文和响应报文。请求报文就是客户端向服务端发送请求的信号，响应报文就是服务端响应处理后回传给客户端的信号。HTTP 的请求报文由四部分组成，分别是请求行、请求头、空行和请求体，其中空行也是组成部分之一，作用是进行分隔，必不可少。请求头：Authorization Content-Type 请求行：get(请求方法)+url(请求路径)+http1.1(http1.0\http1.1\http1.2 协议版本) 请求体：get携带参数不在请求体中在url地址栏 post携带的参数在请求体中。

HTTP响应报文也由四个部分组成，分别是：状态行(响应行)、消息报头(响应头)、空行和响应正文(响应体)。形式上除了状态行之外，其他三个部分与请求报文类似。响应头：Content-Type/Server/Date等；响应体(服务器返回给浏览器的响应信息)：{status:200,message:"更新成功",data:[{name:"zhangsan"},{}]}；响应行：http1.1 200 OK（状态码描述成功）

get方法和post方法的区别：
get方法
1、get携带的参数在url地址栏显示，数据保密不安全
2、传输的数据大小有限制一般不超过1024个字符
post方法
1、携带的参数一般携带在请求体中，数据保密安全
2、传输的数据大小没有限制，一般可以传输大量的数据

CSS3

1、CSS语法

css语法声明块

/* 标签/其他{
      属性名:属性值;
      属性名:属性值;
     } */
div{
   font-size:100px ;
   background-color: red;
   }

速记写法可能是由四个或多个属性合并成一个

div{
   /* border:width style color; */
   border: 1px solid red;
   }

需要注意的是注释不可以嵌套

应用案例：利用css绘制一个三角形

<style>
  .div1{    
    width:0;
    height:0;
    border: 100px solid transparent;
    border-bottom: 100px solid red;
    }
</style>
</head>
<body>
  <div class="div1">三角形</div>
</body>

原理详见：css实现三角的原理-css教程-PHP中文网

2、 CSS引入方式

a. 内联样式(行内样式)

优点：优先级较高；缺点：样式与结构冗余，不能对样式进行复用，不方便后期维护

<div style="background-color: red;color: bisque;">我是一个div</div>

b.内部样式表

优点：样式与结构分离可以同时为多个元素设置样式，方便后期的维护缺点：样式的复用率较低

<style>    
  p{        
    color:red;        
    background-color:yellow;    
  }
</style>

c.外部样式表

优点：样式与结构分离，样式的复用率高，推荐使用。

<link rel="stylesheet" href="文件的路径">

d.使用@import引入css文件

@import引入方式会先加载html，再加载css；当网络环境较差时，会出导致页面效果较差的现象。兼容性较差 ie5+，且语句必须放在style标签第一行。

<style>
   @import url('文件的路径');
</style>

3、CSS选择器

a.标签选择器

格式:

 标签名(a/ul/div/p...){
     属性名:属性值;
     }

b.id和class选择器

id选择器给一个标签设置样式 #id：

<style>
   #a{
     background-color: blueviolet;
     }
 </style>
<body>
    <div id="a">aaaaaaaa</div>
</body>

class选择器给一类标签设置样式 .class：

.c{
  background-color: yellow;
  }
.d{
  background-color: red;
  }
<body>
  <div class="c">c</div>
  <!-- 设置多个类名 空格隔开 -->
  <div class="c d">我是多类名</div>
</body>

id选择器需要注意:

1.每个标签都可以设置id；2.在同一个界面中id的名称是不可以重复的；3.在编写id选择器时一定要在id名称前面加上#；4.id的名称只能由字母/数字/下划线组成，a-z 0-9，但是id名称不能以数字开头，并且id名称不能是HTML标签的名称，即不能是a/h1/img/input... 5.在企业开发中一般情况下id是留给js使用的。

类选择器注意点：

1.每个标签都可以设置类名；2.在同一个界面中class的名称是可以重复的；3.在编写class选择器时一定要在class名称前面加上点(.)；4.类名的命名规范和id名称的命名规范一样 5.类名就是专门用来给CSS设置样式的 6.在HTML中每个标签可以同时绑定多个类名eg:<标签名称 class="类名1 类名2 ..."> ,不能写为<p class="类名" class="类名">

c.后代选择器和子元素选择器

后代选择器格式: 标签名1 标签名2 标签名n{ 属性名:属性值; } eg：div p{ }；只要最终是放到指定标签中的都是后代，都会被选择。后代选择器可以通过空格一直延续下去

子元素选择器格式: 标签名称1>标签名称2{ 属性:值; } eg: .div1>p{ color: aqua; }；子元素选择器只会查找儿子, 不会查找其他被嵌套的标签，可以通过>符号一直延续下去

两者使用的情形：如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器

d.交并集选择器

交集选择器格式: 选择器1选择器2{ 属性: 值; } 注意点: 1.选择器和选择器之间没有任何的连接符号 2.选择器可以使用标签名称/id名称/class名称。eg:

p.p1{
   color: brown;
    }

并集选择器格式：选择器1,选择器2{ 属性:值; } 注意点: 1.并集选择器必须使用(,)来连接 2.选择器可以使用标签名称/id名称/class名称。eg:

.p1,#p2{
  color: blue;
  }

e.兄弟选择器

相邻兄弟选择器格式CSS2: 选择器1+选择器2{ 属性:值; } ；

通用兄弟选择器 CSS3：格式: 选择器1~选择器2{ 属性:值; }；eg:

/* 兄弟选择器 */
<style>
    /* css2的兄弟选择器 只会选择到相邻的第一个*/
    .p1+p{
       color: aqua;
       }
    /* css3的兄弟选择器 同级的都会选择*/
    .p1~p{
       color: blue;
       }
</style>

f.序选择器（结构伪类选择器）

/* 伪类选择器(序选择器) 使用范围：同级别 */、
        /* 同级别第一个 */
        p:first-child{
            color: aqua;
        }
        /* 同级别最后一个   nth-last-child(n):选中同级别中的倒数第n个标签*/
        p:last-child{
            color: blueviolet;
        }
        /* 同级别第n个 */
        p:nth-child(n){
            color: brown;
        }
        /* 同级别中的所有奇数 */
        p:nth-child(odd){
            color: antiquewhite;
        }
        /* 同级别中的所有偶数 */
        p:nth-child(even){
            color: aqua;
        }
        /* 1 4 7 */
        p:nth-child(3n+1){
            font-size: 28px;
        }
        /* 同级别同类型 第一个 */
        div:first-of-type{
            color: blue;
        }

注意点: 不区分类型

g.动态伪类选择器

<style>
        /* 动态伪类 如果同时使用四个效果，顺序一定不能变link,visited,hover,active*/
        /* 如果链接没被访问过 */
        a:link{
            color: aqua;
        }
        /* 用户已经访问过 */
        a:visited{
            color: rgb(41, 41, 46);
        }
        /* 用户鼠标悬停时 */
        a:hover{
            color: aquamarine;
        }
        /* 鼠标按住不动 */
        a:active{
            color: yellow;
        }
        /* 否定伪类 :not(类名) */
        p:not(.p2){
            color: green;
        }
</style>
<body>
    <a href="https://www.baidu.com">百度一下</a>
    <p>第1个标签</p>
    <p class="p2">第2个标签</p>
    <p>第3个标签</p>
    <p>第4个标签</p>
</body>

h.伪元素选择器

::after表示元素的最后边的部分，可以向after的位置添加一些内容格式：标签名::after{content: '';}

::before表示元素最前边的部分，可以向before的位置添加一些内容格式：标签名::before{content: '';}

::first-letter为第一个字符来设置样式格式::first-letter{ 属性:值 }

::first-line 为第一行设置一个样式格式::first-line{ 属性:值 }

i.属性选择器

作用: 根据指定的属性名称找到对应的标签, 然后设置属性

input[type=password]{ color:red }
<input type="text" name="" id="">
<input type="password" name="" id="">

/*属性的取值是以什么开头的  CSS2*/
input[name|='user']{ background-color: blue; } 
/*属性的取值是以什么开头的  css3 */
input[name^='user']{ background-color: aqua; }
<form action="">
        用户名：<input type="text" name="username">
        密码：<input type="password" name="user-name">
</form>

两者之间的区别: 由上面的代码段可以看出，CSS2中的只能找到user开头,并且user是被‘-’与其它内容隔开的 CSS3中的只要是以user开头的都可以找到, 无论有没有被-隔开。

j.通配符选择器和组合选择器

通配符选择器作用: 给当前界面上所有的标签设置属性，可以用来去除标签的默认样式格式: *{ 属性:值; }

组合选择器：给多个标签同时设置样式格式：标签名,标签名,标签名{ 属性:值 } eg:

#div1,#a1,#li1{
     color: blueviolet;
}
<div id="div1">我是一个div</div>
<a href="" id="a1">百度一下</a>
<ul>
   <li id="li1">1</li>
   <li>2</li>
   <li>3</li>
</ul>