IP 地址有 IPv4 和 IPv6 两个版本。IPv4 地址长度是 32 bit，4 个字节，每个字节是独立取值，通常用点分十进制的形式表示。例如，192.168.0.100。IPv4 地址范围是 0.0.0.0 ~ 255.255.255.255，最多包含 4294967296（2^32) 个 IP 地址。而 IPv6 的地址格式是八元组形式，比如 2001:0DB8::1428:57ab。本节只讨论 IPv4 地址。IPv4 地址通常划分成网络 ID和主机 ID两部分。比如：IP 地址分类划分如下：分类起始地址结束地址A0.0.0.0127.255.255.255B128.0.0.0191.255.255.255C192.0.0.0223.225.255.255D224.0.0.0239.255.255.255IP 地址分类划分缺乏灵活性，对于 A 类地址来说，网络 ID 只有 2^7 = 128 个，但是主机 ID 多达 2^24 = 16777216 个，主机 ID 浪费很大。对于 C 类地址来说，网络 ID 可以有 2^21 = 2097152 个，但是主机 ID 只有 2^8 = 256 个，对于有些组织来说主机 ID 不够划分。于是 1993 年出现了 CIDR（Classless Inter-Domain Routing）的编址策略，叫做无类别域间路路由选择。CIDR 编址是一种 IP 地址的压缩表示方式，将 IP 地址分为网络前缀和主机标识两部分，形如 A.B.C.D/L 的表示方式，L 是一个小于 32 的十进制数字，代表网络前缀占用 L 个比特，主机标识占用 32 - L 个比特。比如，200.101.80.0/20 表示网络前缀占用 20 个比特，主机标识占用 12 个比特。在 CIDR 编址方式下，如何通过 IP 地址快速确定网络 ID 呢？是通过子网掩码来确定的。对于形如 A.B.C.D/L 的子网，子网掩码是由 L 个 bit 1 和 32 - L 个 bit 0 组成的二进制数。只要把 A.B.C.D 和子网掩码做一个按位与(&)运算，就可以得到网络 ID。可以说，形如 A.B.C.D/L 的表示，可以唯一确定一个网络 ID，我们通常把 A.B.C.D/L 表示叫做网段。你可以说 A.B.C.D/L 表示了一个网段，网段就是形如 A.B.C.D/L 的表示形式。比如，200.101.80.0/20 网段的子网掩码的二进制形式是 11111111 11111111 11110000 00000000，十进制形式是 255.255.240.0。将 200.101.80.0 和 255.255.240.0 做按位与(&)运算，得到的网络 ID 是 200.101.80.0。那么 IP 地址 200.101.96.1 是 200.101.80.0/20 网段的 IP 吗？我们只需要把 200.101.96.1 和 255.255.240.0 做一个按位与（&）运算，查看结果是否等于 200.101.80.0 即可。采用 CIDR 编码方式优势如下：简单灵活有效利用 IP 地址空间减小路由表规模。比如 200.101.80.0/20 网段中的 IP 地址 200.101.80.100，如果按照分类，属于 C 类地址，网络 ID 占用 24 个 bit，主机 ID 占用 8 个 bit；如果采用 CIDR 方式，网络 ID 占用 20 个 bit，主机 ID 占用 12 个 bit。对于主机较多的网络，极大地提高了 IP 地址的利用率。
定义网址变量 url，url 中存储的是我们要爬取的网站，这个小爬虫中我们要爬取的网站是：https://www.imooc.com。url = "https://www.imooc.com" #慕课网首页地址
网页的头部信息指的就是 <head> 标签里的内容。你可以在这里面设置很多网页的属性，比如刷新，比如网页标题，比如网页的关键词等。<head> 标签内也可以容纳脚本（ script ）标签，要正确认识 <head> 在网页结构中的地位。下面让我来结合 Dreamweaver CC 2018 详细介绍一下相关知识。
在这个知识点中，将为大家着重讲解一下如何设置网页说明信息。下面来看一下具体操作：设置说明信息的操作和设置视角完全一样。如下图展示的一样，先在插入中选择 HTML 然后选择说明即可发现网页代码中多了一条 meta 信息。如图所示：
uni-app 的 API 与微信小程序 API 基本一致。掌握微信小程序 API 对后面的开发很有帮助。微信小程序 API 文档:https://developers.weixin.qq.com/miniprogram/dev/api/
网页开发的基本三大件为 HTML、CSS、JavaScript，如果将 HTML 比作骨架，CSS 比作皮肤，那 JavaScript 就是可以让骨架动起来，改变皮肤性状的存在。现代的前端应用离不开 JavaScript ，随着浏览器的性能越来越好，产品交互越来越复杂，JavaScript 的地位也越来越高。表单验证、动画效果甚至 3D 应用，均可以由 JavaScript 来完成。使用 WebGL 制作的 3D 应用，可以直接运行在现代浏览器
本小节知识点中，将带领同学们学习如何从 HTML 角度给网页添加多媒体信息。具体要学会添加哪些信息呢？这其中包含了超链接，视频，音频。同时，在本节的最后一个知识点中，还将为同学们讲解如何给 Dreamweaver CC 2018 添加扩展功能。众所周知，工具的强大有时候并不在于工具的本身，也在于它和外界元素的扩展能力有多强。也正是由于这种扩展功能，会让大家感觉到学习 Dreamweaver 的意义远远不止于知识点，进而有一种买一赠三的感觉。那么题外话不多说，我们立刻来看一下这些功能是如何实现在网页中实现的吧！
这里我们只说 IPV4，它是由 4 个 4 个字节数字组成的主机地址，比如：124.56.124.103。127.0.0.1（localhost）代表了本地回送地址，它是一个特殊的地址，代表了本地计算机。
第一步：我们还是选择创建一个空白的 HTML 文档。按照前几节中介绍过的内容，我们依次点击菜单栏中的文件，新建，新建空白 HTML 文档。切换到代码视图我们可以看到，软件自动创建了好一个文档无标题文档。并且在 <head> 标签里已经有了默认的内容。它们分别是 meta 标签， link 标签，title 标签。如下图。我们来一一解释一下各个标签的作用。1.1.1 <meta>标签<meta> 标签是一个位于网页头部标签中的辅助性标签。它的作用是为页面提供元信息，比如供搜索引擎使用的关键词等。它有 http-equiv 属性和 name 属性。这些属性带有自己的参数，通过参数的变化来实现对网页的控制。比如我们常能看到通过 <meta> 标签来设置字符集。在这里大家一定要注意 <meta> 标签一定是位于头部标签内部的，不能出现在其他地方，要严格执行这一点标准。1.1.2<link>标签<link> 标签是用来链接的标签。这里大家肯定会问链接什么。在一个工程中，我们常常用这个标签来链接样式文件，如 CSS 文件。脚本文件，如 Javascript 文件。这个标签在 Android 开发等其他领域的开发中还会有其他的作用，在这里我们不做过多赘述。我们只需要知道并且重点记忆的是：<link> 标签用来链接 CSS 文件和 JS 文件。1.1.3 <title> 标签毋庸置疑，这是个见名知意的标签，这个标签的作用是为网页设置在浏览器中显示的标题。对于今天大多数的选项卡式的浏览器来说，这里的标题会展是在选项卡顶部位置。网页的标题往往是为了让用户能通过网页标题来获取他现在所在网页的功能。同学们有没有想过，如果一个网页我们点开之后由于各种原因迟迟看不到网页标题，用户有极大概率会以为自己点错了，或者放弃浏览网页。因此，一个好的提醒意识，也是一个网页设计者必备的素养之一。
注册微信小程序账号，获取到 AppID，我们后面配置的时候会用到。在 HBuilderX 工具栏，点击发行，选择小程序-微信。输入小程序名称和 AppID，单击发行就可以了。这样我们就会获得一个微信小程序的打包文件，接下来我们来发布微信小程序项目，打开微信小程序开发者工具，导入刚刚生成的微信小程序项目的打包文件，在微信小程序开发者工具中先测试一下，项目运行是否正常，项目测试没有问题后，点击右上角>>按钮，上传代码就可以发布微信小程序了，最后等待微信团队审核通过，别人就可以在线上访问到你的项目了。
在学习完如何利用 DReamweaverf CC 2018 改变页面的CSS外观后，接下来我们要给大家介绍一下如何设置页面的字体。Dreamweaver CC 2018 作为工具强大之处就在于托管和集成功能了得。首先，我们还是到第一个知识点中涉及到的页面属性页面。在弹出的页面中我们可以看到分类中有外观选项，点击它后看到右边出现了我们想要设置的字体属性。接下来只要修改相关属性就可以改变整个网页的字体啦。
在之前的章节中，老师已经通过标签的基础讲解给大家讲述了如何在网页中插入文本，图片，音频，视频。这些形形色色的不同类型的文件，共同构成了丰富多彩的多媒体世界以及多媒体网页。根据我们的认知，网页元素都是多元化的，绝对不可能仅仅由文字和图片，或者图片和视频构成。现代网页设计多数都是融合了多媒体，超媒体，流媒体等综合的媒体形式。那么本节我们将继续讲解网页中的音频和视频。力图在一个新的深度和高度上为带领大家学习网页中的多媒体元素。那么本节老师规划了四个小知识点，首先是在网页中插入视频，其次是在网页中插入音频，再有是在网页中添加背景音乐，最后是添加插件。同学们可能会问，这个插入视频和音频和我们之前学习的为网页插入视频和音频有什么区别？区别当然有！上次我们主要是通过 HTML 标签的形式让大家了解插入音频和视频的代码设计层面的原理。今天我们将完全通过 Dreamweaver CC 2018 来为网页中添加音频和视频！下面就请跟随老师的操作步骤和讲解一起来开始今天的学习吧！
把 input 的 type 设置为 url则表示网址框，那么输入的内容会有规则限制，输入的内容需要以 http:// 或者 https:// 开头 ，且 @ 后必须有内容才满足验证规则，否则会有错误提示。代码如下：<input type="url">Tips：这里的网站和我们平时输入的网站不同，前面必须加上网络协议，既 http:// 或者 https://
本地电脑根据数据包检查目标 IP 是不是本地局域网的，是的话直接广播 MAC 寻址，不是的话传输给局域网的出口路由器；出口路由根据路由表信息找查自己的下一台设备发送出去；网络上的其他设备也同样检查自己的路由表信息，决定发送的下一跳是哪里，直到到达目标的路由；目标路由接收，广播数据包的目标 MAC 地址；目标主机收到广播包，拆开发现是自己的，于是数据顺着网络模型往上汇报。
前端应用的部署更加简单，我们直接在云服务器上下载 nginx 然后解压。打开网址 http://nginx.org/en/download.html ，点击下图中的链接下载即可。nginx 下载链接下载解压后，将前端页面直接放到 nginx/html 目录下即可。当然如果有很多网页，可以先在该目录下建立子目录便于归类网页。我们建立 shop-front 目录（表示商城系统的前端项目），然后将网页放入其中，效果如下：商城系统前端项目目录内容注意还需要修改 goods.html 中访问的后端 URL 地址，假设云服务器的公网 IP 为 x.x.x.x ，则修改为：实例：$.ajax({ type: "GET", url: "http://x.x.x.x:8080/goods", //后端接口地址 dataType: "json", contentType: "application/json; charset=utf-8", success: function (res) { $.each(res, function (i, v) { row = "<tr>"; row += "<td>" + v.id + "</td>"; row += "<td>" + v.name + "</td>"; row += "<td>" + v.price + "</td>"; row += "<td>" + v.pic + "</td>"; row += "</tr>"; $("#goodsTable").append(row); }); }, error: function (err) { console.log(err); } });此处解释下后端地址 http://x.x.x.x:8080/goods ， HTTP 代表协议， x.x.x.x 代表云服务器公网地址， 8080 是我们后端项目的启动端口，由于我们没有在配置文件中设置，所以默认就是 8080 ，最后 goods 是控制器中设定的后端接口路径。双击 nginx.exe 启动 nginx ，由于 nginx 默认启动端口是 80 ，所以此时访问 http://x.x.x.x ，效果如下，说明 nginx 启动成功！nginx 已启动成功
自打我们开始学习网页设计，我们可以发现，我们大多数设置字体的方式是通过网页的现有的 font 标签的属性来设置。可能有的同学就会有疑问了，这些从一开始就可以轻松设置的字体来自于哪里？在遵循 W3C 规范的标签使用过程中，字体的解析都是由浏览器参与完成的。你可以理解为浏览器这个独特的系统提前预设或者内置。那么，既然是预设内置，就必然面临被人们看腻，千篇一律，可组合性太低等缺点。那么如果作为一个个人网页设计者，如何才能从浏览器预设内置的字体中跳出来，追求自己想要的字体，比如 Android 手机，或者 iPhone 手机中的各式各样的字体？首先是能不能的问题，在这里老师可以明确告诉大家，能！然后是如何去使用这些外来的字体呢？我们一般分成两种使用方式。第一种：在早期的一段时间内，有些网页设计者采用的就是这种方式，也就是用部分文字图片替代部分文字，以追求独立于浏览器内置预设字体之外字体的效果。这里说的部分文字图片是什么意思呢？就是图像工作者，先用制图软件制作出一些不同样式字体的文字，然后把它们作为类似活字印刷术的字块做成字库，这样就可以在用到哪个字的时候，就用我们制作好的这个字的图片去替换，从最终的显示效果和结果上看根本没有任何区别。第二种：第二种就是加载一些第三方的字体文件库，比如早期常见的有 Goole 公司提供的 Goole Web Fonts。到后来，有我们今天要说的 Adobe Edge Web Fonts，作为网页设计者和网页用户，这二者并不能看出太大的区别。而且我们今天讲到的 Adobe Edge Web Fonts 加载字体速度很快，使用起来十分流畅。加上它与 Adobe Creative 的深度融合，如果你是一个 Dreaweaver CC 的使用者，那么 Adobe Edge Web Fonts 绝对是你更换网页字体的不二选择！
将鼠标悬停在网络图标时，可以查看请求的本地和远程 IP 地址。如果你发出的是 https 请求，网络图标上会挂一个锁，还会显示证书信息。如果你在全局设置中启用了 SSL 验证，并且验证失败，Postman 会在响应区域指出错误。单击该链接在全局禁用验证，并立即再次运行该请求。
通过属性 redirect 指定重定向的路由地址：const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ]})示例：782代码解释：HTML 代码第 12-13 行，我们定义了两个跳转链接。HTML 代码第 15 行，我们使用 <router-view></router-view> 组件来渲染匹配组件。JS 代码第 5-7 行，我们定义了组件 Index。JS 代码第 9-11 行，我们定义了组件 Article。JS 代码第 13-17 行，我们定义了路由数组：根路由，地址为 ‘/’，重定向到路由地址 ‘/index’。首页路由，地址为 ‘/index’，匹配组件 Index。文章路由，地址为 ‘/article’，匹配组件 Article。JS 代码第 19-21 行，创建 router 实例，然后传 routes 配置。JS 代码第 25 行，通过 router 配置参数注入路由。
路由器：IP 寻址，实现跨网段通信；交换机：MAC 寻址，起到汇聚机器的作用；DHCP 服务器：为局域网的机器动态分配 IP 地址。……
IP 地址，物理地址网站后台访问地址，密码信息家庭成员信息，电话信息生日（很多人的秘密是生日日期）公司信息，同事信息
阿里云 AI (https://ai.aliyun.com) 致力于构建最全面、最开放、最前沿的AI开放平台，从 2015 年开始，阿里云推出 AI 产品，包括语音识别，还有图像识别、视觉识别等 130 多款细分产品，适用于 300 多个场景。阿里云的 AI 解决方案阿里云提供了提供最易用的 API、SDK 等开发组件，助力企业快速高效的实现产品升级。对每项产品提供多种编程接口，包括：Python、Java、C++、ios、Android、Restful 等。以语音合成为例，阿里云 AI 的语音合成 Python SDK 提供了如下接口：SpeechSynthesizer，设置语音合成请求参数，发送语音合成请求。SpeechSynthesizerCallback，用于获取语音合成结果。
1. 独立的页面维护了全局 错误码错误码由5位整数构成2. 每个接口一个独立的 参数说明页面正常情况下出参只返回业务实体异常情况才有 errCode errMsg每个接口下也可能有自己的业务错误码
如果要下载 Eclipse，我们建议直接去其官网下载。Tips：目前 Eclipse的官网地址是：https://www.eclipse.org/进入官网后，我们会看到页面右上角有一个 Download 的按钮，点击该按钮即可进入下载页面：
如果记录数量很多，服务器不可能都将它们返回给用户。API 应该提供参数，过滤返回结果。比如，我们想获取全校师生的个人信息，如果将这些信息一股脑地全部展示在网页上，是不明智也是不现实的。如果数据量太大，在实际开发中我们会采用分页展示的形式。另外，如果想在一次考试后，按照成绩高低展示学生信息，那么可以通过过滤信息来实现。所谓过滤，就是在 URL 中添加一下限制参数。下面是一些常见的参数。?limit=10：指定返回记录的数量?offset=10：指定返回记录的开始位置。?page=2&per_page=100：指定第几页，以及每页的记录数。?sortby=score&order=asc：指定返回结果按照学生的成绩（score）正序（asc）排列顺序。参数的设计允许存在冗余，即允许 API 路径和 URL 参数允许有重复。比如，想要查询某个班级所有学生信息，我们可以设计 GET /classes/ID/students 与 GET /students?class_id=ID 两种地址，任何一种都可得到相同的结果。
众所周知，无论你是编辑过 word 文档的同学，还是写过论文的同学都应该知道，居中是一个很好用的工具，它会让你的整个文档中的内容看起来特别顺眼。一样地，我们网页设计中让我们的网页元素能够居中，也是为了用户在访问我们的网站的时候，能够更加清楚地识别到我们想要表达的信息。试想一下，如果网页中的文字或者图片摆放的左左右右，十分奇怪，又指望哪些人能喜欢我们制作的网页呢？
接下来，我们在 a 标签中添加一段文字欢迎学习慕课网wiki课程–创建超链接！ 并为 a 标签添加 href属性，这个元素属性 href 描述的是 a 标签与哪个地址相“链接”。你可以链接到百度，google 等互联网上的网站。在这里我们以百度作为测试，如下图：接下来，我们打开浏览器，预览一下超链接在网页中的效果，效果请看下面这张图片：
打开虚拟机，点击如图所示的 虚拟网络编辑器：打开虚拟网络编辑器之后，选择’VMnet8’，然后点击右下角更改设置：如下图所示选择和点击操作：在打开的 NAT 设置中填写网关地址：点击应用和确定之后回到第2步打开虚拟网络编辑器：勾选点击 使用本地 DHCP 服务将 IP 地址分配给虚拟机(D)，然后点击 DHCP设置：填写 起始 IP 地址和 结束 IP 地址，然后点击 确定：Tips：上图中标注的 ip 地址范围要和前面子网 ip 处于同一个网段中。点击 应用，然后再点击确定即可：
a 标签为双标签，需要有首尾标签。a 标签的 href 属性为必填属性，表示该 a 标签点击过后跳转网页的地址。例如：<a href="https://www.imooc.com/">去往慕课网</a>在网页中会呈现以下效果：注意:a 标签的 href 属性必须添加网络协议，如：HTTP 或者 HTTPS 协议，一般为 HTTPS 协议，不能单纯的编写网址；a 标签有很多默认样式，默认字体为蓝色，文本有下划线，点击过后，字体变为偏紫色；a 标签默认在本页面跳转，既不会新开一个网页跳转；a 标签的 href 属性如果为错误的网络地址，则页面会跳转，但不会显示网页的内容。a 标签还有一个属性为 target，表示跳转的网页为在当前页面跳转，还是新开一个页面跳转。默认值为 _self,表示为在当前页面跳转，如果将 a 标签的 target 属性设置为 _blank，则表示新开一个网页跳转，代码如下：<a href="https://www.imooc.com/" target="_blank">去往慕课网</a>a 标签的 target 属性为可选属性。
在上一节中，大家学习了表单的入门知识，我们要在上节知识点勤加练习的基础上，才能更好地适应本节知识点的学习。表单在网页设计和交互中的重要性不言而喻，在今天的网页设计中，网页中无大大小小用到表单的地方不计其数。表单中的内容也越来越丰富。只学习了上一节当中的图像按钮，文本域是远远不够的。因此，这节老师还要带领大家学习一些表单中新的元素。具体包括表单中的单选按钮，复选框，密码框元素。这些元素的使用将再一次极大地丰富了我们构建的 web 网页。
我们先来学习一下如何在 Dreamweaver 中创建一个空白文档。操作步骤：步骤1：首先，在你的电脑桌面上找到 Dreamweaver 图标，双击打开桌面上的 Dreamweaver.exe 。步骤2：点击文件，点击创建，选择HTML，填写一些页面信息后，最后点击创建：经验：在这里我们可以看见 Dreamweaver 不仅可以创建 HTML 文档，还可以创建 XML、XHTML、JSP、ASP 等多种类型的文档。从这里我们可以看到，Dreamweaver 的功能远远不止创建静态网页，而是构建一个动态的功能强大的网站。什么是静态网页？什么又是动态网页？一般情况下，我们讲的静态网页就是作为使用者的你，不能够对网页展示的信息进行更改的。而动态网页，正是你在现代社会中看到的那些可以用鼠标点击，并且给你的点击做出响应的网页。咱们可以理解静态网页为没有生命力的死掉的网页。动态网页是触角灵活的活网页。步骤3：点击菜单栏中修改按钮，在弹出的下拉列表中，选择页面属性。点击页面属性，在这里我们可以看到，我们可以通过这个页面属性功能，设置页面的尺寸，大小，背景颜色，字体，排版方式，超链接样式等。
