HTML标签及其属性

一、Google访问socket服务端

 1 import socket
 2 
 3 def socket_server():
 4     sk = socket.socket(socket.AF_INET,socket.SOCK_STREAM)
 5     sk.bind(('localhost',8089))
 6     sk.listen(5)
 7     print('服务器已开启......')
 8 
 9     while True:
10         conn,address = sk.accept()
11         buf = conn.recv(1024)
12         print(buf)
13 
14         conn.sendall(bytes('HTTP/1.0 201 ok

 ','utf8'))
15         conn.sendall(bytes('<h1>welcome come to my website</h1>','utf8'))
16         conn.close()
17 
18 '''我们在此开启一个服务器，用谷歌浏览器搜索'127.0.0.1：8089'进行访问；
19    谷歌充当客户端发送请求，然后我们的服务器给它返回以上内容；
20    谷歌对该内容进行解析并呈现在网页中。'''
21 
22 if __name__ == "__main__":
23     socket_server()

二、head标签

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="Refresh" content="2;URL='https://fanyi.baidu.com/'">
 6     <!--两秒以后自动跳转到百度翻译；如果没有URL，则刷新本页-->
 7     <title>高江平的网站</title>
 8     <!--给网站加标题-->
 9     <link rel="icon" href="京东.ico">
10     <!--给标题前加个小图标-->
11 </head>
12 <body>
13 </body>
14 </html>

三、body基本标签

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>高江平的网站-基本标签1</title>
 6     <link rel="icon" href="京东.ico">
 7 </head>
 8 <body>
 9     <h1 style="color:red">helloword</h1>
10     <h2 style="color:red">helloword</h2>
11     <h3 style="color:red">helloword</h3>
12     <h4 style="color:red">helloword</h4>
13     <h5 style="color:red">helloword</h5>
14     <h6 style="color:red">helloword</h6>
15     <!--将字体变大变黑，h1-h6依次缩小-->
16 
17     君子坦荡荡<br/>窗前明月光
18     <!--换行，自闭合标签-->
19 
20     <p style="color:blue">君子坦荡荡</p>
21     <p style="color:blue">该浪还得浪</p>
22     <!--换行 隔行-->
23 
24     <hr/>
25     <!--分割线，自闭合标签-->
26 
27     <div style="color:purple">一张白纸，为所欲为</div>
28     <!--没有效果，为css和js提供装饰平台-->
29 
30 </body>
31 </html>

四、img标签和a标签

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>高江平的网站-img标签和a标签</title>
 6     <link rel="icon" href="京东.ico">
 7     <style>
 8         #div1{height:300px; background-color:red}
 9         #div2{height:300px; background-color:purple}
10         #div3{height:300px; background-color:yellow}
11         <!--对id为div1、div2和div3的标签进行修饰，设置了高度和背景色-->
12     </style>
13 </head>
14 
15     <img src="gaolu.jpg" width="200px" height="200"px alt="图片加载失败" title="大美女">
16     <!--图像标签：src-图片路径，width-宽，height-高，alt-图片加载失败时的提示，title-鼠标悬浮在图片上时的提示-->
17 
18     <a href="http://www.baidu.com">http://www.baidu.com</a>
19     <a href="http://www.baidu.com" target="_blank">http://www.baidu.com</a>
20     <!--超链接，可点击跳转访问网页，target="_blank"表示新标签页跳转-->
21 
22     <div id="top">首页</div>
23     <a href="#div1">第一章</a>
24     <a href="#div2">第二章</a>
25     <a href="#div3">第三章</a>
26     <!--href="#div3"：点击"第三章"，则页面拉动到id为div3的内容-->
27     <div id="div1">第一章  <a href="#top">返回首页</a></div>
28     <div id="div2">第二章  <a href="#top">返回首页</a></div>
29     <div id="div3">第三章  <a href="#top">返回首页</a></div>
30 
31 </body>
32 </html>

五、列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高江平的网站-列表标签</title>
    <link rel="icon" href="京东.ico">
</head>
<body>

    <!--非排序列表-->
    <ul><li>1258</li>
        <li>1258</li>
        <li>1258</li>
    </ul>
    
    <!--排序列表-->
    <ol><li>1258</li>
        <li>1258</li>
        <li>1258</li>
    </ol>
    
    <!--定义列表-->
    <dl>
        <dt>第一章</dt>
        <!--dt表示定义标题-->
        <dd>第一节</dd>
        <dd>第二节</dd>
        <dd>第三节</dd>
        <!--dd表示定义data-->
    </dl>


</body>
</html>

六、form标签

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>高江平的网站-form标签</title>
 6     <link rel="icon" href="京东.ico">
 7 </head>
 8 <body>
 9     <!--form标签用来向后台发送数据-->
10     <form action="form标签" method="post">
11         <p>账号<input type="text" name="count"></p>
12         <p>密码<input type="password" name="pwd"></p>
13         <p>爱好：<input type="checkbox" name="hobby" value="chouyan">抽烟 <input type="checkbox" name="hobby" value="hejiu">喝酒 <input type="checkbox" name="hobby" value="tangtou">烫头</p>
14         <p>性别：<input type="radio" name="sex" value="men">男 <input type="radio" name="sex" value="women">女</p>
15         <p><input type="file" name="file"></p>
16         <p><input type="submit" value="登录"></p>
17         <p><input type="reset"></p>
18         <p><input type="button"></p>
19         <!--input中的type为输入类型：-->
20                                 <!--输入型的：name属性作键，输入的内容作值，以字典形式传输-->
21                                 <!--选择型的：name属性作键，value属性作值，以字典形式传输-->
22     </form>
23   
24 </body>
25 </html>

七、select标签

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>高江平的网站-select标签</title>
 6     <link rel="icon" href="京东.ico">
 7 </head>
 8 <body>
 9     <!--提供一个下拉选择的框框-->
10     <select name="city" multiple size="5">
11         <!--multiple表示可以多选，size规定了一页显示的内容条数-->
12         <optgroup label="北京"><!--optgroup提供了分组功能-->
13             <option value="chaoyang">朝阳</option>
14             <option value="sanlitun">三里屯</option>
15             <option value="zhongguancun">中关村</option>
16             <!--option就是下拉列表中的选项-->
17         </optgroup>
18          <optgroup label="山西">
19             <option value="datong">大同</option>
20             <option value="hongtong">洪洞</option>
21          </optgroup>>
22     </select><br/>
23 
24     <textarea rows="10" cols="100">续贷声明</textarea><br/>
25     <!--划出一块文本区-->
26 
27     <label for="123">账号</label>
28     <input id="123" type="text">
29 </body>
30 </html>