191121HTML

一、HTML

1、web server

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'))
    client.send(bytes("<h1 style='background-color:red;'>Hello, Seven<h1>", encoding='utf-8'))

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

    while True:
        conn, addr = sock.accept()
        handle_request(conn)
        conn.close()

if __name__ == '__main__':
    main()

2、web server2

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'))
    f = open('index', 'rb')
    data = f.read()
	f.close()
    client.send(data)

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

    while True:
        conn, addr = sock.accept()
        handle_request(conn)
        conn.close()

if __name__ == '__main__':
    main()

3、实例index.html

<h1 style='background-color:red;'>Hello, Seven<h1>
<a href='http://www.baidu.com'>baidu</a>
<table border='1'>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
<table>

4、head标签

  • meta 标签:编码、跳转、刷新、关键字、描述、IE兼容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">  <!-- 页面编码 -->
    <meta http-equiv="Refresh" content="60">  <!-- 60s自动刷新一次页面 -->
    <!--<meta http-equiv="Refresh" content="5; url=http://www.baidu.com" />  5s后跳转到目标网站-->
    <meta name="keywords" content="dongfei,dongfei2">
    <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8" />
    <title>Title</title>
</head>
<body>
    <h1>welcome dongfei web site.</h1>
</body>
</html>
  • title标签
  • link标签:加图标
<link rel="shortcut icon" href="image/favicon.ico">  <!--给网站加图标-->
  • style
  • script

5、body标签

5.1:各种符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dongfei</title>
</head>
<body>
    <a href="http://www.baidu.com">百&nbsp;&nbsp;&nbsp;&nbsp;&gt;度</a>
    <h3>静夜思</h3>
    <h5>作者:李白</h5>
    <p>床前明月光,<br/>疑似地上霜。<br/>举头望明月,<br/>低头思故乡。</p>
    <span>dongfei</span>
</body>
</html>

5.5:div标签,块级白板

6、表单标签

  • from标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
</head>
<body>
    <form action="http://localhost:xxx/index" method="get">  <!-- 向后端提交表单 -->
        <input type="text" name="username"/>
        <input type="text" name="email"/>
        <input type="password" name="password"/>
        <input type="button" value="login"/>  <!--button默认没有任何功能-->
        <input type="submit" value="login2"/>
    </form>
</body>
</html>
  • 提交至搜索引擎
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sougou</title>
</head>
<body>
    <form action="https://www.sogou.com/web" method="get">
        <input type="text" name="query" value="sogou"/>  <!--value:默认值-->
        <input type="submit" value="搜索">
    </form>
</body>
</html>
  • 单选框&复选
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <div>
            <p>请选择性别:</p>
                男:<input type="radio" name="gender" value="1" checked="checked" />
                女:<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" />
        </div>
        <input type="submit" value="提交" />
    </form>
</body>
</html>
  • 上传文件&重置表单
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <div>
            <p>上传文件:</p>
            <input type="file" name="fname">
        </div>
        <input type="submit" value="upload">
        <input type="reset" value="reset">
    </form>
</body>
</html>
  • 多行文本输入
<textarea name="menu" >默认值</textarea>
  • 下拉框:select标签
        <select name="city" multiple="multiple" size="3">
            <option value="1">北京</option>
            <option value="2" selected="selected">上海</option>
            <option value="3">广州</option>
        </select>
        <input type="submit" value="提交">

7、超链接&锚点

<a href="http://www.baidu.com" target="_blank">百度</a>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="#i1">第一章</a>
    <a href="#i2">第二章</a>
    <a href="#i3">第三章</a>
    <a href="#i4">第四章</a>
    <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>
</body>
</html>

8、图片

    <a href="http://www.baidu.com">
        <img src="1.jpg" style="height: 200px;width: 200px;" alt="风景" title="风景">
    </a>

9、列表

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>

    <dl>
        <dt>123</dt>
        <dd>456</dd>
    </dl>

10、表格

    <table border="1">
        <tr>
            <td>第一行,第一列</td>
            <td>第一行,第二列</td>
            <td>第一行,第三列</td>
        </tr>
        <tr>
            <td>第二行,第一列</td>
            <td>第二行,第二列</td>
            <td>第二行,第三列</td>
        </tr>
    </table>
<table border="1">
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
            <th>表头4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
            <td>内容3</td>
            <td>内容4</td>
        </tr>
    </tbody>
</table>
  • 合并单元格
<td colspan="2">内容2</td>
<td rowspan="2">内容2</td>

11、label标签

    <label for="username">用户名:</label>
    <input id="username" type="text" name="user" />
posted @ 2019-11-21 23:59  生生不息.连绵不绝  阅读(155)  评论(0编辑  收藏  举报