Html

一、HTML简介
设计师在设计制作网页时,要考虑的最核心的两个问题是“网页内容是什么”和“如何表现这些内容”,这两点分别由HTML和CSS表示。

网页中可以包含很多种类型的内容作为网页的元素,其中最基本的网页元素是文字,此外还包括图形、声音、视频及其它形式的多媒体文件。网页的最终目的就是给访问者显示有价值的信息。

互联网就是处在世界各地的计算机互相连接而成的一个计算机网络。互联网也被称为万维网,World Wide Web的缩写,简称Web。

提供内容信息的计算机被称为“服务器”,访问者为“浏览器”或“客户端”。

网页与HTML语言
网页文件是用HTML(HyperText Markup Language,超文本标记语言)书写的文本文件,它可以在浏览器中按照设计者所设计的方式显示内容,网页文件也经常被称为HTML文件。

网页的本质是扩展名为“htm”或“html”的文本文件。

网页主要由3个部分组成:结构(HTML)、表现(CSS)、行为(JavaScript)。
最开始时HTML同时承担着“结构”和“表现”的双重任务,从而给网站的维护带来了很多困难。当CSS承担表现的角色后,在不改变HTML结构和内容的前提下,可以设计出很多种不同的表现形式来,而且可以随时在不改变HTML结构的情况下修改样式,这就是“结构”和“表现”分离所带来的好处。

HTML
超文本标记语言,使用标记标签来描述网页。可以格式化文本,添加图片,创建链接、输入表单、框架和表格。首先应该明确一个概念,HTML不是一种编程语言,而是一种描述性的标记语言,用于描述超文本中内容的显示方式。最基本的语言是:<标签>内容</标签>。当浏览器从服务器接收到HTML文件后,就会解释里面的标签符,然后把标签对应的功能表达出来。学习HTML就是学习它标签的使用。

HTML文档结构
<html>
放在HTML文件的开头,并没有实质性的功能,只是一个形式上的标签。
<head>
头标签,一般放在<html>标签里面,其作用是放置关于此HTML文件的信息,如提供索引、定义CSS。
<title>
标题标签,包含在<head>标签内,可以设定网页标题,Windows任务栏中显示的也是这个标题。
<body>
主体标签,网页所要显示的内容都放在这个标签内,它是HTML文件的重点所在。可以控制网页的背景颜色或背景图像。

HTML版本
HTML与XHTML是同一种语言的不同阶段。HTML于1993年6月发布草案,在初期缺乏严谨,W3C组织逐步推出新的版本规范。
HTML2.0:1995年11月发布。
HTML3.2:1996年1月发布。
HTML4.0:1997年12月发布。
HTML4.01:1999年12月发布。
XHTML1.0:2000年1月发布。
XHTML1.1:2001年5月发布。
XHTML2.0:已中断研发,W3C转向HTML5。
HTML5:2008年1月发布正式草案,2010年正式推出。

HTML2.0是W3C组织发布的形成标准以后的第一个正式规范。W3C是全球万维网联盟的简称,创建于1994年。W3C主要的职责是确定未来万维网的发展方向,并制定相关的建议。由于W3C是一个民间组织,没有约束性,因此只提供建议。

W3C组织发布XHTML规范后,把很多用于表现的标签规划为废弃的标签。如<b>、<i>、<font>。

注释
<!-- This is a comment -->

转义
空格(&nbsp)、>(&gt)、<(&lt)、"(&quot)

与设计相关的技术因素:
1.屏幕显示分辨率
“屏幕显示分辨率”是显示器在显示图像时的分辨率。分辨率是用“点”来衡量的,显示器上的这个“点”就是指像素(pixel)。
显示分辨率的数值是指整个显示器所有可视面积上水平像素和垂直像素的数量。例如800x600像素的分辨率,是指在整个屏幕上水平显示800个像素,垂直显示600个像素。显示分辨率的水平像素和垂直像素的总数总是成一定比例的,一般为4:3、5:4或8:5。每个显示器都有自己的最高分辨率,并且可以兼容其它较低的显示分辨率,所以一个显示器可以设置多种不同的分辨率。

