前端三把利器：
- HTML：赤裸裸的人
- 20个标签
- CSS：华丽的衣服
- 颜色
- 位置
- ……
- JS：让这个人动起来
一、HTML本质及在web程序中的作用
web访问中，浏览器充当一个socket客户端。
浏览器获取数据：一次请求、一次响应，连接断开。
写一个简单的web socket服务端：
import socket
def handle_request(client):
buf = client.recv(1024)
client.send(bytes("HTTP/1.1 200 OK
",encoding='utf-8'))
client.send("<h1 style="color:red">Hello</h1>")
# f = open('index.html', 'r', encoding='utf-8')
# data = f.read() # 文件中读取。
# f.close()
# client.send(data)
def main():
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
sock.bind(('localhost', 8000))
sock.listen(5)
while True:
connection, address = sock.accept()
handle_request(connection)
connection.close()
if __name__ == '__main__':
main()
服务端返回的数据只是字符串，而浏览器不同样式的显示，只是浏览器可以解释这套规则。HTML就是一套规则，浏览器认识的规则。通python解释器解释py代码一样。
HTML：
学习HTML规则
开发后台程序
- 写html文件（充当模板作用）
- 数据库获取数据，然后替换到html文件中指定位置（web框架）
一般写静态页面时，不用写socket服务端，直接打开浏览器就支持。另外通过Pycharm打开也可以，Pycharm自动帮我们启动一个socket服务端。
二、HTML基本框架
<!DOCTYPE html> <!--告诉浏览器使用什么样的html或xhtml规范来解析html文档-->
<html lang="en"> <!--html标签(只能一个)，指定语言en-->
<head>
<meta charset="UTF-8"> <!--指定编码-->
<title>Title</title> <!--标题-->
</head>
<body>
</body>
</html>
标签分类：
自闭合标签（meta、link）、
主动闭合标签
三、head内标签 Meta(metadata information)
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词。
1. 页面编码（告诉浏览器是什么编码）
< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
2. 刷新和跳转
< meta http-equiv=“Refresh” Content=“30″> < meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ /> <!--5秒后跳转-->
3. 关键词
< meta name="keywords" content="星际2,专访,F91,小色,JOY" >
4. 描述
5. X-UA-Compatible
主要是为了支持IE，专为IE设置。
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" /> <!--极速模式以IE新版本打开，兼容模式以支持老版本打开；或指定以IE9打开，无则再以IE8打开等等-->
head标签里除了meta、title标签，还有link、style、script标签。
LInk标签：
- css 连接其他文件css样式
< link rel="stylesheet" type="text/css" href="css/common.css" >
- icon 指定title上网站小图片
< link rel="shortcut icon" href="image/favicon.ico">
四、body内标签之特殊符号、换行等
上面的内容了解就好，body内的标签比较重要。
1、html特殊符号
# 空格
> # 大于号 > < # 小于号 <
2、br换行 p段落
<p>FFFFFFF<br>FFFFFFFF</p> # p标签：一个段落 br标签：换行 # <br> 和 <br /> 效果一样。半闭合标签加上/更明确显示半闭合标签
3、h标签 标题
<h1>FGF</h1> <h2>FGF</h2> <h3>FGF</h3> <h4>FGF</h4> <h5>FGF</h5> <h6>FGF</h6> <span>FGF</span> <span>FGF</span>
所有的标签可以分为两类：块级标签和内联标签。
块级标签带有特性
块级标签占一整行;
内联标签带有特性
内联标签内容有多少占多少。
4、div标签
div和span都是白板，div是块级标签、span是内联标签。
标签之间可以嵌套，父子级的关系。
标签存在的意义：便于给内容做操作、动态效果，定位容易。
chrome审查元素的使用
- 定位
- 查看样式
五、body内标签之input系列
1、输入框
<body>
<form action="http://127.0.0.1:8888/index" method="POST">
<!--form标签，一个表单。提交表单到action地址。-->
<!--提交数据时，默认以get形式发过去。
get提交：数据拼接到url上后再提交；post会把数据放到内容里面提交过去
服务端需要知道发送方式才确定怎么取；抓包都能抓到，没啥谁比谁安全一说-->
<!--input框向后台提交数据，一定加上name。数据形成字典发给后端-->
<input type="text" name="user" value="默认值" /> <!--普通文本输入框-->
<input type="password" name="pwd" /> <!--密码输入框-->
<input type="button" value="登录" /> <!--按钮-->
<input type="submit" value="提交" /> <!--提交按钮-->
</form>
</body>
实例：以get方式提交搜索信息到sogou地址：
<body>
<form action="https://www.sogou.com/web">
<input type="text" name="query" />
<input type="submit" value="搜索" />
</form>
</body>
解析：由于sougo搜索使用的是get方式的提交方式，测试时在text输入框内输入了“sogou一下”，跳转到了搜狗搜索，
url为：https://www.sogou.com/web?query=sogou%E4%B8%80%E4%B8%8B，将数据拼接到了url后，再提交。
在chrome浏览器中查看提交的信息如下：
2、单选框、复选框、上传文件
<form enctype="multipart/form-data">
<div>
<p>请选择性别：</p>
男：<input type="radio" name="gender" value="1" checked="checked" />
女：<input type="radio" name="gender" value="2"/>
<!--value、name属性（name相同则互斥，checked默认值。）-->
<p>请选择爱好：</p>
篮球：<input type="checkbox" name="favor" value="1" checked="checked" />
足球：<input type="checkbox" name="favor" value="2" />
皮球：<input type="checkbox" name="favor" value="3" />
<p>技能：</p>
撩妹：<input type="checkbox" name="skill" value="1" checked="checked" />
代码：<input type="checkbox" name="skill" value="2" />
<p>上传文件：</p>
<input type="file" name="fname"/>
<!--依赖form表单属性 enctype="multipart/form-data",表示把文件一点一点发给服务器-->
</div>
<input type="submit" value="提交" />
<input type="reset" value="重置" /> <!--reset 重置-->
</form>
六、body内标签之多行文本及下拉框
多行文本textarea和下拉框select 以及上面的input 三个标签都可以数据提交到后台。
<textarea name="meno" >默认值</textarea>
<select name="city" size="2" multiple="multiple">
<!--size=2:显示两个值；multiple：按住ctrl可以多选。-->
<option value="1">北京</option>
<option value="2" selected="selected">上海</option> <!--默认值-->
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
<select>
<!--分组-->
<optgroup label="北京市">
<option>昌平区</option>
<option>朝阳区</option>
</optgroup>
<optgroup label="山东省">
<option>济南市</option>
</optgroup>
</select>
七、body内标签之超链接
a标签的功能：
- 跳转
- 锚
<a href="http://www.cnblogs.com/zoe233" target="_blank">博客地址</a>
<!--target="_blank：在新窗口打开页面"-->
<a href="#i1">第一章</a> <!--跳转到当前页面的i1 这个ID上-->
<a href="#i2">第二章</a> <!--ID是唯一的。-->
<div id="i1" style="height:600px;">第一章的内容……</div>
<div id="i2" style="height:600px;">第二章的内容……</div>
八、body内标签之图片及表格、列表
图片img
列表ul、ol、dl（标题dt，内容dd）
<a href="http://www.cnblogs.com/zoe233">
<img src="1.jpg" title="美女" style="height:360px;274px;" alt="美女">
<!--title：图片标题；alt：当图片不存在时显示alt内容-->
</a>
<ul> <!--无序列表-->
<li>无序</li>
<li>无序</li>
</ul>
<ol> <!--有序列表-->
<li>有序</li>
<li>有序</li>
</ol>
<dl> <!--分组列表-->
<dt>标题</dt>
<dd>内容</dd>
<dd>内容</dd>
<dt>标题</dt>
<dd>内容</dd>
<dd>内容</dd>
</dl>
表格 <table><thead><tr><th><td>
合并单元格 colspan, rowspan
<table border="1"> <!--border：宽度-->
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td colspan="3">1</td> <!--行 合并单元格-->
</tr>
<tr>
<td rowspan="2">1</td> <!--列 合并单元格-->
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
九、body内标签之fieldset标签和label标签
fieldset 边框，边框上可以有文字。
<fieldset>
<legend>登录</legend>
<!--用于点击文字，是的关联的标签获取光标。-->
<label for="username">用户名：</label>
<!--默认只有点输入框才能输入，设置了for='username',label和id关联后，点用户名也能输入内容-->
<input id="username" type="text" name="user" />
<p></p>
<label for="pwd">密 码：</label>
<input id="pwd" type="password" name="user" />
</fieldset>
十、html标签总结
HTML
1、一套规则，浏览器认识的规则。
2、开发者：
学习Html规则
开发后台程序：
- 写Html文件（充当模板的作用） ******
- 数据库获取数据，然后替换到html文件的指定位置（Web框架）
3、本地测试
- 找到文件路径，直接浏览器打开
- pycharm打开测试
4、编写Html文件
- doctype对应关系
- html标签，标签内部可以写属性 ====> 只能有一个 如，<html lang='en'>
- 注释： <!-- 注释的内容 -->
5、标签分类
- 自闭合标签
<meta charset="UTF-8">
- 主动闭合标签
title></title>
6、head标签中
- <meta -> charset='utf-8'编码，
http-equiv='Refresh' Content跳转，
http-equiv='Refresh' Content='5;Url=http://www.baidu.com'刷新，
name='keywords' content='keyword1,keyword2'关键字，
描述，
IE兼容 <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
- title标签
- <link /> 图标，
- <style />
- <script>
7、body标签中
- 图标， > <
- p标签，段落
- br，换行
======== 小总结 =====
所有标签分为：
块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）
行内标签： span（白板）
标签之间可以嵌套
标签存在的意义，css操作，js操作
ps:chorme审查元素的使用
- 定位
- 查看样式
- h系列
- div
- span
- input系列 + form标签
input type='text' - name属性，value="赵凡"
input type='password' - name属性，value="赵凡"
input type='submit' - value='提交' 提交按钮，表单
input type='button' - value='登录' 按钮
input type='radio' - 单选框 value，checked="checked"，name属性（name相同则互斥）
input type='checkbox' - 复选框 value, checked="checked"，name属性（批量获取数据）
input type='file' - 依赖form表单的一个属性 enctype="multipart/form-data"
input type='rest' - 重置
<textarea >默认值,这里是多行文本框哦</textarea> - name属性
select标签 - name,内部option value, 提交到后台，size显示条数，multiple是否可多选（按ctrl或command）
- optgroup分组，内部属性label
- a标签
- 跳转
- 锚 href='#某个标签的ID' 标签的ID不允许重复
- img
src 图片的路径
alt 图片路径未找到时显示的字段
title 点到img标签会显示的字段
- 列表
ul 无序列表
li
ol 有序列表
li
dl 分组列表
dt
dd
- 表格
table
thead
tr
th
tbody
tr
td
colspan = '' 合并单元格，合并多列
rowspan = '' 合并单元格，合并多行
- label
用于点击文件，使得关联的标签获取光标（默认不加for的话，是按到输入框获取光标）
<label for="username">用户名：</label>
<input id="username" type="text" name="user" />
- fieldset
legend <legend>登录</legend>
- 20个标签