HTML笔记

全套笔记：（点击跳转）

电子课件：（点击跳转）

1、一套规则，浏览器认识的规则。
2、开发者：
学习Html规则 (20个标签)
开发后台程序：
- 写Html文件（充当模板的作用） ******
- 数据库获取数据，然后替换到html文件的指定位置（Web框架）
3、本地测试
- 找到文件路径，直接浏览器打开
- pycharm打开测试
- 自写一个socket程序

#!/usr/bin/env python
# -*- coding:utf-8 -*-
# Author:Uson
'''文件名不能用模块名'''
''' 'module' object is not callable '''
''' module 'socket' has no attribute 'AF_INET' '''
'''360浏览器不支持'''
'''win10自带浏览器可以：http://localhost:8000/'''
'''
二进制三种写法：
1、b"Hello, Seven"
2、bytes("Hello, Seven", encoding="utf-8")
3、'hello'.encode('utf-8')
'''

import socket

def handle_request(client):
    buf = client.recv(1024)
    client.send(bytes("HTTP/1.1 200 OK\r\n\r\n", encoding="utf-8"))
    # print("Buf:", buf)
    f = open("index.html", 'rb')
    data = f.read()
    f.close()
    client.send(data)
    print("Send Done!")

def main():
    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    # sock = socket.socket() #360浏览器不支持的问题
    sock.bind(('localhost', 8000))
    sock.listen(5) #最多接收5个请求

    while True:
        connection, address = sock.accept()
        handle_request(connection)
        connection.close()

if __name__ == '__main__':
    main()

4、编写Html文件
<html(标签) lang="en"(属性)></html>

- doctype 对应关系（不同厂商对标签定义不同的一种标准对应关系）
- html标签，标签内部可以写属性 ====> html标签只能有一个
- 注释： 
5、标签分类
- 自闭合标签

<meta charset="UTF-8">

- 主动闭合标签

<title>智汇部落</title>

6、head标签中

- <meta  -> 编码，跳转，刷新，关键字，描述，IE兼容
    <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />  （ie6先出来，ie8以上版本是兼容版：加上这句话）
    跳转：
    <meta http-equiv="Refresh" Content="3" > 3s自动跳转该网页    
    <meta http-equiv="Refresh" Content="3;Url=http://www.cohui.top" > 3s自动跳转指定网页
- title标签
- <link /> 搞图标，欠
- <style />欠
- <script> 一般写在body内部最下方

7、body标签(大小写不区分)
- 图标，特殊符号类：  （空格） > （>） <（<）

- <hr /> 分割线
======== 小总结 =====
所有标签分为：
    块级标签： div（白板），H系列（加大加粗，h1最大，h6最小），p标签（段落和段落之间有间距）
    行内标签（内联标签）： span（白板，什么属性都没，通过css随身变） input/label
标签之间可以嵌套
标签存在的意义，css操作，js操作
ps:chorme审查元素的使用
    - 定位
    - 查看样式

- h系列
- div
- span

- i 用法及特性同span，不同的是：斜体字
- input系列 + form标签
    input type='text'     - name属性，value="uson"
    input type='password' - name属性，value="uson"
    input type='submit'   - value='提交' 提交按钮，表单
    input type='button'   - value='登录' 普通按钮，什么用都没有，js会赋予功能；

    input type='radio'    - 单选框 value，checked="checked"，name属性（name相同则互斥）
    input type='checkbox' - 复选框 value, checked="checked"，name属性（批量获取数据）
    input type='file'     - 依赖form表单的一个属性 enctype="multipart/form-data"
    input type='rest'     - 重置

    <textarea >默认值</textarea> - name属性长文本输入
    select标签   - name，内部option value，提交到后台，size(默认显示数量)，multiple（多选）

- 默认值，selected="selected"　　checked="checked"

form提交方式：get:将数据提交到url；post:将数据提交到body, 两者与安全性无关

form表单提交示例：

<body>
        <!--以下2种方式一样-->
        <!--<form action="http://localhost:8888/index" method="get">-->
        <form action="http://localhost:8888/index"> <!--web框架-app.py-->
            <!--不写，默认是get请求-->
            <!--get:将数据提交到url-->
            <!--post:将数据提交到body, 两者与安全性无关-->

            <input type="text" name="user" />
            <input type="text" name="email" />
            <input type="password" name="pwd" />

            <input type="button" value="登录1" />
            <!--button默认什么功能都没有-->

            <input type="submit" value="登录2" />
        </form>
