一、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. 第四章 子查询 T-SQL语言基础

    子查询 SQL支持在查询语句中编写查询,或者嵌套其他查询. 最外层查询的结果集会返回给调用者,称为外部查询. 内部查询的结果是供外部查询使用的,也称为子查询. 子查询可以分为独立子查询和相关子查询.独 ...

  2. upupw ： Apache Php5.5 的使用

    1. 官网下载 1. 官网下载  apache php5.5点击下载 但是 现在有时候打不开,所以提供以下方法 2. 百度云网盘下载  https://pan.baidu.com/s/1eQ2k1Su ...

  3. 腾讯地图JSAPI开发demo 定位，查询

    1.IP定位切换 2.点击坐标获取地点 3.查询地点切换坐标 <!DOCTYPE html> <html> <head> <meta http-equiv=& ...

  4. postgres外部表

    在创建外部表的时候遇见: CREATE EXTENSION file_fdw;2018-12-21 17:32:23.822 CST [31237] ERROR:  could not open ex ...

  5. Mac 常用软件

    command+space开启新的一天 窗口管理:Magnet 写代码:Pycharm.vscode.sublime text 虚拟机:VMware Fusion(买不起Parallels Deskt ...

  6. Delphi SpeedButton组件

  7. 七、Vue Cli+ApiCloud

    一.api.js (参考) 顶部注释: 底部注释: 二.导入 效果: 继续使用: 运行环境:用APP打开,浏览器没有api对象,只有APP运行环境才有API对象 代码如下: <template& ...

  8. Mongodb操作-更新操作符

    1.$inc 用法:{$inc:{field:value}} 作用:对一个数字字段的某个field增加value 示例:将name为chenzhou的学生的age增加5 > db.student ...

  9. poj 1655 找树的重心

    树形DP 求树的重心,即选择一个结点删去,使得分出的 若干棵树的结点数 的最大值最小 #include<map> #include<set> #include<cmath ...

  10. 我说CMMI之三：CMMI的构件--转载

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/dylanren/article/deta ...