Python socket和前端html

其他 2021-01-23 12:36:50 阅读次数: 0

html标签功能演示

写一段socket代码

[root@golang ~]# cat /python/web/socket-server.py 
#!/usr/local/bin/python3
#!coding:utf8
import socket

sk=socket.socket()  #创建 socket 对象
sk.bind(('192.168.229.120',90)) 
sk.listen(5) # 等待客户端连接

while 1:
   conn,addr = sk.accept()# 建立客户端连接
   conn.recv(1024)
   conn.send(b'Http/1.1 200 ok\r\n\r\n')
   conn.send(b'socket web!')
   conn.close()# 关闭连接

运行代码

[root@golang web]# python3 socket-server.py

访问
http://192.168.229.120:90/
在这里插入图片描述

修饰下文字

带动下源代码，在socket web!改成
如下

cat /python/web/socket-server.py 
#!/usr/local/bin/python3
#!coding:utf8
import socket

sk=socket.socket()
sk.bind(('192.168.229.120',90))
sk.listen(5)

while 1:
   conn,addr = sk.accept()
   conn.recv(1024)
   conn.send(b'Http/1.1 200 ok\r\n\r\n')
   conn.send(b'<h1>socket web!</h1>')
   conn.close()

再次运行

[root@golang web]# python3 socket-server.py

再次访问
http://192.168.229.120:90/
在这里插入图片描述

socket读取文件

代码如下

cat socket-server.py 
#!/usr/local/bin/python3
#!coding:utf8
import socket

sk=socket.socket()
sk.bind(('192.168.229.120',90))
sk.listen(5)

while 1:
   conn,addr = sk.accept()
   conn.recv(1024)
   conn.send(b'Http/1.1 200 ok\r\n\r\n')
   with open('data.txt','rb') as f:
      msg = f.read()
   conn.send(msg)
   
   conn.close()

在源代码同目录下创建一个文件

cat /python/web/data.txt
<h1>socket web!</h1>

运行

python3 socket-server.py

再次访问
http://192.168.229.120:90/
在这里插入图片描述

显示图片

socket-server.py文件内容不变，data.txt增加内容

cat /python/web/data.txt 
<h1>socket web!</h1>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F03%2F72%2F70%2F3657b96a43e51c9.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613546358&t=4e7b7ecc959e3828feb2971d14551fa8">

不需要重新运行代码
刷新下网页
http://192.168.229.120:90/
在这里插入图片描述

增加网页跳转按钮（当前标签跳转）

socket-server.py文件内容不变，data.txt增加内容

cat /python/web/data.txt 
<h1>socket web!</h1>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F03%2F72%2F70%2F3657b96a43e51c9.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613546358&t=4e7b7ecc959e3828feb2971d14551fa8">
<a href='https://www.baidu.com/'>baidu</a>

不需要重新运行代码
刷新下网页
http://192.168.229.120:90/
在这里插入图片描述

设置中文编码

cat /python/web/data.html 
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>Title</title>
</head>
<body>
<h1>socket web!</h1>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F03%2F72%2F70%2F3657b96a43e51c9.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613546358&t=4e7b7ecc959e3828feb2971d14551fa8">
<a href='https://www.baidu.com/'>百度</a>
</body>
</html>

不需要重新运行代码
刷新下网页
http://192.168.229.120:90/
在这里插入图片描述

改变颜色

通过head标签里的style标签来改变颜色

cat data.html 
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>Title</title>
  <style>
    h1{
     
     
    color:blue;
      }
    a{
     
     
      color:red;
     }
  </style>
</head>
<body>
<h1>socket web!</h1>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F03%2F72%2F70%2F3657b96a43e51c9.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613546358&t=4e7b7ecc959e3828feb2971d14551fa8">
<a href='https://www.baidu.com/'>百度</a>
</body>
</html>

不需要重新运行代码
刷新下网页
http://192.168.229.120:90/
在这里插入图片描述
可以看到字体颜色变了。

给网页加title

cat data.html 
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>Title</title>
</head>
<body>
<h1>socket web!</h1>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F03%2F72%2F70%2F3657b96a43e51c9.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613546358&t=4e7b7ecc959e3828feb2971d14551fa8">
<a href='https://www.baidu.com/'>百度</a>
</body>
</html>

不需要重新运行代码
刷新下网页
http://192.168.229.120:90/
在这里插入图片描述
可以看到网页上的title是Title。

script

cat /python/web/data.html 
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>Title</title>
  <title>Title</title>
  <!--style>
    h1{
    color:blue;
      }
    a{
      color:red;
     }
  </style-->
  <link rel='stylesheet' href='test.css'>
  <script>
    alert('ceshi');
  </script>
