一、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" />

191121HTML的更多相关文章

随机推荐

  1. sql server update语句

    update语句 --Update 语句用于修改表中的数据 语法:update 表名称 set 列名称 = 新值 where 列名称 = 某值 --更新某一行的若干列,set字句中用','隔开

  2. Flask-migrate基本使用方法

    数据库迁移操作顺序: 1.python 文件 db init 2.根据需求修改模型 3.python flaskapp文件 db migrate -m"新版本名(注释)" 4.py ...

  3. JVM--对象访问和OutOfMemoryError异常

        对象访问: 使用句柄访问方式: 使用直接指针访问方式: OutOfMemoryError异常: 设置堆的最小最大容量:-Xms20m -Xmx20m 设置一样推不可自动扩展. 设置出现内存溢出 ...

  4. HttpClient 释放连接

    Release the Connection:释放连接 This is a crucial step to keep things flowing. We must tell HttpClient t ...

  5. 点击切换JS

    $(function(){ var tabnav = $("#tab-nav ul li"); tabnav.click(function(){ $(this).addClass( ...

  6. deep_learning_Function_rnn_cell.BasicLSTMCell

    tf.nn.rnn_cell.BasicLSTMCell(n_hidden, forget_bias=1.0, state_is_tuple=True): n_hidden表示神经元的个数,forge ...

  7. 学习Linux的准备

    学习方式: 主动学习: 动手实践:40% 讲给别人:70% 被动学习: 听课:10% 笔记:20% 写博客的要求: 写博客是对某一方面知识的总结,输出:是知识的书面化的表达方式.写博客不同于写笔记,笔 ...

  8. MSSQL数据库备份还原常用SQL语句及注意

    .备份数据库 backup database db_name to disk='d:\db_name.bak' with format --通过使用with format可以做到覆盖任何现有的备份和创 ...

  9. Codeforces 708D 上下界费用流

    给你一个网络流的图 图中可能会有流量不平衡和流量>容量的情况存在 每调整一单位的流量/容量 需要一个单位的花费 问最少需要多少花费使得原图调整为正确(可行)的网络流 设当前边信息为(u,v,f, ...

  10. JavaScript 复制变量的三种方法

    参考:Copying Objects in JavaScript - Orinami Olatunji(@orinamio_) October 23, 2017    直接将一个变量赋给另一个变量时, ...