对于一个网页而言，是由html+css+javascript构成，html实现了网页的基本结构，css实现网页的样式，相当于对网页进行了装饰，而javascript实现了网页的功能，将网页动态化。
- html是由标签构成，常用的标签有10多种，而绝大部分的标签都是成对出现，比如
<div></div>，<head></head>等，要注意的是<img src="" />是个空标签，只包含属性，没有闭合标签。
关于<img src="" />
- 对于
<img src="" />的基本用法，常用的如下所示：<img src="" />src后面指存储图像的位置，浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
<img src="" />在浏览器无法正常载入图片时，替换文本属性（alt）会告诉读者缺失的信息，此时浏览器显示的是替代信息而不是图片。要注意的是，假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。
关于style
- style 属性的作用：提供了一种改变所有 HTML 元素的样式的通用方法。举例如下：
<body style="background-color:#F5F5F5">
<h1 style="color:LightSlateGray">Hello,Magciworld!
</h1>
<p style="color:LightSteeBlue">
编程是新时代的魔法，我们带你一起去掌握它
</p>
<a href="http://www.mugglecoding.com/" target="_top">
src="http://o9b3plsb8.bkt.clouddn.com/magicbox" alt="Magic Box" width="600"/>Welcome
</a>
</body>
要注意style出现的位置，每对标签的第一个标签尖括号内，当然除了颜色以外，还可以设置字体font-family、font-size，边距等，注意颜色、字体大小格式以分号分隔，举例如下：
<html>
<head>
<meta charset="utf-8">
<title>1</title>
</head>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;fond-size:20px;">A paragraph
</p>
</body>
</html>
关于<a></a>
-我们通过使用<a></a>标签在html中创建链接，有两种使用<a></a> 标签的方式：
1.通过使用 href 属性 - 创建指向另一个文档的链 接
2.通过使用 name 属性 - 创建文档内的书签
链接的 HTML 代码很简单。它类似这样：
<a href = "http://www.w3school.com.cn/">Link Text</a>
一个完整的实例（包括以上内容）
<html>
<head>
<meta charset="utf-8">
<title>My Webpage</title>
</head>
<body style="background-color:#F5F5F5">
<h1 style="color:LightSlateGray">Hello,Magciworld!
</h1>
<p style="color:LightSteeBlue">
编程是新时代的魔法，我们带你一起去掌握它
</p>
<a href="http://www.mugglecoding.com/" target="_top">
src="http://o9b3plsb8.bkt.clouddn.com/magicbox" alt="Magic Box" width="600"/>Welcome
</a>
</body>
</html>
lianxi.png
jyputer的安装、使用
安装命令：python -m pip install jupyter
启动命令：jupyter notebook
charts的安装、使用
Python3.5使用需要替换文件，2.7不需要
安装命令：python -m pip install jupyter
mongodb的查询
conn = pymongo.MongoClient("localhost", 27017)
name = conn.name
coll = name.coll
coll.find({'这里面是筛选条件'},{'这是现实条件'})
charts的使用
#条形图
series = [
{'name': 'John','data': [5],'type': 'column'},
{'name': 'John','data': [5],'type': 'column'}]
charts.plot(series, show='inline',options=dict(title=dict(text='表名')))
#折线图
options = {
'chart' : {'zoomType':'xy'},
'title' : {'text': 'Monthly Average Temperature'},
'subtitle': {'text': 'Source: WorldClimate.com'},
'xAxis' : {'categories': ['周一', '周二', '周三', '周四']},
'yAxis' : {'title': {'text': '数量'}}
}
series = [
{ 'name': 'OS X', 'data': [11,2,3,4], 'type': 'line', 'y':5},
{ 'name': 'Ubuntu', 'data': [8,5,6,7], 'type': 'line', 'color':'#ff0066'},
{ 'name': 'Windows', 'data': [12,6,7,2], 'type': 'line'},
{ 'name': 'Others', 'data': [29,24,68,23], 'type': 'line'} ]
charts.plot(series, options=options,show='inline')
#扇形图
options = {
'chart' : {'zoomType':'xy'},
'title' : {'text': '发帖量统计'},
'subtitle': {'text': '可视化统计图表'},
}
series = [
{ 'type': 'pie',
'name': 'Browser share',
'data':[
['北京二手家电', 8836],
['北京二手文体/户外/乐器', 5337],
['北京二手数码产品', 4405],
['北京二手服装/鞋帽/箱包', 4074],
['北京二手母婴/儿童用品', 3124],
['北京二手台式机/配件', 2863],
['北京二手图书/音像/软件', 2777],
['北京二手办公用品/设备', 2496],
['北京二手家具', 1903],
['北京二手美容/保健', 1838],
['北京二手手机', 1603],
['北京二手笔记本', 1174],
['北京二手设备', 1004],
['北京其他二手物品', 761],
['北京二手平板电脑', 724]
] }]