</head>
<body>
<h1>socket web!</h1>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F03%2F72%2F70%2F3657b96a43e51c9.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613546358&t=4e7b7ecc959e3828feb2971d14551fa8">
<a href='https://www.baidu.com/'>百度</a>
</body>
</html>

不需要重新运行代码
刷新下网页,离开这个标签页，再次返回
http://192.168.229.120:90/

在这里插入图片描述

自动跳转到别的网页

增加这行代码即可完成自动跳转

<meta http-equiv='refresh' content="2;URL=https://www.oldboyedu.com">

cat data.html 
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <meta http-equiv='refresh' content="2;URL=https://www.oldboyedu.com">
  <title>Title</title>
  <title>Title</title>
  <!--style>
    h1{
    color:blue;
      }
    a{
      color:red;
     }
  </style-->
  <link rel='stylesheet' href='test.css'>
  <script>
    alert('ceshi');
  </script>
</head>
<body>
<h1>socket web!</h1>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F03%2F72%2F70%2F3657b96a43e51c9.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613546358&t=4e7b7ecc959e3828feb2971d14551fa8">
<a href='https://www.baidu.com/'>百度</a>
</body>
</html>

不需要重新运行代码
刷新下网页
http://192.168.229.120:90/
在这里插入图片描述
2秒钟后自动跳转到新的网页。
在这里插入图片描述

h1-h6

cat data.html 
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <meta http-equiv='refresh' content="2;URL=https://www.oldboyedu.com">
  <!--meta http-equiv='x-ua-compatible' content="IE=edge"-->
  <title>Title</title>
  <title>Title</title>
  <!--style>
    h1{
    color:blue;
      }
    a{
      color:red;
     }
  </style-->
  <link rel='stylesheet' href='test.css'>
  <script>
    alert('ceshi');
  </script>
</head>
<body>
<h1>socket web h1!</h1>
<h2>socket web h2!</h2>
<h3>socket web h3!</h3>
<h4>socket web h4!</h4>
socket web!
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F03%2F72%2F70%2F3657b96a43e51c9.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613546358&t=4e7b7ecc959e3828feb2971d14551fa8">
<a href='https://www.baidu.com/'>百度</a>
</body>
</html>

访问http://192.168.229.120:90/
在这里插入图片描述
可以看到从h1到h2字体大小依次减小。

图片不存在提示

通过img alt属性可以实现这个功能。

cat data.html
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>Title</title>
  <title>Title</title>
</head>
<body>
<h1>socket web h1!</h1>
<h2>socket web h2!</h2>
<h3>socket web h3!</h3>
<h4>socket web h4!</h4>
socket web!
<img src="https://gi.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F03%2F72%2F70%2F3657b96a43e51c9.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613546358&t=4e7b7ecc959e3828feb2971d14551fa" alt="你要的图片不存在">
<a href='https://www.baidu.com/'>百度</a>
</body>
</html>

访问
http://192.168.229.120:90/
在这里插入图片描述

鼠标移动到图片上有提示

通过img title属性可以实现这个功能。

cat data.html
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>Title</title>
  <title>Title</title>
</head>
<body>
<h1>socket web h1!</h1>
<h2>socket web h2!</h2>
<h3>socket web h3!</h3>
<h4>socket web h4!</h4>
socket web!
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=234483973,4058528155&fm=26&gp=0.jpg" title="星空">
<a href='https://www.baidu.com/'>百度</a>
</body>
</html>

访问
http://192.168.229.120:90/
在这里插入图片描述

增加网页跳转按钮（跳转到新的标签）

通过a target属性实现这个功能。

cat data.html
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>Title</title>
  <title>Title</title>
</head>
<body>
<h1>socket web h1!</h1>
<h2>socket web h2!</h2>
<h3>socket web h3!</h3>
<h4>socket web h4!</h4>
socket web!
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=234483973,4058528155&fm=26&gp=0.jpg" title="星空">
<a href='https://www.baidu.com/' target='_blank'>百度</a>
</body>
</html>

访问
http://192.168.229.120:90/
在这里插入图片描述

同网页内跳转

通过a标签的href=另外一个a标签的id实现这个功能。

cat data.html
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>Title</title>
  <title>Title</title>
</head>
<body>
<h1>socket web h1!</h1>
<h2>socket web h2!</h2>
<h3>socket web h3!</h3>
<h4>socket web h4!</h4>
socket web!
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=234483973,4058528155&fm=26&gp=0.jpg" title="星空">
<a href='https://www.baidu.com/' target='_blank'>百度</a>
<a href="#a2">第一章</a>
<div style="height: 1000px;background-color: blue"></div>
<a id="a2">仙路尽头谁为峰,一见无始道成空!</a>
</body>
</html>

