文章目录：
可参考：前端三剑客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：微软公司开发的⽹⻚设计⼯具 Dreamweaver Macromedia公司开发的⽹⻚设计⼯具，集⽹⻚设计与⽹站管理于⼀⾝ 它将“所⻅即所得”的⽹⻚设计⽅式与源代码编辑完美结合，在⽹站设计制作领域应⽤⾮常⼴泛 ⼀般来说，专业⼈员使⽤Dreamweaver，⾮专业⼈员使⽤FrontPage ⽹⻚三剑客 早期：Macromedia公司的Dreamweaver、Flash、Fireworks 后期：Adobe公司的Dreamweaver、Flash、Photoshop
2.HTML语言
2.1 基础
概念 Hyper Text Markup Language，超⽂本标记语⾔ 是⽤于描述⽹⻚⽂档的标记语⾔，由万维⽹协会（W3C）制定，最新版本是HTML5 XHTML the 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> 说明 锚记链接是指链接到同⼀个⽹⻚或不同⽹⻚中指定位置的超链接 可以对⽹⻚中的各个部分加上锚记，浏览者只要点击锚记即可快速到达指定的部分 属性target target=?_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中处理 method method=?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 2019 2.以管理员身份登录：为了成功安装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.备份网站文件：在发布网站之前或之后，务必将网站文件进行备份，以防止数据丢失或不可预测的问题发生