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://www.baidu.com 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（被动、明处）
{
key1:value1;
key2:value2;
}
- Xml
<data>
<key1>value1<key1>
<key2>value2<key2>
<data>
- 响应报文
- 响应行
- 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）资源/内容本身格式
- 基本结构
<!DOCTYPE html> 文档类型声明
<html> 文档根标签
标签大多数成对出现，但也有单标签
<head> 文档头，文档有的内容不会在【网页】上出现
文档头的数据是被了浏览器使用的
可以给浏览器指明网页编码格式
可以给浏览器指示显示什么窗口标题
可以给浏览器指示网页的其他行为
</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
ol>li*n
- 无序列表 unordered list
ul>li*n
- 详情列表 details list
dl>(dt+dd)*n
表格
- table>(tr>td*n)*m 创建m行n列的单元格
- 合并单元格：towspan="2"=把2行合并 colspan=“3”=把3列合并
- 表格线：border=“1”
表单
接受用户的输入 input>
text 普通文本
password 密码
tel 手机号
email 邮件
number 数字
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盒
- 内容+内边距+边框=边框盒
1153
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
