web前端学习之———互联网与HTML篇

互联网基础原理

1.什么是互联网？

互联网：凡是能彼此通信的设备组成的网络就叫互联网。

(1)内部结构：

互联网指的是通过TCP/IP协议族相互连接在一起的计算机的网络。TCP是Transmission Control Protocol，传输控制协议；IP是Internet Protocol，网际协议。TCP/IP协议族是一个网络通讯模型，是当前互联网通讯的基础架构。

IP用来去识别网络上的一台计算机。计算机要连接到一起相互通信，首先需要知道连接的目标计算机，而IP就能标识一台计算机。做一个类比，我们人跟人之间也需要建立连接才能交流，在一群人中说话，首先喊出一个人的名字，他就知道你在跟他说话了。IP就是计算机的名字。

TCP是计算机之间控制传输信息的协议，同样的类比，就是人与人之间沟通的语言和方式。一个不会外语的中国人跟一个美国人交流是无效的，就跟好像一台计算机发送目标计算机无法识别的数据包。能够识别出网络上的计算机，同时也能以相互理解的方式进行通讯，这样计算机就可以连接到一起了。

（2）互联网、因特网、万维网三者的关系：互联网包含因特网，因特网包含万维网。凡是能彼此通信的设备组成的网络就叫互联网，因特网是基于TCP/IP让不同的设备彼此通信，TCP/IP协议由很多协议组成，不同类型的协议又被放在不同的层，其中，位于应用层的协议就有很多，只要应用层使用的是HTTP协议，就称为万维网。

2.什么是网站？

网站(Website)是指在因特网上根据一定的规则，使用HTML（标准通用标记语言下的一个应用）等工具制作的用于展示特定内容相关网页的集合。简单地说，网站是一种沟通工具，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。

3.什么是服务器？

从广义上讲，服务器是指网络中能对其它机器提供某些服务的计算机系统。从狭义上讲，服务器是专指某些高性能计算机，能通过网络，对外提供服务。相对于普通PC来说，稳定性、安全性、性能等方面都要求更高，因此在CPU、芯片组、内存、磁盘系统、网络等硬件和普通PC有所不同。

服务器作为网络的节点，存储、处理网络上80％的数据、信息，因此也被称为网络的灵魂。做一个形象的比喻：服务器就像是邮局的交换机，而微机、笔记本、PDA、手机等固定或移动的网络终端，就如散落在家庭、各种办公场所、公共场所等处的电话机。我们与外界日常的生活、工作中的电话交流、沟通，必须经过交换机，才能到达目标电话；同样如此，网络终端设备如家庭、企业中的微机上网，获取资讯，与外界沟通、娱乐等，也必须经过服务器，因此也可以说是服务器在“组织”和“领导”这些设备。

服务器的构成与微机基本相似，有处理器、硬盘、内存、系统总线等，它们是针对具体的网络应用特别制定的，因而服务器与微机在处理能力、稳定性、可靠性、安全性、可扩展性、可管理性等方面存在差异很大。尤其是随着信息技术的进步，网络的作用越来越明显，对自己信息系统的数据处理能力、安全性等的要求也越来越高，如果您在进行电子商务的过程中被黑客窃走密码、损失关键商业数据；如果您在自动取款机上不能正常的存取，您应该考虑在这些设备系统的幕后指挥者————服务器，而不是埋怨工作人员的素质和其他客观条件的限制。

4.什么是浏览器？

浏览器是网页显示、运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。

1、浏览器内核也可以理解为排版引擎，主要由2部分组成，渲染引擎和 JS 引擎

2、排版引擎主要是负责获取网页内容（HTML、XML、图像、CSS、JS）等信息进行解析、渲染网页，将网页的代码转换为看得到的页面

3、浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同，常见的内核有Trident、 Gecko、 Webkit、 Presto、 Blink五种

5.常用浏览器有哪些？

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
firefox	Gecko	可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
Safari	webkit	现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）。苹果感觉像被别人抢了媳妇，都哭晕再厕所里面了。
chrome	Chromium/Blink	在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发
Opera	blink	现在跟随chrome用blink内核。

扩展阅读：

移动端的浏览器内核主要说的是系统内置浏览器的内核。Android手机而言，使用率最高的就是Webkit内核，大部分国产浏览器宣称的自己的内核，基本上也是属于webkit二次开发。iOS以及WP7平台上，由于系统原因，系统大部分自带浏览器内核，一般是Safari或者IE内核Trident的

6.http请求是如何完成的？

1.解析URL首先浏览器会检测这个url是否正确存在，如果不合法，将会返回一个默认的搜索引擎。如果存在并合法，那么可以解析得到协议（http或者https）、域名（baidu）、资源（首页）等信息。

2.DNS查询- 浏览器会先检查域名信息是否在缓存中。
- 再检查域名是否在本地的Hosts文件中。
- 如果还不在，那么浏览器会向DNS服务器发送一个查询请求，获得目标服务器的IP地址