访问
http://192.168.229.120:90/
在这里插入图片描述

在这里插入图片描述

文字修饰标签

这里统一演示下加粗b 斜体i 下划线u 删除线s 分段p 换行br 水平分割线hr

cat data.html
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>Title</title>
</head>
<body>
圣墟
<b>圣墟</b>
<i>圣墟</i>
<u>圣墟</u>
<s>圣墟</s>
<h1>圣墟</h1>
<p>在破败中崛起，在寂灭中复苏。
　　沧海成尘，雷电枯竭，那一缕幽雾又一次临近大地，世间的枷锁被打开了，一个全新的世界就此揭开神秘的一角……大漠孤烟直，长河落日圆。

一望无垠的大漠，空旷而高远，壮阔而雄浑，当红日西坠，地平线尽头一片殷红，磅礴中亦有种苍凉感。

上古的烽烟早已在岁月中逝去，黄河古道虽然几经变迁，但依旧在。
楚风一个人在旅行，很疲惫，他躺在黄沙上，看着血色的夕阳，不知道还要多久才能离开这片大漠。
数日前他毕业了，同时也跟校园中的女神说再见，或许见不到了吧，毕竟他曾被委婉的告知，从此天各一方，该分手了。
离开学院后，他便出来旅行。
落日很红，挂在大漠的尽头，在空旷中有一种宁静的美。
楚风坐起来喝了一些水，感觉精力恢复了不少，他的身体属于修长强健那一类型，体质非常好，疲惫渐消退。</p>
<p>在破败中崛起，在寂灭中复苏。</p>
　　<p>沧海成尘，雷电枯竭，那一缕幽雾又一次临近大地，世间的枷锁被打开了，一个全新的世界就此揭开神秘的一角……大漠孤烟直，长河落日圆。</p>

<hr>

<p>一望无垠的大漠，空旷而高远，壮阔而雄浑，当红日西坠，地平线尽头一片殷红，磅礴中亦有种苍凉感。


上古的烽烟早已在岁月中逝去，黄河古道虽然几经变迁，但依旧在。</p>
<p>楚风一个人在旅行，很疲惫，他躺在黄沙上，看着血色的夕阳，不知道还要多久才能离开这片大漠。
数日前他毕业了，同时也跟校园中的女神说再见，或许见不到了吧，毕竟他曾被委婉的告知，从此天各一方，该分手了。
离开学院后，他便出来旅行。</p>
<p>落日很红，挂在大漠的尽头，在空旷中有一种宁静的美。
楚风坐起来喝了一些水，感觉精力恢复了不少，他的身体属于修长强健那一类型，体质非常好，疲惫渐消退。</p>
<br>仙路尽头谁为峰<br>一见无始道成空<br>天道无始亦无终<br>宝镜虚空镇苍穹<br>
</body>
</html>

访问
http://192.168.229.120:90/
在这里插入图片描述

特殊字符标签

cat data.html
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>Title</title>
</head>
<body>
<br>1    &lt;a<br>
1 &gt;a<br>
1&amp;a<br>
&yen; 1000<br>
&reg;<br>
&copy;<br>
圣&nbsp;&nbsp;墟
<br></body>
<br></html>

访问
http://192.168.229.120:90/
在这里插入图片描述

div和span标签

由于div和span标签没有自己的格式，非常适合用css渲染。

cat data.html
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>Title</title>
</head>
<body>
<div>我是div标签</div>
<div>我是div标签</div>
<span>我是span标签</span>
<span>我是span标签</span>
</body>
<br></html>

访问
http://192.168.229.120:90/
在这里插入图片描述

列表标签

这里演示下列表标签的有序列表和无序列表

cat data.html
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>Title</title>
</head>
<body>
<ul>
  <li>第一章</li>
  <li>第二章</li>
  <li>第三章</li>
</ul>

<ol>
   <li>第一章</li>
   <li>第二章</li>
   <li>第三章</li>
</ol>
</body>
<br></html>

访问
http://192.168.229.120:90/
在这里插入图片描述

无序列表样式属性

type属性：
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）

cat data.html
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>Title</title>
</head>
<body>
<ul type='disc'>
  <li>第一章</li>
  <li>第二章</li>
  <li>第三章</li>
</ul>
<ul type='circle'>
  <li>第一章</li>
  <li>第二章</li>
  <li>第三章</li>
</ul>

<ul type='square'>
  <li>第一章</li>
  <li>第二章</li>
  <li>第三章</li>
</ul>
<ul type='none'>
  <li>第一章</li>
  <li>第二章</li>
  <li>第三章</li>
