本文详细介绍了互联网的基础原理，包括TCP/IP协议、互联网、因特网和万维网的关系，以及网站、服务器和浏览器的工作机制。浏览器的内核如Trident、Gecko、Webkit、Blink等被提及，同时讲解了HTTP请求的完整流程。此外，还深入探讨了HTML的结构、元信息、常用标签以及语义化元素，以及HTML5的新特性，如多媒体标签、本地存储和表单验证。
互联网基础原理
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>内容</div> <!-- span一行可以有多个 --> <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)
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 |
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