3.TCP传输及运输这时候浏览器获得了目标服务器的IP（DNS返回）、端口（URL中包含，没有就使用默认（HTTP默认80端口）），浏览器会调用库函数socket，生成一个TCP流套接字，也就是完成了TCP的封包。TCP封包完成之后，就可以传输了，浏览器和服务器就完成了TCP的三次握手，建立了连接，后面就可以请求服务器资源了。

4.服务器接收请求并响应HTTP有很多请求方法，比如：GET/POST/PUT/DELETE等等，我们浏览器输入URL这种，是GET方法。服务器接收到GET请求，服务器根据请求信息，获得相应的相应内容。例如我们输入的是：\[百度一下，你就知道](https://link.zhihu.com/?target=http%3A//www.baidu.com)\，那么意味着访问百度的首页文件

5.浏览器解析并渲染浏览器从服务器拿到了想要访问的资源，大多数时候，这个资源就是HTML页面，当然也可能是一个其他类型的文件。浏览器先对HTML文档进行解析，生成解析树（以DOM元素为节点的树）。加载页面的外部资源，比如JS、CSS、图片。遍历DOM树，并计算每个节点的样式，最终完成渲染，变成我们看到的页面。

页面结构HTML

1.HTML骨架及标签语法规则

HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
HTML 不是一种编程语言，而是一种标记语言 (markup language)

标记语言是一套标记标签 (markup tag)

HTML标签名、类名、标签属性和大部分属性值统一用小写

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>标题名称</title></head><body>内容区域</body>
</html>

标签名	定义	说明
`<html></html>`	HTML标签	页面中最大的标签，我们成为根标签
`<head></head>`	文档的头部	注意在head标签中我们必须要设置的标签是title
`<titile></title>`	文档的标题	让页面拥有一个属于自己的网页标题
`<body></body>`	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面的

2.HTML元信息标记meta

meta 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
meta标签位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的名称/值对。

<!-- 申明编码-->
<meta charset="utf-8">
<!-- 页面关键词 -->
<meta name="keywords" content="your tags" />
<!-- 页面描述-->
<meta name="description" content="150 words" />

3.HTML常用标签

3.1.1排版标签

1）标题标签 h1~h6

标题标签语义： 作为标题使用，并且依据重要性递减
<h1>h1标题文本</h1>
<h2>h2标题文本</h2>
<h3>h3标题文本</h3>
<h4>h4标题文本</h4>
<h5>h5标题文本</h5>
<h6>h6标题文本</h6>
2）段落标签 p

作用语义： 可以把 HTML 文档分割为若干段落
<p> 段落文本内容</p>
3）水平线标签 hr

**作用语义：**创建横跨网页水平线的标签
<hr/>
4）换行标签

**作用语义：**希望某段文本强制换行显示
<br/>
5）div和span标签

div 就是 division 的缩写分割，分区的意思其实有很多div 来组合网页。

span 跨度，跨距；范围

<div>内容</div>

<span></span>
div标签用来布局的，但是现在一行只能放一个div

span标签用来布局的，一行上可以放好多个span

标签名	定义	说明
`<hx></hx>`	标题标签	作为标题使用，并且依据重要性递减
`<p></p>`	段落标签	可以把 HTML 文档分割为若干段落
`<hr />`	水平线标签	没啥可说的，就是一条线
`<br />`	换行标签
`<div></div>`	div标签	用来布局的，但是现在一行只能放一个div
`<span></span>`	span标签	用来布局的，一行上可以放好多个span

3.1.2 文本格式化标签

标签显示效果

<b></b>&&<strong></strong> 文字以粗体方式显示(XHTML推荐strong)

<i></i>&&<em></em> 文字以斜体方式显示(XHTML推荐em)

<s></s>&&<del></del> 文字以加删除线方式显示(XHTML推荐del)

<u></u>&&<ins></ins> 文字以加下划线方式显示(XHTML推荐u)

标签	显示效果
`<b></b>`&&`<strong></strong>`	文字以粗体方式显示(XHTML推荐strong)
`<i></i>`&&`<em></em>`	文字以斜体方式显示(XHTML推荐em)
`<s></s>`&&`<del></del>`	文字以加删除线方式显示(XHTML推荐del)
`<u></u>`&&`<ins></ins>`	文字以加下划线方式显示(XHTML推荐u)

3.1.3 图像标签

**作用语义：**在网页中显示图像就需要使用图像标签

<img src="图像URL" alt="图像不能显示时文本" title="鼠标悬停时文本" border="" width="" heiught="" />

3.1.4 链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。

3.1.5 注释标签

注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。

 <!-- 注释语句 -->     快捷键是：    ctrl + /       或者 ctrl +shift + /

4.HTML语义化结构

<title>：页面主体内容。
<hx>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。
<ul>：无序列表。
<li>：有序列表。
<header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav>：标记导航，仅对文档中重要的链接群使用。
<main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
<article>：定义外部的内容，其中的内容独立于文档的其余部分。
<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
<footer>：页脚，只有当父级是body时，才是整个页面的页脚。
<small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
<strong>：和 em 标签一样，用于强调文本，但它强调的程度更强一些。
<em>：将其中的文本表示为强调的内容，表现为斜体。
<mark>：使用黄色突出显示部分文本。
<figure>：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。
<figcaption>：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。
<cite>：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
<blockquoto>：定义块引用，块引用拥有它们自己的空间。
<q>：短的引述（跨浏览器问题，尽量避免使用）。
<time>：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。
<abbr>：简称或缩写。
<dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
<address>：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
<del>：移除的内容。
<ins>：添加的内容。
<code>：标记代码。
<meter>：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）

<progress>：定义运行中的进度（进程）。

锚点定位

通过创建锚点链接，用户能够快速定位到目标内容。

1. 使用相应的id名标注跳转目标的位置。 (找目标)<h3 id="two">第2集</h3> 2. 使用<a href="#id名">链接文本</a>创建链接文本（被点击的） （拉关系）  我也有一个姓毕的姥爷..<a href="#two">

base标签

base 可以设置整体链接的打开状态
base 写到之间
把所有的连接都默认添加 target="_blank"

<base target="_blank" />

预格式化文本标签

被包围在

 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre>此例演示如何使用 pre 标签对空行和 空格进行控制</pre>

表格标签table

<table width="" border="1" cellspacing="0" cellpadding="0" align="center"><!-- caption 表格标题 --><caption></caption><!-- thead 用于定义表格的标题区域 -->  <thead><tr><th></th></tr></thead><!-- tbody 用于定义表格的主体区域 --><tbody><tr><td></td></tr></tbody><!-- tfooter 用于表格的脚注之类 --><tfooter></tfooter>
</table>

标签名	定义	说明
`<table></table>`	表格标签	就是一个四方的盒子
`<tr></tr>`	表格行标签	行标签要再table标签内部才有意义
`<td></td>`	单元格标签	单元格标签是个容器级元素，可以放任何东西
`<th></th>`	表头单元格标签	它还是一个单元格，但是里面的文字会居中且加粗
`<caption></caption>`	表格标题标签	表格的标题，跟着表格一起走，和表格居中对齐
clospan 和 rowspan	合并属性	用来合并单元格的

列表标签

标签名	定义	说明
`<ul></ul>`	无序标签	里面只能包含li 没有顺序，我们以后布局中最常用的列表
`<ol></ol>`	有序标签	里面只能包含li 有顺序，使用情况较少
`<dl></dl>`	自定义列表	里面有2个兄弟， dt 和 dd

表单标签

input控件

属性	说明	作用
type	表单类型	用来指定不同的控件类型
value	表单值	表单里面默认显示的文本
name	表单名字	页面中的表单很多，name主要作用就是用于区别不同的表单。
checked	默认选中	表示那个单选或者复选按钮一开始就被选中了

label标签

用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

第一种用法就是用label直接包括input表单。
<label> 用户名： <input type="radio" name="usename" value="请输入用户名">   </label>
第二种用法 for 属性规定 label 与哪个表单元素绑定。
<label for="sex">男</label>
<input type="radio" name="sex"  id="sex">

textarea控件(文本域)

通过textarea控件可以轻松地创建多行文本输入框.

<textarea></textarea>

表单	名称	区别	默认值显示	用于场景
input type=“text”	文本框	只能显示一行文本	单标签，通过value显示默认值	用户名、昵称、密码等
textarea	文本域	可以显示多行文本	双标签，默认值写到标签中间	留言板

下拉列表控件 select

<select><option>选项1</option><option>选项2</option><option>选项3</option>...
</select>

表单域 form

在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

<form action="url地址" method="提交方式" name="表单名称">各种表单控件
</form>

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址。
method	get/post	用于设置表单数据的提交方式，其取值为get或post。
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单。

页面升级结构HTML5

1.HTML5多媒体标签

1.1 audio 音频标签

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的音频的 URL。

1.2 video 视频标签

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

2.HTML5存储

localStorage - 没有时间限制的数据存储

localStorage 方法存储的数据没有时间限制。
sessionStorage - 针对一个 session 的数据存储

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

3.HTML5表单验证

属性	说明
placeholder	在输入框无内容时显示灰色提示
autocomplete	部分输入框和form都可以设置自动提示 off关闭，on开启（默认是on）
autofocus	让input自动获取焦点
required	设置表单元素为必填
pattern	表单验证使用正则
novalidate	该属性使用在form标签上，让设置了验证的表单可以直接提交 …
formnovalidate	该属性使用在提交按钮上，让设置了验证的表单可以直接提交
for	的for属性是要配合标签中的id属性使用的,点击label标签for对应id的input标签会获取焦点