前端基础之HTML
老师博客：
http://www.cnblogs.com/yuanchenqi/articles/6856399.html
html：静态的内容都是一个html标签,是有一组组标签构成的文件
css:对一个个标签做渲染定位
js:所有页面的动态效果做渲染定位
当写一个简单服务端的时候，一般这样写：
主要的是这：conn.send=("HTTP/1.1 201 OK \r\n\r\n %s" %response).encode("utf-8")
\r\n\r\n：后面的内容才是发给客户端的，这里\r\n\r\n的含义就是告诉客户端，后面是要接收的内容
1 import socket 2 3 sock=socket.socket() 4 sock.bind(("127.0.0.1",10001)) 5 sock.listen(5) 6 7 while 1: 8 print("waiting") 9 conn,addr=sock.accept()10 data=conn.recv(1024)11 print("data",data)12 with open("index.html",encoding="utf-8") as f:13 response=f.read()14 conn.send=("HTTP/1.1 201 OK \r\n\r\n %s" %response).encode("utf-8")15 conn.close() 3开头：重定向
4开头：文件有问题
5开头：服务器故障
HTML结构：
告诉浏览器使用什么样的html或者xhtml来解析html文档是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部和主体。元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。定义网页标题，在浏览器标题栏显示。 之间的文本是可见的网页主体内容
<head>内常用标签：
meta介绍
<meta>元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词。<meta>标签位于文档的头部，不包含任何内容。<meta>提供的信息是用户不可见的meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
(1)name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
#网站搜索的关键字 #网站首页的介绍
(2)http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
//(注意后面的引号，分别在秒数的前面和网址的后面)#做跳转的，几秒后跳转到哪个网页
非meta标签：
oldboy #标签上显示的小图片
标签：（分为两类，块级(boack)标签和内联(inline)标签）
渲染规则：从上到下，从左到右
block（块级）：自己独占一行
inline（内联）：自己不独占一行
块级标签可以嵌套内联标签和块级标签。
内联标签只能嵌套内联标签。
基本标签：
块级标签：
<h1>:从1级到6级标签，都可以使用
<p>:段落（内部可调属性）
<br>:换行
内联标签：
<a href="https://www.baidu.com">click</a>:跳转标签
<img src="图片地址" title=“当你将鼠标放在图片上想要显示的内容”>
<b>和 <strong>: 加粗标签.
<strike>: 为文字加上一条中线.
<em>: 文字变成斜体.
<sup>和<sub>: 上角标 和 下角表.
<div></div>和<span></span>:没有什么效果
常用标签：
<img src="图片地址" alt=“加载错误时显示的内容” title=“当鼠标悬浮是显示的内容”
width="100px" height="100px">
<a href="https://www.baidu.com">点击</a>
<a href="https://www.baidu.com" target="_blank">点击</a>
#中间的文字可以换成其他对象
<a href="https://www.baidu.com" target="_blank">
<img src="图片地址" alt=“加载错误时显示的内容” title=“当鼠标悬浮是显示的内容”
width="100px" height="100px">
</a>
#点击按钮跳转到别的网页
<a>标签的锚功能：
无序列表：
<u1>
<li>111</li>
<li>111</li>
<li>111</li>
</u1>
有序列表：
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
自己定义列表：
<dl>
<dt>河北省</dt>
<dd>保定市</dd>
<dd>衡水市</dd>
</dl>
表格标签<table>：
#<tr>:一行的标签,
<td>:一列的标签
#border:边框
#cellpadding:字体距离边框的距离
#cellspacing：边框距离边框的距离，一般利用="*px"来调试
#让一个单元格独占几行或者几列：在<td>标签里边写：
rowspan：单元格竖跨多少行
colspan：单元格横跨多少列（合并单元格）
<table border="1px">
<tr>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
</tr>
</table>
form表单标签：与server端交互
url == IP+port+路径+子页+？（当有问号时侯斌就是数据了）
<form action="" method="..." >
数据
</form>
#method：这里有两种方式的数据可以填，put 和 get,但是get的时候，会将数据放在url后边的数据里边去，如果是put，会将数据放到form表单里边的数据里边。
表单的数据可以写成：
姓名:
密码:
性别:男 女
爱好:足球 蓝球 双色球
#当有checked这个选项的时候，默认会将有将checked的打钩上传:
#需要在表单
select标签：下拉菜单
<select name="province" size="3" multiple="multiple">
#size是默认显示几个，multiple的意思是可不可以多选
<option value="1">河北省</option>
<option value="2">湖北省</option>
<option value="3">湖南省</option>
<option value="4" selected="selected">日本省</option>
</select>
#<option value="4" selected="selected">日本省</option>当标签里边有selected的时候，默认会显示这个标签。
文本框：
<textarea name="wenben" id="" cols="30" rows="10"></textarea>
可以在<p>和<texttarea>等属性中加入placeholder="wenben"，这会显示一个默认灰色的字体，作为提醒用。
点击前面对应的数字跳转到后边的文本框：
<p>
<label for="c1">姓名:</lable>
<input type="text" name="useradmin" id="c1">
</p>
相当于点击上面的姓名自动跳转到后面c1对应的文本框