Python及HTML基础（1）

对于一个网页而言，是由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]
 ] }]