第三章 静态网页技术
前端开发中的静态网页生成和优化技术
前端开发中的静态网页生成和优化技术随着互联网的发展，网页的加载速度成为了用户体验的重要指标之一。
在前端开发中，静态网页生成和优化技术成为了提升网页性能的关键。
一、静态网页生成的意义静态网页生成是指在网页请求到达服务器时，将动态生成的内容事先保存成静态文件，并将其缓存在服务器上，再由服务器直接提供给用户。
相比动态生成网页，在静态网页生成的过程中，服务器没有多余的数据库查询等操作，可以显著减少服务器响应时间，提高网页加载速度。
静态网页生成的核心是将动态内容缓存成静态文件，以便下次请求时直接提供给用户，无需重新生成，从而减少对服务器资源的消耗。
这种技术适用于内容更新频率较低，但访问量较大的网站，例如新闻网站、企业官网等。
二、静态网页生成的实现方式静态网页生成的实现方式有多种，其中较为常见的是使用静态网页生成器和编译器。
1. 静态网页生成器静态网页生成器是一种工具，可以将动态内容转化为静态文件，并提供一些辅助功能，例如自动化部署、资源优化等。
目前比较流行的静态网页生成器有Jekyll、Hugo、Gatsby等。
这些工具通常基于模板语言和标记语言，开发者可以通过编写模板和写文章的方式，生成静态网页。
这样，每次更新内容时，只需要重新生成相关的静态文件，提高了网页更新的效率。
2. 编译器编译器是将一种源代码语言转化为另一种目标代码语言的工具。
在前端开发中，常见的使用编译器的方式是将高级语言（例如TypeScript、Less等）编译为浏览器可识别的低级语言（例如JavaScript、CSS）。
通过使用编译器，开发者可以更灵活地使用一些新的语言特性和语法糖，而无需担心浏览器的兼容性问题。
同时，编译器还可以对代码进行一些优化，从而提高网页的加载速度。
三、静态网页优化技术静态网页生成只是提升网页性能的一个环节，还需要进一步优化以达到更好的效果。
以下是一些静态网页优化的技术。
1. 图片压缩和懒加载图片通常是网页中占用带宽和加载时间最多的资源之一。
《静态网页基本操作》课件
通过安装插件可以支持CSS样式编辑。
JavaScript编辑器
1 2
Visual Studio Code
支持JavaScript的语法高亮、智能提示和调试功 能。
Eclipse
一款流行的Java集成开发环境，也支持 JavaScript开发。
3
WebStorm
一款专业的JavaScript开发工具，提供丰富的代 码提示和自动完成功能。
使用JavaScript实现动态效果
总结词
了解JavaScript基础
详细描述
介绍JavaScript的基本语法和用法，以及如何使用JavaScript在静态网页中实现动态效果，如轮播图、 表单验证等。
谢谢观看
静态网页与动态网页的区别
动态网页的内容会根据用户的 操作或输入实时生成，而静态 网页的内容是预先确定的。
动态网页通常需要后端编程和 数据库支持，而静态网页则不 需要。
动态网页可以根据用户的个性 化需求展示不同的内容，而静 态网页的内容对所有用户都是 相同的。
02
静态网页开发工具
HTML编辑器
记事本
04
CSS基础
CSS选择器
01
02
03
04
元素选择器
根据HTML元素选择要应用样 式的元素，例如p、h1等。
类选择器
通过在HTML元素的class属 性中指定类名来选择元素，例
如.myClass。
ID选择器
通过在HTML元素的id属性中 指定ID来选择元素，例如 #myID。
属性选择器
根据元素的属性来选择元素， 例如input[type="text"]选择 所有类型为文本的输入框。
静态网页制作PPT课件
红色 #FF0000 绿色 #00FF00 黄色 #FFFF00
Pspad软件
演示pspad使用
本课内容结束
请准备9月25日上实验课 地点：综合楼C303、C302机房 上机名单贴在门上
实验内容：WEB服务器的安装
例子:
空格 左尖括号< < 等等
Q3-6 静态网页制作(HTML)
超链接(锚和href属性)
<a> (锚标签) <a href=“”>网易</a>
target属性 name属性 (给锚命名,在一个页面内部跳转) href=“url#锚名称” href=“mailto:aaa@” 电子邮件链接
Q3-5 什么是HTML文件
应该注意的细节
小写标签(尽管HTML不严格限制大小写),下一代 xhtml规定要严格限制使用小写标签
扩展名推荐使用.html 推荐使用纯文本编辑器来学习HTML(pspad) 推荐使用IE和firefox两种浏览器来调试网页,这样
可以获得更强的网页效果兼容性
SUCCESS
THANK YOU
2019/8/14
Q3-2 WWW如何工作?
Q3-2 WWW如何工作?
INTERNET 信息服务 WWW
想象一下我们是如 何接受互联网的服 务的？
软件 Browser
Q3-2 WWW如何工作?
超链接(Hyper Link)
Hyperlink
Q3-2 WWW如何工作?
关键词 keywords
网页(web page)*** Web 服务器(web server)*** Web 客户端(web client)*** 浏览器(Browser)**** 超链接(Hyper Link)****
静态网页大纲
《静态网页》课程教学大纲一、《静态网页》课程说明（一）开课对象：计算机大一（二）课程性质：本课程是计算机网络技术专业的一门职业技术课。
本课程的教学任务是讲授在网页设计中较为流行Dreamweaver。
主要讲解如何应用Dreamweaver创建和管理网站、网页制作基本知识，Dreamweaver网页制作集成工具使用方法等内容。
通过本课程的学习，使学生掌握构建网站的基本知识，熟悉网页开发平台的使用，能够独立的创建个人网站。
（三）教学目的通过本课程的学习，使学生掌握构建网站的基本知识，要求学生能够熟练使用Dreamweaver8的操作环境，掌握HTML的常用语法规则，并能够利用Dreamweaver的强大功能制作出精美的网页，同时能独立创建并管理网站（四）教学内容本课程主要包括基本html语句的语法，各种内容在网页中的插入，表格布局，css样式表，层的使用，站点的管理（五）教学时数教学时数：54学时学分数：3学分教学时数具体分配：（六）教学方式本课是在机房教学，教师以演示讲解为主，学生以模仿后举一反三配合任务驱动来学习。
（七）考核方式和成绩记载说明考核方式为考试。
严格考核学生出勤情况，达到学籍管理规定的旷课量取消考试资格。
综合成绩根据平时成绩和期末成绩评定，由于本课程比较注重学生平时的上机能力，故平时成绩占50% ，期末成绩占50% 。
二、讲授大纲与各章的基本要求第1章html入门教学目的与要求：掌握基本的html语言语法格式，几种最常用标记的插入和属性的设置教学内容和考核：1.1 html基本语法格式（熟练掌握）1.2 通过html语句控制表格，文字，图片一、文本控制（熟练掌握）二、创建和设置表格（熟练掌握）三、插入和设置图片（熟练掌握）四、综合使用教学重点和难点1、认识什么是网页。
2、掌握网页的基本结构。
3、掌握使用记事本结合html语句创建简单网页第2章Dreamweaver基础入门教学目的与要求：通过本章学习，学生应掌握Dreamweaver的启动与退出、文档的基本操作、站点的创建、站点的编辑以及站点的管理等基本知识。
静态网页
静态网页只是由一些HTML、CSS及简单的JS脚本等代码编写的，可在其中插入文字、图片、音频、FLASH视频等。
具有以下特征：1 每个静态网页都有一个固定的URL，且网页URL以htm.html、shtml 等形式为后缀，而不含有“？”。
2 网页内容一经发布到网站服务器上，即成为实际存在的保存在服务器上的文件，每个网页都是一个独立的文件。
3 静态网页的内容相对固定，因此容易被搜素引擎检索。
4 静态网页没有数据库的支持，采用静态网页技术的网站，在制作和维修方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式是很难进行后期的维护和管理的。
5 静态网页的交互性较差，在功能方面有较大的限制。
而动态网页的所谓“动态”是指网页显示需要连接数据库，例如Access、SQL、SERUER数据库等，是动态读取的数据，利于方便更新和修改，这种动态网页多为后台操作更新资料的。
动态网页的网址后缀不是htm、html、shtml、xml等形式，而是以asp、jsp、php、perl、cgi等形式为后缀，并且在动态网页中有一个标志性的符号“？”动态网页一般具有以下特点：1 动态网页以数据库技术为基础，可以大大降低网站维护的工作量。
2 采用动态网站的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等。
3 动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才生成一个完整的网页。
4 动态网页中的“？”对搜索引擎检索存在问题，搜索引擎一般不能从一个网站的数据库中访问全部网页，或者处于技术方面的考虑，搜索引擎不去检索网址中“？”后面的内容，因此采用动态网页的网站在进行搜索引擎的要求。
二静态网站与动态网站网页是组成一个网站的基本元素，一个页面成为网页，多个网页组成则成为网站。
1 静态站点静态站点仅提供单向的信息服务，静态网站是指网站中网页内容是真实存在的网页文件，当用户发送请求时，只是将设计好的并存放在服务器中的网页发送给用户，这个网页中的内容和形式，任何用户在查看时都是相通的。
静态网页毕业论文
静态网页毕业论文静态网页毕业论文一、引言在当今数字化时代，互联网已经成为人们生活中不可或缺的一部分。
随着互联网技术的不断发展，网页设计也逐渐成为一门独特的艺术形式。
静态网页作为网页设计的一种形式，其简洁、快速加载和易于维护的特点使其在众多网页设计中备受青睐。
本篇论文将探讨静态网页的设计原则、技术实现和应用场景，以及对未来网页设计的展望。
二、静态网页的设计原则1. 简洁明了：静态网页设计追求简洁明了的风格，避免过多的装饰和冗余的信息。
通过合理的布局和精心的配色，使网页内容一目了然，提供良好的用户体验。
2. 一致性：静态网页的设计需要保持一致的风格和布局，使用户在不同页面之间能够轻松地进行导航和操作。
一致的设计风格还能够提升网页的专业性和可信度。
3. 易于导航：静态网页的导航设计应当简单明了，使用户能够快速找到所需的信息。
合理的导航结构和明确的标识符能够提高用户的使用效率和满意度。
4. 良好的可读性：静态网页的文字内容应当具有良好的可读性，包括合适的字体、字号和行距等。
通过合理的排版和色彩搭配，使文字内容更加清晰易懂。
三、静态网页的技术实现1. HTML和CSS：HTML是静态网页的基础语言，用于定义网页的结构和内容。
CSS则用于控制网页的样式和布局。
通过HTML和CSS的配合使用，可以实现静态网页的各种设计效果。
2. 图片和图标：静态网页通常会使用图片和图标来增加视觉效果和吸引力。
通过合适的图片选择和优化，可以提升网页的美观度和用户体验。
3. JavaScript：虽然静态网页主要以HTML和CSS为基础，但JavaScript的使用也可以为网页增添一些交互和动态效果。
通过JavaScript的灵活运用，可以使静态网页更具吸引力和互动性。
四、静态网页的应用场景1. 企业官网：静态网页作为企业官网的一种常见形式，可以展示企业的基本信息、产品介绍和联系方式等。
通过简洁明了的设计和清晰的内容布局，可以提升企业形象和吸引潜在客户。
网站的静态网页实现技术
7.1
HTML基础知识
HTML是专门在Internet上进行传输，可以让设计者建立 并能让所有Web的使用者读出的页面。HTML是一种标 识语言，用来创建与系统平台无关的文档。也就是说， HTML不是编程语言而是一种描述性标识语言。
HTML是把一些信息根据需要链接起来的信息管理技术。 人们可以通过超文本中的链接打开另外一个相关的文件， 用鼠标点击文本中的高亮度或带下划线的文字，即可打 开与之相链接的文本，获得所需的信息。
使用上述语句可以产生关于文档作者和关键词的元信息。
7.2
HTML基本标识与使用
<META>还可以用来产生特殊的HTTP头标，送给Web 服务器，用来激活客户端的特殊功能。可以使用 HTTP—EQUIV属性指明头标名，用Content属性指明 其内容。例如：
<META HTTP-EOUIV ＝ "empires" Content ＝ "Mon,10 Sep 2000 09:42:05 GMT"> 上面的语句将产生如下的HTTP头标： empires:Mon,10 Sep 2000 09:42:05 GMT
HTML不是编程语言，而只是一些标记的集合，
这些标记嵌在文本文件中，可以被浏览器识别，使
文本文件在浏览器中以一定方式显示出来。由于多
数标记成对地出现，所以HTML又被称为容器式的 注释语言。在HTML文件中，不同标记的使用、搭 配以及嵌套、链接，就构成了不同风格的网页。因 此，正确地使用HTML中的代码标识即标记是建立 HTML文件的关键。
7.1
HTML基础知识
一、关于HTML(Hypertext Markup language)： Html是一种超文本标记语言，是创建网页时使用的语言。 就其本质而言，是一个基于文本的编码标准，是对网上信 息进行标记的一组规则，通过这些标记规则，告诉Web浏 览器如何显示文本和图形等网页元素。 标记：是一种功能的注释。由W3C组织定义。 超文本：是指含有超链接和多媒体文本。 超链接：从一个资源可以瞬间跳转到另一个资源。 Html语言是主页的基础，你可以通过浏览器的“查看”--“源 代 码“看到该页的HTML代码。不必看到语言就感到害怕， HTML和C语言不一样，它只是一系列标记的组合。
第3章 网页基础速成静态、动态技术
3.3.2 图像的超链接
图片链接有两个好处：网站上有了图片，可以使网站更生动，更 加有说服力；一张图可代替许多文字，使读者更加明白。这样也 使网站节省了许多空间。 想要在插入的图片上加入链接，就要在插入图片开始标记的前面 加入图片开始标记<A HREF=”链接的地址”>，在插入图片结束标 记的后边插入图片链接结束标记</A>。
3.2 文字与段落标记
文字也是网页的一大组成元素，对于文字的修饰， HTML语言提供了文字的标记和属性，这样会使网 页的显示效果更加的美观与直观。
3.2.1 标题标记
标题标记，也叫标题字体。它可以分离大段文字， 概括下文，所以HTML提供了6个等级的标题标记。 标题标记如表3.2所示。 标题标记是从“<H1>”到“<H6>”，字体逐渐变小， 即“<H1>”标记字体是最大的，而“<H6>”标记字 体是最小的。
3.2.4 水平线
水平线标记是用来分开大段文本水平线，用以分 割页面中的不同部分。水平线的标记符是 “<hr>”，在网页中加入此标记符，页面中的 HTML代码会自动识别标记来生成水平线。水平标 记符有3个属性分别是“size”、“widht”和 “noshade”。这此属性的作用如下所示。 size表示水平线的宽度。 width表示水平线的长，用占屏幕宽度的百分比或 像素值来表示。 noshade表示线段无阴影属性，为实心线段。
3.7 JavaScript基础
JavaScript语言的前身叫Livescript。自从Sun公 司推出著名的Java语言之后，Netscape公司引进 了Sun公司有关Java的程序概念，将自己原有的 Livescript 重新进行设计，并改名为JavaScript。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
特殊符号
特殊符号
空格： 大于(>)：> 小于(<）: < 引号（”）："
1、因为<、>等符号在HTML 中已使用，所以必须用其他 符号来代替 2、都以分号结束（；）
版权号：©
• 3.1 HTML简介 • 3.2 HTML常用标签介绍
<head> <title>搜狐-中国最大的门户网站</title> </head>
使用<meta>标签 （1）描述文档类型和字符编码 （2）描述搜索关键字和描述
<head> <head> <meta name= http-equiv="Content-Type" content="text/html; charset=gb2312" <meta "keywords" content= "淘宝,网上购物,在线交易 ,交易市场" /> /> </head> <meta name= "description" content= "淘宝网-亚洲最大、最安全的网上交易平台，提 供各类服饰、美容、家居、数码、……" /> </head>
功能性链接
• 邮箱、QQ链接等
…… <a href="mailto: guimeiWebMater@">站长信箱</a> ……
注释
<!--注释内容 -->
用于增加代码的可读 性，不显示 …… <!-- <li>被注释掉的行将不显示</li> --> <li>正常显示行1</li> <li>正常显示行2</li> ……
<font size="7">一级主题</Font><br/> 一级主题阐述文字 <br /><Br /> <font size="5">二级主题</font><br /> 二级主题相关文字 <P>项目列表1 <p>项目列表2 <p>项目列表3
W3C提倡的Web结构
规范的示例
W3C提倡的Web结构： 1、内容（结构）和表现（样式） 分离 2、HTML内容结构要求语义化
…… <a href="../web1.htm">上级目录</a> <a href="../../web2.htm">上上级目录</a> …… 上上级目 录：../../
上级目录：../
云南工商学院：朱晓晶
超链接的三类应用场合
• 页面间链接
• 锚链接
• 功能性链接
常用于网站 导航
锚链接
• 实现锚链接 • 1、定义标记(锚)： <a name="标记名">目标位置</a>
• 3.3 表格布局
• 3.4 表单布局 • 3.5 框架布局
2016年9月18日星期 日
信息与工程学院
表格的应用
门户网站应 购物网站 用表格 应用表格 论坛中应用 表格
基本语法
<td>…</td> 定义列
<table> <tr> <td>第1个单元格的内容</td> <td>第2个单元格的内容</td> ...... </tr> <tr> <td>第1个单元格的内容</td> <td>第2个单元格的内容</td> ...... </tr> </table>
标题标签
…… <body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> </body> ……
h1最大 h6最小 前后隔行
基本块级标签——段落
• 段落标签
前后换行， 类似教材中 的段落
<tr>…</tr> 定义行
<table>...
</ table>定 义表格
跨行、跨列
…… <table width="200" border="1"> <tr> <td colspan="3">学生成绩</td> </tr> <tr> <td rowspan="2">张三</td> <td>语文</td> <td>98</td> </tr> <tr> <td>数学</td> <td>95</td> </tr> ....代码同上两行.... </table> ……
常用于布局的块级标签—— DIV层
…… <div style="width:400px; height:300px; background:#9FF"> <p>……</p> div标签可内嵌到<p>等标签 <h3>新人上路</h3> 内，作为普通块状元素使用 <ul> …… </ul> div其实就是一个...... </div> …… 一般当作结构化块状元素使用，作 为逻辑分区（分块）即容器来使用
行级标签——换行标签
• 换行标签 <br/>
和<p>的区别： 前后不换行
…… <p> 北京欢迎你，有梦想谁都了不起！<br /> 有勇气就会有奇迹。<br /> 北京欢迎你，为你开天辟地<br /> 流动中的魅力充满朝气。<br /> 北京欢迎你，在太阳下分享呼吸<br /> 在黄土地刷新成绩。<br /> 北京欢迎你，像音乐感动你<br /> 让我们都加油去超越自己。<br /> </p> ……
单个标签的闭 合形式
横线用于内容 分割
常用布局的块级标签—— 有序列表
• 有序列表标签
有序列表 …… <body> <h3>注册步骤：</h3> <ol> <li>填写信息</li> <li>收电子邮件</li> <li>注册成功</li> </ol> </body> ……
常用布局的块级标签—— 无序列表
colspan 跨3列
rowspan 跨2行
表格布局
图文布局，数据 规则整齐
表单布局， 同样要求数 据规则整齐
图文布局的实现
图文布局的实现
整个是5行2列的表格,实 际布局时border=“0”隐 藏边框
…… 公告栏：跨2列 <table border="1px"> <tr> <td colspan="2"><img src=“…" alt="公告栏" /></td> 图片：跨4行 </tr> <tr> <td rowspan="4"><img src=“…" alt="公告左侧图" /></td> <td>大学要求老师开网店</td> </tr> <tr> <td>安全锤网上大热销</td> </tr> …… </tr> </table> ……
2016年9月18日星期 日
信息与工程学院
• 3.1 HTML简介 • 3.2 HTML常用标签介绍
• 3.3 表格布局
• 3.4 表单布局 • 3.5 框架布局
2016年9月18日星期 日
信息与工程学院
HTML简介 HTML
• HTML：Hyper Text Markup Language 超文本标签语言 • HTML：网页的“源码”
这种效果可以和无序列表互相 替代，因dt是块状元素，所以 常用于图文混编的布局场合
…… <body> <dl> <dt>咖啡</dt> <dd>一种黑色的热饮料，原料据说是咖啡豆，非洲盛产这类原料。 </dd> <dd>可以提神，刺激神经。</dd> <dl> </body> ……
常用布局的块级标签—— 描述标签
行级标签——图像标签
• 图像标签
…… <img src="images/drink.jpg" alt="精品热卖：高清晰，30寸等离子电视" title="精品热卖：高清晰，30寸等离子电视" /> ……