一、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. 21 Python之反射

    1.反射 主要是用到了4个函数(  用的最多的就是getattr()和 hasattr()  ): getattr()   从xxx对象中获取到xxx属性值 hasattr()  判断xxx对象中是否 ...

  2. jquery简单实现表格隔行变色

    小知识点:odd的过滤选择器大的使用 html代码: <table> <tr> <td>用户名</td> <td>年龄</td> ...

  3. OpenSSL(2)创建私有证书颁发机构

    如果想要建立自己的CA, OpenSSL已经包含了所有你需要的东西.所有的操作都通过纯命令行执行,虽然不那么友好,整个过程也比较长,但是这可以让你去思考每个细节. 我建议自己创建一套私有的 CA主要是 ...

  4. LINUX任意精度计算器BC用法

    [用途说明] Bash内置了对整数四则运算的支持,但是并不支持浮点运算,而bc命令可以很方便的进行浮点运算,当然整数运算也不再话下.手册页上说bc是An arbitrary precision cal ...

  5. mongo启动报错问题处理

    关键错误信息child process failed, exited with error number 100 这是服务器断电导致数据库意外关闭导致的问题,处理方法也比较简单 rm -rf /var ...

  6. h5唤醒App

    一.应用场景 用户在访问我们的网页时,判断出这个用户手机上是否安装了我们的App,如果安装了则直接从网页上打开APP,否则就引导用户前往下载,从而形成一个推广上的闭环.这里只针对从网页端打开本地APP ...

  7. PAT Basic 1018 锤子剪刀布 (20 分)

    大家应该都会玩“锤子剪刀布”的游戏:两人同时给出手势,胜负规则如图所示: 现给出两人的交锋记录,请统计双方的胜.平.负次数,并且给出双方分别出什么手势的胜算最大. 输入格式: 输入第 1 行给出正整数 ...

  8. Centos修改IP的两种方式

    nmtui命令调出修改窗口:nmtui    重启网卡:/etc/init.d/network restart 或者:service network restart 方式二: 进入网络配置文件目录 首 ...

  9. static成员变量

    可以创建一个由同一个类的所有对象共享的成员变量.要创建这样的成员,只需将关键字 static 放在变量声明的前面,如下面的类所示: class StatDemo { private: static i ...

  10. Linux下C++编译（代码高亮自动换行）

    1.环境准备 在ubuntu中要想编译c程序可以安装gcc编译器,编译c++的话就不能使用gcc了,要使用g++编译器. 安装gcc或是g++可以在新立得软件包管理器中直接搜索后安装或是使用终端文字命 ...