HTML基础全解析-优快云博客

python_http_server

import socket

def main():
    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    sock.bind(('localhost', 8080))
    sock.listen(5)

    while True:
        con, addr = sock.accept()
        buffer = con.recv(1024)
        con.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n", "utf8"))
        con.sendall(bytes("<h1>Hello World</h1>", "utf8"))
        con.close()

if __name__ == '__main__':
    main()

一、HTML中的head标签

htyper text markup language ：超文本标记语言

1、head标签中的meta标签

<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="python学习,前端">
    <meta name="description" content="python学习交流">
    <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE6">
    <title>前端学习</title>
</head>

name="keywords"：定义关键词，供网页搜索
name="description"：网站的描述
http-equiv="Refresh"：2s后刷新，跳转到目标网站；如果不加URL只是定时刷新
http-equiv="X-UA-Compatible"：兼容ie6

2、head标签中的非meta标签

<head>
    <link rel="icon" href="https://img.alicdn.com/tfs/TB1_ZXuNcfpK1RjSZFOXXa6nFXa-32-32.ico">
    <link rel="stylesheet" href="c.css">
    <script src="j.js"></script>
</head>

rel="icon"：title的图标
rel="stylesheet"：引入css
script：引入js

二、HTML中的基本标签

1、h1-6：标题

2、p：段落

3、br：换行

4、b/strong：加粗

5、em：斜体

6、hr：分割线

7、sub：下标

8、sup：上标

9、div：白板，块级标签

10、span：白板，内联标签

三、HTML中的常用的特殊字符

空白：&nbsp;
小于：&lt;
大于：&gt;
版权符：&copy;和&reg;

四、图像img标签

<img src="1.jpg" alt="图片" title="blog" width="400px" height="400px">

src：图片路径
alt：图片显示失败的一个描述
title：图片的悬浮解释
width：宽
height：高

五、超链接和锚点a标签

<a href="https://www.baidu.com/" target="_blank">百度一下</a>
<a href="#1">返回顶部</a>

href：链接地址，#1代表id=1的标签
target="_blank" ：跳转时新打开一个窗口

六、列表标签

1、有序列表

<ul>
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ul>

ul：无序列表
li：固定使用li来包装

2、有序列表

<ol>
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ol>

ol：有序列表

3、自定义列表

<dl>
    <dt>第一章</dt>
    <dd>第一节</dd>
    <dd>第二节</dd>
    <dd>第三节</dd>
</dl>

dl：自定义列表

七、表单标签form

1、input输入框标签

<form action="http://127.0.0.1:8080/index.html" method="post" enctype="multipart/form-data">

    <div>
        <label for="i1">姓名</label>
        <input id="i1" type="text" name="username" placeholder="用户名">
    </div>
    <div>密码 <input type="password" name="password" placeholder="密码"  disabled></div>
    <div>性别 男<input type="radio" name="gender" value="man">女<input type="radio" name="gender" value="woman"></div>
    <div>您是否同意并愿意遵守用户协议 <input type="checkbox" name="yesorno" value="yes"  checked></div>
    <div><input type="button" value="空白"></div>
    <div><input type="submit" value="注册"></div>
    <div><input type="reset" value="重置"></div>
    <div><input type="text" readonly></div>
    <div><input type="file" name="putfile"></div>

</form>

type="text"：文本输入
type="password"：密码输入
type="radio"：单选框
type="checkbox"：多选框
type="button"：按钮，不会提交表单
type="submit"：按钮，提交表单
type="reset"：重置按钮
type="file"：上传文件按钮，需要在form中加enctype="multipart/form-data"
checked：默认勾选
readonly：只读框
disabled：禁用input标签
label标签：点击label的字段可以直接获取对应输入框的焦点

2、select下拉框标签

<select name="province" id="" multiple size="10">
    <option value="beijing" selected>北京市</option>
    <option value="tianjing">天津市</option>
    <option value="henan">河南省</option>
    <option value="shanxi">山西省</option>
    <option value="shandong">山东省</option>
    <optgroup label="河北省">
        <option value="">石家庄市</option>
        <option value="">保定市</option>
        <option value="">张家口市</option>
    </optgroup>
</select>

multiple：多选框
size="10"：多选框的显示大小
selected：默认选择
optgroup：分组

3、textarea文本框标签

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

八、table标签

<table border="1px" cellpadding="10px" cellspacing="5px">
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>gender</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">1</td>
            <td>jack</td>
            <td>M</td>
        </tr>
        <tr>
            <td>maria</td>
            <td>F</td>
        </tr>
    </tbody>
</table>