互联网通信概念
- 多台计算机通过网络实现文件共享行为，就是互联网通信。
互联网通信过程角色划分
- 客户端计算机：用于发送请求，来索要资源文件的计算机
- 服务端计算机：用于接收请求，并提供对应的资源文件计算机
互联网通信之C/S通信模式
- C（client software）：客户端软件
- 需要下载安装特定的客户端软件，专门安装在客户端计算机上
- 帮助客户端计算机向指定服务端计算机软件发送请求，索要资源文件
- 帮助客户端计算机将服务端计算机发送回来【二进制数据】解析 为【文字，数字，图片，视频，命令】
-
运算压力可以分摊给各个终端 服务器承担的运算压力可以大大减轻
- S（server software）：服务器软件
- 服务器软件专门安装在服务端计算机上
- 服务器软件用于接收来自于特定的客户端软件发送请求
- 服务器软件在接收到请求之后自动的在服务端计算机上定位被访问的资源文件
- 服务器软件自动的将定位的文件内容解析为【二进制数据】通过网络发送回 发起请求的客户端软件上
适用场景：
- C/S通信模型普遍用于个人娱乐市场，比如【微信，淘宝/京东，视频（优酷/B站），大型网络游戏(魔兽/英雄联盟)】
优缺点：
- 优点：安全性较高丶有效降低服务端计算机工作压力
- 缺点：增加客户获得服务的成本丶更新较为繁琐。软件更新比较麻烦 所有的客户端都需要更新。
互联网通信之B/S通信模式
- B（browser software):浏览器
- 不需要下载安装专门的客户端软件，只需要有一个浏览器即可。
- 可以向任意服务器发送请求，索要资源文件
- 可以将服务器返回的【二进制数据】解析为【文字，数字，图片，视频，命令】
- S(server software) 服务器软件
- 服务器软件专门安装在服务端计算机上
- 可以接收任意浏览器发送请求
- 自动的在服务端计算机上定位被访问的资源文件
- 自动的将定位的资源文件内容以二进制形式发送回发起请求浏览器上
适用场景
- 既适用于个人娱乐市场，又广泛适用于企业日常活动
优缺点：
- 优点：不会增加用户获得服务的成本丶几乎不需要更新浏览器。软件更新比较简单 只要更新服务器即可。
- 缺点：几乎无法有效对服务端计算机资源文件进行保护丶服务端计算机工作压力异常巨大【B/S通信下高并发解决方案】运算压力基本在服务端 一般不会用来做大型游戏。
互联网三大基石
-
URL：在WWW上，每一信息资源都有统一的且在网上唯一的地址，该地址就叫URL（Uniform Resource Locator,统一资源定位符），它是WWW的统一资源定位标志，就是指网络地址。数据传递的地址。
-
HTTP协议：http是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII码形式给出；而消息内容则具有一个类似MIME的格式。这个简单模型是早期Web成功的有功之臣，因为它使得开发和部署是那么的直截了当。共同遵守的解析数据的规范。
-
HTML：HTML称为超文本标记语言。数据传递的载体
网页概述
- 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。
- 网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。
- 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页， 常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。
常用浏览器
浏览器是网页显示、运行的平台。常用的浏览器有 IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。 平时称为五大浏览器。
浏览器内核（渲染引擎）： 负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。目前国内一般浏览器都会采用 Webkit/Blink 内核，如 360、UC、QQ、搜狗等。
Web 标准
Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。Web 标准由来：浏览器不同，它们显示页面或者排版就有些许差异。我们遵循web标准就可以展示统一的内容。
Web 标准的构成
主要包括结构（Structure） 、表现（Presentation）和行为（Behavior）三个方面。
Web 标准提出的最佳体验方案：结构、样式、行为相分离。
简单理解： 结构写到 HTML 文件中， 表现写到 CSS 文件中， 行为写到 JavaScript 文件中。
Web 标准的构成
HTML概述
- HTML 指的是超文本标记语言 (Hyper Text Markup Behavior) ，它是用来描述网页的一种语言。
- HTML 不是一种编程语言，而是一种标记语言 (markup language)。
- 标记语言是一套标记标签 (markup tag)。
- HTML编程语言是一种专门在浏览器编译与执行的标记语言
所谓超文本，有 2 层含义：
- 它可以加入图片、声音、动画、多媒体等内容（超越了文本限制 ）。
- 它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本 ）。
小知识：
- windows 上每个文件都是有文件拓展名，文件拓展名代表着文件的类型 windows 可以根据文件的拓展名去自动选择文件打开的程序。一般win7和win10 默认隐藏文件拓展名 xp默认显示文件拓展名，网页文件 拓展名为 .html 或者.htm 的纯文本文件。
HTML的作用
- 通过使用HTML的各种标签，然后生成一个HTML文件，这个文件可以被浏览器解析，浏览器内部有一个专门的HTML的解析器，解析后我们就可以看到炫酷的页面。HTML编程语言通知浏览器将接收的数据以指定方式在窗口展示。
- 控制浏览器请求行为
HTML的版本
HTML编程语言语法规范:
- HTML 标签是由尖括号包围的关键词，例如 <html>。
- HTML编程语言中所有标签都是预先定义好，不允许开发人员自行创建新的标签
- HTML编程语言中所有标签和属性不区分英文字母大小写，比如<BR> <br> <Br> 都是合法标签
- HTML编程语言中标签是可以有属性的，属性赋值时内容包含在一个英文的双引号中，属性之间必须采用空格进行隔离。属性必须写在开始标签里。.属性之间无先后次序，属性也可省略（即取默认值）。
-
HTML 标签 通常是成对出现的 ，例如 <html> 和 </html> ，我们称为 双标签。 标签对中的第一个标签是 开始标签，第二个标签是结束标签。
-
有些特殊的标签必须是单个标签（极少情况），例如 <br />，我们称为 单标签。
-
标签是分层次的，可以有包含关系
文本Text
标签的内容可以是子标签或者普通文本 ，最内层标签的内容称为文本 ，外层标签的内容也可以统称为文本 。
元素 Element
元素就是开始标记+中间内容+结束标记 例如： <p align="center">HTML文档包括两部分：头部部分和主体部分</p> 一个完整的标签我们也称之为为网页上的一个元素
标签关系
双标签关系可以分为两类：包含关系和并列关系。
骨架标签
每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。 HTML页面也称为 HTML 文档。下面代码就是HTML的骨架标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>骨架标签详解
<!DOCTYPE> 声明
- <!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。
- <!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
- 在 HTML 4.01 中，<!DOCTYPE> 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML （Standard Generalized Markup Language 标准通用标记语言）。DTD 指定了标记语言的规则，确保了浏览器能够正确的渲染内容。HTML5 不是基于 SGML，因此不要求引用 DTD。
- 总是给您的 HTML 文档添加 <!DOCTYPE> 声明，确保浏览器能够预先知道文档类型。
<html> 标签
- <html> 标签告知浏览器这是一个 HTML 文档。
- <html> 标签是 HTML 文档中最外层的元素。
- <html> 标签是所有其他 HTML 元素（除了 <!DOCTYPE> 标签）的容器。
- 属性lang="en"用来定义当前文档显示的语言。en定义语言为英语 丶zh-CN定义语言为中文 。简单来说,定义为en 就是英文网页, 定义为 zh-CN 就是中文网页 其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文 。这个属性对浏览器和搜索引擎(百度.谷歌等)还是有作用的。
<head> 标签
- <head> 元素是所有头部元素的容器。
- <head> 元素必须包含文档的标题（title），可以包含脚本、样式、meta 信息 以及其他更多的信息。设置基础参数信息
- 以下列出的元素能被用在 <head> 元素内部：<title> （在头部中，这个元素是必需的）丶<style>丶<base>丶<link>丶<meta>丶<script>丶<noscript>
<meta> 标签
- 元数据（Metadata）是数据的数据信息。
- <meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，当时会被浏览器解析。
- META元素通常用于指定网页的描述，关键词，的文件的最后修改，作者，和其他元数据。
- 元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。
- 如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。
-
在<head>标签内，可以通过<meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。属性 charset=" UTF-8" 告知浏览器要使用什么字符集解码。
<head>
<!--meta
一般定义一些当前网页的特殊属性
通过meta标签的属性定义页面的特征
<标签名 属性1='' 属性2=''></标签名>
charset属性 定义当前页面的字符集 告诉浏览器以什么字符集解析当前页面
name属性 一般用于定义当前网页的一些简单描述 便于在搜索引擎上根据描述搜索到当前网页
keywords 关键字
author 作者
description 描述 一段陈述文字,描述当前网页
html 属性值使用单引号或者是双引号 皆可
-->
<meta charset="UTF-8" />
<meta name="keywords" content="新湖农场"/>
<meta name="author" content="苦行僧" />
<meta name='description' content="路漫漫其修远兮，吾将上下而求索" />
<!--在5秒后 对网页进行刷新 ,并且跳转到http://www.baidu.com -->
<meta http-equiv="refresh" content="5;http://www.baidu.com" />
<title>one</title>
</head><title> 标签
- <title> 标签定义文档的标题，在所有 HTML 文档中是必需的。
- <title>元素：定义浏览器工具栏中的标题丶提供页面被添加到收藏夹时的标题丶显示在搜索引擎结果中的页面标题
- 一个 HTML 文档中不能有一个以上的 <title> 元素。
- 如果您遗漏了 <title> 标签，文档作为 HTML 是无效的。
<body> 标签
- <body> 标签定义文档的主体。负责通知浏览器将指定内容以指定方式在窗口展示
- <body> 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。
总结:
根标签 html 最外层的标签 所有其他的标签都放入该标签中
html根标签只有两个一级子标签 分别是head body
head中一般放的是不显示在网页上 但是又比较重要的信息
body中一般放的是显示在页面上的内容
网页开发工具
集成开发环境（IDE，Integrated Development Environment ）是用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面等工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。所有具备这一特性的软件或者软件套（组）都可以叫集成开发环境。如微软的Visual Studio系列，Borland的C++ Builder、Delphi系列等。该程序可以独立运行，也可以和其它程序并用。IDE多被用于开发HTML应用软件。例如，许多人在设计网站时使用IDE（如webstorm、DreamWeaver等），因为很多项任务会自动生成。工欲善其事必先利其器，一个好的开发工具非常重要。下图列出了常用IDE
下面我们使用Hbuilder来学习，下载builder.zip压缩包解压，在解压后的文件夹中找到Hbuider.exe,直接双击使用，无需安装。