目录

1. 简介2. Python历史3. 安装Python3.1. Python解释器4. 第一个Python程序4.1. 使用文本编辑器4.2. 输入和输出5. Python基础5.1. 数据类型和变量5.2. 字符串和编码5.3. 使用list和tuple5.4. 条件判断5.5. 模式匹配5.6. 循环5.7. 使用dict和set6. 函数6.1. 调用函数6.2. 定义函数6.3. 函数的参数6.4. 递归函数7. 高级特性7.1. 切片7.2. 迭代7.3. 列表生成式7.4. 生成器7.5. 迭代器8. 函数式编程8.1. 高阶函数8.1.1. map/reduce8.1.2. filter8.1.3. sorted8.2. 返回函数8.3. 匿名函数8.4. 装饰器8.5. 偏函数9. 模块9.1. 使用模块9.2. 安装第三方模块10. 面向对象编程10.1. 类和实例10.2. 访问限制10.3. 继承和多态10.4. 获取对象信息10.5. 实例属性和类属性11. 面向对象高级编程11.1. 使用__slots__11.2. 使用@property11.3. 多重继承11.4. 定制类11.5. 使用枚举类11.6. 使用元类12. 错误、调试和测试12.1. 错误处理12.2. 调试12.3. 单元测试12.4. 文档测试13. IO编程13.1. 文件读写13.2. StringIO和BytesIO13.3. 操作文件和目录13.4. 序列化14. 进程和线程14.1. 多进程14.2. 多线程14.3. ThreadLocal14.4. 进程 vs. 线程14.5. 分布式进程15. 正则表达式16. 常用内建模块16.1. datetime16.2. collections16.3. argparse16.4. base6416.5. struct16.6. hashlib16.7. hmac16.8. itertools16.9. contextlib16.10. urllib16.11. XML16.12. HTMLParser16.13. venv17. 常用第三方模块17.1. Pillow17.2. requests17.3. chardet17.4. psutil18. 图形界面18.1. 海龟绘图19. 网络编程19.1. TCP/IP简介19.2. TCP编程19.3. UDP编程20. 电子邮件20.1. SMTP发送邮件20.2. POP3收取邮件21. 访问数据库21.1. 使用SQLite21.2. 使用MySQL21.3. 使用SQLAlchemy22. Web开发22.1. HTTP协议简介22.2. HTML简介22.3. WSGI接口22.4. 使用Web框架22.5. 使用模板23. 异步IO23.1. 协程23.2. 使用asyncio23.3. 使用aiohttp24. FAQ25. 期末总结

22.2. HTML简介

HTML长什么样?上次我们看了新浪首页的HTML源码,如果仔细数数,竟然有6000多行!

所以,学HTML,就不要指望从新浪入手了。我们来看看最简单的HTML长什么样:

<html>
<head>
  <title>Hello</title>
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>

可以用文本编辑器编写HTML,然后保存为hello.html,双击或者把文件拖到浏览器中,就可以看到效果:

hello.html

HTML文档就是一系列的Tag组成,最外层的Tag是<html>。规范的HTML也包含<head>...</head><body>...</body>(注意不要和HTTP的Header、Body搞混了),由于HTML是富文档模型,所以,还有一系列的Tag用来表示链接、图片、表格、表单等等。

CSS简介

CSS是Cascading Style Sheets(层叠样式表)的简称,CSS用来控制HTML里的所有元素如何展现,比如,给标题元素<h1>加一个样式,变成48号字体,灰色,带阴影:

<html>
<head>
  <title>Hello</title>
  <style>
    h1 {
      color: #333333;
      font-size: 48px;
      text-shadow: 3px 3px 3px #666666;
    }
  </style>
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>

效果如下:

hello-css

JavaScript简介

JavaScript虽然名称有个Java,但它和Java真的一点关系没有。JavaScript是为了让HTML具有交互性而作为脚本语言添加的,JavaScript既可以内嵌到HTML中,也可以从外部链接到HTML中。如果我们希望当用户点击标题时把标题变成红色,就必须通过JavaScript来实现:

<html>
<head>
  <title>Hello</title>
  <style>
    h1 {
      color: #333333;
      font-size: 48px;
      text-shadow: 3px 3px 3px #666666;
    }
  </style>
  <script>
    function change() {
      document.getElementsByTagName('h1')[0].style.color = '#ff0000';
    }
  </script>
</head>
<body>
  <h1 onclick="change()">Hello, world!</h1>
</body>
</html>

点击标题后效果如下:

hello-js-change-color

小结

如果要学习Web开发,首先要对HTML、CSS和JavaScript作一定的了解。HTML定义了页面的内容,CSS来控制页面元素的样式,而JavaScript负责页面的交互逻辑。

讲解HTML、CSS和JavaScript就可以写3本书,对于优秀的Web开发人员来说,精通HTML、CSS和JavaScript是必须的,这里推荐一个在线学习网站w3schools,以及一个对应的中文版本

当我们用Python或者其他语言开发Web应用时,我们就是要在服务器端动态创建出HTML,这样,浏览器就会向不同的用户显示出不同的Web页面。