day--14前端（HTML、CSS)
浏览器相当于客户端，浏览器访问服务端，收到消息之后里面断开，一次请求，一次响应，一次断开。
Web框架本质 http://www.cnblogs.com/wupeiqi/articles/5237672.html
众所周知，对于所有的Web应用，本质上其实就是一个socket服务端，用户的浏览器其实就是一个socket客户端。
#!/usr/bin/env python
#coding:utf- import socket def handle_request(client):
buf = client.recv()
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', ))
sock.listen() 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=""/> #通过设置value属性，进行区分 男gender=1
女：<input type="radio" name="gender" value=""/> #通过设置value属性，进行区分 女gender=2
Alex:<input type="radio" name="gender" value=""/> #通过设置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="" checked="checked"/>
女：<input type="radio" name="gender" value=""/>
Alex:<input type="radio" name="gender" value=""/>
<input type="submit" value="提交" />
<p>爱好：</p>
篮球：<input type="checkbox" name="favor" value=""/> #复选框，checkbox，name是后台取数，value是区分那个爱好
足球：<input type="checkbox" name="favor" value=""/> #复选框，checkebox，name是属性指定后台名字，value是告诉后台那个指令
皮球：<input type="checkbox" name="favor" value=""/>
台球：<input type="checkbox" name="favor" value=""/>
网球：<input type="checkbox" name="favor" value=""/>
<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="">北京</option> #定义value属性，区分不同的城市
<option value="">上海</option>
<option value="">郑州</option>
<option value="">长沙</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="">
<!-- multiple是多选框multiple="multiple"指定多选，size=""规定多选框的长度 -->
<option value="" selected="selected">北京</option>
<!-- selected=selected默认是被选中 -->
<option value="">上海</option>
<option value="">郑州</option>
<option value="">长沙</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="">郑州</option> #设置城市
<option value="">南阳</option>
<option value="">洛阳</option>
<option value="">开封</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="data: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="data: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="data: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="">
<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="">
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alex</td>
<td>女</td>
<td></td>
<td>北京</td>
</tr>
<tr>
<td>耿长学</td>
<td>男</td>
<td></td>
<td>长沙</td>
</tr>
<tr>
<td>wupeiqi</td>
<td>女</td>
<td></td>
<td>保定</td>
</tr>
<tr>
<td>wupeiqi</td>
<td>女</td>
<td></td>
<td>保定</td>
</tr>
<tr>
<td>wupeiqi</td>
<td>女</td>
<td></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="">
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alex</td>
<td>女</td>
<td></td>
<td>北京</td>
</tr>
<tr>
<td rowspan="">耿长学</td> #单元格行的合并rowspan
<td colspan="">男</td> #单元格列的合并,colspan
<td>长沙</td>
</tr>
<tr>
<td>女</td>
<td></td>
<td>保定</td>
</tr>
<tr>
<td>wupeiqi</td>
<td>女</td>
<td></td>
<td>保定</td>
</tr>
<tr>
<td>wupeiqi</td>
<td>女</td>
<td></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"></div> #进行浮动，让标签浮动起来，行内显示
<div style="background-color:deeppink;width:40%;float:left"></div>
<div style="background-color:green;width:30%;float:left"></div>
</body>
</html>
上面<body>标签中有三个<div>标签，把整体分成了三块，每块的宽度加起来正好是100%，如果宽度超过100%还是会分层显示的。float是让标签进行浮动。漂浮的方向一致。
day--14前端（HTML、CSS)的更多相关文章
- 第二篇：web之前端之css
前端之css 前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式 ...
- 前端之CSS：CSS选择器
前端之css样式(选择器)... 一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器, ...
- 前端之CSS基础
前端之CSS 1. CSS CSS定义如何显示HTML元素. 当浏览器读到一个样式表,他就会按照这个样式表来对文档进行格式化(渲染). 3.CSS语法 1)CSS实例 每个CSS由两部分组成: 选择器 ...
- 前端之CSS初识
figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...
- 前端开发css实战：使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- 前端之css
前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- 前端基础——css
前端基础——css css的内容主要包括:盒子模型.定位.单位与取值.属性.选择器.
随机推荐
- MT【108】线面角最小
评:线面角最小,在此类最值中经常用到,作为选择填空可以投机.
- 【CF605E】Intergalaxy Trips（贪心，动态规划）
[CF605E]Intergalaxy Trips(贪心,动态规划) 题面 Codeforces 洛谷 有\(n\)个点,每个时刻第\(i\)个点和第\(j\)个点之间有\(p_{ij}\)的概率存在 ...
- BZOJ2322 [BeiJing2011]梦想封印 【set + 线性基】
题目链接 BZOJ2322 题解 鉴于BZOJ2115,要完成此题,就简单得多了 对图做一遍\(dfs\),形成\(dfs\)树,从根到每个点的路径形成一个权值,而每个返祖边形成一个环 我们从根出发去 ...
- 前端学习 -- Css -- 文本样式
text-transform可以用来设置文本的大小写 可选值: none 默认值,该怎么显示就怎么显示,不做任何处理 capitalize 单词的首字母大写,通过空格来识别单词 uppercase 所 ...
- GDKOI2018发烧记
偏远小渔村NOIP螺旋升天选手又一次来到了广州参加GDKOI...金实的初三爷们也来啦?要被碾啦T T Day 0 跟HR Lao爷拼(biao)车到了高铁站,上了高铁居然没有颓颓颓吃吃吃(雾),安心 ...
- POJ 3436 ACM Computer Factory （网络流，最大流）
POJ 3436 ACM Computer Factory (网络流,最大流) Description As you know, all the computers used for ACM cont ...
- sqlite3数据库的简要应用
Sqlite3数据库升级方案的变化. 1, 若是讲要升级的数据库版本更高,则从低版本数据库中拷贝与新数据库相同字段的内容,其他字段按照默认值创建.A->B->C这样逐个版本升级,每个版本 ...
- git-jenkins-k8s构建tomcat项目实践
相关环境(部署安装略...):jenkins 安装k8s 集群环境部署docker 私有仓库搭建 jenkins 创建项目 Execute shell 构建docker镜像上传到私有仓库,以构建时间做 ...
- matplotlib交互模式与pacharm单独Figure设置
matplotlib交互模式与pacharm单独Figure设置 觉得有用的话,欢迎一起讨论相互学习~Follow Me Matpotlib交互模式 在运行python程序时有时候需要生成以下的 动态 ...
- cin,cout,printf,scanf效率对比
From:http://www.cnblogs.com/killerlegend/p/3918452.html Author:KillerLegend Date:2014.8.17 杭电OJ之3233 ...