1 index标签
<h1>JD server</h1> <a href='https://www.jd.com/'>点击</a> <img src='https://img12.360buyimg.com/da/jfs/t6076/12/7205461070/175654/fbcc93ae/597afa33N88136f56.jpg'>
server.py
import socket sock=socket.socket() sock.bind(("127.0.0.1",8800)) sock.listen(5) while 1: conn,addr=sock.accept() print("from conn :",conn) data=conn.recv(1024) f=open("index.html","r") index_str=f.read() conn.send(("HTTP/1.1 201 OK %s"%index_str).encode("utf8")) conn.close()
2 table 标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1" cellspacing="5px" cellpadding="2"> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td colspan="2">111</td> <td>333</td> </tr> <tr> <td>111</td> <td>222</td> <td rowspan="2">333</td> </tr> <tr> <td>111</td> <td>222</td> </tr> </table> </body> </html>
3 test 标签
<html lang="en"> <head> <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="老男孩培训机构是由一个很老的男孩创建的"> <meta http-equiv="content-type" charset="UTF-8"> <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> <title>Yuan</title> <link rel="icon" href="https://www.jd.com/favicon.ico"> </head> <body> <h1>JD server</h1> <a href='https://www.jd.com/'>点击</a> <img src=''> </body> </html>
4 块级标签和内联标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1 style="color: wheat;background-color: green">yuan</h1> <b style="background-color: goldenrod">egonegonegonegon</b> yuan </body> </html>
5 a 标签 .html 和 基本标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="https://www.jd.com/">点击</a> <a href="基本标签.html">点击2</a> <a href="https://www.jd.com/" target="_blank"><img src="https://img14.360buyimg.com/cms/jfs/t7021/155/594986657/262648/fd3340fc/5977ec9eNd55f2f63.jpg!q80.webp" alt="" ></a> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>yuan</h1> <h2>yuan</h2> <h3>yuan</h3> <h4>yuan</h4> <h5>yuan</h5> <h6>yuan</h6> <h4>海燕呐</h4> 床前明月光<br> 床前明月光<br> 床前明月光<br> 床前明月光<br> <p>床前明月光</p> <p>床前明月光</p> <p>床前明月光</p> <p>床前明月光</p> <b>yuan</b> <em>yuan</em> <strike>$100</strike> 3<sub>2</sub> 3<sup>2</sup> <hr> </body> </html>
6 img 标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img src="https://img14.360buyimg.com/cms/jfs/t7021/155/594986657/262648/fd3340fc/5977ec9eNd55f2f63.jpg!q80.webp" alt="牛奶" title="奶牛" width="100px" height="100px"> </body> </html>
7 div 和 span 标签 . html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--div和span标签没有任何样式--> <div style="background-color: red">yuan</div> <span style="background-color: goldenrod">SPAN</span> </body> </html>
8 列表标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> <ol> <li>111</li> <li>222</li> <li>333</li> </ol> <dl> <dt>河北省</dt> <dd>保定市</dd> <dd>石家庄</dd> <dd>唐山</dd> </dl> </body> </html>
9 form表单 .html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2>注册页面</h2> <form action=""> <p>姓名：<input type="text"></p> <p>密码：<input type="password"></p> <input type="submit" value="submit"> </form> </br> </body> </html>
用户注册 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2>注册面页</h2> <form action="/index/" method="poet"> <p>姓名：<input type="text" name="username" value=""></p> <p>密码：<input type="password" name="passwd" value=""></p> <p>爱好：<input type="checkbox" name="hobby" value="">篮球 <input type="checkbox" name="hobby" value="">足球 <input type="checkbox" name="hobby" value="">双色球 </p> <p>性别： <input type="radio" name="sex" value=" 1">男 <input type="radio" name="sex" value=" 0">女 </p> <p><input type="reset"></p> <p><input type="button" value="yes"></p> <p><input type="file"></p> <p>籍贯 <select name="jiguan" size="1" multiple="multiple"> <option value="hebei"> 河北省</option> <option value="shanxi">陕西省</option> <option value="hubei">湖北省</option> <option value="hunan">湖南省</option> </select> </p> <input type="submit" value="提交"> </form> </body> </html>