2.浏览器类型
浏览器类型也是在网页设计时遇到的一个问题。由于各个软件厂商对HTML的标准支持有所不同,导致了同样的网页在不同的浏览器下会有不同的表现。


二、XHTML
可扩展超文本标记语言,HTML的严谨版,以XML格式编写,与HTML4.01几乎相同。

文档结构
XHTML DOCTYPE是强制性的
<html>中的命名空间(xmlns)属性是强制性的
<html>、<head>、<title>以及<body>也是强制性的

如何从HTML转换到XHTML
1.第一行添加<!DOCTYPE>
2.html标签添加xmlns属性
3.标签名小写
4.标签必须关闭
5.属性名小写
6.属性值需要引号


三、HTML
HTML元素指的是从开始标签到结束标签的所有代码。

头部
<head>内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息。以下标签都可以添加到head部分:<title>、<base>、<link>、<meta>、<script>、<style>。
<title>:定义文档标题。
<base>:定义页面上所有链接的默认地址或默认目标。
<link>:定义文档与外部资源之间的关系。
<meta>:定义关于HTML文档的元数据。
<script>:定义客户端脚本。
<style>:定义文档的样式信息。

<meta>元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
必需的属性
content(值:some_text。定义与http-equiv或name属性相关的元信息)

可选的属性
http-equiv(值:content-type、expires、refresh、set-cookie。把content属性关联到HTTP头部)
name(值:author、description、keywords、generator、revised、others。把content属性关联到一个名称)
scheme(值:some_text。定义用于翻译content属性值的格式)

标题
标题通过<h1>-<h6>标签进行定义。h1>h6。
<h1>This is a heading</h1>

水平线
<hr/>可用于分隔内容。

段落
<p>标签用于定义段落。不建议用<p></p>插入一个空行,而是用<br/>。

换行
<br/>用于换行,没有结束标签,不要写成这种格式<br></br>。

文本格式化标签
<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。
<s> 不赞成使用,使用<del>代替。
<strike> 不赞成使用,使用<del>代替。
<u> 不赞成使用,使用样式(style)代替。

超链接
鼠标箭头会变为一只小手,从一个页面跳转到另一个页面。可以是字符串或图像。
<a href="http://www.w3school.com.cn/">Visit W3School</a>
超链接 - target 属性
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。

图像
<img src="url" />。只包含属性,没有关闭标签。
<img src="/i/eg_mouse.jpg" width="50" height="50">
背景图像
<body background="/i/eg_background.jpg">
图像链接
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>

表格
<table>表格包含若干行(<tr>),每行被分割为若干单元格(<td>)。
<caption> 定义表格标题。
<th> 定义表格的表头。
<tr> 定义表格的行。
<td> 定义表格单元。
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
<col> 定义用于表格列的属性。
<colgroup> 定义表格列的组。

无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点进行标记。无序列表始于<ul>标签。每个列表项始于<li>。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

有序列表
有序列表也是一列项目,列表项目使用数字进行标记。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>


可以通过<div>和<span>将HTML元素组合起来。

大多数HTML元素被定义为块级元素或内联元素。
块级元素在浏览器显示时,通常会以新行来开始(和结束)。如:<h1>、<p>、<ul>、<table>。
内联元素在显示时通常不会以新行开始。如:<b>、<td>、<a>、<img>。

<div>元素是块级元素,它是可用于组合其它HTML元素的容器。<div>元素的另一个常见的用途是文档布局,它取代了使用表格定义布局的老式方法。使用<table>元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化数据。

<span>元素是内联元素,没有特定的含义,可用作文本的容器。