</body>

 1 #!/usr/bin/env python
 2 # -*- coding:utf-8 -*-
 3 # Author:Uson
 4 
 5 import tornado.ioloop
 6 import tornado.web
 7 
 8 class MainHandler(tornado.web.RequestHandler):
 9     # def get(self, *args, **kwargs):#写上参数，均不报错
10     def get(self):#*args, **kwargs 参数不写，使用物理地址，匹配不上就会报错,匹配上也不报错
11         # action=192.168.1.3
12         # input匹配不上，socket就会断开，且只报第一次错，后来刷新就不错报，localhost始终不报错
13         # WARNING:tornado.access:404 GET /favicon.ico (192.168.1.3) 1.00ms与favicon.ico无关
14         # 注释掉else部分代码，第一次也不报错了
15 
16         u = self.get_argument("user")
17         e = self.get_argument("email")
18         p = self.get_argument("pwd")
19         print("uep", u, e, p)
20         if u == "uson" and e == "cohui@cohui.top" and p == "akaedu":
21             self.write("OK")
22         else:
23             self.write("False")
24     def post(self, *args, **kwargs):
25         u = self.get_argument("user")
26         e = self.get_argument("email")
27         p = self.get_argument("pwd")
28         print("uep", u, e, p)
29         if u == "uson" and e == "cohui@cohui.top" and p == "akaedu":
30             self.write("OK")
31         else:
32             self.write("False")
33 
34 application = tornado.web.Application([
35     (r"/index", MainHandler), #收到的链接以index结尾的
36 ])
37 
38 if __name__ == "__main__":
39     application.listen(8888)
40     tornado.ioloop.IOLoop.instance().start()

Web框架app

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="shortcut icon" href="favicon.ico">
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <div>
            用户名：<input type="text" name="user" />
            <p>性别Gender：</p>
            男：<input type="radio" name="gender" value="1" checked="checked"/>
            女：<input type="radio" name="gender" value="2"/>
            <p>爱好Hobby：</p>
            太极：<input type="checkbox" name="intrest" value="1" checked="checked"/>
            羽毛球：<input type="checkbox" name="intrest" value="2"/>
            跑步：<input type="checkbox" name="intrest" value="3"/>
            看电视：<input type="checkbox" name="intrest" value="4"/>
            听音乐：<input type="checkbox" name="intrest" value="5"/>
            <p>技能Skill:</p>
            Python前端开发：<input type="checkbox" name="skill" value="1" checked="checked"/>
            Python爬虫分析：<input type="checkbox" name="skill" value="2"/>
            <p>上传文件Put file:</p>
            <input type="file" name="fname"/>
            <!--上传文件有依赖性， 依赖form表单的enctype属性-->
        </div>
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
        <!--<input/> 不用输入>符号，直接输入/即可自动补全-->
    </form>
</body>
</html>

input选择类

 1 <body>
 2     <form>
 3         <div>
 4             <p>2019-04开始：</p>
 5             <textarea>uson学Python</textarea>
 6             <p>下拉框单选：</p>
 7             <select name="city">
 8                 <option value="1">上海</option>
 9                 <option value="2">北京</option>
10                 <option value="3">南京</option>
11                 <option value="4">合肥</option>
12                 <option value="5">广州</option>
13             </select>
14             <p>下拉框单选，默认显示3个：</p>
15             <select name="city" size="3">
16                 <option value="1">上海</option>
17                 <option value="2">北京</option>
18                 <option value="3">南京</option>
19                 <option value="4">合肥</option>
20                 <option value="5">广州</option>
21             </select>
22             <p>下拉框单选，默认值：</p>
23             <select name="city">
24                 <option value="1">上海</option>
25                 <option value="2">北京</option>
26                 <option value="3">南京</option>
27                 <option value="4" selected="selected">合肥</option>
28                 <option value="5">广州</option>
29             </select>
30             <p>下拉框多选(按住Ctrl键)：</p>
31             <select name="city" multiple="multiple">
32                 <!--multiple，不写size,默认显示4个-->
33                 <option value="1">上海</option>
34                 <option value="2">北京</option>
35                 <option value="3">南京</option>
36                 <option value="4">合肥</option>
37                 <option value="5">广州</option>
38             </select>
39             <p>下拉框多选(按住Ctrl键)，默认值显示2个：</p>
40             <select name="city" multiple="multiple" size="2">
41                 <option value="1">上海</option>
42                 <option value="2">北京</option>
43                 <option value="3">南京</option>
44                 <option value="4">合肥</option>
45                 <option value="5">广州</option>
46             </select>
47             <p>下拉框多选(按住Ctrl键)，默认值显示4个，1个默认值：</p>
48             <select name="city" multiple="multiple">
49                 <option value="1">上海</option>
50                 <option value="2">北京</option>
51                 <option value="3">南京</option>
52                 <option value="4">合肥</option>
53                 <option value="5" selected="selected">广州</option>
54             </select>
55         </div>
56         <p>信息提交：</p>
57         <input type="submit" value="提交" />
58         <input type="reset" value="重置" />
59     </form>
60 </body>

