html标签功能演示

写一段socket代码

[root@golang ~]# cat /python/web/socket-server.py
#!/usr/local/bin/python3
#!coding:utf8
import socketsk=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 socketsk=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 socketsk=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 ConfigurationThe `urlpatterns` list routes URLs to views. For more information please see:https://docs.djangoproject.com/en/1.11/topics/http/urls/
Examples:
Function views1. Add an import:  from my_app import views2. Add a URL to urlpatterns:  url(r'^$', views.home, name='home')
Class-based views1. Add an import:  from other_app.views import Home2. Add a URL to urlpatterns:  url(r'^$', Home.as_view(), name='home')
Including another URLconf1. Import the include() function: from django.conf.urls import url, include2. 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 默认显示一个东西，但不影响用户输入

Python socket和前端html相关推荐

【转】 python socket向百度发送http长连接请求并做搜索
http://hi.baidu.com/leejun_2005/blog/item/30fe9bd23a396c28960a1640.html [转] python socket向百度发送http长连 ...
[Python_7] Python Socket 编程
0. 说明 Python Socket 编程 1. TCP 协议 [TCP Server] 通过 netstat -ano 查看端口是否开启 # -*-coding:utf-8-*-"&qu ...
Python Socket请求网站获取数据
Python Socket请求网站获取数据 ---阻塞 I/O ->收快递,快递如果不到,就干不了其他的活 ---非阻塞I/0 ->收快递,不断的去问,有没有送到,有没有送到,. ...
python udp 直播_[Python] socket发送UDP广播实现聊天室功能
原博文 2018-11-24 12:33 − 一.说明本文主要使用socket.socket发送UDP广播来实现聊天室功能. 重点难点:理解UDP通讯流程.多线程.UDP广播收发等. 测试环境:Wi ...
【Python之旅】第五篇（三）：Python Socket多线程并发
1.多线程模块主要是socketserver模块,如下图示: 2.多线程原理如下图示说明: 3.SockteServer例子说明服务器端: 客户端: 4.演示还是以前面例子,对代码进行修改,作 ...
python socket 说明
一个简单的python socket编程一.套接字套接字是为特定网络协议(例如TCP/IP,ICMP/IP,UDP/IP等)套件对上的网络应用程序提供者提供当前可移植标准的对象.它们允许程序接受并 ...
Python Socket 编程——聊天室示例程序
上一篇我们学习了简单的 Python TCP Socket 编程,通过分别写服务端和客户端的代码了解基本的 Python Socket 编程模型.本文再通过一个例子来加强一下对 Socket 编程的 ...
python socket sendto sendall_网络通信 Python Socket UDP Select
前言工作中遇到各种各样的网络通信.有MQTT和CoAP这样的物联网应用层协议,也有各种自定义的TCP或UDP协议.使用各种不同的计算机语言和框架开发网络通信,例如Java的Netty框架,C语言原始 ...
python socket编程_Python Socket编程实现网络编程
对于有经验的开发人员来说,掌握的编程语言应该是不少的.在这些编程语言中,网络编程的应用时必不可少的.其中Python也是这样的编程语言.我们今天将会在这里为大家详细介绍一下Python Socket编 ...

Python socket和前端html

html标签功能演示

写一段socket代码

修饰下文字

socket读取文件

显示图片

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

设置中文编码

改变颜色

给网页加title

script

自动跳转到别的网页

h1-h6

图片不存在提示

鼠标移动到图片上有提示

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

同网页内跳转

文字修饰标签

特殊字符标签

div和span标签

列表标签

无序列表样式属性

有序列表属性

标题列表

表格标签

调整文字和表格距离

调整外边距

调整表格高度

合并单元格（竖）

合并单元格（横）

form表单

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

规范写法加label

表单input标签placeholder属性

表单input标签readonly属性

表单input标签disabled属性

表单select标签multiple属性

html和后台交互

开启一个后台程序

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

重置功能

html标签

html标签属性

html标签分类

标签的嵌套规则

html文件结构

head标签

form表单子标签

input标签属性

Python socket和前端html相关推荐

最新文章

热门文章