网站中iis是什么意思（什么叫iis全称）

图3.4 关闭Nginx服务

（5）设置防火墙。如果非本机的浏览器想要访问网页，则需要设置防火墙端口的权限。对于大型网站而言，服务器系统一般为Linux，Windows系统下的Nginx安装一般只是为了方便本地开发，非本机浏览器访问的场景比较少，因此防火墙的设置不是必需的。如果开发时有非本机访问的情况，可以暂时关闭Windows防火墙。

2.在CentOS系统中安装Nginx

在Centos系统中安装Nginx时，虽然也可以从官网上下载安装，但是操作比较复杂。因此，这里推荐使用yum安装，这种安装方式简单方便且不易出错，具体操作步骤如下：

（1）添加Nginx源。在默认情况下，CentOS系统中不包含Nginx源，添加Nginx源的命令如代码3.2所示，其中“”为换行符。添加成功后，会在/etc/yum.repos.d目录下多出一个nginx.repo文件。

代码3.2　添加Nginx源的命令

sudo rpm -ivh
http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.
el7.ngx.noarch.rpm

（2）安装Nginx的命令如代码3.3所示。在CentOS系统中，Nginx默认安装在/etc/nginx目录下，配置文件是/etc/nginx/nginx.conf，运行日志的路径是/var/log/nginx/，默认网页资源存放在/usr/share/nginx/html/目录下。

代码3.3　安装Nginx的命令

sudo yum -y install nginx

（3）修改配置。Nginx的配置文件是/etc/nginx/nginx.conf，默认的配置文件如代码3.4所示，其中，“…”是省略的意思，“#”后面是对属性的注释。如果是本地调试，保持默认配置即可。

代码3.4　CentOS系统中的Nginx配置

server {
listen 80; #端口，80为HTTP的默认端口
server_name default_server; #服务名称
…
location / {
root /usr/share/nginx/html; #网页资源文件目录
index index.html; #网站默认网页
}
…
}
…

（4）启动服务。设置Nginx开机自动启动、启动服务和停止服务的命令如代码3.5所示。其中，“#”表示注释部分，输入命令时不需要输入，后文不再赘述。

代码3.5　Nginx的启动命令

sudo systemctl enable nginx #设置开机启动
sudo systemctl start nginx #启动服务
sudo systemctl stop nginx #停止服务

（5）配置防火墙。一般经过步骤（4）的配置就能启动Nginx了，但如果防火墙是开启状态的话，非本机浏览器是不能访问网页的，因此这里需要配置防火墙。配置防火墙的命令如代码3.6所示，命令需要按顺序执行。

代码3.6　配置防火墙的命令

sudo firewall-cmd --add-service=http --permanent #开启防火墙的HTTP服务
#打开端口，根据Nginx的端口配置，替换80即可
sudo firewall-cmd --add-port=80/tcp –permanent
sudo firewall-cmd --reload #重启防火墙

防火墙配置成功后，非本机浏览器访问网页的效果如图3.5所示。

网站中iis是什么意思,什么叫iis全称(5)

图3.5 非本机浏览器访问网页

需要注意的是，如果有明确的Nginx版本要求的话，需要从官网上下载安装。

构造一个简单的网页

安装完Nginx后，有一个默认的网页，如图3.3或图3.5所示。这个网页只有一个html文件，这与我们平常的网页结构不一样，这样的网页会造成我们对前端网页工作原理的理解不够全面。我们一般把一个网页分成一个HTML文件、多个CSS样式文件和多个Javascript文件，因此在介绍前端工作原理之前，我们还需要构造一个简单的网页，该网页将包含一个HTML文件、两个CSS文件和两个JavaScript文件。

注意：本节构造的网页只是为了方便对3.1.3小节的讲解，其中的编码细节不作为现实编码的参考。

1.创建一个HTML文件

创建一个abc.html文件，如代码3.7所示。HTML文件主要用来设置网页的属性和定义页面元素，这个页面的元素主要包括标题、一行文字和按钮。

代码3.7　abd.html文件的代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>简单的例子</title> 
<link rel="stylesheet" href="css_1.css"> 
<link rel="stylesheet" href="css_2.css">
</head> 
<body> 
<div class="title">简单的翻译例子</div> 
<span id="id_text">Hello World.</span> 
<button onclick="translates()">转换</button> 
</body> 
<script src="js_1.js"></script> 
<script src="js_2.js"></script>

</html> 这里需要明确一点，除了用iframe嵌入网页的情况外，一个网页只有一个HTML文件。在HTML的规范中，除了<!DOCTYPE html>这样的标准声明外，其他的内容都应该包含在<html></html>中。而<html></html>里面的内容主要包含头部元素（<head></head>）和主体（<body></body>）两个部分，头部元素主要包含一些网页属性的设置，而主体才是网页元素被定义的部分。

HTML文件可以引用多个CSS样式文件，引用CSS文件的位置一般在<head></head>中，这样有利于网页的加载，在后续工作原理的讲解中会详细说明。

HTML文件可以引用多个JavaScript脚本文件，引用的位置一般在<body></body>之后，这样有利于网页的显示，也能避免一些错误，在后续的工作原理中会详细说明。

注意：网页元素（如按钮等）写在<body></body>外或<html></html>外，网页仍会正常显示，因为浏览器具有容错机制，但这样并非HTML规范的本意。

2.创建两个JavaScript文件

下面创建两个JavaScript文件，用来进行网页的交互处理。第一个文件命名为js_1.js，如代码3.8所示，其内容主要是定义两个变量。

代码3.8　js_1.js文件的代码

var EnglishText = "Hello World.";
var ChineseText = "你好，世界。";

另一个文件命名为js_2.js，如代码3.9所示，其内容是转换网页上的文字。在网页上单击按钮后会调用此函数，代码3.7中的“<buttononclick="translates()">转换</button>”绑定了translates()函数。

代码3.9　js_2.js文件的代码

var translates = function() {
var text = document.getElementById("id_text").innerText;
if(text == EnglishText){
document.getElementById("id_text").innerText = ChineseText;
} else {
document.getElementById("id_text").innerText = EnglishText;
}
}

JavaScript本身没有命名空间之类的限定，只要在同一个HTML文件中被引用就可以互相调用。例如上例中，页面引用了js_1.js和js_2.js两个JavaScript文件，而js_2.js中的函数则可以直接使用js_1.js中定义的变量。

注意：这里的两个JavaScript文件内容可以写在一个JavaScript文件中，分为两个JavaScript文件只是为了模拟多个JavaScript文件的情况。

3.创建两个CSS文件

下面创建两个CSS样式文件。CSS样式文件的作用是给HTML文件中的网页元素提供样式和布局设置，如提供字号大小、间距和颜色等设置。一个CSS文件命名为css_1.css，如代码3.10所示，其内容是定义标题的样式。代码3.7中的“<div class="title">简单的翻译例子</div>”绑定了title这个样式属性。

代码3.10　css_1.css文件的代码