</ul>
</body>
<br></html>

访问
http://192.168.229.120:90/
在这里插入图片描述

有序列表属性

type属性：
1（数字列表，默认值）
A（大写字母）
a（小写字母）
I大写i（大写罗马）
i（小写罗马）
start属性：
用数字表示从第几开始

cat data.html
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>Title</title>
</head>
<body>
<ol type='1' start='3'>
  <li>第一章</li>
  <li>第二章</li>
  <li>第三章</li>
</ol>
<ol type='A' start='3'>
  <li>第一章</li>
  <li>第二章</li>
  <li>第三章</li>
</ol>

<ol type='a' start='2'>
  <li>第一章</li>
  <li>第二章</li>
  <li>第三章</li>
</ol>
<ol type='I' start='5'>
  <li>第一章</li>
  <li>第二章</li>
  <li>第三章</li>
</ol>
<ol type='i' start='8'>
  <li>第一章</li>
  <li>第二章</li>
  <li>第三章</li>
</ol>
</body>
<br></html>

访问
http://192.168.229.120:90/
在这里插入图片描述

标题列表

cat data.html
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>Title</title>
</head>
<body>
<dl>
  <dt>第一篇</dt>
  <dd>第一章</dd>
  <dt>第一篇</dt>
  <dd>第一章</dd>
  <dd>第一节</dd>
</dl>
</body>
<br></html>

访问
http://192.168.229.120:90/
在这里插入图片描述

表格标签

cat data.html
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>表格示例</title>
</head>
<body>
<table border='1'>
  <thead>
  <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>爱好</th>
  </tr>
  <tr>
      <th>楚风</th>
      <th>1000000000</th>
      <th>造宇宙</th>
  </tr>
  <tr>
      <td>石昊</td>
      <td>99999999</td>
      <td>重启宇宙</td>
  </tr>
  </thead>
  <tbody>
    
  </tbody>
</table>
</body>
<br></html>

访问
http://192.168.229.120:90/
在这里插入图片描述

调整文字和表格距离

table标签cellpadding属性

cat data.html
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>表格示例</title>
</head>
<body>
<table border='1' cellpadding='10'>
  <thead>
  <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>爱好</th>
  </tr>
  <tr>
      <th>楚风</th>
      <th>1000000000</th>
      <th>造宇宙</th>
  </tr>
  <tr>
      <td>石昊</td>
      <td>99999999</td>
      <td>重启宇宙</td>
  </tr>
  </thead>
  <tbody>
    
  </tbody>
</table>
</body>
<br></html>

访问
http://192.168.229.120:90/
在这里插入图片描述

调整外边距

table标签cellspacing属性

cat data.html
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>表格示例</title>
</head>
<body>
<table border='1' cellpadding='10' cellspacing='10'>
  <thead>
  <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>爱好</th>
  </tr>
  <tr>
      <th>楚风</th>
      <th>1000000000</th>
      <th>造宇宙</th>
  </tr>
  <tr>
      <td>石昊</td>
      <td>99999999</td>
      <td>重启宇宙</td>
  </tr>
  </thead>
  <tbody>
    
  </tbody>
</table>
</body>
<br></html>

访问
http://192.168.229.120:90/
在这里插入图片描述

调整表格高度

table标签width属性

cat data.html
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>表格示例</title>
</head>
<body>
<table border='1' cellpadding='10' cellspacing='10' width='10'>
  <thead>
  <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>爱好</th>
  </tr>
  <tr>
      <th>楚风</th>
      <th>1000000000</th>
      <th>造宇宙</th>
  </tr>
  <tr>
      <td>石昊</td>
      <td>99999999</td>
      <td>重启宇宙</td>
  </tr>
  </thead>
  <tbody>
    
  </tbody>
</table>
</body>
<br></html>

访问
http://192.168.229.120:90/
在这里插入图片描述

合并单元格（竖）

th或td标签的rowspan属性

cat data.html
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>表格示例</title>
</head>
<body>
<table border='1' cellpadding='10' cellspacing='10' width='10'>
  <thead>
  <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>爱好</th>
  </tr>
  <tr>
      <th>楚风</th>
      <th>1000000000</th>
      <th rowspan='2'>造宇宙</th>
  </tr>
  <tr>
      <td>石昊</td>
      <td>99999999</td>
      <td>重启宇宙</td>
  </tr>
  </thead>
  <tbody>
    
  </tbody>
</table>
</body>
<br></html>

访问
http://192.168.229.120:90/
在这里插入图片描述

合并单元格（横）

th或td标签的colspan属性