下拉框-多行文本

1 <form action="https://www.sogou.com/web">
2     <input type="text" name="query" value="uson"/>
3     <input type="submit" value="搜索" />
4 </form>

搜搜框

- a标签
- 跳转 target="_blank" 新标签页跳转
- 锚 href='#某个标签的ID' 标签的ID不允许重复

<div>
        <p>
            <a href="http://www.cohui.top">智汇部落资源站</a>
        </p>
        <p>
            <a href="#i1">第一章节</a>
            <a href="#i2">第二章节</a>
            <a href="#i3">第三章节</a>
            <a href="#i4">第四章节</a>
        </p>
        <div>
            <div id="i1" style="height: 600px">第一章节内容</div>
            <div id="i2" style="height: 600px">第二章节内容</div>
            <div id="i3" style="height: 600px">第三章节内容</div>
            <div id="i4" style="height: 600px">第四章节内容</div>
        </div>
</div>

- img
     src
     alt
     title
- 列表
    ul 无序
        li
    ol 有序
        li
    dl
        dt
        dd

<a href="http://www.cohui.top">
    <img src="12.jpg" style="height: 200px; width: 200px
</a>
<ul>  
    <li>uson学Python</li>
    <li>uson学Python</li>
    <li>uson学Python</li>
    <li>uson学Python</li>
</ul>
<!--下面用的比较少，后面都会用css达到我们想要的效果-->
<ol>   
    <li>uson学Python</li>
    <li>uson学Python</li>
    <li>uson学Python</li>
    <li>uson学Python</li>
</ol>
<dl>
    <dt>Python</dt>
        <dd>uson学Python</dd>
        <dd>uson学Python</dd>
        <dd>uson学Python</dd>
        <dd>uson学Python</dd>
    <dt>Linux</dt>
        <dd>uson学Linux</dd>
        <dd>uson学Linux</dd>
        <dd>uson学Linux</dd>
        <dd>uson学Linux</dd>
</dl>

- 表格
    table
        thead
            tr
                th
        tbody
            tr
                td
    colspan = ''
    rowspan = ''

<!DOCTYPE html>
<html lang="en">
<!--合并(2,1)(3,1)-->
<!--合并(2,2)(2,3)-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <thead> <!--表头-->
    <tr> <!--行-->
        <th>学员姓名</th> <!--成员-->
        <th>学习课程</th>
        <th>学习成绩</th>
        <th>更多详情</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Uson</td>
        <td>Python</td>
        <td>99</td>
        <td>
            <a href="http://www.cohui.top">月薪12000</a>
        </td>
    </tr>
    <tr>
        <td rowspan="2">Cohui</td> <!--上下合并：合并行-->
        <!--<td>Linux</td>-->
        <td colspan="2">99</td>  <!--左右合并：合并列-->
        <td>
            <a href="http://www.cohui.top">月薪12000</a>
        </td>
    </tr>
    <tr>
        <!--<td>Jian</td>-->
        <td>Linux</td>
        <td>89</td>
        <td>
            <a href="http://www.cohui.top">月薪10000</a>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>

- label
用于点击文件，使得关联的标签，获取光标

<label for="username">用户名：</label>
<input id="username" type="text" name="user" />

- fieldset
legend

<fieldset>
    <legend>登录网站</legend>
    <label for="username">用户名：</label>
    <input id="username" type="text" name="user" />
    <br />
    <label for="pwd">密   码：</label>
    <input id="pwd" type="password" name="pwd" />
</fieldset>