第三章 静态网页技术
前端开发中的静态网页生成和优化技术
前端开发中的静态网页生成和优化技术随着互联网的发展，网页的加载速度成为了用户体验的重要指标之一。
在前端开发中，静态网页生成和优化技术成为了提升网页性能的关键。
一、静态网页生成的意义静态网页生成是指在网页请求到达服务器时，将动态生成的内容事先保存成静态文件，并将其缓存在服务器上，再由服务器直接提供给用户。
相比动态生成网页，在静态网页生成的过程中，服务器没有多余的数据库查询等操作，可以显著减少服务器响应时间，提高网页加载速度。
静态网页生成的核心是将动态内容缓存成静态文件，以便下次请求时直接提供给用户，无需重新生成，从而减少对服务器资源的消耗。
这种技术适用于内容更新频率较低，但访问量较大的网站，例如新闻网站、企业官网等。
二、静态网页生成的实现方式静态网页生成的实现方式有多种，其中较为常见的是使用静态网页生成器和编译器。
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。
静态网页设计(第3章 站点的创建与管理)
3.1.2 创建本地站点
1. 创建方式 2. 站点名字
3. HTTP
4. 服务器技术 5. 编辑方式
6. 连接服务器方式
7. 高级设置
2010级中专计算机应用技术班《静态网页设计》课件——张志刚
3.2 站点的管理 1. 切换站点
2. 编辑站点
3. 复制站点 4. 删除站点 5. 导入站点 6. 导出站点
远程站点：创建的站点及相关文档都放在处于Internet中的Web服务器内。
3.1.1 认识“文件”面板 1. “文件”面板的主要功能：
① 管理本地站点
② 管理远程站点 ③ 连接网络应用服务器，预览动态网页
2010级中专计算机应用技术班《静态网页设计》课件——张志刚
2. 打开“文件”面板
3. “文件”面板构成
2010级中专计算机应用技术班《静态网页设计》课件——张志刚
3.3 管理网站中的文件和文件夹
我们可以直接在站点管理器中创建文件和文件夹，
以实现更高效的文档管理。 1. 创建文件夹和文件 2. 移动和复制文件（鼠标拖动方法更快捷） 3. 重命名文件夹和文件 4. 删除文件夹和文件
2010级中专计算机应用技术班《静态网页设计》课件——张志刚 3.4 使用“资源”面板管理网站中的资源 “资源”面板可管理网页中所使用到的图片、动画、视频等元 素，可有效地管理和组织网站中的元素。 3.4.1 使用“资源”面板 打开 收藏方式 3.4.2 中页面中使用资源 向文档中添加资源 改变文档中所选文字的颜色 3.4.3 选择和编辑资源 选择一个或多个资源 编辑资源
2010级中专计算机应用技术班《静态网页设计》课件——张志刚
第3章 站点的创建与管理
无论是网页是新手，还是专业设计者，网站的建设都要从创建站点开始。 3.1 站点的创建
简述静态网页的工作原理
简述静态网页的工作原理
静态网页的工作原理：
一、客户端概念
1.浏览器：客户端用的浏览器，可以对HTML文件使用对应的标准解析，直接以可视化的网页嵌入浏览器窗口中呈现出来，为用户显示出信息内容和网页样式。
2.客户端脚本：可以在用户端脚本中定义会绑定到用户端事件来产生响应的代码，同时可以解析和显示网页的动态信息，以及交互式的 web 应用功能。
二、服务器概念
1.静态服务器：静态服务器是一种没有动态功能的服务器，它只能处理静态文件（即HTML文件），不能做任何动态处理，例如运行CGI脚本。
2.动态服务器：动态服务器可以动态地处理客户端请求，通过CGI、数据库等技术，可以更自由地访问网站中的内容，从而提供一种即时、可靠又多样的 web 服务。
三、工作原理
1.浏览器请求：客户端用浏览器发出一个（URL）请求，向服务器发出HTTP / HTTPS请求。
2.服务器响应：服务器端接受这个请求，查找对应静态页面文件，然后将其返回到浏览器端。
3.浏览器把HTML文件的源码解析并显示出来：浏览器端解析服务器获得的HTML文件，并将其置入相应的位置，依据解析出来的文本样式，以可视化的形式呈现给用户。
《静态网页的制作》课件
表单验证的实现
验证用户输入
使用JavaScript可以验证用户 在表单中输入的数据，确保数 据的正确性和有效性。
防止恶意输入
通过JavaScript的验证，可以 防止恶意用户输入对网站造成 安全威胁的内容，如SQL注入 、跨站脚本攻击等。
提高用户体验
通过实时验证，用户可以立即 知道输入的数据是否符合要求 ，提高用户体验。
动态内容的生成
数据动态展示
使用JavaScript可以动态展示数据，如动态表格、图 表等。
动态内容更新
通过JavaScript可以动态更新网页内容，根据用户的 操作或时间等条件进行内容的变化。
个性化内容推荐
使用JavaScript可以根据用户的喜好和行为，推荐个 性化的内容和产品。
06
静态网页的优化与发布
总结词：详细描述
动画：CSS提供了关键帧动画，可以创建复杂的动画 效果。通过改变元素的属性值，可以实现元素的移动
、旋转、缩放等动画效果。
过渡：CSS的过渡属性可以实现元素属性值的变化效 果，如颜色、大小等。通过过渡效果，可以创建平滑
的视觉效果，提高用户体验。
05
JavaScript在静态网页中的应用
80%
特点
可以实现响应用户操作、动态更 新内容等功能，提升用户体验。
图像处理软件
作用
用于处理和优化网页中使用的图片。
常用软件
Photoshop、GIMP等。
特点
可以进行图片裁剪、调整色彩、添加滤镜等操作 ，提高图片质量。
03
静态网页的基本构成
HTML文档结构
HTML文档的基本元素
HTML文档由`<!DOCTYPE html>`、`<html>`、`<head>`和`<body>`等元素组成， 每个元素都有其特定的作用。
系列三静态网页设计技术系列课程简介
课程简介ITCAST签约讲师金旭亮更多精彩课程请见/ I TC ASITCast（乐知学堂）是CSDN与多家知名培训机构合作建立的在线教育平台，我们将和各个领域的IT专家和教育出版机构一起摸索出能够满足IT专业人士学习需求的新型在线教育模式，成为IT专业人士学习提高的一种新的选择。
关于ITCast：/portal/lezhi/aboutus.html/ITCast名师谱：/portal/teachersI TC AS有一个复杂的技术框架，涉及到的软件技术既多且深，需要精心设计出一系列循序渐进的课程，帮助大家高效率地掌握技术。
“.NET静态网页开发技术”是.NET Web开发技术的第一个系列课程，介绍.NET Web开发技术中最基础的内容。
I TC AS（1）有较丰富的互联网使用经验；（2）掌握.NET软件开发的基础知识（编程语言和开发环境）I TC ASWeb客户端之主流编程语言：JavaScript I TC AS我们今后要学习的核心技术——，就建立于静态网页开发技术之上，不先弄明白这些技术，不可能真正掌握。
I TC AS1 所有的ASPX网页，最后都要转换为标准的HTML网页。
2 所有的控件，最终都要转换为HTML代码。
I TC AS重点放在提供一个强大而灵活的Web应用程序的开发框架，并不对网页的美观负责。
而在实际的网站开发中，不美观的界面会让你的网站不被用户认可。
2.许多控件在内部使用CSS来设置控件的显示效果。
I TC AS1 JavaScript是客户端编程的主要工具；2 在许多地方需要利用JavaScript来实现特定的功能。
3 在微软最新的Silverlight中，同样可以使用JavaScript来控制Silverlight对象I TC ASHTML CSS JavaScript I T C AS/express/down load/使用Windows自带的IE，建议再安装一个FireFox I T C AS习.NET所有软件技术的前提。
前端开发技术之静态网页生成方法
前端开发技术之静态网页生成方法在当今数字化的时代，互联网已经成为了人们获取信息、进行交流的主要平台之一。
而网页作为互联网的基本单元，开发出优秀的网页对于提升用户体验、增加网站流量和提高搜索引擎排名来说非常重要。
本文将重点讨论前端开发中的一项重要技术，即静态网页生成方法。
静态网页是指不需要服务器进行处理的网页，所有内容都是提前由开发者生成好的。
相比动态网页，静态网页加载速度更快、响应更迅速，同时也更安全可靠。
接下来将介绍几种常见的静态网页生成方法。
一、HTML和CSS静态生成HTML是网页的基本结构语言，而CSS用来美化网页样式。
通过手动编写HTML和CSS代码，我们可以静态生成网页。
这种方法最直接简单，无需任何工具和框架的支持，适合简单的静态页面。
只需在文本编辑器中打开一个空白文件，编写HTML的标签，在其中插入CSS样式，保存为.html文件即可。
二、模板引擎静态生成模板引擎是一种将模板和数据结合生成静态页面的工具。
通过使用模板引擎，我们可以将页面中的动态部分提取出来，并在生成静态页面时动态插入数据。
常见的模板引擎有Mustache、Handlebars、EJS等。
以Mustache为例，我们需要先编写一个Mustache模板文件，其中使用{{}}标记动态部分，然后通过引入相应的数据，生成最终的静态页面。
三、静态网页生成器静态网页生成器是一种将模板和内容结合生成静态网页的工具。
通过静态网页生成器，我们可以更方便快捷地生成静态网页，无需手动编写HTML和CSS代码。
常见的静态网页生成器有Jekyll、Hexo、Gatsby等。
以Jekyll为例，我们需要编写一个配置文件和一个模板文件，并在模板文件中引入Markdown文件作为内容，然后通过命令行工具生成静态网页。
静态网页生成器一般支持自动化构建、自动刷新、自动生成目录和导航等功能，大大提高了开发效率。
四、前端框架静态生成前端框架是为了提高开发效率而设计的工具，通过前端框架可以实现快速搭建网页结构、实现交互效果等功能。
网页静态化技术
网页静态化技术
网页静态化技术：为什么要用法网页静态化技术
网页静态化解决计划在实际开发中运用比较多，例如新闻网站，门户网站中的新闻频道或者是文章类的频道。
对于电商网站的商品具体页来说，起码几百万个商品，每个商品又有大量的信息，这样的状况同样也适用于用法网页静态化来解决。
网页静态化技术和缓存技术的共同点都是为了减轻数据库的拜访压力，但是详细的应用场景不同，缓存比较适合小规模的数据，而网页静态化比较适合较大规模且相对变幻不太常见的数据。
另外我们假如将网页以纯静态化的形式呈现，就可以用法Nginx这样的高性能的web服务器来部署。
Nginx可以承载5万的并发，而Tomcat 惟独几百。
什么是Freemarker?
Freemarker是一款用法java写的模板引擎，它基于模板来生成文本输出。
它虽然不是web的应用框架，由于FreeMarker与Web容器无关，即在Web运行时，它并不知道Servlet或Http,但它很适合作为web 应用框架的一个组件。
它不仅可以用作表现层的实现技术，而且还可以用于生成XML.JSP.JAVA等。
特点：
1.轻量级模板引擎，不需要Servlet环境就可以很轻松的嵌入到应用
第1页共8页。
第3章静态网站设计基础
说明：
表格可以任意的插入、删除、合并， 表格可以任意的插入、删除、合并， 拆分。具体方法是： 拆分。具体方法是：选择要操作的表格 删除、合并和拆分） （删除、合并和拆分）或选定要操作的位 插入、删除和拆分），单击鼠标右键， ），单击鼠标右键 置（插入、删除和拆分），单击鼠标右键， 在弹出的选项中选择相应的操作。 在弹出的选项中选择相应的操作。
【案例3-2】HTML中的格式标记 案例3 HTML中的格式标记
添加格式标记，将古诗居中、分行显示， 添加格式标记，将古诗居中、分行显示， 如图所示。 如图所示。
3.2 创建基本网页 3.2.1 3.2.2 3.2.3 3.2.4 网页文本 使用图像 建立超链接 使用表格
3.2.1 网页文本
文字是网页最基本的信息表达方式。 文字是网页最基本的信息表达方式。 通过对文本的属性设置， 通过对文本的属性设置，使其展现出需要 的格式。 的格式。
3.4 网页中的多媒体
网页上光有静态的文本和图象并不能 满足用户的需要，为了增强网页的表现力， 满足用户的需要，为了增强网页的表现力， 常需要在网页文档中动画、音频及视频等 常需要在网页文档中动画、 多媒体元素。 多媒体元素。
【案例3-6】图书浏览 案例3
单击图书目录上的书名可打开书的基本介绍。 单击图书目录上的书名可打开书的基本介绍。
【案例3-7】图像与下载 案例3
单击图像打开网页和链接文件，如图所示。 单击图像打开网页和链接文件，如图所示。
3.2.4 使用表格
网页精彩与否，除了色彩搭配、 网页精彩与否，除了色彩搭配、文字 变化、图片处理等因素外， 变化、图片处理等因素外，还有一个非常 重要的因素——版面规划布局。 版面规划布局。 重要的因素 版面规划布局 由于浏览器的形状与表格均为矩形形 因此布局和定位网页元素时， 状，因此布局和定位网页元素时，采用最 多的方式就是表格。 多的方式就是表格。
静态网页与动态网页ppt课件
搜集信息→预处理，建立网页索引库 →接受查询→向用户返回资料
9
3.2 HTML
HTML（HyperText Mark-up Language）即超文本标记 （链接）语言，是目前网络上应用最为广泛的语言，也是 构成网页文档的主要语言。
结构： <head> …描述浏览器所需的信息 如"noarchive"> <head/>
更改内容时，需重新编辑网页并上传
3
1.2 静态网页的优点
访问速度快
资源访问请求
传送静态页面
Browser
Server
容易被搜索引擎收录
4
1.3 静态网页的缺点
缺乏交互性
代码一般不被服务器执行，无法从服务器中获取信息
维护工作量大
必须手工编辑，并重新上传到服务器
5
2.1 什么是动态网页
<body> …包含所要说明的具体内容
<body/> HTML是组合成一个文本文件的一系列标签，一般成对出现，如
<nobr>...</nobr>水域(不换行) <p>...</p>水域(段落) ，单个标签， 如<br>
10
3.3 SEO
搜索引擎最佳化（Search Engine Optimization），又称为搜索引擎优化
12
本次寻宝成功！
希望大家继续探索…… 在知识的海洋里 发掘更多的宝藏
13
提高SEO的几个简单有效手段：
1. 高质量的内容，从而产生高质量的外部链接 2. 和别的网站交换链接，也可以注册自动生
第3章 静态网页
第3章
静态网页
3.3.1 HTML的基本标志对 的基本标志对 的基本 <html> </html> <head> </head> <body> </body> <title></title>
第3章
静态网页
3.3.2 HTML的格式标志 的格式标志 的格式
<p></p> <br> <blockquote></blockquote> <dl></dl>、<dt></dt>、<dd></dd> <ol></ol>、<ul></ul>、<li></li> <div></div>
第3章
静态网页
3.3.4 HTML的图像标志 的图像标志 的图像
<img> <hr>
第3章
静态网页
3.3.5 HTML的表格标志 的表格标志 的表格
<table></table> <tr></tr>、<td></td> <th></th>
第3章
静态网页
3.3.6 HTML的链接标志 的链接标志 的链接
第3章
静态网页
3.1 静态网页概述
静态网页
网页的显示内容对访问者而言是单向的、固定不变的，即访问者不 能通过自己的操作来改变网页的显示内容；若要更新显示内容，必 须通过网站管理员手动修改存放在Web服务器上的HTML文件。 静态网页的内容存储在Web服务器上，包括HTML标识、图像和电影等 文件内容 。
- 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寸等离子电视" /> ……