cat data.html
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>表格示例</title>
</head>
<body>
<table border='1' cellpadding='10' cellspacing='10' width='10'>
  <thead>
  <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>爱好</th>
  </tr>
  <tr>
      <th>楚风</th>
      <th>1000000000</th>
      <th>造宇宙</th>
  </tr>
  <tr>
      <td colspan='2'>石昊</td>
      <td>99999999</td>
      <td>重启宇宙</td>
  </tr>
  </thead>
  <tbody>
    
  </tbody>
</table>
</body>
<br></html>

访问
http://192.168.229.120:90/
在这里插入图片描述

form表单

表单大部分标签和属性示例

cat data.html
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>form表单示例</title>
</head>
<body>
<!--注册示例-->
<form action=''>
<p>用户名
 <input type='text'>
</p>
<p>密码
  <input type='password'>
</p>
<p>性别
 <input name='gender' type='radio'> 男
 <input name='gender' type='radio'>女
</p>
<p>爱好
  <input type='checkbox'> 篮球
  <input type='checkbox'> 足球
  <input type='checkbox'>双色球
</p>
<select>
  <option value=''>北京</option>
  <option value=''>上海</option>
  <option value=''>重庆</option>
  <optgroup label='北京'>
    <option value=''>昌平</option>
    <option value=''>朝阳</option>
    <option value=''>海淀</option>
  </optgroup>
  <optgroup label='上海'>
    <option value=''>浦东新区</option>
    <option value=''>闵行区</option>
    <option value=''>黄浦区</option>
  </optgroup>
  <optgroup label='四川'>
    <option value=''>攀枝花</option>
    <option value=''>自贡</option>
    <option value=''>绵阳</option>
  </optgroup>
</select>
<select>
  <option value=''>北京</option>
  <option value=''>上海</option>
  <option value=''>重庆</option>
</select>
<p>
<textarea name='' id='' cols='30' rows='10'>
</textarea>
</p>
<p>上传文件
  <input type='file'>
  
</p>
 <input type='submit' value='点此提交'>
</select>
</form>
</body>
</html>

访问
http://192.168.229.120:90/
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

规范写法加label

cat data.html
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>form表单示例</title>
</head>
<body>
<!--注册示例-->
<form>

<p>性别
 <input name='gender' type='radio' value='1'> 男
 <input name='gender' type='radio' value='0'>女
 <input checked name='gender' type='radio' value='2'>保密
</p>
<p>性别
 <label for='id1'>男</label>
 <input id='id1' name='gender' type='radio'>
 <label>女
 <input name='gender' type='radio'>
 </label>
 <label for='id3'>保密</label>
 <input id='id3' checked name='gender' type='radio'>
</p>
 
<input type='submit' value='点此提交'>
 <input type='reset' value='重置'>
</form>
</body>
</html>
 
<input type='submit' value='点此提交'>
 <input type='reset' value='重置'>
</form>
</body>
</html>

表单input标签placeholder属性

cat data.html
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>form表单示例</title>
</head>
<body>
<!--注册示例-->
<form action='http://192.168.229.120:8000/upload/' method='post' enctype='multipart/form-data'>
<p>搜索
  <input placeholder='阿里云' type=’text'> 
</p>
 <input type='submit' value='点此提交'>
 <input type='reset' value='重置'>
</select>
</form>
</body>
</html>

访问
http://192.168.229.120:90/
在这里插入图片描述

表单input标签readonly属性

cat data.html
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>form表单示例</title>
</head>
<body>
<!--注册示例-->
<form action='http://192.168.229.120:8000/upload/' method='post' enctype='multipart/form-data'>
<p>搜索
  <input readonly value='阿里云' type=’text'> 
</p>
 <input type='submit' value='点此提交'>
 <input type='reset' value='重置'>
</select>
</form>
</body>
</html>

访问
http://192.168.229.120:90/
在这里插入图片描述

表单input标签disabled属性

cat data.html
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>form表单示例</title>
</head>
<body>
<!--注册示例-->
<form action='http://192.168.229.120:8000/upload/' method='post' enctype='multipart/form-data'>
<p>搜索
  <input readonly value='阿里云' type=’text' disabled> 
</p>
 <input type='submit' value='点此提交'>
 <input type='reset' value='重置'>
</select>
</form>
</body>
</html>

访问
http://192.168.229.120:90/
在这里插入图片描述

表单select标签multiple属性

cat data.html
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>form表单示例</title>
</head>
<body>
<!--注册示例-->
<form action='http://192.168.229.120:8000/upload/' method='post' enctype='multipart/form-data'>
<p>搜索
  <input readonly value='阿里云' type=’text' disabled> 
