1.http协议
1 一：HTTP协议：hypertext transport protocol(超文本传输协议) 2 特点： 3 1.请求与响应 4 2.无状态的协议 5 请求协议： 6 请求首行： 7 请求头信息： 8 Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 9 Accept-Encoding:gzip, deflate, br 10 Accept-Language:zh-CN,zh;q=0.9 11 Connection:keep-alive 12 Cookie:BAIDUID=47A6DD50BC3D91236FEE1906BD2DE0B6:FG=1; BIDUPSID=47A6DD50BC3D91236FEE1906BD2DE0B6; PSTM=1510046493; ispeed_lsm=10; BD_UPN=12314753; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598 13 Host:www.baidu.com 14 Upgrade-Insecure-Requests:1 15 User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.89 Safari/537.36 16 空行： 17 请求体： 18 --如果是get方式提交，数据是存放在UTL后面；而post是放在请求体中。 19 响应： 20 Bdpagetype:1 21 Bdqid:0x8f6422cd00053969 22 Bduserid:0 23 Cache-Control:private 24 Connection:Keep-Alive 25 Content-Encoding:gzip 26 Content-Type:text/html; charset=utf-8 27 Cxy_all:baidu+10365439d71d1527700dadaf75cc64b2 28 Date:Wed, 08 Nov 2017 10:05:53 GMT 29 Expires:Wed, 08 Nov 2017 10:05:32 GMT 30 Server:BWS/1.1 31 Set-Cookie:BDSVRTM=0; path=/ 32 Set-Cookie:BD_HOME=0; path=/ 33 Set-Cookie:H_PS_PSSID=1424_24866_24558_21107_24879_22159; path=/; domain=.baidu.com 34 Strict-Transport-Security:max-age=172800 35 Transfer-Encoding:chunked 36 Vary:Accept-Encoding 37 X-Powered-By:HPHP 38 X-Ua-Compatible:IE=Edge,chrome=1
2.css选择器（标签名，id,类，属性，伪类）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css</title> 6 7 <style> 8 #div2{ 9 color:red; 10 background:gray 11 } 12 #div1{ 13 color:green; 14 background:blue 15 } 16 17 </style> 18 <!--注意这里必须加上rel='stylesheet'，外部文件才能生效，告诉浏览器是层叠样式表--> 19 <!--在css选择器中有一个加载顺序，简单说就是就近原则。作用域越小，优先级越高--> 20 <link type="text/css" rel="stylesheet" href="mycss.css" /> 21 </head> 22 <body> 23 <div id="div2">hello world</div> 24 <div id="div1">nihao</div> 25 <div id="div3">hellllll</div> 26 </body> 27 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css选择器</title> 6 <!--四种选择器： 7 1.通用选择器 8 2.标签名选择器 9 3.id选择器（唯一值） 10 4.class类选择器(可以有多个，这多个成为一类) 11 5.基本组合选择器比如：#outer .c1{}---后代选择器 12 #outer,.c1{}---并列选择器 13 #outer>.c1>.c2{}---子代选择器 14 #outer+.c1{}----相邻标签选择器（必须是紧挨着才有用） 15 6.属性选择器： 16 --> 17 <style> 18 *{ 19 font-size:45px; 20 } 21 p{ 22 background-color:yellow; 23 } 24 div{ 25 color:green; 26 } 27 #p1{ 28 color:red; 29 } 30 .c1{ 31 color:gray; 32 background-color:#8ABCD8 33 } 34 </style> 35 </head> 36 <body> 37 <p >hello</p> 38 <div >hello div hello span</div> 39 <p id="p1">你好</p> 40 <div class="c1">我子啊</div> 41 <div class="c1" >你们</div> 42 </body> 43 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>伪类选择器</title> 6 7 <style > 8 a:link{ 9 color:red; 10 } 11 a:hover{ 12 color:yellow; 13 } 14 a:visited{ 15 color:purple; 16 } 17 a:active{ 18 color:green; 19 } 20 </style> 21 </head> 22 <body> 23 <a href="https://www.baidu.com">百度</a> 24 </body> 25 </html>
3.外边框和内边距
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>内外边距</title> 6 7 <style> 8 body{ 9 border:dashed 5px red; 10 11 } 12 .div1{ 13 border:dashed 2px black; 14 height:200px; 15 width:30%; 16 background-color:purple; 17 margin:10px; 18 padding:10px; 19 } 20 .div2{ 21 border:dashed 2px black; 22 height:200px; 23 width:20%; 24 background-color:green; 25 margin:20px; 26 padding:20px 27 } 28 .div3{ 29 border:dashed 2px black; 30 height:300px; 31 width:20%; 32 background-color:blue; 33 margin:30px; 34 padding:30px 35 } 36 </style> 37 </head> 38 <body> 39 <!--在css中一切都是盒子模型--> 40 <div class="div1">div1</div> 41 <div class="div2">div2</div> 42 <div class="div3">div3</div> 43 </body> 44 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>练习</title> 6 <style> 7 body{ 8 margin:0px; 9 border:solid 2px 10 } 11 .div1{ 12 height:300px; 13 width:300px; 14 background-color:green; 15 border:1px solid black; 16 padding:20px; 17 } 18 .div2{ 19 height:100px; 20 width:100px; 21 background-color:red; 22 margin:100px 23 } 24 </style> 25 </head> 26 <body> 27 <!--练习：300px*300px的盒子装着100px*100px的盒子，通过margin和padding设置小盒子移动到大盒子的中间--> 28 29 <div class="div1">11 30 <div class="div2"> 31 32 </div> 33 </div> 34 35 </body> 36 </html>