一、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. IDEA导入Eclipse 非Maven的Web项目

  2. webpack的基本使用

    安装webpack npm i webpack -g npm i webpack-cli -g 1.基础用法(无需配置webpack.config.js文件) 1.2 新建需要打包的测试文件input ...

  3. Zookeeper VS Chubby

    目录 区别的根源      1)一致性      2)Client Cache vs No Cache 总结 参考资料 区别的根源 一个设计良好的系统应该是围绕并为其设计目标服务的. Chubby:p ...

  4. TCP/IP模型层次结构

    计算机网络体系结构 (1)OSI七层协议:从上到下:应用层.表示层.会话层.传输层.网络层.数据链路层.物理层. (2)TCP/IP四层协议:从上到下:应用层,传输层.网络层.数据链路层.网络接口层. ...

  5. 转载： utm坐标和经纬度相互转换

    原文地址: https://blog.csdn.net/hanshuobest/article/details/77752279 //经纬度转utm坐标 int convert_lonlat_utm( ...

  6. unicode 和utf-8,GBK编码

    说到编码,得先从ASCII编码讲起.ASCII编码是由美国人发明,美国的字符不超过255个,所以ASCII编码使用了8bit 即一个字节来存储字符.由于汉字的数量远超255个,所以中国自己发明了一个G ...

  7. deepin下挂载的的Windows系统（NTFC）目录怎么是只读的？？？

    关键命令: df-h sudo ntfsfix /dev/sda4 重启 参考博客:深度官网问题之大神回复

  8. dumpe2fs Linux支持的文件系统

    dumpe2fs  (-bh)装置文件名 选项与参数: -b : 列出保留为坏轨的部分 -h : 仅列出superblock的数据,不会列出其他的区段内容 查看Linux支持的文件系统哪些支持: ls ...

  9. 树形DP Choosing Capital for Treeland

    给你一棵有向树,需要选定一个点为capital,满足翻转边数最小 思路:先求出1为capital 的答案,然后向下更新孩子节点 dp[i]=dp[i-1]+judge(i); #include< ...

  10. 心态炸了，我再写一个4.1.0版本的SND实例

    maven依赖 <!-- Tests --><dependency> <groupId>org.springframework</groupId> &l ...