</p>
<select multiple>
  <option value=''>北京</option>
  <option value=''>上海</option>
  <option value=''>重庆</option>
  <optgroup label='北京'>
    <option value=''>昌平</option>
    <option value=''>朝阳</option>
    <option value=''>海淀</option>
  </optgroup>
</select>
<select>
  <optgroup label='四川'>
    <option value=''>攀枝花</option>
    <option value=''>自贡</option>
    <option value=''>绵阳</option>
  </optgroup>
</select>
 <input type='submit' value='点此提交'>
 <input type='reset' value='重置'>
</select>
</form>
</body>
</html>

访问
http://192.168.229.120:90/
在这里插入图片描述

html和后台交互

使用form标签的action属性实现此功能。

开启一个后台程序

(django3) [root@golang myproject]# python manage.py startapp html01

(django3) [root@golang myproject]# cat myproject/urls.py 
"""myproject URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/1.11/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  url(r'^$', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  url(r'^$', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.conf.urls import url, include
    2. Add a URL to urlpatterns:  url(r'^blog/', include('blog.urls'))
"""
from django.conf.urls import url,include
from django.contrib import admin
from html01 import views
urlpatterns = [
    url(r'^upload/',views.upload),
]

(django3) [root@golang myproject]# cat html01/views.py 
from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.
def upload(request):
   return HttpResponse('提交成功!')

(django3) [root@golang myproject]# cat myproject/settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'web',
    'web02',
    'html01',
]

(django3) [root@golang myproject]# python /opt/django3/myproject/manage.py runserver 192.168.229.120:8000
Performing system checks...

System check identified no issues (0 silenced).
January 19, 2021 - 06:46:10
Django version 1.11.7, using settings 'myproject.settings'
Starting development server at http://192.168.229.120:8000/
Quit the server with CONTROL-C.

修改前端代码，将form标签的action属性指向http://192.168.229.120:8000/upload/。

cat data.html
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>form表单示例</title>
</head>
<body>
<!--注册示例-->
<form action='http://192.168.229.120:8000/upload/'>
<p>用户名
 <input type='text'>
</p>
<p>密码
  <input type='password'>
</p>
<p>性别
 <input name='gender' type='radio'> 男
 <input name='gender' type='radio'>女
</p>
<p>爱好
  <input type='checkbox'> 篮球
  <input type='checkbox'> 足球
  <input type='checkbox'>双色球
</p>
<select>
  <option value=''>北京</option>
  <option value=''>上海</option>
  <option value=''>重庆</option>
  <optgroup label='北京'>
    <option value=''>昌平</option>
    <option value=''>朝阳</option>
    <option value=''>海淀</option>
  </optgroup>
  <optgroup label='上海'>
    <option value=''>浦东新区</option>
    <option value=''>闵行区</option>
    <option value=''>黄浦区</option>
  </optgroup>
  <optgroup label='四川'>
    <option value=''>攀枝花</option>
    <option value=''>自贡</option>
    <option value=''>绵阳</option>
  </optgroup>
</select>
<select>
  <option value=''>北京</option>
  <option value=''>上海</option>
  <option value=''>重庆</option>
</select>
<p>
<textarea name='' id='' cols='30' rows='10'>
</textarea>
</p>
<p>上传文件
  <input type='file'>
  
</p>
 <input type='submit' value='点此提交'>
</select>
</form>
</body>
</html>

访问
http://192.168.229.120:90/
在这里插入图片描述
可以看到提交成功！

在这里插入图片描述

将提交的数据在后端打印下

其他后端代码不变，将upload函数增加一行打印语句。

(django3) [root@golang myproject]# cat html01/views.py 
from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.
def upload(request):
   print("request.GET",request.GET)
   return HttpResponse('提交成功!')

这里的html需要增加name和value属性

cat data.html
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>form表单示例</title>
</head>
<body>
<!--注册示例-->
<form action='http://192.168.229.120:8000/upload/'>
<p>用户名
 <input name='username'type='text'>
</p>
<p>密码
  <input name='password' type='password'>
</p>
<p>性别
 <input name='gender' type='radio' value='1'> 男
 <input name='gender' type='radio' value='0'>女
</p>
<p>爱好
  <input name='爱好' type='checkbox'> 篮球
  <input name='爱好' type='checkbox'> 足球
  <input name='爱好' type='checkbox'>双色球