字符实体
空格( ,&nbsp;)
小于号(<,&lt;)
大于号(>,&gt;)
和(&,&amp;)
引号(",&quot;)
分(¢,&cent;)
镑(£,&pound;)
人民币(¥,&yen;)
节(§,&sect;)
版权(©,&copy;)
注册商标(®,&reg;)
乘号(×,&times;)
除号(÷,&divide;)

表单
表单元素允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息。
input type属性
button:定义可点击按钮(多数情况下,用于通过JavaScript启动脚本)。
checkbox:定义复选框。
file:定义输入字段和"浏览"按钮,供文件上传。
hidden:定义隐藏的输入字段。
image:定义图像形式的提交按钮。
password:定义密码字段。该字段中的字符被掩码。
radio:定义单选按钮。
reset:定义重置按钮。重置按钮会清除表单中的所有数据。
submit:定义提交按钮。提交按钮会把表单数据发送到服务器。
text:定义单行的输入字段,默认宽度为20个字符。

<form name="form1" action="operatorAdd" method="post">
Username:<input type="text" id="userId" name="user" />
<input type="radio" name="sex" value="male" />Male
<input type="radio" name="sex" value="female" />Female
<input type="checkbox" name="checkbox1" value="bike" />bike
<input type="checkbox" name="checkbox1" value="car" />car
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit" value="submit" onclick="return validator();" />
</form>

function validator(){
var userId=document.getElementById("userId").value;
var sexs=document.getElementsByName("sex");
var sex;
for(var i=0; i<sexs.length; i++) {
if (sexs[i].checked) {
sex = sexs[i].value;
}
}
var checkbox1=document.getElementsByName("checkbox1");
var v="";
for(var i=0; i<checkbox1.length; i++) {
if (checkbox1[i].checked) {
v += checkbox1[i].value;
}
}
var options=document.getElementsByTagName("option");
var car;
for(var i=0; i<options.length; i++) {
if (options[i].selected) {
car = options[i].value;
}
}
return false;
}

jquery获取表单值
$("#userId").val();
$("input[name='sex']:checked").val();
$('input[name="checkbox1"]:checked').each(function(){
v+=$(this).val()+",";
});
$("#cars").val();

框架
通过使用框架,可以在同一个浏览器窗口中显示不止一个页面。<frameset>、<iframe>
使用框架的坏处:
a.开发人员必须同时跟踪更多的HTML文档
b.很难打印整张页面

背景
<body>拥有两个配置背景的属性,背景颜色和背景图像。
背景颜色(bgcolor)
将背景设置为某种颜色。属性值可以是十六进制数、RGB值或颜色名。
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
背景(background)
将背景设置为图像,属性值为图像的URL(图像文件不应超过10k)。
<body background="clouds.gif">
<body>标签中的背景颜色(bgcolor)、背景(background)和文本(text)属性在最新的HTML标准(HTML4和XHTML)中已被废弃,使用CSS代替。

颜色
颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。
每种颜色的最小值是0(十六进制:#00),最大值是255(十六进制:#FF)。
颜色名
仅仅有16种颜色名被W3C的HTML4.0标准所支持,如:red、black。

<!DOCTYPE>
Web世界中存在许多不同的文档。只有了解文档的类型,浏览器才能正确地显示文档。
HTML也有多个不同的版本,只有完全明白页面中使用的确切HTML版本,浏览器才能完全正确地显示出HTML页面。这就是<!DOCTYPE>的用处。

URL
统一资源定位符。由单词或因特网协议(IP)地址组成,如:w3school.com.cn、192.168.1.253。用于定位万维网上的文档或数据。
语法规则
scheme://host.domain:port/path/filename
scheme - 定义因特网服务的类型,最常见的类型是http
host - 定义域主机(http的默认主机是www)
domain - 定义因特网域名,比如w3school.com.cn
:port - 定义主机上的端口号(http的默认端口号是80)
path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)
filename - 定义文档/资源的名称
以下是其中一些常用的scheme:
http - 超文本传输协议:以http://开头的普通网页,不加密。
https - 安全超文本传输协议:安全网页,解密所有信息交换。
ftp - 文件传输协议:用于将文件下载或上传至网站。

URL编码
URL只能使用ASCII字符集来通过因特网进行发送,ASCII之外的字符,必须转换为有效的ASCII格式。URL编码使用%其后跟随两位的十六进制数来替换非ASCII字符,用+来替换空格。可用decodeURIComponent(www.baidu.com);来还原URL。

HTTP
超文本传输协议(HTTP)的设计目的是保证客户机与服务器之间的通信,它的工作方式是客户机与服务器之间的请求-应答协议。定义了8个方法,最常用的是GET和POST。
GET与POST比较
1.GET的请求信息会在URL中显示;POST的请求信息保存在HTTP消息体中,不会在URL中显示。
2.GET请求有长度限制;POST对数据长度没有要求。
3.GET请求可以被缓存;POST请求不会被缓存。
4.GET请求保留在浏览器历史记录中;POST请求不会保存为历史记录。
5.GET请求可存为标签;POST不能被存为标签。

HTTP消息
当浏览器从web服务器请求服务时,可能会发生错误。
1xx: 信息
2xx: 成功
3xx: 重定向
4xx: 客户端错误
5xx: 服务器错误


四、HTML5
HTML5的目标是为了能够创建更简单的Web程序,书写出更简洁的HTML代码。解决浏览器的兼容性,增加了一些标签,使文档结构更加清晰明确,容易阅读。

HTML5新特性:
绘图canvas元素。
多媒体播放video、audio元素。
本地存储。
通信Web Sockets。
线程处理Web Workers。
获取地理位置Geolocation API。
离线应用程序。

<!DOCTYPE html>
<head>
<mete charset="tuf-8">
<title>HTML5</title>
</head>

<body>
<header>
<h1>网页标题</h1>
<nav>
<ul>
<li><a href="http://www.hao123.com">hao123</li>
<li><a href="http://www.baidu.com">baidu</li>
</ul>
</nav>
</header>

<article>
<hgroup>
<h1>文章主标题</h1>
<h2>文章子标题</h2>
<hgroup>
<p>文章正文</p>
<section class="comments">
<article>
<h1>评论标题</h1>
<p>评论正文</p>
</article>
</section>
</article>

<footer>
<p>版权所有:xxx</p>
</footer>
</body>

HTML5新增的结构元素
section
表示页面中的一个内容区块,比如章节、页眉、页脚或页面中的其它部分。它可以与h1-h6等元素结合起来使用。
article
表示页面中的一块与上下文不相关的独立内容,譬如博客、报纸中的一篇文章。
aside
表示article内容之外的、与article内容相关的辅助信息。
nav
表示页面中页面导航的链接组。
header
表示页面中一个内容区块或整个页面的标题,一个header元素通常至少包含一个h1-h6元素。
hgroup
用于将标题及其子标题进行分组,如果文章只有一个主标题,是不需要hgroup元素的。
footer
表示整个页面或页面中一个内容区块的脚注。一般来说,它会包含创作者的姓名、创作日期以及创作者联系信息。
figure
表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。

新增的其它元素
video
定义视频
<video src="movie.ogg" controls="controls">video元素</video>
audio
定义音频
<audio src="someaudio.wav">audio元素</audio>
embed
插入各种多媒体,格式可以是Midi、Wav、AIFF、AU、MP3等。
<embed src="house.wav"/>
mark
主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark元素的一个典型应用就是在搜索结果中向用户高亮显示搜索关键字。
progress
表示运行中的进程,可以使用progress元素来显示JavaScript中消耗时间的函数的进程。
time
表示日期、时间。
wbr
换行。
canvas
表示图形,比如图表和其它图形。这个元素本身没有行为,仅提供一块画布,但它把一个绘图API展现给客户端JavaScript,使脚本能够把想绘制的东西绘制到这块画布上。
command
表示命令按钮,比如单选按钮、复选框或按钮。

ps:
article元素可以看成是一种特殊种类的section元素,它比section元素更强调独立性。即section元素强调分段或分块,而article强调独立性。具体来说,如果一块内容相对来说比较独立、完整的时候,应该使用article元素,但是如果想将一块内容分成几段的时候,应该使用section元素。

不要将section元素用作设置样式的页面容器,那是div元素的工作。
如果article元素、aside元素或nav元素更符合使用条件,不要使用section元素。
不要为没有标题的内容区块使用section元素。

不要用menu元素替代nav元素。menu元素是用在一系列发出命名的菜单上的,是一种交互性的元素。

取消表单验证
form.novalidate=true;

自定义错误信息
setCustomValidity("用户名不能为空");

绘制图形
canvas元素是HTML5中新增的一个重要元素,专门用来绘制图形。在页面上放置一个canvas元素,就相当于在页面上放置了一块画布,可以在其中进行图形的描绘。canvas元素是一块无色透明的区域,需要利用JavaScript编写绘画的脚本。

<canvas id="heatmap" height="300" width="300"></canvas>

canvas绘图步骤
1.取得canvas元素。
canvas = document.getElementById("heatmap");
2.取得上下文。
context = canvas.getContext('2d');
3.填充与绘制边框。
填充(fill)与绘制边框(stroke)。
4.设定绘图样式。
填充样式(fillStyle)或图形边框样式(strokeStyle)。
5.指定线宽。
lineWidth。
6.指定颜色值。
fillStyle、strokeStyle或通过rgb、rgba函数。
7.绘制矩形。
context.fillRect(x,y,width,height);
context.strokeRect(x,y,width,height);

绘制其它图形
绘制其它图形需要使用路径,路径用来勾勒图形轮廓,然后设置颜色,进行绘制。

开始创建路径
context.beginPath();
绘制圆形
context.arc(x, y, radius, 0, Math.PI*2, true);
关闭路径
context.closePath();

moveTo与lineTo
moveTo(x,y)创建两个坐标点。
lineTo(x,y)连接moveTo的点。

多媒体播放
在HTML5问世之前,要在网络上展示视频、音频,可以使用第三方自主开发的播放器或FLASH,但是它们都需要在浏览器中安装各种插件才能使用。HTML5提供video、audio元素无需插件即可处理视频、音频数据。
xxx

本地存储
HTML5中本地存储的两个重要内容Web Storage和本地数据库。Web Storage存储机制是对HTML4中cookies的一个改善;本地数据库是HTML5新增的一个功能,使用它可以在客户端本地建立一个数据库,减轻了服务器端的负担,加快了访问数据的速度。

Web Storage
HTML4中cookies的缺点
1.大小:cookies的大小被限制在4KB。
2.带宽:cookies是随HTTP事务一起被发送的,因此会浪费一部分发送cookies时使用的带宽。
3.复杂性:正确地操纵cookies是很困难的。

Web Storage分为两种
1.sessionStorage
将数据保存在session对象中。所谓session,是指用户在浏览器浏览某个网站时,从进入网站到tab页关闭所经过的这段时间,session对象可以用来保存在这段时间内所要求保存的任何数据。
2.localStorage
将数据保存在客户端本地的硬件设备(硬盘)中,即使浏览器被关闭了,该数据仍然存在,下次打开浏览器访问网站时任然可以继续使用。

function saveStorage(id){
var data = document.getElementById(id).value;
var time = new Date().getTime();
localStorage.setItem(time,data);
alert("数据已保存");
loadStorage("msg");
}
function loadStorage(id){
var result = '<table border="1">';
for(var i=0; i<localStorage.length; i++){
var key = localStorage.key(i);
var value = localStorage.getItem(key);
var date = new Date();
date.setTime(key);
var datestr = date.toGMTString();
result += "<tr><td>"+datestr+"</td><td>"+value+"</td></tr>";
}
result += "</table>";
var target = document.getElementById(id);
target.innerHTML = result;
}
function clearStorage(){
localStorage.clear();
alert("全部数据被清除");
loadStorage("msg");
}

本地数据库
Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范,它通过一套API来操纵客户端的数据库。

三个核心方法
1.openDatabase:创建或打开一个数据库对象。
2.transaction:事务控制。
3.executeSql:执行SQL。

//数据库名,版本号,数据库的描述,数据库大小
//数据库路径C:\Users\lenovo\AppData\Local\Google\Chrome\User Data\Default\databases
var db = openDatabase('MyData','','My Database',102400);
db.transaction(function(tx){tx.executeSql('xxx)',[]);}


五、CSS
1.CSS简介
CSS(Cascading Style Sheet)层叠样式表,由“选择器、属性和值”这三部分组成。它是用于控制网页样式并允许将样式信息与网页内容分离的一种标签性语言,其核心思想是尽可能地使网页内容与形式分离。1996年由W3C审核通过。

CSS的引入,弥补了传统HTML的缺点
a.维护困难
b.标签不足
c.页面臃肿,占用带宽

2.选择器
选择器是CSS中重要的概念,所有HTML语言中的样式都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行选择,并赋予各种样式声明。

a.元素选择器
声明HTML中哪些标签采用哪种CSS样式,因此,每一种HTML标签的名称都可以作为相应的标签选择器的名称。
<style type="text/css">
h1{
color:red;
font-size:25px;
}
</style>

b.类选择器
类选择器的名称可以由用户自定义,属性和值跟标签选择器一样。任何一个class选择器都使用与所有HTML标签,只需HTML标签声明class属性即可。
<style type="text/css">
.red{
color:red;
font-size:18px;
}
</style>
<p class="red">class选择器</p>

c.id选择器
id选择器的使用跟class选择器基本相同,不同之处在于id选择器只能在HTML页面中使用一次,因此其针对性很强。在HTML的标签中只需声明id属性,就可以直接调用CSS中的id选择器。
<style type="text/css">
#red{
color:red;
font-size:30px;
}
</style>
<p id="red">id选择器</p>

d.选择器分组
同时设置多个标签的样式。
h2, p{color:gray;}

e.后代选择器
又称包含选择器,可以选择作为某标签后代的标签。如下只对h1标签下的em标签起作用。
h1 em{color:red;}

f.子标签选择器,只对h1标签下的第一个strong标签起作用,第二个strong无效。
h1>strong {color:red;}
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>

g.伪类
伪类用于向某些选择器添加特殊的效果。
a:link {color: #FF0000} /*未访问的链接*/
a:visited {color: #00FF00} /*已访问的链接*/
a:hover {color: #FF00FF} /*鼠标移动到链接上*/
a:active {color: #0000FF} /*选定的链接*/

3.在HTML中使用CSS
(1).行内式
直接对HTML标签使用style属性,然后将CSS代码直接写在其中。
<p style="color:#FF0000; font-size:20px;">正文内容</p>
(2).内嵌式
将CSS写在<head>与</head>之间,并且用<style></style>标签进行声明。
(3).链接式
链接式CSS样式表使用频率最高,它将HTML页面与CSS样式分离成两个文件,实现了内容结构与CSS美工代码完全分离。
<link rel="stylesheet" type="text/css" href="styles.css">
(4)导入式
@import url(sheet1.css);、@import "sheet1.css";

4.CSS优先级
1.行内式>内嵌式>外部样式(链接式、导入式)。
2.外部样式中出现在后面的会覆盖前面的。

5.CSS注释
/*可注释多行*/

CSS单位
%(百分比)
in(英寸)
cm(厘米)
mm(毫米)
em(1em等于当前的字体尺寸,2em等于当前字体尺寸的两倍)
ex(一个ex是一个字体的x-height,x-height通常是字体尺寸的一半)
pt(磅,1pt等于1/72英寸)
pc(12点活字,1pc等于12点)
px(像素,计算机屏幕上的一个点)


六、TCP/IP
TCP/IP是用于因特网(Internet)的通信协议。通信协议是对计算机必须遵守的规则的描述,只有遵守这些规则,计算机之间才能进行通信。TCP/IP定义了电子设备(比如计算机)如何连入因特网,以及数据如何在它们之间传输的标准。

TCP/IP内部
TCP(传输控制协议) - 应用程序之间通信。
UDP(用户数据包协议) - 应用程序之间的简单通信。
IP(网际协议) - 计算机之间的通信。
ICMP(因特网消息控制协议) - 针对错误和状态。
DHCP(动态主机配置协议) - 针对动态寻址。

TCP使用固定的连接
TCP用于应用程序之间的通信。
当应用程序希望通过 TCP 与另一个应用程序通信时,它会发送一个通信请求。这个请求必须被送到一个确切的地址。在双方“握手”之后,TCP将在两个应用程序之间建立一个全双工(full-duplex)的通信。这个全双工的通信将占用两个计算机之间的通信线路,直到它被一方或双方关闭为止。

UDP和TCP很相似,但是更简单,同时可靠性低于TCP。

IP是无连接的
IP用于计算机之间的通信。
IP是无连接的通信协议。它不会占用两个正在通信的计算机之间的通信线路。这样,IP就降低了对网络线路的需求。每条线可以同时满足许多不同的计算机之间的通信需要。
通过IP,消息(或者其他数据)被分割为小的独立的包,并通过因特网在计算机之间传送。IP负责将每个包路由至它的目的地。

IP路由器
当一个IP包从一台计算机被发送,它会到达一个IP路由器。IP路由器负责将这个包路由至它的目的地,直接地或者通过其他的路由器。
在一个相同的通信中,一个包所经由的路径可能会和其他的包不同。而路由器负责根据通信量、网络中的错误或者其他参数来进行正确地寻址。

TCP/IP
TCP/IP意味着TCP和IP在一起协同工作。
TCP负责应用软件(比如你的浏览器)和网络软件之间的通信。
IP负责计算机之间的通信。
TCP负责将数据分割并装入IP包,然后在它们到达的时候重新组合它们。
IP 负责将包发送至接受者。

TCP/IP寻址
TCP/IP使用32个比特或者4个0到255之间的数字来为计算机编址。

32比特=4字节。
TCP/IP使用32个比特来编址,一个计算机字节是8比特,所以TCP/IP使用了4个字节。
一个计算机字节可以包含256个不同的值:
00000000、00000001、00000010、00000011、00000100、00000101、00000110、00000111、00001000 .......直到11111111。

IP地址
每个计算机必须有一个IP地址才能够连入因特网。每个IP包必须有一个地址才能够发送到另一台计算机。

IP地址包含4个数字:
TCP/IP使用4个数字来为计算机编址。每个计算机必须有一个唯一的4个数字的地址。数字在0到255之间,并由点号隔开,192.168.1.60。

域名
12个阿拉伯数字很难记忆,使用一个名称更容易。用于TCP/IP地址的名字被称为域名,w3school.com.cn就是一个域名。当你键入一个像 http://www.w3school.com.cn这样的域名,域名会被一种DNS程序翻译为数字。在全世界,数量庞大的DNS服务器被连入因特网。DNS服务器负责将域名翻译为TCP/IP 地址,同时负责使用新的域名更新彼此的系统。当一个新的域名连同其TCP/IP地址一同注册后,全世界的DNS服务器都会对此信息进行更新。

TCP/IP 是不同的通信协议的大集合。

协议族
TCP/IP是基于TCP和IP这两个最初的协议之上的不同的通信协议的大的集合。

TCP - 传输控制协议
TCP用于从应用程序到网络的数据传输控制。
TCP负责在数据传送之前将它们分割为IP包,然后在它们到达的时候将它们重组。

IP - 网际协议
IP负责计算机之间的通信。在因特网上发送和接收数据包。

HTTP - 超文本传输协议
HTTP负责web服务器与web浏览器之间的通信。从web客户端(浏览器)向web服务器发送请求,并从web服务器向web客户端返回内容(网页)。

HTTPS - 安全的HTTP
HTTPS负责在web服务器和web浏览器之间的安全通信。作为有代表性的应用,HTTPS会用于处理信用卡交易和其他的敏感数据。

SSL - 安全套接字层
SSL协议用于为安全数据传输加密数据。

SMTP - 简易邮件传输协议
SMTP用于电子邮件的传输。

MIME - 多用途因特网邮件扩展
MIME协议使SMTP有能力通过TCP/IP网络传输多媒体文件,包括声音、视频和二进制数据。

IMAP - 因特网消息访问协议
IMAP用于存储和取回电子邮件。

POP - 邮局协议
POP用于从电子邮件服务器向个人电脑下载电子邮件。

FTP - 文件传输协议
FTP负责计算机之间的文件传输。

NTP - 网络时间协议
NTP用于在计算机之间同步时间(钟)。

DHCP - 动态主机配置协议
DHCP用于向网络中的计算机分配动态IP地址。

SNMP - 简单网络管理协议
SNMP用于计算机网络的管理。

LDAP - 轻量级的目录访问协议
LDAP用于从因特网搜集关于用户和电子邮件地址的信息。

ICMP - 因特网消息控制协议
ICMP负责网络中的错误处理。

ARP - Address Resolution Protocol
ARP用于通过IP来查找基于IP地址的计算机网卡的硬件地址。

RARP - Reverse Address Resolution Protocol
RARP用于通过IP查找基于硬件地址的计算机网卡的IP地址。

BOOTP - Boot Protocol
BOOTP用于从网络启动计算机。

PPTP - 点对点隧道协议
PPTP用于私人网络之间的连接(隧道)。

TCP/IP邮件
电子邮件是TCP/IP最重要的应用之一。

电子邮件程序使用不同的TCP/IP协议:
使用SMTP来发送邮件。
使用POP从邮件服务器下载邮件。
使用IMAP连接到邮件服务器。

SMTP - 简单邮件传输协议
SMTP协议用于传输电子邮件。SMTP负责把邮件发送到另一台计算机。通常情况下,邮件会被送到一台邮件服务器(SMTP服务器),然后被送到另一台(或几台)服务器,然后最终被送到它的目的地。SMTP也可以传送纯文本,但是无法传输诸如图片、声音或者电影之类的二进制数据。SMTP使用MIME协议通过TCP/IP网络来发送二进制数据。MIME协议会将二进制数据转换为纯文本。

POP - 邮局协议
POP协议被邮件程序用来取回邮件服务器上面的邮件。假如你的邮件程序使用POP,那么一旦它连接上邮件服务器,你的所有的邮件都会被下载到邮件程序中(或者称之为邮件客户端)。

IMAP - 因特网消息访问协议
与POP类似,IMAP协议同样被邮件程序使用。IMAP协议与POP协议之间的主要差异是:如果IMAP连上了邮件服务器,它不会自动地将邮件下载到邮件程序之中。IMAP 使你有能力在下载邮件之前先通过邮件服务器端查看他们。通过IMAP,你可以选择下载这些邮件或者仅仅是删除它们。比方说你需要从不同的位置访问邮件服务器,但是仅仅希望回到办公室的时候再下载邮件,IMAP在这种情况下会很有用。

转载于:https://www.cnblogs.com/lc19149/p/9341071.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值