HTTP协议：浏览器和服务器之间约定好的格式

conn.send(b'HTTP/1.1 200 OK\r\n\r\n')

 

<标签名> --> 标记语言(HTML,XML)

标签分类：

　　单标签

　　双标签

<h1></h1>

<img>

<a></a>

 

特殊字符：

　　空格： &nbsp

　　> : &gt

　　< : &lt

　　& : &amp

　　￥: &yen

　　版权： &copy

　　注册： &reg

 

标签分类：

　　块儿级标签　　h1~h6  div  p  hr  ul ol li dl

　　　　独占一行

　　　　能设置长和宽

　　内联标签(行内标签)　　a  img  u  s  b  i  span

　　　　根据内容长度决定

　　　　不能设置长宽

列表标签：

　　ul  无序号列表

　　ol  有序号列表

　　dl  标题列表

 

h1*4>a.c1[id=a$]{a标签$}　　# 快捷写法

 

嵌套规则：

　　1.行内标签不能嵌套块级标签

　　2.p标签不能嵌套块级标签

 

form表单：

　　前后端有数据交互的时候用form表单

　　注意事项：

　　　　1.所有获取用户输入的标签都必须放在form表单里

　　　　2.action控制着往哪提交

　　　　3.input\select\textarea 都需要有name属性

　　　　4.需要有提交按钮 <input type = "submit">

 

input:

　　text

　　　　value　　默认值

　　　　placeholder　　占位内容

　　password

　　radio　　单选

　　checkbox　　多选

　　date

　　datetime

　　file

　　button　　普通按钮，多用js绑定事件

　　reset

　　submit

textarea　　大段文本

select　　下拉菜单

option　　具体的下拉选项

optgroup　　分组下拉框

　　label

 

表单参数：

　　涉及到上传文件

　　method="post" enctype="multipart/form-data"

 

　　action　　# 规定向何处提交

　　autocomplete　　# 自动完成表单，默认开启

　　method　　# 提交表单所用的http方法，默认GET

　　novalicate　　# 不验证表单(mail)

　　target　　# action属性中地址的目标

 

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>我的第一个HTML页面</title>
</head>
<body>
<h1>老&nbsp &nbsp &nbsp &nbsp &nbsp婆</h1>
<h1>全民老婆大选</h1>
<b>全民老婆大选</b>
<i><br>全民老婆大选</i>
<u><br>全民老婆大选</u>
<s><br>全民老婆大选</s>
<p>全民老婆大选</p>


<div>全民老婆大选</div>
<div>全民老婆大选</div>
<span>全民老婆大选</span>
<span>全民老婆大选</span>

<ul type="none">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>

<ol type="1" start="1">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ol>

<dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
</dl>

<table border="1">
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>爱好</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>小强</td>
        <td>18</td>
        <td>戴帽子</td>
    </tr>
    </tbody>
</table>


<form action="http://127.0.0.1:8000/upload/" method="post" enctype="multipart/form-data">
    <p>
        <label for="i1">用户名</label>
        <input id="i1" name="username" type="text">

    </p>
    <p>用户名：
        <input name="username" type="text" readonly value="小强">
        <input name="username" type="text" placeholder="小强">
        <input name="username" type="text" disabled placeholder="小强">
    </p>

    <p>密码：
        <input name="pwd" type="password">
    </p>

    <p>性别：
        <input name="gender" type="radio" value="1"> 男
        <input name="gender" type="radio" value="0"> 女
        <input checked name="gender" type="radio" value="0"> 保密
    </p>

    <p>性别2：
        <label>男
            <input name="gender" type="radio" value="1">
        </label>

        <label>女
            <input name="gender" type="radio" value="0">
        </label>

        <label>保密
            <input name="gender" type="radio" value="2">
        </label>

    </p>

    <p>爱好：
        <input name="hobby" type="checkbox" value="football">足球
        <input name="hobby" type="checkbox" value="basketball">篮球
        <input name="hobby" type="checkbox" value="dcball">双色球
    </p>

    <p>
        <select name="province" id="s1">
            <option value="bj">北京</option>
            <option value="sh" selected>上海</option>
            <option value="gz">广州</option>
            <option value="sd">山东</option>
        </select>

        <select name="from" id="s2">
            <optgroup label="北京">
                <option value="hd">海淀</option>
                <option value="cp">昌平</option>
                <option value="sh">沙河</option>
                <option value="sjs">石景山</option>
            </optgroup>
        </select>

    </p>

    <p><textarea name="info" id="t1" cols="30" rows="10"></textarea></p>

    <p>生日：<input name="birthday" type="date"></p>

    <p>头像<input name="lp" type="file"></p>

    <input type="submit" value="提交内容">
    <input type="reset" value="重置">
</form>

<a href="http://www.acfun.cn/spn/laopo" target="_blank">全民老婆大选</a>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544334049398&di=1d65c05c46be041af4642ce11d3b2c99&imgtype=0&src=http%3A%2F%2Fi2.hdslb.com%2Fbfs%2Farchive%2Fce38af106eb04bd1f77b8a52f7ffbc7ca375ed6b.jpg"
     alt="老婆在来的路上..." title="老婆">
</body>
</html>