</p>
<select name='地点1'>
  <option value='北京'>北京</option>
  <option value='上海'>上海</option>
  <option value='重庆'>重庆</option>
  <optgroup value='北京' label='北京'>
    <option value='昌平'>昌平</option>
    <option value='朝阳'>朝阳</option>
    <option value='海淀'>海淀</option>
  </optgroup>
  <optgroup value='上海' label='上海'>
    <option value='浦东新区'>浦东新区</option>
    <option value='闽行区'>闵行区</option>
    <option value='黄浦区'>黄浦区</option>
  </optgroup>
  <optgroup value='四川' label='四川'>
    <option value='攀枝花'>攀枝花</option>
    <option value='自贡'>自贡</option>
    <option value='绵阳'>绵阳</option>
  </optgroup>
</select>
<select name='地点2'>
  <option value='北京'>北京</option>
  <option value='上海'>上海</option>
  <option value='重庆'>重庆</option>
</select>
<p>
<textarea name='描述' value='miaoshu' id='' cols='30' rows='10'>
</textarea>
</p>
<p>上传文件
  <input name='上传的文件' type='file'>
  
</p>
 <input type='submit' value='点此提交'>
</select>
</form>
</body>
</html>

访问
http://192.168.229.120:90/
在这里插入图片描述
到后台看打印的值
在这里插入图片描述
可以看到爱好那一栏并没有打印出具体的值，而仅仅是on，这是因为没有定义value。
改data.html文件

cat data.html
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>form表单示例</title>
</head>
<body>
<!--注册示例-->
<form action='http://192.168.229.120:8000/upload/'>
<p>用户名
 <input name='username'type='text'>
</p>
<p>密码
  <input name='password' type='password'>
</p>
<p>性别
 <input name='gender' type='radio' value='1'> 男
 <input name='gender' type='radio' value='0'>女
</p>
<p>爱好
  <input name='爱好' value='爱好1' type='checkbox'> 篮球
  <input name='爱好' value='爱好2' type='checkbox'> 足球
  <input name='爱好' value='爱好3' type='checkbox'>双色球
</p>
<select name='地点1'>
  <option value='beijing'>北京</option>
  <option value='shanghai'>上海</option>
  <option value='重庆'>重庆</option>
  <optgroup value='北京' label='北京'>
    <option>昌平</option>
    <option>朝阳</option>
    <option>海淀</option>
  </optgroup>
  <optgroup value='上海' label='上海'>
    <option value='浦东新区'>浦东新区</option>
    <option value='闽行区'>闵行区</option>
    <option value='黄浦区'>黄浦区</option>
  </optgroup>
  <optgroup value='四川' label='四川'>
    <option value='攀枝花'>攀枝花</option>
    <option value='自贡'>自贡</option>
    <option value='绵阳'>绵阳</option>
  </optgroup>
</select>
<select name='地点2'>
  <option value='北京'>北京</option>
  <option value='上海'>上海</option>
  <option value='重庆'>重庆</option>
</select>
<p>
<textarea name='描述' value='miaoshu' id='' cols='30' rows='10'>
</textarea>
</p>
<p>上传文件
  <input name='上传的文件' type='file'>
  
</p>
 <input type='submit' value='点此提交'>
</select>
</form>
</body>
</html>

再次看，可以看到爱好按照自己自定义的value打印了出来，而且地点那即使没有定义value也会有值打印。
在这里插入图片描述
再次更改下data.html自己定义一个地点的value

cat data.html
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>form表单示例</title>
</head>
<body>
<!--注册示例-->
<form action='http://192.168.229.120:8000/upload/'>
<p>用户名
 <input name='username'type='text'>
</p>
<p>密码
  <input name='password' type='password'>
</p>
<p>性别
 <input name='gender' type='radio' value='1'> 男
 <input name='gender' type='radio' value='0'>女
</p>
<p>爱好
  <input name='爱好' value='爱好1' type='checkbox'> 篮球
  <input name='爱好' value='爱好2' type='checkbox'> 足球
  <input name='爱好' value='爱好3' type='checkbox'>双色球
</p>
<select name='地点1'>
  <option value='beijing'>北京</option>
  <option value='shanghai'>上海</option>
  <option value='重庆'>重庆</option>
  <optgroup value='北京' label='北京'>
    <option value='cangping'>昌平</option>
    <option>朝阳</option>
    <option>海淀</option>
  </optgroup>
  <optgroup value='上海' label='上海'>
    <option value='浦东新区'>浦东新区</option>
    <option value='闽行区'>闵行区</option>
    <option value='黄浦区'>黄浦区</option>
  </optgroup>
  <optgroup value='四川' label='四川'>
    <option value='攀枝花'>攀枝花</option>
    <option value='自贡'>自贡</option>
    <option value='绵阳'>绵阳</option>
  </optgroup>
</select>
<select name='地点2'>
  <option value='北京'>北京</option>
  <option value='上海'>上海</option>
  <option value='重庆'>重庆</option>
