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, br10 ????????????????Accept-Language:zh-CN,zh;q=0.911 ????????????????Connection:keep-alive12 ????????????????Cookie:BAIDUID=47A6DD50BC3D91236FEE1906BD2DE0B6:FG=1; BIDUPSID=47A6DD50BC3D91236FEE1906BD2DE0B6; PSTM=1510046493; ispeed_lsm=10; BD_UPN=12314753; BDORZ=B490B5EBF6F3CD402E515D22BCDA159813 ????????????????Host:www.baidu.com14 ????????????????Upgrade-Insecure-Requests:115 ????????????????User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.89 Safari/537.3616 ????????空行：17 ????????请求体：18 ????????--如果是get方式提交，数据是存放在UTL后面；而post是放在请求体中。19 ????响应：20 ????????Bdpagetype:121 ????????Bdqid:0x8f6422cd0005396922 ????????Bduserid:023 ????????Cache-Control:private24 ????????Connection:Keep-Alive25 ????????Content-Encoding:gzip26 ????????Content-Type:text/html; charset=utf-827 ????????Cxy_all:baidu+10365439d71d1527700dadaf75cc64b228 ????????Date:Wed, 08 Nov 2017 10:05:53 GMT29 ????????Expires:Wed, 08 Nov 2017 10:05:32 GMT30 ????????Server:BWS/1.131 ????????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.com34 ????????Strict-Transport-Security:max-age=17280035 ????????Transfer-Encoding:chunked36 ????????Vary:Accept-Encoding37 ????????X-Powered-By:HPHP38 ????????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:gray11 ????????}12 ????????#div1{13 ????????????color:green;14 ????????????background:blue15 ????????}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:#8ABCD833 ????????}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:20px27 ????????}28 ????????.div3{29 ????????????border:dashed 2px black;30 ????????????height:300px;31 ????????????width:20%;32 ????????????background-color:blue;33 ????????????margin:30px;34 ????????????padding:30px35 ????????}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 2px10 ????????}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:100px23 ????????}24 ????</style>25 </head>26 <body>27 <!--练习：300px*300px的盒子装着100px*100px的盒子，通过margin和padding设置小盒子移动到大盒子的中间-->28 29 ????<div class="div1">1130 ????????????<div class="div2">31 32 ????????????</div>33 ????</div>34 35 </body>36 </html>css一些简单的例子
原文地址：http://www.cnblogs.com/lizeboLB/p/7807010.html