HTML常用标签及web服务
web服务：
顺序：浏览器发送请求------服务端收到请求并处理----------返回处理结果--------------浏览器展示
我们可以使用socket模拟一个后端，前端html页面直接在form表单中指向该地址和端口
import socket
sk=socket.socket()
sk.bind(('127.0.0.1',10055))
sk.listen()
while 1:
conn,addr=sk.accept()
data=conn.recv(1024)
# 前后端 使用http格式交互数据，在浏览器直接访问
print(data)
# with open('data','rb')as f:
# msg=f.read()
conn.send(b'HTTP/1.1 200 OK\r\n\r\n')
conn.send(b'ok')
conn.close()
sk.close()
html常用标签：
<!DOCTYPE html> 声明为html5
<html lang="zh-CN"> 文件开始
<head> 头部 定义了html文件的开头部分
<meta charset="UTF-8"> 在头部 声明 编码方式
<title>Title</title> 定义了网页标题
</head>
<body> html文件主体部分
</body>
</html>
head内常用标签：
| title | 定义网页的标题 |
| style | 定义内部样式（css） |
| script | 定义js代码或引入外部js文件 |
| link | 引入外部样式相当于python中的import |
| meta | 定义网页元文件 |
meta标签：
1： http-equiv 属性：相当于http的文件头，像浏览器传送一些有用的信息，以帮助浏览器正确的网页内容
3秒后跳转指定网站
<meta http-equiv="refresh" content="3;http://www.baidu.com">
指定html文件的编码类型
<meta http-equiv="content-Type" charset="UTF8">
告诉IE以最高级模式渲染文档
<meta http-equiv="x-ua-compatible=" IE=edge">
2:name属性，用于描述网页，便于爬虫的查找和分类信息用
<meta name="keywords" content="前端学习，css，html">
body内标签：
基本标签：
| b | 加粗 |
| i | 斜体 |
| u | 下划线 |
| s | 删除 |
| p | 段落标签 |
| h1--h6 | 标题 |
| br | 换行 |
| hr | 水平线 |
特殊字符：
|   | 空格 |
| > | 大于 |
| < | 小于 |
| & | & |
| ¥ | 人民币标识￥ |
| © | 版权 |
| ® | 注册 |
div和span标签
这俩个标签并没有实际的意义，主要是利用css为其赋予不同的样式。div是块级标签，span是行内标签。
一个行内标签是不能内嵌块级标签的。块级标签则则可以内嵌块级标签和行内标签，但是块级标签p不能
内嵌div标签。
img标签和a标签：
img标签是图片标签，常用属性 src alt title
<img src="http://a0.att.hudong.com/78/52/01200000123847134434529793168.jpg" alt="ssss" title="nihao"> 其中src 指定图片路径，也可以指向内部图片路径 alt 是当指定的图片不存在的时候的显示 title 是当鼠标放到图片上的显示内容
a标签是超链接 常用属性href target
<a href="www.baidu.com" target="_blank">百度</a> targe属性控制跳转网页是否重新打开一个浏览器窗口_self _blank href除了相对路径和绝对路径之外，还可以指定为锚链接，通常指向网页中的标签的id属性 （href="#id1"）
列表中的标签;
ul 无序列表：
<ul type="cirle">
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
</ul>
type属性：
disc 实心圆点
circle 空心圆点
square 实心方块
none 无样式
ol 有序列表：
<ol type="1" start="2">
<li>aaaa111</li>
<li>aaaa222</li>
<li>aaaa333</li>
</ol>
type属性：
1 数字列表
A 大写字母
a 小写字母
I 大写罗马
i 小写罗马
start属性： 指定从那个序号开始
dl 标题列表：
<!--标题列表-->
<dl>
<dt>标题</dt>
<dd>safdsf</dd>
<dt>标题2</dt>
<dd>sdf</dd>
<dd>sdfsdf</dd>
</dl>
表格：表格的结构和html文件相类似，区别就在与表头和表体列的标签不同
<table border="1" cellpadding="10" cellspacing="10">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>小强</td>
<td>18</td>
<td>奥特曼</td>
</tr>
</tbody>
</table>
<!--
table 中通常包含thead tbody
thead 使用tr标识行 行内通常使用th标识列
tbody 使用tr标识行 行内通常使用td标识列
属性值:
board 外边框
cellpadding 内边距
cellspacing 外边距
width 像素 百分比 （一般通过css样式 来设置长度）
rowspan 单元格竖跨多少行
colspan 单元格横跨多少列（合并单元格）
form表单：用于向服务器传输数据，实现前后端的交互
form表单属性：
| accept-charset | 表单提交中使用的字符集 |
| action | 指向对应的后端地址 |
| autocomplete | 自动填充 |
| enctype | 调教数据的编码 |
| method | 请求方法 |
| name | 表单的名称 |
| novalidate | 不验证表单内数据 |
| target | 规定action属性中地址的目标 |
input：input标签有多种形态，主要靠type属性值来定义
| text | 单行输入框 | <input type="text"> |
| password | 密码输入框 | <input type="password"> |
| date | 日期 | <input type="date |
| checkbox | 多选框 | <input type="checkbox"> |
| radio | 单选框 | <input type="radio"> |
| submit | 提交按钮 | <input type="submit"> |
| reset | 重置 | <input type="reset"> |
| button | 按钮，通常和js的事件绑定 | <input type="button"> |
| hidden | 隐藏 | <input type="hidden"> |
| file | 文件选择框 | <input type="file"> |
input标签属性说明：
name：input里，name充当键名的作用，与实际输入的值，形成键值对，提交的时候发送到后端。在radio单选框中用name做为一组
value：表单提交时对应项的值。
button reset submit 时，为按钮上显示的文本内容
text password hidden时 为输入框默认值
checkbox radio file 时 为输入相关联的值
checked：radio和checkbos默认被选中的项
readonly：text和password为只读
disabled：素有input均使用
select标签：
<select name="addr" id="s2" multiple>
<!-- multiple 属性 限定多选或者单选-->
<option value="bj">北京</option>
<optgroup label="上海">
<option value="pudong">浦东新区</option>
<option value="minhang">闵行区</option>
<option value="huangu">黄埔区</option>
</optgroup>
</select>
multiple 布尔属性，设置后为多选，否则默认单选
disabled 禁用
selected 默认选中
value 定义提交时的选项值
label标签：label标签为input元素定义标注，并不会呈现任何的效果，for属性关联对应标签id值
<!-- lable 标签用于关联的input框 除了用for关联id 也可以直接将input框直接写在lable框内-->
<lable for="'i1'">用户名：</lable>
<input id="i1" name="username" type="text" readonly value="usename"></p>
textarea多行文本：
<textarea cols="30" rows="10" ></textarea>> name: 名称 rows: 行数 cols: 列数 disabled：禁用
文件类型：
<!-- 如果表中有file 文件类型 那么在表单标签位置要指定请求类型
和数据封装类型 form action="http://127.0.0.1:10055" method="get" enctype="multipart/form-data"
并且只有 指定了数据封装类型 后台才能拿到文件 -->
<p><input type="file" value="备注"></p>
补充：
1 pycharm提供了代码补全插件:
h1*3>a.c1[id=a$,name=d$]{a标签$}
$代表序号 a.c1 这个c1默认是class {}中的内容是内包标签的内容
执行后效果如下
<h1><a href="" class="c1" id="a1" name="d1">a标签1</a></h1>
<h1><a href="" class="c1" id="a2" name="d2">a标签2</a></h1>
<h1><a href="" class="c1" id="a3" name="d3">a标签3</a></h1>
2 pycharm提供了代码格式化插件:
code-----》refeformat code
