菜鸟学习日记7"/>
Java菜鸟学习日记7
Web三大基石- URL(Uniform Resource Locator):标识资源的位置
- 协议:对于操作系统来说,不同的协议关联着不同的应用程序
- http/https—>浏览器
- tel—>电话拨号程序
- mailto—>电子邮件
- 对于资源来说,不同协议意味着不同传输格式
- URL中的协议都是应用层协议
- 主机
- 主机名+域名
- 主机名表示提供服务的一台服务器或一个服务器集群
- www 百度提供的是网页搜索服务
- map 百度提供的是地图服务
- 域名 表示一个公司、机构、组织、个人等
- 一个域名下可以有N个主机
- DNS
- 主机名.域名 通过DNS解析成IP地址
- IP地质
- 本质上来说是一个整数
- 192.168.1.211(点分十进制转换格式,给人看,方便人记忆)
- 实际上是4个字节,是一个int值 32位
- 网络上一个服务器/电脑的门牌号
- 端口号
- 一台电脑上有n个联网的程序、为了区分是那个程序在收发数据包,需要在数据包中用一个整数来区分不同的程序----端口号
- short型的整数 16位
- 端口号的使用,有一个并不严格的管理机制
- 众所周知的,或者比较流行的程序或服务,它们的端口号已经被习惯性固定比如:
- Web服务:80
- 安全的Web服务:433
- FTP服务:21
- MySQl:3306
- 操作系统会把小端口号(0-5000)保留下来,而大的端口号随机分配给程序使用
- 端口在内网与外网通信中,可以被NAT利用,用来区分内网中的计算机
- 众所周知的,或者比较流行的程序或服务,它们的端口号已经被习惯性固定比如:
- 查询字符串(QueryString)
- key1=value&key2=value2
- URLEncode这种方式把&、=等特殊字符进行编码 %E2
- 编码方案,而非转义方案
- 查询字符串会传到服务器,并被服务器接受和使用
- key1=value&key2=value2
- Fragment/Hash(片段)
- 只会被浏览器识别和利用
- 不会传到服务器
- 协议:对于操作系统来说,不同的协议关联着不同的应用程序
- HTTP(Hypertext Transformation Protocol)规定了资源的传输格式
- B(主动、暗处)——>S(被动、明处)
- 不对等的通信结构
- 发消息:请求(Request)
- 接受消息、处理并回应:相应(Response)
- HTTP协议与寄信是类似的
- HTTP消息报文==一封信/明信片
- 请求报文
- 请求报文==信封上的地址
- 请求头==信封上的其它信息
- 请求体--信封中的信纸(有一些请求没有请求体,相当于寄明信片)
- 相应报文
- 相应行==信封
- 相应头==信封上的其他信息
- 相应体==信纸
- Google Chrome内核的浏览器或IE内核的浏览器按F12
- firebox汉堡菜单——>开发者——>网络(中文)
- HTTP协议实际
- 请求报文
- 请求行
- GET HTTP/1.1
- 请求访问URL(请求的资源)协议及版本
- 请求头
- Accept:text/html;*/*
- Accept-Languange:zh-CN;zh
- 请求头名:请求头值
- 请求头不能有中文,如果非要写中文,请编码(URLEncode)
- 部分重要头
- Cookie:向服务端发送少量数据(;用户偏好设置,用户身份标识)
- User-Agent:将操作系统、浏览器等信息发送给服务器
- Cpntent-Type:表示发送了什么格式请求内同
- Accept:表示能够接受什么格式的相应
- 请求体
- 请求体的格式在Content-Type中表示出来
- x-www-form-urlencoded
- ley1=value1&key2=vaue2
- multipart/form-data
- 上传文件专用格式
- json
- 请求行
- 请求报文
- B(主动、暗处)——>S(被动、明处)
- Xml
- 响应报文
- 响应行
- 200 OK HTTP/1.1
- 状态码 状态描述 协议板块
- 响应头
- 响应头名:相应头值(同样不能有中文,中文需编码 URLEncoded)
- Content-Type
- Content-Length
- Set-Cookie:给浏览器设置Cookie,设置后浏览会保存这个Cookie,下次请求时,会把Cookie在发给服务器
- 响应行
- 响应报文
- HTTP工具1:
- telnet
- 默认需要在控制面板-程序-添加删除windows功能,选中telnet安装
- 打开cmd命令行,把屏幕缓冲区调到最大值
- telnet www.zhiyou100.com 80
- ctrl+] 开启回显
- 按回车进入编辑
- GET/HTTP/1.1
- HOST:www.zhiyou100.com
- 按2次回车,不能按退格间修改
- 准确地显示HTTP请求和相应报文
- 不适合发送复杂的请求
- telnet
- HTTP工具2
- 推荐使用Firefox中的HTTPRequester
- 图形化,功能强大,可以很方便地设置复杂的请求报文
- HTML(Hypertext Markup Language)资源/内容本身格式
- 基本结构
</head> <body> 文档主体:body中的内容会显示在网页中,除非它被隐藏 文字、图片、视频、音频、程序(Appet等)、Flash(Silverlight)··· 网页又被称为超文本 </body> </html> 基本图文标签
- 标题h1~h6 head
- 段落p paragraph
- 图片img[src] image
- 超链接a[href] anchor
- <iframe>
- 在页面中加载一个子页面
- 用链接控制iframe的加载内容
- 在iframe加上name属性
- 在a上加target属性等于iframe标签的name属性值
- 块标签:独占一行,后面不能显示其他标签(自带换行符,前后都有换行符)
- 行标签:可与其它行标签共处一行,太长时,自动换行(不带换行符)
- 行内块:可与其它行标签共处一行
- 通用的块标签 div
- 通用行标签 span
- 有序列表 ordered list
- 无序列表 unordered list
- 详情列表 details list
- table>(tr>td*n)*m 创建m行n列的单元格
- 合并单元格:towspan="2"=把2行合并 colspan=“3”=把3列合并
- 表格线:border=“1”
radio 单选框 checkbox 复选框 file 上传文件 image 上传图片 按钮 input submit 提交按钮 button 普通按钮 reset 重置按钮 <button> 让用户选择 select> option 单行 multiple 多行 多行文本框 textarea label 提示标签 fiekdset 表单分组 发起HTTP请求 form[action=提交地址][method=请求方法][enctype=multipart/form-data] input[type=submit]按钮,<buttin>提交</button> 页面跳转【刷新】 注意事项 数据的key由input/select/textarea的name属性决定 对于radio/checkbox多个选项公用一个key,就要求它们的name相等 <input type="radio" name="sex" value="男"> <input type="radio" name="sex" value="女"> 流式布局 网页默认的布局方式 分块标签和行标签 块标签独占一(多)行 行标签可共享一(多)行 布局是,除遵守块和行的性质外 默认遵守从上到下,从左到右的排列方向 在上下方向上,尽可能山地占用空间 总结:与人类书写时习惯相同 CSS(样式表) 在html文件中导入样式表文件 <link rel="stylesheet"href"样式表文件的位置"> 通常要放到<head>标签中,否则页面太大时,可能会发生闪烁 样式语法 筛选器{ 样式名:样式值; 注意符号都是英文的 } 筛选器: 控制样式影响的范围
- 标签筛选器 body{} h1{}、
- 筛选器 == 标签名
- id筛选器 #idValue{} 只能控制一个标签
- <p id="idValue">控制这里</p>
- 类筛选器 .className{} 能控制多个标签
- <div class="className">控制这里</div>
- <span class="className">控制这里</span>
- ...class="className"
- color:文本颜色
- font-size:字号
- font-style:字型
- font-weight:字体粗细 100 200 500 normal bold
- text-decoration:字体装饰 underline:下划线
- line-heigth:行高
- text-indent:段首缩进
- font-family:字体
- text-align:文本的水平对齐 center:居中
- vertical-align:垂直对其单元格内起作用 middle:垂直居中
- border:边框线,复合样式 线粗细——线型——线的颜色
- border-width:线粗细
- border-style:线型
- border-color:线的颜色
- margin:外边距
- 0 = 上 右 下 左
- 5 = 上下10 = 左右
- 1 = 上 5 = 右 10 = 下 3 = 左
- 从上开始,顺时针
- margin-top 上
- margin-boottom 下
- margin-left 左
- margin-right 右
- padding:内边距
- 0 = 上 右 下 左
- 5 = 上下10 = 左右
- 1 = 上 5 = 右 10 = 下 3 = 左
- 从上开始,顺时针
- box-sizing:计量尺寸
- border-box:边框盒
- content-box:内容盒
- padding-box:padding盒
- 内容=内容盒
- 内容+内边距=padding盒
- 内容+内边距+边框=边框盒
更多推荐
Java菜鸟学习日记7
发布评论