amelieykw

网页就是HTML？

这么理解大概没错。 因为网页中不但包含文字，还有图片、视频、Flash小游戏，有复杂的排版、动画效果，所以，HTML定义了一套语法规则，来告诉浏览器如何把一个丰富多彩的页面显示出来。

HTML长什么样？

上次我们看了新浪首页的HTML源码，如果仔细数数，竟然有6000多行！

所以，学HTML，就不要指望从新浪入手了。

amelieykw

定义函数的时候，我们把参数的名字和位置确定下来，函数的接口定义就完成了。

对于函数的调用者来说，只需要知道如何传递正确的参数，以及函数将返回什么样的值就够了，函数内部的复杂逻辑被封装起来，调用者无需了解。

Python的函数定义非常简单，但灵活度却非常大。 除了正常定义的必选参数外，还可以使用默认参数、可变参数和关键字参数，使得函数定义出来的接口，不但能处理复杂的参数，还可以简化调用者的代码。

Contents

参数类型	简介

amelieykw

通过列表生成式，我们可以直接创建一个列表。

但是，受到内存限制，列表容量肯定是有限的。

而且，创建一个包含100万个元素的列表，不仅占用很大的存储空间，如果我们仅仅需要访问前面几个元素，那后面绝大多数元素占用的空间都白白浪费了。

所以，如果列表元素可以按照某种算法推算出来，那我们是否可以在循环的过程中不断推算出后续的元素呢？这样就不必创建完整的list，从而节省大量的空间。

在Python中，这种一边循环一边计算的机制，称为生成器：generator。

amelieykw

• In the previous chapter, I explained how to set up a Django project and run the Django development server.
• In this chapter, you’ll learn the basics of creating dynamic web pages with Django.

Your First Django-Powered Page: Hello World

As our first goal, let’s create a web page that outputs that famous example message: “Hello world.”

If you were publishing a simple “Hello world” web page without a web framework, you’d simply type “Hello world” into a text file, call it “hello.html“, and upload it to a directory on a web server somewhere. Notice in that process you’ve specified two key pieces of information about that web page:

1. its contents (the string "Hello world")
2. its URL (e.g. http://www.example.com/hello.html).

amelieykw

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

amelieykw

Highcharts.chart('container', {

    chart: {
        polar: true,
        type: 'line',
        backgroundColor: 'transparent'
    },

    title: {
        text: null,

amelieykw

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

amelieykw

#container {
	min-width: 310px;
	max-width: 1000px;
  max-height: 200px;
	margin: 0 auto
}

amelieykw

Flexbox Layout

aims at :

providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").

• give the container the ability to alter its items' width/height (and order) to best fill the available space
• A flex container expands items to fill available free space, or shrinks them to prevent overflow.

Note: is most appropriate to

amelieykw

Original Article

CSS Grid Layout	CSS Flexbox Layout
2-dimensional system (handle both columns and rows)	largly a 1-dimensional system
apply CSS rules both to a parent element (Grid Container) + that elements' children (Grid Items)

Content

• Basic and Browser Support
• Important Terminology