html标签介绍（1）

一、下面是一个简单的html：

<!DOCTYPE html>
<!--类似html这种格式称为html标签-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--自动刷新-->
    <!--<meta http-equiv="Refresh" content="3">-->
    <!--<meta http-equiv="Refresh" content="3;Url=http://www.taobao.com">-->
    <title>Title</title>
</head>
<body>
    <a href="http://www.baidu.com">百度</a>
    <p>123</p>
    <p>sadnfa;ksdnfanfskdfn;nn;skfjkejf<br />snlfnsfslnf</p>
    <h1>liyang</h1>
    <h6>liyang</h6>
    <span>Hello</span>
</body>
</html>

1.<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
2.html,head,body都是标签

二、安装tornado
Tornado是一种 Web 服务器软件的开源版本。Tornado 和现在的主流 Web 服务器框架（包括大多数 Python 的框架）有着明显的区别：它是非阻塞式服务器，而且速度相当快。
得利于其非阻塞的方式和对epoll的运用，Tornado 每秒可以处理数以千计的连接，因此 Tornado 是实时 Web 服务的一个理想框架。

#安装
pip3 install tornado -i http://pypi.douban.com/simple/ --trusted-host pypi.douban.com

启动一个tornado demo

# -*- coding:utf-8 -*- 
# Author:Brownyangyang
import tornado.ioloop
import tornado.web

class MainHandler (tornado.web.RequestHandler):
    def get(self):
        print('this is get')
        u = self.get_argument("user")
        p = self.get_argument("pwd")
        if u == 'liyang' and p == '123':
            self.write("OK")
        else:
            self.write("fuck off")

    def post(self, *args, **kwargs):
        u = self.get_argument ("user")
        p = self.get_argument ("pwd")
        print(u,p)
        self.write('POST')

application = tornado.web.Application ([
    (r"/index", MainHandler),
])

if __name__ == "__main__":
    #监听8888端口
    application.listen (8888)
    tornado.ioloop.IOLoop.instance ( ).start ( )

再写一个html页面进行交互：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="http://localhost:8888/index" method="POST">
        <input type="text" name="user" />
        <input type="password" name="pwd"/>
        <input type="button" value="登录1"/>
        <input type="submit" value="登录2"/>
    </form>
    <br/>
        <form>
        <input type="text" />
        <input type="password" />
        <input type="button" value="登录3"/>
        <input type="submit" value="登录4"/>
    </form>
</body>
</html>

1.form表单用于显示、收集信息，并将信息提交给服务器标签用来提交数据。

2.action是form属性是说我把form的数据提交到哪里，method指定数据提交的方式

3.以get方法提交数据，会把提交的数据拼接到url中发送出去。以post方法提交数据，数据会放到内容中发送出去

4.按钮提交把数据发送出去需要用submit，button暂时没什么用，只是个按钮

5.input可以在页面形成一个框框让你填写用户密码（type定义）

三、

<body>
   <form>
       <div>
           <p>请选择性别：</p>
           男：<input type="radio" name="gender" value="1" />
           女：<input type="radio" name="gender" value="2" />
           <p>爱好：</p>
           篮球：<input type="checkbox" name="favor" value="1" />
           足球：<input type="checkbox" name="favor" value="2" />
           台球：<input type="checkbox" name="favor" value="3" />
           网球：<input type="checkbox" name="favor" value="4" />
           <p>技能：</p>
           撩妹：<input type="checkbox" name="skill" value="1" />
           写代码：<input type="checkbox" name="skill" value="2" />
       </div>
       <input type="submit" value="提交" />
   </form>
</body>


div标签定义文档区块
p标签用来标识一个段落
type="radio" 就是单选效果，当有多个选项，name取值一样，就有互斥效果，选了男的就不能选女的，然后再通过value让接收系统识别发过来的是男还是女

type="checkbox" 多选效果

如果我想表达默认被选中呢，加属性checked="checked"，如下：

篮球：<input type="checkbox" name="favor" value="1" checked="checked"/>

如果我要实现上传文件的功能呢，在上面代码的基础上加：

<p>文件上传</p>
   <input type="file" name="fname" />

页面如下：

虽然页面可以选择文件了，但是文件可以选择，但依然无法提交。是因为，在input外面还有一个form标签的框架，需要制定form标签属性

（省略）

</form>

还有一个功能：如果我选了一些，参数，输入用户密码，但是我想重置我刚刚的设置怎么办呢？使用重置按钮：

综上知识点，完整的html如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <form enctype="multipart/form-data">
       <div>
           <input type="text" name="user">
           <input type="password" name="pwd">
           <p>请选择性别：</p>
           男：<input type="radio" name="gender" value="1" />
           女：<input type="radio" name="gender" value="2" />
           <p>爱好：</p>
           篮球：<input type="checkbox" name="favor" value="1" checked="checked"/>
           足球：<input type="checkbox" name="favor" value="2" />
           台球：<input type="checkbox" name="favor" value="3" />
           网球：<input type="checkbox" name="favor" value="4" />
           <p>技能：</p>
           撩妹：<input type="checkbox" name="skill" value="1" checked="checked" />
           写代码：<input type="checkbox" name="skill" value="1" />
           <p>文件上传</p>
           <input type="file" name="fname" />
       </div>
       <input type="submit" value="提交" />
       <input type="reset" value="重置" />
   </form>
</body>
</html>

View Code