</select>
<p>
<textarea name='描述' value='miaoshu' id='' cols='30' rows='10'>
</textarea>
</p>
<p>上传文件
  <input name='上传的文件' type='file'>
  
</p>
 <input type='submit' value='点此提交'>
</select>
</form>
</body>
</html>

可以看到地点按照自己定义的value值打印了出来。
在这里插入图片描述

重置功能

使用input标签的type属性reset实现这个功能。

cat data.html
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' >
  <title>form表单示例</title>
</head>
<body>
<!--注册示例-->
<form action='http://192.168.229.120:8000/upload/'>
<p>用户名
 <input name='username'type='text'>
</p>
<p>密码
  <input name='password' type='password'>
</p>
<p>性别
 <input name='gender' type='radio' value='1'> 男
 <input name='gender' type='radio' value='0'>女
</p>
<p>爱好
  <input name='爱好' value='爱好1' type='checkbox'> 篮球
  <input name='爱好' value='爱好2' type='checkbox'> 足球
  <input name='爱好' value='爱好3' type='checkbox'>双色球
</p>
<select name='地点1'>
  <option value='beijing'>北京</option>
  <option value='shanghai'>上海</option>
  <option value='重庆'>重庆</option>
  <optgroup value='北京' label='北京'>
    <option value='cangping'>昌平</option>
    <option>朝阳</option>
    <option>海淀</option>
  </optgroup>
  <optgroup value='上海' label='上海'>
    <option value='浦东新区'>浦东新区</option>
    <option value='闽行区'>闵行区</option>
    <option value='黄浦区'>黄浦区</option>
  </optgroup>
  <optgroup value='四川' label='四川'>
    <option value='攀枝花'>攀枝花</option>
    <option value='自贡'>自贡</option>
    <option value='绵阳'>绵阳</option>
  </optgroup>
</select>
<select name='地点2'>
  <option value='北京'>北京</option>
  <option value='上海'>上海</option>
  <option value='重庆'>重庆</option>
</select>
<p>
<textarea name='描述' value='miaoshu' id='' cols='30' rows='10'>
</textarea>
</p>
<p>上传文件
  <input name='上传的文件' type='file'>
  
</p>
 <input type='submit' value='点此提交'>
 <input type='reset' value='重置'>
</select>
</form>
</body>
</html>

访问
http://192.168.229.120:90/
在这里插入图片描述
在这里插入图片描述

html标签

html标签属性

1、标签属性可以自定义
2、任何标签都有3个属性 id class style，这些属性可以不写。

html标签分类

双标签 img
单标签 h1-h6，a

块级标签 h1-h6， div，p，hr
默认占浏览器宽度，可以设置宽和高
内联标签（行内标签）a， img ，u，s，i，b，span
根据内容决定长度

标签的嵌套规则

1、内联标签（行内标签）不能嵌套块级标签。
2、p标签不能嵌套块级标签。

html文件结构

缩进不是html的语法，有无均不影响语法准确性，但是为了好看，一般要有缩进。

<!DOCTYPE html>
<html>
<!--head的内容不会显示-->
<head>
 <!--body的内容才会显示-->
</head>
 <body>
   <h1>hello</h1>
   <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F03%2F72%2F70%2F3657b96a43e51c9.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613546358&t=4e7b7ecc959e3828feb2971d14551fa8">  
   <a href='https://www.baidu.com/'>baidu</a>
 </body>
</html>

head标签

<meta charset='UTF-8' >
<title>Title</title>
<style>
    h1{
     
     
    color:blue;
      }
    a{
     
     
      color:red;
     }
  </style>
<link rel='stylesheet' href='test.css'>

form表单子标签

textarea 大段文本
select 下拉菜单
option 具体的下拉菜单
optiongroup 分组的下拉菜单
label

input标签属性

input标签属性
text 文本
password 密码
radio 单选框
checkbox 多选框
date 日期
datetime 时间
file 上传文件
button 普通按钮，配合js
reset 重置
submit 提交
checked 默认选择有这个属性的值
readonly 只读，设置了这个值后不能改动，与value配合使用。
placeholder 默认显示一个东西，但不影响用户输入

猜你喜欢

转载自blog.csdn.net/weixin_40548182/article/details/112781922
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
NEFU 117 素数个数的位数
Closest Common Ancestors (Lca,tarjan)
ELK部署
【转载】Hive笔记整理（三）
SQL语句（一）基本表的定义
关于Java web开发中的MySQL的事务语句
MFC创建自定义窗体
如何用一句话激怒程序员？
《逆袭大学》文摘——9.4 基础和应用的平衡中找到大学的节奏
【spring源码分析】@Value注解原理
每日归档
更多
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022