<!DOCTYPE html> <!-- 声明使用html5标准 --> <html lang="en"> <!-- html标签开始(只能一个)，指定语言en --> <head> <!-- head标签开始 --> <!--介绍head标签--> <!--head当中 大多数标签是看不到的--> <meta charset="UTF-8"> <!-- 声明使用UTF-8字符集 --> <!--间隔x秒刷新后，跳转到指定url--> <!--<meta http-equiv="refresh" content="1;url='http://www.imdsx.cn'">--> <!--关键字检索,相似百度关键字搜索--> <meta name="keywords" content="大师兄,北京"> <!--网站的描述--相似百度搜索出来的描述> <meta name="description" content="j"> <!--浏览器tag的名字--> <title>测试小黑</title> <!--浏览器tag的图标--> <link rel="shortcut icon" href="https://www.jd.com/favicon.ico"> <!--rel 属性指示被连接的文档是一个样式表--> <link rel="stylesheet" type="text/css" href="theme.css" /> <!--<style> 标签用于为 HTML 文档定义样式信息。--> <style></style> <!--<script> 标签用于定义客户端脚本，好比 JavaScript。--> <!--script 元素既能够包含脚本语句，也能够经过 src 属性指向外部脚本文件。--> <script></script> </head> <!-- head标签结束 --> <body> </body> </html>
HTML_body标签
经常使用符号：空格：  大于号：> 小于号： < javascript
块级标签：H标签(加大加粗)，P标签(段落间有间距)，DIV(白板)css
行内标签：SPAN标签(白板)html
body标签：html5
一 基本标签java
<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.web
<p>: 段落标签. 包裹的内容被换行.而且也上下内容之间有一行空白.ajax
<b> <strong>: 加粗标签.django
<strike>: 为文字加上一条中线.编程
<em>: 文字变成斜体.浏览器
<sup>和<sub>: 上角标 和 下角表.
<br>:换行.
<hr>:水平线
<div><span>
<!--标题标签--> <h1>h1标签</h1> <h2>h2标签</h2> <h3>h3标签</h3> <h4>h4标签</h4> <h5>h5标签</h5> <h6>h6标签</h6> <!--白板标签：没有任何css样式--> <!--内联标签真白板标签：有多大占多大--> <span>这是span标签</span> <span>这是span标签</span> <!--div标签：块级伪白板标签：不管多大占一行--> <div>这是div标签</div> <!--段落标签p 块标签：实现字与字之间的换行--> <!--换行标签br：实现换行-->
块级标签和内联标签
块级标签：<p><h1><table><ol><ul><form><div>
内联标签：<a><input><img><sub><sup><textarea><span>
block（块）元素的特色
① 老是在新行上开始；
② 高度，行高以及外边距和内边距均可控制；
③ 宽度缺省是它的容器的100%，除非设定一个宽度。
④ 它能够容纳内联元素和其余块元素
inline元素的特色
① 和其余元素都在一行上；
② 高，行高及外边距和内边距不可改变；
③ 宽度就是它的文字或图片的宽度，不可改变
④ 内联元素只能容纳文本或者其余内联元素
对行内元素，须要注意以下
设置宽度width 无效。
设置高度height 无效，能够经过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，可是对元素周围的内容是没影响的。
特殊字符：
< >；"引号；©版权号;®注册标志;
二 图形标签: <img> :
src: 要显示图片的路径.
alt: 图片没有加载成功时的提示.
title: 鼠标悬浮时的提示信息.
width: 图片的宽
height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
<img src="1.jpg" height="100px" width="100px" alt="图片不存在" title="nihao">
三 超连接标签(锚标签)<a>:
href:要链接的资源路径 格式以下: href="http://www.baidu.com"
target: _blank : 在新的窗口打开超连接. 框架名称: 在指定框架中打开链接内容.
name: 定义一个页面的书签.
用于跳转 href : #书签名称.
<a href="#abc">位置一</a> #必须有滚动条才能显示效果 <a href="http://www.baidu.com" target="_blank">点我</a> <div id="abc">位置二</div>
四 列表标签：
<ul>: 无序列表
<ol>:有序列表
<li>:列表中的每一项.
<dl> 定义列表
<dt> 列表标题
<dd> 列表项
<!--列表标签--> <ul> <li>用例名称</li> <li>用例方法</li> <li>返回参数</li> </ul> <!--数字列表--> <ol> <li>用例名称</li> <li>用例方法</li> <li>返回参数</li> </ol> <!--分层列表--> <dl> <dt>黑龙江</dt> <dd>牡丹江</dd> </dl> <dl> <dt>河北</dt> <dd>保定</dd> </dl>
五 表格标签: <table>:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好经过css来设置长宽）
<tr>: table row
<th>: table head cell
<td>: table data cell
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
<th>: table header <tbody>(不经常使用): 为表格进行分区.
<!--表格标签--> <!--thead：表头 th：表头行 tbody：内容 tr：行 td：列 boder：表格的边框 coslpan：td占几列 rowspan：tr占几列--> <table border="1" cellpadding="1" cellspacing="1" style="width:200px;height:200px"> <thead> <tr> <th>id</th> <th>caseName</th> <th>method</th> <th colspan="2">操做</th> <!--列合并--> </tr> </thead> <tbody> <tr> <td>1</td> <td rowspan="3">抽奖</td> <!--行合并--> <td rowspan="3">post</td> <td>编辑</td> <td>删除</td> </tr> <tr> <td>2</td> <td>编辑</td> <td>删除</td> </tr> <tr> <td>3</td> <td>编辑</td> <td>删除</td> </tr> </tbody> </table>
六 表单标签（django）<form>:
表单用于向服务器传输数据。
表单可以包含 input 元素，好比文本字段、复选框、单选框、提交按钮等等。
表单还能够包含textarea、select、fieldset和 label 元素。
1.表单属性
HTML 表单用于接收不一样类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的全部内容都应该在该标签中.
action: 表单提交到哪. 通常指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）做相应处理，好比https://www.sogou.com/web
method: 表单的提交方式 post/get 默认取值 就是 get（信封）
get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.
post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.
get/post是常见的两种请求方式.
2.表单元素
<input> type: text 文本输入框
password 密码输入框
radio 单选框
checkbox 多选框
submit 提交按钮
button 按钮(须要配合js使用.) button和submit的区别？
file 提交文件：form表单须要加上属性enctype="multipart/form-data"
<!--input标签：输入框--> <!--name和value，是向后台以{key:value}向后台传递数据，name的值为key，value的值为value;--> <input type="text" name="username" value="" placeholder="请输入用户名"> <!--密码框 type="password"--> <input type="password" name="passwd"> <!--多选框 type="checkbox"，checked 默认勾选--> <input type="checkbox" name="" checked="checked"> <!--单选框 type="radio"，name必须相同才会互斥，实现单选--> <div> <span>男</span><input type="radio" name="sex"> </div> <div> <span>女</span><input type="radio" name="sex"> </div> <!--form表单标签，表单提交会刷新页面，ajax不会刷新页面--> <!--action请求路径，method请求方式--> <!--上传文件时申明下,分段发送的意思:enctype="multipart/form-data"--> <form action="http://www.baidu.com" method="post" enctype="multipart/form-data"> <input type="text" value="zc"> <!--没有任何外加操做--> <input type="button" value="增长"> <!--submit与form表单连用，会提交form表单中的数据--> <input type="submit" value="提交"> <!--必须与from表单连用才能有重置的功能--> <input type="reset"> <p>用户名<input type="text" name="query"></p> <p>密码<input type="password" name="pwd"></p> <p>男<input type="radio" name="sex" value="1"></p> <p>女<input type="radio" name="sex" value="2"></p> <p>篮球<input type="checkbox" name="hobby" value="1"></p> <p>足球<input type="checkbox" name="hobby" value="2"></p> <p>棒球<input type="checkbox" name="hobby" value="3"></p> <p>小求<input type="checkbox" name="hobby" value="4"></p> <p><input type="button" value="btn"></p> <p><input type="file" name="file_name"></p> <p>提交<input type="submit" value="提交"></p> </form> <!--label标签与input连用，经过for属性 映射到input的id属性，这样点击用户名，就能够获取输入框的焦点--> <label for="i1">用户名：</label> <!--id属性是选择器--> <input id="i1" placeholder="请输入用户名" name="username" type="text">
def index(request):
print request.POST print request.GET print request.FILES for item in request.FILES: fileObj = request.FILES.get(item) f = open(fileObj.name, 'wb') iter_file = fileObj.chunks() for line in iter_file: f.write(line) f.close() return HttpResponse('ok')
name: 表单提交项的键.注意和id属性的区别：name属性是和服务器通讯时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的。
value: 表单提交项的值.
对于不一样的输入类型，value 属性的用法也不一样：
-
-
-
-
- type="button", "reset", "submit" - 定义按钮上的显示的文本
- type="text", "password", "hidden" - 定义输入字段的初始值
- type="checkbox", "radio", "image" - 定义与输入相关联的值
-
-
-
checked: radio 和 checkbox 默认被选中
readonly: 只读. text 和 password
disabled: 对所用input都好使.
<select> 下拉选标签属性：
name:表单提交项的键.
size：选项个数
multiple：multiple
<option> 下拉选中的每一项 属性：value:表单提交项的值. selected: selected下拉选默认被选中
<optgroup>为每一项加上分组
<textarea> 文本域 name:表单提交项的键. cols:文本域默认有多少列 rows:文本域默认有多少行
<label>
<label for="www">姓名</label>
<input id="www" type="text">
<fieldset>
<fieldset>
<legend>登陆吧</legend>
<input type="text">
</fieldset>
<!--多行文本,能够用来写备注--> <p>备注:<textarea name="content">这是textarea的内容</textarea></p> <!--select 下拉框标签，在option上增长 selected 为默认选择--> <!--要实现按住ctrl 能够多选的效果，须要使用multiple--> <select name="city" size="1" multiple="multiple"> <option value="1">黑龙江</option> selected="selected" 默认选中第二个 <option value="2" selected="selected">河北</option> <option value="3">河南</option> </select> <!--选黑龙江后，再选第二级--> <select size="7" multiple="multiple"> <optgroup label="黑龙江"> <option>牡丹江</option> <option>哈尔滨</option> <option>鸡西</option> </optgroup> <optgroup label="河北"> <option>石家庄</option> <option>保定</option> <option>涞水</option> </optgroup> </select> <!--a标签：超连接--> <a href="https://www.baidu.com/" target="_blank" style="text-decoration:none">百度一下</a> <!--image标签：--> <!--alt属性：当图片加载失败时所展现的文案--> <img src="logo.jpg" alt="这是logo" title="logo">
IP是由点分十进制来区分的
完成三次握手,客户端与服务器开始传送数据
A与B创建TCP链接时：首先A向B发SYN（同步请求），
而后B回复SYN搜索+ACK（同步请求应答），
最后A回复ACK确认，这样TCP的一次链接（三次握手）的过程就创建了！
四次挥手断开连接:
第一次挥手：Client发送一个FIN，用来关闭Client到Server的数据传送;
第二次挥手：Server收到FIN后，发送一个ACK给Client;
第三次挥手：Server发送一个FIN，用来关闭Server到Client的数据传送;
第四次挥手：Client收到FIN后，接着发送一个ACK给Server,Server进入CLOSED状态，完成四次挥手。