day--14前端（HTML、CSS)
浏览器相当于客户端，浏览器访问服务端，收到消息之后里面断开，一次请求，一次响应，一次断开。
Web框架本质 http://www.cnblogs.com/wupeiqi/articles/5237672.html
众所周知，对于所有的Web应用，本质上其实就是一个socket服务端，用户的浏览器其实就是一个socket客户端。
#!/usr/bin/env python #coding:utf-8 import socket def handle_request(client): buf = client.recv(1024) client.send(b"HTTP/1.1 200 OK\r\n\r\n") client.send(b"Hello, Seven") def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bind(('localhost', 8000)) sock.listen(5) while True: connection, address = sock.accept() handle_request(connection) connection.close() if __name__ == '__main__': main()
上面，我们启动程序，在浏览器空白窗口输入localhost:8000，则会收到Hello,Seven的消息。
为什么网址都是有各种格式和颜色的，我们上面显示的只是简答的hello,Seven，现在我们让服务器断发送不一样的信息，如下：
client.send(b"<h1 style='background-color:red;'>Hello wrold</h1>")
此时，刷新浏览器，收到的消息如下：
Hello wrold
此时，字体是<h1></h1>段落的形式，背景颜色是红色，这是由于我们发送给浏览器的是浏览器识别的格式，能够进行格式的转换。
HTML架构：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
上面HTML是借助工具pycharm自动创建的html文件，是HTML的基本格式，<!DOCTYPE html>声明HTML文件
<html lang="en"> #lang="en"标签内部的属性lang="en"
<head></head> #头部
<body></body> #身体
</html>
注释<!-- message -->
<head></head>里面的标签
-<meta> charset="UFT-8"设置字符格式，防止中文乱码，默认utf-8可变长度的Unicode编码。
-<title>标题</title>
Meta(metadata information)
提供有关页面的元信息，例：页面编码，刷新，跳转，针对搜索引擎合更新频度的描述合关键词
1.页面编码（告诉浏览器是什么编码）
<meta http-equiv="content-type" content="text/html;charset="utf-8">
2.刷新和跳转
<meta http-equiv="refresh" content="2"> 默认两秒刷新一次网页，设置默认刷新<meta http-equiv="refresh" content="2">
间断一段时间跳转：
<meta http-equiv="refresh" content="3;Url=http://baidu.com"> 3秒钟之后跳转到百度的页面
<meta>这种跳转很少用，紧急的时候使用。
3.关键字
<meta name="kewwords" content="星际,老男孩，Alex，专访，苍老师">
4.描述
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" /> <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
<meta name="description" content="对网站的用途做简单的介绍，搜索引擎所搜到之后，会展示，告诉用户网站的用途" />
5.X_UA-Compatible 兼容性，现在浏览器都不支持IE6低版本，IE6是微软自定义的代码，现在通用HTML，不在支持低版本，需进行说明
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" /> 最先支持IE9,不兼容使用IE8
6.<link>标签
（1）、可以指定标题图片，比如每个标签旁边都有一个官方的图片，天猫，京东(JD)标志等，如下：
<link rel="shortcut icon" href="//common.cnblogs.com/favicon.ico" type="image/x-icon" /> #指定显示图标
二、<body></body>标签
（1）特殊符号
 代表空格，>代表>号，<代表小于号(<)
