文章目录：
一：网页设计
1.基本概念
1.1 网页
1.2 网站
1.3 工具
2.HTML语言
2.1 基础
2.2 标记
2.2.1 结构
2.2.2 文本
2.2.3 功能
2.2.4 表单
2.3 属性
二：IIS
1.定义
2.主要功能
3.特点与优势
4.应用场景
4.1 安装IIS
4.2 配置IIS
4.3 发布网站
可参考：前端三剑客HTML CSS JS教案（理论+代码+效果图）
一：网页设计
1.基本概念
1.1 网页
概念浏览器访问Web服务器时所看到的画⾯称为⽹⻚（⼜称Web⻚）⽹⻚由超⽂本标记语⾔（HTML）组成分类静态⽹⻚概念纯html格式的⽹⻚通常被称为“静态⽹⻚”相对于“动态⽹⻚”而⾔，它没有后台数据库、不包含服务器端程序，与⽤⼾没有交互格式.html或.htm.mht mhtml⽂件，⼜称为聚合html⽂档或单⼀⽂件⽹⻚，是⼀种将⽹⻚的所有内容保存到⼀个⽂件中的格式.chm chm是微软的⼀种帮助⽂件格式，利⽤html作源⽂，把帮助内容以类似数据库的形式编译储存动态⽹⻚概念：以脚本语⾔编写的程序为基础的，具有数据库访问功能，并且能够与⽤⼾进⾏良好的交互格式：.asp、.aspx、.jsp、.php等
1.2 网站
概念：多个相关⽹⻚合在⼀起便组成⼀个⽹站，⼜称Web站点，保存在Web服务器上，通过域名访问主⻚Home Page，⽤⼾输⼊域名访问Web站点时看到的第⼀个⽹⻚称为主⻚它是⼀个Web站点的⾸⻚，通过超链接可以访问所有的⻚⾯，也可以链接到其它⽹站主⻚⽂件名⼀般为index.html或default.html
1.3 工具
FrontPage：微软公司开发的⽹⻚设计⼯具DreamweaverMacromedia公司开发的⽹⻚设计⼯具，集⽹⻚设计与⽹站管理于⼀⾝它将“所⻅即所得”的⽹⻚设计⽅式与源代码编辑完美结合，在⽹站设计制作领域应⽤⾮常⼴泛⼀般来说，专业⼈员使⽤Dreamweaver，⾮专业⼈员使⽤FrontPage⽹⻚三剑客早期：Macromedia公司的Dreamweaver、Flash、Fireworks后期：Adobe公司的Dreamweaver、Flash、Photoshop
2.HTML语言
2.1 基础
概念Hyper Text Markup Language，超⽂本标记语⾔是⽤于描述⽹⻚⽂档的标记语⾔，由万维⽹协会（W3C）制定，最新版本是HTML5XHTMLthe eXtensible Hypertext Markup Language，可扩展超⽂本标记语⾔是⼀种基于可扩展标识语⾔（XML）的标记语⾔，它结合了XML的强⼤功能及HTML的简单特性可以看成是⼀种增强了的HTML，它的可扩展性和灵活性将适应未来⽹络应⽤更多的需求语法标记html中的标记以⼀对“<>”定界，起始标记的名称前加⼀个斜杠“/”即表⽰结束标记语法上，起始标记和结束标记应成对出现html不⽀持⾃定义标记，xml和xhtml⽀持⾃定义标记属性：标记的功能可通过属性扩展，属性值需要使⽤⼀对双引号或单引号定界格式双标记⽤于有标记内容时，HTML中的⼤多数标记都是双标记<标记 [属性1="属性值1" 属性2="属性值2"]……>标记内容</标记>单标记⽤于没有标记内容时，<br>、<hr>、<img>和<input>是单标记<标记 [属性1="属性值1" 属性2="属性值2"]…… />样式概念：CSS，Cascading Style Sheet，层叠样式表或⻛格样式表，⽤于⽹⻚⻛格的设计说明：通过设⽴样式表，可以统⼀地控制⽹⻚的外观以及创建特殊效果布局概念设计⼀个⽹⻚⾸先考虑的问题是⻚⾯布局⻚⾯布局是对⽹⻚中的各个元素在⽹⻚上进⾏合理安排，使其具有和谐的⽐例和艺术的效果⽅法在⽹⻚设计中，常常借助表格和层来布局⻚⾯表格<table>、<th>、<tr>、<td>等标记使⽤表格可以控制⻚⾯中元素的对⻬，使⼤量的信息整⻬地展⽰在⽹⻚中⽤表格布局⻚⾯需要事先把整个⻚⾯设计出来，对⻚⾯布局不满意时，调整起来也⽐较⿇烦层<div>标记“层”相当于Word中浮动的⽂本框，可以⽤⿏标拖动到⻚⾯的任何地⽅在创建复杂⽹⻚时，常⽤“层”来实现⽹⻚元素的精确定位⾏为概念：⾏为能使⽤⼾极为⽅便地创作出复杂的动画效果，或执⾏某些特定的任务，⾏为包含事件和动作两部分事件指发⽣在⽹⻚元素上的事情，包含单击⿏标、移动⿏标、⿏标悬停等单击⿏标 onClick移动⿏标 onMouseMove⿏标悬停 onMouseOver，⼜叫⿏标经过⿏标移出 onMouseOut，通常和onMouseOver搭配使⽤动作：指事件发⽣时，对应的⽹⻚元素做出的响应
2.2 标记
2.2.1 结构
html><html>…</html>html的所有内容都放置在此标记内<head><head>…</head>head中除了“<title>”标记的所有内容不直接显⽰在浏览器中两个重要标记<title> <title>…</title> head中的标记，显⽰在浏览器的标题栏中<meta><meta charset=?⽂档的编码字符集" /> 浏览器显⽰该⽂档时使⽤的编码这⾥指定的编码必须与⽂件本⾝的编码保持⼀致或兼容，否则会导致乱码body><body>…</body>body中的所有内容都显⽰在浏览器的正⽂区中bgcolor属性：⽤于设置⽹⻚的背景⾊，HTML中所有需要设置颜⾊的地⽅都可以使⽤这些的⾊彩值使⽤常量值bgcolor=?red? 红⾊bgcolor=?green? 绿⾊bgcolor=?blue? 蓝⾊使⽤索引值bgcolor=?#FF0000? 红⾊bgcolor=?#00FF00? 绿⾊bgcolor=?#0000FF? 蓝⾊bgcolor=?#FFFF00? 紫⾊bgcolor=?#000000? ⿊⾊bgcolor=?#333333? 深灰⾊bgcolor=?#A9A9A9? 浅灰⾊bgcolor=?#FFFFFF? ⽩⾊
2.2.2 文本
标题<h1>~<h6><h1>...</h1>，... ，<h6>...</h6>标题标记，以加粗、放⼤的字号显⽰其中的⽂本<h1>的字号最⼤，称为⼀级标题，<h6>的字号最小段落：<p> <p>...</p> 段落标签，⼀对<p>...</p>标签中的内容属于同⼀段，段与段之间空⼀⾏格式<b> <b>...</b> 使⽂字加粗显⽰，也可以使⽤<strong>标记实现同样的效果<i> <i>...</i> 使⽂字斜体显⽰<u> <u>...</u> 给⽂字加上下划线<s> <s>...</s> 给⽂字加上删除线<sup> <sup>...</sup> ⼀对<sup>标记中的内容显⽰为上标<sub> <sub>...</sub> ⼀对<sub>中的内容显⽰为下标font> 说明 设置字体、字号、颜⾊等的标签size <font size=?x?>...</font> 设定字体⼤小，x的值在1~7之间，?size=1?最小，?size=7?最⼤color font color=?...?>...</font>设定字体颜⾊，可使⽤“red”、“green”、“blue等常量值也可以使⽤RGB形式，如color=?#FF0000?（等价于color=?red?）face <font face=?...?>...</font> 设定⽂字的字体，如face=?等线"，表⽰设定⽂字的字体为“等线”
2.2.3 功能
换⾏ <br> <br>或<br/>换⾏标记，连续两个<br>标记的显⽰效果与分段相似（空⼀⾏）在Dreamweaver的设计视图中，按回⻋会⽣成⼀对<p>标记，按“Shift+回⻋”会⽣成⼀个<br>标记分割 <hr> <hr>或<hr/> ⽔平线、分割线标记，显⽰⼀根⽔平线，以分割⽹⻚的不同部分链接<a>说明超链接标记，超⽂本（Hyper Text）因此功能而得名，是HTML中最重要的标记可以设定超链接的对象，常⻅的有⽂本和图⽚对象 功能①⽹⻚之间的超链接，<a href=?url?>...</a>说明单击该链接会打开另⼀个⽹⻚或访问万维⽹中的其它资源（图⽚、⽂件、视频等）创建⽹⻚之间的超链接时，不应使⽤绝对路径，应使⽤相对路径这样当⽹站⽂件夹更名或更换位置时，就不需要重新修改链接了②电⼦邮件超链接，<a href=?mailto:邮箱地址?>...</a>说明单击该链接会打开默认的邮件客⼾端向指定邮箱发送电⼦邮件③命名锚记链接，<a name=?锚记名?></a>说明锚记链接是指链接到同⼀个⽹⻚或不同⽹⻚中指定位置的超链接可以对⽹⻚中的各个部分加上锚记，浏览者只要点击锚记即可快速到达指定的部分属性targettarget=?_self? 链接⽬标在当前窗口中打开，默认值target=?_blank? 链接⽬标在新窗口中打开target=?_parent? 链接⽬标在⽗窗口中打开（使⽤框架时）target=?_top? 链接⽬标在三级窗口打开（使⽤多级框架时）图⽚<img><img src=?url?/>，在⽹⻚中显⽰url指定的图⽚说明⽹⻚中使⽤的图像和⽂件格式主要有GIF、JPEG和PNG为了⽅便管理，图像⽂件⼀般不与⽹⻚保存在同⼀个⽂件夹中，而是存⼊⼀个专⻔的⽂件夹（如images）中应该使⽤相对路径，这样复制到其它计算机中浏览时就不会出现路径问题热点⼀张图像上可以添加多个超链接，称为“图像热点”或“图像地图”在图像中创建多个热点区域，每个热点区域包含⼀个超链接热点形状可以是矩形、圆形或者多边形，热点位置可以⾃⾏设定表格<table>说明表格标记，通过<table>、<th>、<tr>和<td>，可以构造表格表格的最外层标记，表⽰"整个表格"；⼀个<table>标记中可以包含多个<tr>和<td>属性 border默认为0，即没有边框，数字越⼤边框越粗默认的边框样式是带“3D浮雕”效果的相关<th> 定义表格内的表头单元格，⼀般⽤在第⼀⾏，被标记的⽂本会加粗、居中显⽰<tr> 定义表格中的⼀⾏，表格中有⼏对<tr>就有⼏⾏<td>定义⾏中的单元格，⼀对<tr>中有⼏对<td>，那么该⾏就有⼏个单元格属性：这两个属性通常⽤于构建⾮标准的表格colspan 某个单元格跨越的列数rowspan 某个单元格跨越的⾏数列表ul <ul>...</ul>⽆序列表，类似于Word中的项⽬符号（⾮数字符号）li <li>...</li> ⽆序列表中的列表项ol <ol>...</ol>有序列表，类似于Word中的项⽬编号（数字编号）li <li>...</li> 有序列表中的列表项
2.2.4 表单
<form>语法 <form>...</form>说明表单为⽤⼾输⼊信息提供了⼀种有序的结构，表单中⽤来输⼊信息的各种表单元素称为表单域常⻅的表单域有⽂本域、密码域、单选框、复选框、列表、下拉列表、⽂本区域、按钮等所有的表单域都应当包含在⼀对<form>标记中，否则提交按钮和重置按钮会失效属性action=?url?：提交表单时，会把⽤⼾在表单域中填写的所有信息发送到action指定的url中处理methodmethod=?get? 提交的信息直接附加在url的尾部，可⻅且不安全method=?post? 封装在在http的消息主体中，不可⻅，更安全<input>语法 <input type=?...?/>说明type=?text? ⽂本域type=?password? 密码域，其中的内容会显⽰为“*”type=?checkbox? 复选框，可以单选、多选、全选type=?radio? 单选框，在所有的选项中只能选择⼀个type=?submit? “提交”按钮，单击会把表单中的信息提交到<form>标记的action属性指定的url中处理type=?reset? “重置”按钮，单击会清空该表单中的所有信息，每个控件的状态恢复初始值<select>语法 <select>...</select>说明下拉列表框，使⽤multiple属性可以变成能够多选的列表框<option>...</option> 列表框中的选项<textarea>语法：<textarea>...</textarea>说明：⽂本区域标记，⽂本域⽤于显⽰⼀⾏，⽂本区域可显⽰多⾏
2.3 属性
说明：align、valign、width和height属性可以⽤在⼤多数HTML的标记中对⻬align说明 ⽔平对⻬align=?left? 左对⻬align=?center? ⽔平居中对⻬align=?right? 右对⻬valign垂直对⻬⽅式valign=?top? 顶对⻬valign=?middle? 垂直居中对⻬valign=?bottom? 底对⻬⼤小width标记对象的宽度px 像素（绝对值）% 标记对象相对于整个窗口的宽度⼤小（百分⽐例）height标记对象的⾼度px 像素（绝对值）% 标记对象相对于整个窗口的⾼度⼤小（百分⽐例）
二：IIS
1.定义
IIS（Internet Information Services，互联网信息服务）是微软公司提供的基于运行Microsoft Windows的互联网基本服务组件1.它集成了Web服务器、FTP服务器、NNTP服务器和SMTP服务器分别用于网页浏览、文件传输、新闻服务和邮件发送等方面它使得在网络（包括互联网和局域网）上发布信息成了一件很容易的事2.IIS是Windows NT的核心组件之一，提供了基于运行Microsoft Windows的互联网基本服务3.IIS是一种灵活、易于管理的Web服务器，它提供了基于图形用户界面（GUI）的管理工具，称为“Internet信息服务管理器”可用于配置和管理网站及应用程序。通过IIS，用户可以轻松地创建、发布和管理网站，以及提供Web应用程序和服务4.IIS还支持多种编程语言和开发框架，如ASP.NET、PHP、Node.js等使得开发人员可以灵活地使用自己熟悉的工具和技术来构建和部署Web应用程序5.IIS还提供了丰富的安全功能，如SSL/TLS加密、身份验证和授权机制等，以保护Web应用程序和数据的安全
2.主要功能
Web服务器：IIS可以作为Web服务器，托管网站和Web应用程序。它支持多种编程语言如ASP.NET、PHP、Node.js等，使得开发人员可以灵活地使用自己熟悉的工具和技术来构建和部署Web应用程序FTP服务器：IIS提供了FTP（文件传输协议）服务器功能，允许用户上传和下载文件这对于需要在线共享和分发文件的用户来说非常有用NNTP服务器：NNTP（网络新闻传输协议）服务器允许用户访问和发布Usenet新闻组这对于新闻发布和讨论论坛等场景非常适用SMTP服务器：IIS还提供了SMTP（简单邮件传输协议）服务器功能，用于发送和接收电子邮件这对于需要构建自己的邮件服务器的用户来说是一个很好的选择
3.特点与优势
易于管理：IIS提供了基于图形用户界面（GUI）的管理工具，称为“Internet信息服务管理器”用户可以通过它来配置和管理网站及应用程序，无需具备复杂的命令行操作知识可扩展性：IIS支持多种插件和扩展，用户可以根据自己的需求添加新的功能模块或定制现有功能安全性：IIS提供了丰富的安全功能，如SSL/TLS加密、身份验证和授权机制等，以保护Web应用程序和数据的安全同时，它还支持防火墙和入侵检测系统等功能，进一步增强了系统的安全性高性能：IIS采用了先进的缓存技术和优化算法，提高了Web服务器的性能和响应速度同时，它还支持负载均衡和集群等技术，使得系统能够处理更多的并发请求和提供更可靠的服务
4.应用场景
IIS适用于各种规模的网站和Web应用程序，包括个人博客、企业网站、电子商务平台、在线学习平台等此外，它还可以用于构建和管理内部网络中的Web应用程序和服务，如企业内部门户网站、文件共享平台等4.1 安装IIS
1.确认操作系统版本：确保操作系统满足IIS的安装要求例如，IIS 10适用于Windows 10、Windows Server 2016和Windows Server 20192.以管理员身份登录：为了成功安装IIS，需要以管理员身份登录Windows系统3.打开服务器管理器：点击“开始”菜单，找到并打开“服务器管理器”4.添加角色和功能：在“服务器管理器”中，点击“添加角色和功能”按钮在“添加角色和功能向导”中，选择“Web服务器（IIS）”，然后点击“下一步”在“功能”选项卡中，勾选“Web服务器支持”等相关功能，然后点击“下一步”在“确认”页面，检查安装摘要，确保无误后点击“安装”等待安装完成后，点击“关闭”按钮5.注意事项：在安装IIS之前，确保操作系统已经安装了最新的更新和补丁在安装过程中，可以暂时关闭防火墙，以免其阻止IIS的正常安装。但安装完成后，记得重新开启防火墙并配置相应的规则IIS需要.NET Framework支持，请确认.NET Framework已经安装，并且版本与IIS兼容为了避免资源浪费和潜在的安全风险，建议仅安装必要的IIS组件
4.2 配置IIS
1.打开IIS管理控制台：可以通过在运行中输入“inetmgr”来打开。2.配置网站：在IIS管理控制台中，找到左侧面板的“站点”节点，右键单击并选择“添加网站”在弹出的对话框中，输入网站名称并选择要将网站绑定到的IP地址和端口选择网站的根目录，即存放网站文件的文件夹配置其他选项，如访问权限、日志设置等3.配置应用程序池：应用程序池是IIS用来运行网站的进程池。默认情况下，IIS会为每个网站创建一个应用程序池在IIS管理控制台中，找到左侧面板的“应用程序池”节点，右键单击并选择“添加应用程序池”为应用程序池指定名称，并配置其他选项，如.NET版本和进程模型4.配置默认文档：默认文档是当用户访问网站时，IIS默认打开的页面在IIS管理控制台中，选中网站节点，然后找到“默认文档”功能在默认文档列表中，可以添加、删除或调整默认文档的优先顺序5.设置访问限制：为了保证服务器的安全运行，可以限制客户端访问的数量和带宽在IIS管理控制台中，找到网站的“连接限制”或“带宽限制”功能，并进行相应的设置6.配置MIME类型：MIME类型是描述消息内容类型的标准。在IIS中，需要为不同的文件扩展名配置相应的MIME类型在IIS管理控制台中，找到MIME类型配置功能，并添加或修改MIME类型7.创建虚拟目录：虚拟目录是将其他目录以映射的方式虚拟到服务器的主目录下。这有助于节省主目录所在盘的空间，并方便管理上传的文件在IIS管理控制台中，右键单击网站节点，选择“添加虚拟目录”，并按照提示进行配置
4.3 发布网站
1.准备网站文件：在本地环境中创建和调试网站，确保网站文件夹包含所有必需的文件，如HTML、CSS、JavaScript、图像等2.复制网站文件到服务器：将网站文件复制到服务器的本地目录，或者通过FTP上传到服务器确保文件的正确和完整3.绑定域名和主机空间（如适用）：如果使用了域名和主机空间，需要将域名和IIS服务器的主机空间绑定起来具体操作可以根据主机托管商提供的教程来进行4.测试网站：在浏览器中输入服务器的IP地址或域名（如果已绑定），加上端口号（如果有），访问并测试网站确保网站在不同浏览器、不同设备上的兼容性和稳定性5.备份网站文件：在发布网站之前或之后，务必将网站文件进行备份，以防止数据丢失或不可预测的问题发生