网络特殊符号地址：http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
（2）<p></P>标签
<p>标签段落，<br/>标签用来换行
（3）<h系列标签></h>
<span><h><p><br>标签简单练习，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="http://www.baidu.com">李 ><杰</a> <p>我是一直小小鸟，想要飞也肺部高，天高皇帝眼，老子相干啥就干涉，人生路，漫漫遥，想做的事情要趁早，其实，真的，养个儿子有撒谎用</p> <p>人生无常，要注意自己的身体，身体是革命的本钱，主要保护好自己的身体，才是最主要的，很多事情看开店，什么样儿放老，都是家的<br /> 很多事情都是骗人的，趁着年轻，多学点东西吧，莫让人生后悔，为了家人，多做点贡献，人生就是这样，要开心点，自然点 </p> <h1>第一段</h1> <h2>第二段</h2> <h3>块内标签有自己的属性</h3> <h4>行内标签，比如<span>没有自己的属性，是一个白板，需要自己定义</h4> <span>行内标签，都显示在一行，不会主动换行，额外其他功能</span><span>是吗，验证一下</span><span>Hello the world</span> </body> </html>
<input>系列标签
<input type="text"> #普通的文本框
<input type="password"> #输入密码，隐藏是输入
<input type="button" value="登录"> #登录按钮，登录数据提交哪里了，默认button没用，使用submit
<input type="submit" vlaue="登录"> #提交按钮，数据提交到哪里去了呢？
button和submit只是按钮，要想数据能够提交，必须嵌套在form标签里面<form></form>标签
<form></form>标签，里面有属性action，表示，把这个表单提交到哪里。<inputt>标签要与<from></form>标签结合使用。
<form action="url"></form>
<form action="rul">里面action属性，是指定提交到哪里？指定提交的位置。<form></form>表单可以有好几个，指定提交给那个表单。
<input type="text" name="user">里面的name属性，是指定提交数据的名字，<input>标签向后台提交数据，一定要加上name属性。
<form method="POST">里面还有method属性，指定按什么方式进行提供,GET和POST方法。
GET和POST方法有什么区别呢？
GET方法
http://localhost:8888/index?user=asfdasf&email=asdgasgf&pwd=asgdagassgda
会把提交的消息拼接到url上面，然后发送给服务器
POST方法：
http://localhost:8888/index
POST方法不会拼接，直接发送到web服务端，http提交数据会发送两部分信息，内容和头。
GET和POST提交的方法没有区别，抓包都能获取到，体现形式不一样。
写一个HTML代码，向sougou后台提交数据，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="https://www.sogou.com/web"> <input type="text" name="query" /> <input type="submit" name="搜狗搜索" /> </form> </body> </html>
上面HTML代码能把输入的数据提交到搜狗搜索的后台，我们使用搜狗搜索的时候，看HTML代码，如下：
https://www.sogou.com/web?query=%E8%80%BF%E9%95%BF%E5%AD%A6&_asf=www.sogou.com&_ast=&w=01015002&p=40040108&ie=utf8&from=index-nologin&s_from=index&oq=&ri=0&sourceid=sugg&suguuid=&sut=0&sst0=1506867616147&lkt=0%2C0%2C0&sugsuv=1506866777629189&sugtime=1506867616147
从上面可以看出，搜狗搜索的<input>属性name="query"，这样，我们就可以写一个简单HTML向https://www.sogou.com/web提交数据，搜狗采用的是GET方法向后台提交数据。
<input type="text" name="user" value="alex">标签里面,name向后台提交数据，必须有name属性，value属性是默认值。
单选框，我们知道，注册网站的时候，经常让我们选择男女，两者是互斥的，要么是男，要么是女，没有第三个选项，而别不可能两者都选，如何实现互斥，如下，只要让name属性的值一样即可，因为name是指定提交给谁，这样就能唯一指定。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form> <div> <p>请选择性别：</p> 男：<input type="radio" name="gender"/> #指定相同的name属性，以实现互斥的效果 女：<input type="radio" name="gender"/> #指定相同的name属性，以实现互斥的效果 Alex:<input type="radio" name="gender"/> #指定相同的name属性，以实现互斥的效果 <input type="submit" value="提交" /> </div> </form> </body> </html>
上面HTML代码中，name属性都是一样的，那如何让后台知道，用户选择的是男还是女，不能确定男女，造成混乱，如何解决的，加一个value属性，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form> <div> <p>请选择性别：</p> 男：<input type="radio" name="gender" value="1"/> #通过设置value属性，进行区分 男gender=1 女：<input type="radio" name="gender" value="2"/> #通过设置value属性，进行区分 女gender=2 Alex:<input type="radio" name="gender" value="3"/> #通过设置value属性，进行区分 人妖gender=3 <input type="submit" value="提交" /> </div> </form> </body> </html>
上面，我们设置了value属性，现在选择不同的性别，然后提交，如下：
男：http://localhost:63342/day13/s1/s5.html?gender=1 女：http://localhost:63342/day13/s1/s5.html?gender=2 Alex：http://localhost:63342/day13/s1/s5.html?gender=3
上面代码中，我们通过设置value属性值，让gender=1、2、3以便能够确认男女。
复选框：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form enctype="multipart/form-data"> <div> <p>请选择性别：</p> 男：<input type="radio" name="gender" value="1" checked="checked"/> 女：<input type="radio" name="gender" value="2"/> Alex:<input type="radio" name="gender" value="3"/> <input type="submit" value="提交" /> <p>爱好：</p> 篮球：<input type="checkbox" name="favor" value="1"/> #复选框，checkbox，name是后台取数，value是区分那个爱好 足球：<input type="checkbox" name="favor" value="2"/> #复选框，checkebox，name是属性指定后台名字，value是告诉后台那个指令 皮球：<input type="checkbox" name="favor" value="3"/> 台球：<input type="checkbox" name="favor" value="4"/> 网球：<input type="checkbox" name="favor" value="5"/> <br /> <input type="submit" value="提交" /> <p>上传文件：</p> <input type="file" name="fname"/> <!-- name属性是指定上传到那个地方，取得时候直接取就可以--> <input type="submit" value="提交" /> <p>重置，我们经常看到很多网站，如果用户输入有无，不需要全部去除，秩序重置即可</p> <input type="reset" value="重置"/> <!-- reset是重置，重置上面form输入的信息，重新输入--> </div> </form> </body> </html>
<textarea>默认值<textarea>标签，多行文本输入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="http://baidu.com"> <textarea name="mess">默认值</textarea> #多行文本输入，可以输入多行文本数据 <!-- 提交给后台，需要name属性，这样才能提交给后台，默认值放中间 --> <input type="submit" value="提交" /> </form> </body> </html>
<select><option></option></select>下拉框选项
在select里面定义name属性，指定提交名称,在option里面指定value属性，区分不同选项
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form> <div> <select name="city"> #定义城市名字city，告诉web提交到哪里 <option value="1">北京</option> #定义value属性，区分不同的城市 <option value="2">上海</option> <option value="3">郑州</option> <option value="4">长沙</option> </select> <input type="submit" value="提交" /> </div> </form> </body> </html>
上面城市只能单一选择，如果向同时选中两个提交到后台，如何选择呢，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form> <div> <select name="city" multiple="multiple" size="1"> <!-- multiple是多选框multiple="multiple"指定多选，size="10"规定多选框的长度 --> <option value="1" selected="selected">北京</option> <!-- selected=selected默认是被选中 --> <option value="2">上海</option> <option value="3">郑州</option> <option value="4">长沙</option> </select> <input type="submit" value="提交" /> </div> </form> </body> </html>
层级下拉框：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form> <div> <select name="city"> #设置select标签的name属性，告诉后台属性名 <optgroup label="河南省"> #指定上一级标签名label="标签名" <option value="1">郑州</option> #设置城市 <option value="2">南阳</option> <option value="3">洛阳</option> <option value="4">开封</option> </optgroup> <optgroup label="湖南省"> <option>长沙</option> <option>益阳</option> <option>娄底</option> <option>岳阳</option> </optgroup> </select> <input type="submit" value="提交" /> </div> </form> </body> </html>
<optgroup>标签隶属于<select>标签，只有在<select>标签里面才可以使用,并且只能定义一次。
<a href="url" target="">a标签有两个用途：(1)超链接；(2)锚（文档内跳转到某一个地方）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="http://baidu.com">百度</a> #a标签，跳转到某一个地方 </body> </html>
a标签里面有个target属性,默认，我们正常点击进去之后，会在当前页显示超链接的网址信息，target="_blank"，是重新打开一个新的网页；target="_parent"默认是在当前页打开超链接的网址；target="_self"也是默认当前页打开超链接；
a标签当锚使用，在当前也内做跳转，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <a href="#i1">第一章</a> #href超链接，链接当前网页的信息，#号i1关联下面出现i1的id，当前网页的链接 <a href="#i2">第二章</a> #href链接当前网页，并且id不能重复 <a href="#i3">第三章</a> <a href="#i4">第四章</a> <div id="i1" style="height:700px;">第一章的内容</div> #id超链接使用，并且每个div标签里面的id不能重复 <div id="i2" style="height:700px;">第二章的内容</div> <div id="i3" style="height:700px;">第三章的内容</div> <div id="i4" style="height:700px;">第四章的内容</div> </div> </body> </html>
上面代码实现了本地的超链接，可以跳转到当前的网页，如下：
http://localhost:63342/day13/s1/s7.html#i3
在跳转后，网页后面会加上一个#i3的标志，当前网页内部的跳转，所以一定要加#号进行关联。HTML中，id不能重复。
img--标签，图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <image src="image.png" style="height:200px;width:200px;"></image> #src="图片地址" style="height:高度;width:宽度",stype标签设置图片高度合宽度 </body> </html>
我们知道，经常我们点击图片的时候会跳转到一个链接，如何做到的呢？把<img></img>标签当作参数给<a><img></img></a>标签，嵌套即可，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="http://jd.com" target="_blank"> #超链接的地址，点击跳转到京东商场 <image src="image.png" style="height:200px;width:200px;"></image> #图片的链接 </a> </body> </html>
图片的链接里面有一些属性，src是指定普通地址，title属性，是图片的标题，放上去会显示标题；alt属性是如果图片损坏，或者图片地址获取，显示的信息，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="http://jd.com" target="_blank"> <image src="image.png" style="height:200px;width:200px;" title="京东商场" alt="京东"></image>
<!-- src属性是图片地址，title属性是图片的名字，放上去会显示，alt是图片损坏之后，会显示的信息 --> </a> </body> </html>
列表：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>第一章</li> #以点的形式排列 <li>第二章</li> <li>第三章</li> <li>第四章</li> </ul> <div> <ol> <li>段落1</li> #以1.的形式排列 <li>段落2</li> <li>段落3</li> <li>段落4</li> </ol> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <dl> #定义以层级显示的方式 <dt>第一章</dt> #第一层 <dd>第1节</dd> #第二层 <dd>第2节</dd> <dd>第3节</dd> <dd>第4节</dd> <dt>第二章</dt> <dd>第1节</dd> <dd>第2节</dd> <dd>第3节</dd> <dd>第4节</dd> </dl> </div> </body> </html>
效果如下：
第一章
第1节
第2节
第3节
第4节
第二章
第1节
第2节
第3节
第4节
表格：
表格的展示，行列，标题，表格分为标题和内容<tbody>（内容）<thead>（标题）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <table> <tr> <td>第一行，第一列</td> #表格分为行和列，tr代表的是行，td代表的是列 <td>第一行，第二列</td> <td>第一行，第三列</td> </tr> <tr> <td>第二行，第一列</td> <td>第二行，第二列</td> <td>第二行，第三列</td> </tr> <!-- 表格分为行和列，行是<tr></tr>，列是<td></td> --> </table> </div> </body> </html>
<table border="1"><table>其中，border把标签是定义边框。
表格里面的超链接，我们在Excel中经常会在表格中做超链接，链接到其他地方，在HTML中表格也可以，只需要把<a>标签当作参数传递给单元格即可，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <table border="1"> <tr> <td><a href="s3.html" target="_blank">百度</a></td> #把<a>标签当作参数传递给<td>列标签，这个单元格就能超链接到指定的地址。 <td>第一行，第二列</td> <td>第一行，第三列</td> </tr> <tr> <td>第二行，第一列</td> <td>第二行，第二列</td> <td>第二行，第三列</td> </tr> <!-- 表格分为行和列，行是<tr></tr>，列是<td></td> --> </table> </div> </body> </html>
表格详解：
表格是有表头和内容构成的，<thead><tbody>，其中,<thead><tr><th>里面是有行和表头th构成。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <table border="2"> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> <th>表头4</th> </tr> </thead> <tbody> <tr> <td>Alex</td> <td>女</td> <td>38</td> <td>北京</td> </tr> <tr> <td>耿长学</td> <td>男</td> <td>27</td> <td>长沙</td> </tr> <tr> <td>wupeiqi</td> <td>女</td> <td>8</td> <td>保定</td> </tr> <tr> <td>wupeiqi</td> <td>女</td> <td>8</td> <td>保定</td> </tr> <tr> <td>wupeiqi</td> <td>女</td> <td>8</td> <td>保定</td> </tr> </tbody> </table> </div> </body> </html>
合并单元格，行列合并的情况，合并单元格是在里面添加属性，如下：
合并单元格，colspan="n"进行列的合并，合并n个列的单元格，rowspan="n"合并行的单元格，进行单元格行的合并，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <table border="2"> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> <th>表头4</th> </tr> </thead> <tbody> <tr> <td>Alex</td> <td>女</td> <td>38</td> <td>北京</td> </tr> <tr> <td rowspan="2">耿长学</td> #单元格行的合并rowspan <td colspan="2">男</td> #单元格列的合并,colspan <td>长沙</td> </tr> <tr> <td>女</td> <td>8</td> <td>保定</td> </tr> <tr> <td>wupeiqi</td> <td>女</td> <td>8</td> <td>保定</td> </tr> <tr> <td>wupeiqi</td> <td>女</td> <td>8</td> <td>保定</td> </tr> </tbody> </table> </div> </body> </html>
-- label标签
label标签和input标签结合使用，结合id使用，指定lable指定的是那个input输入，登录输入的时候会用到，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>老男孩</title> </head> <body> <label for="i1">用户名：</label> #lable标签使用for属性进行关联 <input id="i1" type="text" name="user"/> #id属性和label标签进行关联，让用户点击用户名的时候，能跳转到登录空输入 <br> <label for="i2">密码：</label> <input id="i2" type="password" name="pwd" /> </body> </html>
--fieldset标签，用于显示复选框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>老男孩</title> </head> <body> <fieldset> <legend>登录</legend> <label for="i3">密码：</label> <input id="i3" type="password" name="pwd" /> <br /> <label for="i4" >密码：</label> <input id="i4" type="password" name="pwd" /> </fieldset> </body> </html>
CSS格式设置
可以在<head>标签中定义样式<style></style>属性，通过里面的属性，设置格式，通过calss应用到每个标签里面，class的属性值是可以重复的，id在HTML中不能重复，但是class可以重复，就解决了标签样式重用的问题，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #i1{ background-color:chartreuse; height:48px; } .c1{ background-color:forestgreen; height:50px; }
<!-- #定义的标签与id结合，id不能重复，只能使用一次；.定义的标签与class属性结合，class可以重复，解决了样式重复使用的问题 --> </style> </head> <body> <div class="c1">第一段</div> <div class="c1">第二段</div> <div class="c1">第三段</div> </body> </html>
对html中某一个标签都加上某一个背景，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ background-color:deeppink; height:50px; }
<!-- 对所有的div标签都加上样式，其他的不管，所有的div执行同一个样式 --> </style> </head> <body> <div class="c1">第一段</div> <span class="c1">第二段</span> <div class="c1">第三段</div> </body> </html>
上面HTML代码，对所有的<div></div>标签都同时执行一个样式。
对某个标签下的标签执行某种样式，关联标签，比如<span>标签下面的<div>标签执行样式，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span div{ background-color:hotpink; height:38px; } </style> <!-- 表示对上述span 下的div标签执行样式操作 --> </head> <body> <div class="c1">第一段</div> <span class="c1"><div>第二段</div></span> <div class="c1">第三段</div> </body> </html>
上面CSS样式是对<span>标签下面的<div>标签执行CSS样式
对标签中某个属性等于某个值的标签执行样式，比如input标签里面type属性等于"text"的标签执行样式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> input[type='text']{ background-color:lightcoral; height:36px; } </style> <!-- 表示对上述span 下的div标签执行样式操作 --> </head> <body> <input type="text" name="username" /> <input type="submit" /> </body> </html>
一个标签里面的属性可以同时使用两个样式，样式的优先级，标签里面的优先级优先，标签外面的样式按照先后顺序，后面的样式会覆盖前面的样式。如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color:red; color:white; } .c2{ font-size:28px; color:black; } </style> </head> <body> <div class="c1 c2" style="color:deeppink">一个标签里面科研应用两个样式</div> </body> </html>
style属性中float设置，float是网页中肯定有的属性，把网页进行分块，我们知道，<div>标签是块级标签，当有几个<div>把标签的时候，是分层堆叠的，如何让<div>标签在行内显示，可以使用style属性中的float进行设置，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="background-color:red;width:30%;float:left">1</div> #进行浮动，让标签浮动起来，行内显示 <div style="background-color:deeppink;width:40%;float:left">2</div> <div style="background-color:green;width:30%;float:left">3</div> </body> </html>
上面<body>标签中有三个<div>标签，把整体分成了三块，每块的宽度加起来正好是100%，如果宽度超过100%还是会分层显示的。float是让标签进行浮动。漂浮的方向一致。
