1.1 认识网页网站
1.1.1网页、网站
网页和网站的区别：
网页和网站之间的主要区别可以用表格对比的形式更清楚地说明，如下图所示：
常用术语：
- Interner (全球性网络）
- WWW (万维网）
- URL (统一资源定位符，指定通信协议和地址）
- IP (网际协议）
- 域名（网站名称，全世界唯一，书写格式：机构名.主机名.类别名.地区名）
- HTTP（超文本传输协议）
- FIP (文件传输协议）
- 发布（上传网站）
- 站点（一个站点就是一个网站所有内容存放的文件夹）
- 超链接（一个网页指向一个目标链接）
- Web Browser（游览器）
- C/S（客户机和服务器）
- B/S（浏览器到服务器的结构）
- HTML（超文本语言）
- XML（扩展性标记语言）
- Session（会话）
- Web Server（服务端）
1.1.2 静态网页和动态网页
联系：
1）静态网页是网站建设的基础，静态网页和动态网页都要使用到 HTMl 语言。
2）静态网页是相对于动态网页而言，指没有后台数据库、不含程序和不可交互的网页、是标准的 HTML 文件，它的文件扩展名是.htm 或.html。你编的是什么它显示的就是什么、不会有任何改变。
3）静态网页和动态网页之间并不矛盾，为了网站适应搜索引擎检索的需要，动态网站可以采用静动结合的原则，适合采用动态网页的地方用动态网页，如果必要使用静态网页，则可以考虑用静态网页的方法来实现，在同一个网站上，动态网页内容和静态网页内容同时存在也是很常见的事情。
区别：
1）程序是否在服务器端运行，是重要标志。在服务器端运行的程序、网页、组件，属于动态网页，它们会随不同客户、不同时间，返回不同的网页，例如 ASP、PHP、JSP、ASP.net、CGI 等。运行于客户端的程序、网页、插件、组件，属于静态网页，例如 html页、Flash、javascript、VBscript 等等，它们是永远不变的。
2）编程技术不同。静态网页和动态网页主要根据网页制作的语言来区分。静态网页使用语言：HTML。 动态网页使用语言：HTML＋ASP 或 HTML＋PHP 或 HTML＋JSP等其它网站动态语言。
3）被搜索引擎收录情况不同。由于编程技术不容，静态网页是纯粹 HTML 格式的网页，页面内容稳定，不论是网页是否被访问，页面都被保存在网站服务器上，很容易被搜索引擎收录。而动态网页的内容是当用户点击请求时才从数据库中调出返回给用户一个网页的内容，并不是存放在服务器上的独立文件，相比较于静态网页而言，动态网页很难被搜索引擎收录。
4）用户访问速度不同。用户访问动态网页时，网页在获得搜索指令后经过数据库的调查匹配，再将与指令相符的内容传递给服务器，通过服务器的编译将网页编译成标准的 HTML 代码，从而传递给用户浏览器，多个读取过程大大降低了用户的访问速度。而静态网页不同，由于网页内容直接存取在服务器上，省去了服务器的编译过程，用户访问网页速度很快。
5）制作和后期维护工作量不同。动态网页的设计以数据库技术为基础，可以实现多种功能，降低了网站维护的工作量。而静态网页由于没有数据库的支持，网页内容更改时需要直接修改代码，在网站内容制作和维护中，所需的工作量更大。动态网页与静态网页各有特点，网站设计师在网页设计时，主要根据网站的功能需求和网站内容多少选择不同网页。如，网站包含信息量太大时，就需要选择动态网页，反之，则选择静态网页。
1.2 网页的基本构成元素
1.2.1.文本
一般情况下，网页中最多的内容是文本，可以根据需要对其字体、大小、颜色、底纹、边框等属性进行设置。建议用于网页正文的文字一般不要太大，也不要使用过多的字体，中文文字一般可使用宋体，大小一般使用9磅或12像素左右即可。
1.2.2.图片和动画
丰富多彩的图像是美化网页必不可少的元素，用于网页上的图像一般为JPG格式和GIF格式。网页中的图像主要用于点缀标题的小图片，介绍性的图片，代表企业形象或栏目内容的标志性图片，用于宣传广告等多种形式。 具有强烈的视觉冲击力，可以更好的吸引浏览者的注意力。
1.2.3.超链接
超级链接是Web网页的主要特色，是指从一个网页指向另一个目的端的链接。这个“目的端”通常是另一个网页，也可以是下列情况之一：相同网页上的不同位置、一个下载的文件、一副图片、一个E-mail地址等。超级链接可以是文本、按钮或图片，鼠标指针指向超级链接位置时，会变成小手形状。
1.2.4.音频视频
音频：使网页效果多样化，常见格式有mid和MP3
视频：一般格式是flv，具有文件小，加载速度快等特点。
1.2.5.交互表单
表单是用来收集访问者信息或实现一些交互作用的网页，浏览者填写表单的方式是输入文本、选中单选按钮或复选框、从下拉菜单中选择选项等。 接受用户在浏览器端的输入，将这些信息发送到用户设置的目标端。
1.2.6.其他常见元素
网页中除了上述这些最基本的构成元素外，还包括横幅广告、字幕、悬停按钮、日戳、计算器、音频、视频、Java Applet 等元素。
1.3 页面布局结构
1.3.1 网页页面布局
1.3.2 网页色彩搭配
1.4 Web前端技术简介
1.4.1 初识WEB前端
Web前端技术主要包括HTML、CSS和JavaScript等语言，用于创建和设计网页的界面、样式和交互效果。其中，HTML是网页的骨架，CSS负责网页的样式设计，而JavaScript则处理网页的动态交互功能。这些技术让网页呈现出丰富的内容和美观的视觉效果，同时提供良好的用户体验。
1.4.2 WEB前端开发的三大核心技术
- HTML5：网页内容的骨架。
- CSS3：负责网页的外观和样式。
- JavaScript：让网页具有交互性。
1.4.3 前端开发工具
1.浏览器
浏览器是网页的运行平台，是可以把HTML文件展示在其中，供用户进行浏览的一种软件。
（1）IE浏览器：Internet Explorer（简称：IE）是 微软 公司推出的一款网页 浏览器。 原称Microsoft Internet Explorer（6版本以前）和Windows Internet Explorer（7、8、9、10、11版本）。IE浏览器本身具有非常强大的网页兼容性，这也是它最具特色的一个地方。此外，ie浏览器的界面风格简单，操作也不复杂。但是ie浏览器本身的运行状况却不是特别优秀。在系统高速运转的时候，它往往会发生卡顿的现象，拖累用户的体验性。
（2）Chrome浏览器：Google Chrome是一款由Google公司开发的网页浏览器。 [26]该浏览器基于其他开源软件（如WebKit）撰写，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。
2.网页编辑器
HTML，CSS 和 JavaScript源代码文件均为纯文本内容，用计算机操作系统中自带的写字板或记事本工具就可以打开和编辑源代码内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
我的第一个网页
23软件1班
</body>
</html>
3.切图软件
切图软件是对UI设计师设计出的效果图进行切图操作，也可以对网页中的图片进行修改等处理。常用的切图软件有 Photoshop 和 Fireworks两种。
1.5 HTML语法基础
1.5.1 HTML概述
HTML是Hyper Text Markup Language的缩写，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。
1. 语言
HTML作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。用HTML 编写的超文本文档称为HTML文档，它能独立于各种操作系统平台。自1990 年以来 HTML 就一直被用作 WWw的信息表示语言，使用HTML描述的文件，需要通过Web浏览器HTTP显示出效果。
2.超文本
超文本是可以加入图片、声音、动画、影视等内容的文本。事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，简单且易学易懂。
3.标记
HTML5 实际上不算是一种编程语言，而是一种标记语言。HTML5文件是由一系列成对出现的元素标签嵌套组合而成的。这些标签用“<”和“>”括起来。它们被称为标记，也称标签，是用来划分网页的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档的某个部分。在HTML中每个用作标签的符号都是一条命令，它会告诉浏览器如何显示文本。这些标签均由“<”和“>”符号以及一个字符串组成。如<head>，<body>等。而浏览器的功能是对这些标记进行解释，显示出文字、图片、动画和播放声音。这些标签符号用“<标签名字属性>”来表示。标签分为单标签和双标签两大类：
单标签指的是只存在一个标签的写法，如<meta><input>等。
双标签指的是存在一对标签的写法，如<head> </head>，<body></body>等。
注意，在双标签中第一个标签称为起始标签，第二个标签称为结束标签，结束标签需要在左尖括号后添加一个关闭符“/”。
1.5.2 HTML基本结构
1.HTML文档标签<html>··</html>
HTML文档标签的格式为：<html>HTML文档的内容</html>
<html>处于文档的最前面，表示HTML文档的开始，即浏览器从<html>开始解释，直到遇到</html>为止。每个HTML文档均以<html>开始，以</html>结束。
2.HTML文档头标签<head>.</head>
HTML 文档包括头部（head）和主体（body）。
HTML文档头标签的格式为：<head>头部的内容</head>
文档头部内容在开始标签<html>和结束标签</html>之间定义，其内容可以是标题名或者文本文件地址、创作信息等网页信息说明。
3.文档编码
文档编码格式如下：<meta charset=" utf-8" />
为了被浏览器正确解释和通过W3C代码标准，所有的HTML文档都必须声明它们所使用的编码语言。文档声明的编码应该与实际编码一致，否则会成乱码。对于中文网页的设计
者来说，用户一般使用GB2313（简体中文）。
4.HTML文档主体标签<body>··</body>
HTML文档主体标签的格式为：<body>网页的内容</body>
主体位于头部以后，以<body>为开始标签，</body>为结束标签。它定义网页上显示的
主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在主体中。
1.6 创建HTML文档
1.7 网页头部标签
1.7.1 <title>标签
<title>标签是页面标题标签。它将HTML文件的标题显示在浏览器的标题栏中，用以说明文件的用途。这个标签只能应用于<head>与</head>之间。<title>标签是对文件内容的概括。
< title>标签位于<bead>与</head>中，用于标示文档标题，格式如下：
<title>标题</title>
1.7.2 <meta>标签
<meta>标签是元信息标签，在HTML中是一个单标签。该标签可重复出现在头部标签中，用来指明本页的作者、制作工具、所包含的关键字，以及其他一些描述网页的信息。<meta>标签分两大属性：HTTP标题属性（http-equiv）和页面描述属性（name)。不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。本节主要讲解的name 属性，用于设置搜索关键字和描述。<meta>标签的 name 属性的语法：<meta name="参数”content="参数值">
name 属性主要用于描述网页摘要信息，与之对应的属性值为content。content中的内容
主要是便于搜索引擎查找信息和分类信息用。
name 属性主要有以下两个参数：keywords（关键字）和description（网站内容描述）。
1. keywords
keywords 用来告诉搜索引擎网页使用的关键字。
2.description
description用来告诉搜索引擎网站主要的内容。
1.7.3 <link>标签
<link>标签用于连接外部资源和当前 HTML 文档，它只在首部标签<head>和</head>中，通常用于连接外部样式表。<link>标签并不将其他文档实际链接到当前文档中，只是提供链接该文档的一个路径，link标签最常用的是用来链接CsS样式文件，格式如下：
<link rel="stylesheet" href="外部样式表文件名.css "type="text/css" />
如果需要同时引用多个外部样式表文件，则需要为每一个CSS样式文件单独使用一次
<link>标签。
1.7.4 <script>标签
<script>标签是脚本标签，用于为HTML文档定义客户端脚本信息。此标签可以在文替中包含一段客户端脚本程序，可以位于文档中任何位置，但常位于<head>标签内，以便于维护。
格式如下：
<scripttype=" text/css" src="脚本文件名n.js"></script>
1.8 HTML5文档注释和特殊符号
1.8.1 注释
HTML5使用<!--…-->标签为文档进行注释，注释标签以“<!--”开头，以“—>”结束，中间的
…”替换为注释文字内容即可。<!--…-->标签支持单行和多行注释。
1.8.2 特殊符号
| 特殊符号 | 字符实体 | 示例 |
| 空格 | | 银河商务 热线：400-111-1111 |
| 大于（>) | > | 3>2 |
| 小于（<) | < | 2<3 |
| 引号（") | " | |
| 版权号（©） | © | Copyright©网页设计教程 |
1.9 综合案例——临江仙 · 送钱穆父
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="Keywords" content="宋词，苏轼"/>
<meta name="description" content="本网站收录精选宋词"/>
<title>宋词精选</title>
<style type="text/css">
p{
text-align: center;
font-size: larger;
}
</style>
</head>
<body bgcolor="antiquewhite" text="#3333333">
<h2 align="center">临江仙·送钱穆父</h2>
<p>宋 苏轼</p>
<!--使用<br/>的效果-->
<p>一别都门三改火，天涯踏尽红尘。<br/>
依然一笑作春温。<br/>
无波真古井，有节是秋筠。<br/>
惆怅孤帆连夜发，送行淡月微云。<br/>
尊前不用翠眉颦。<br/>
<font color="brown" face="微软雅黑">人生如逆旅,我亦是行人。</font></p>
<img src="img/1.1.jpg"/>
<!--水平线-->
<hr size="2" color="black"width="100%"/>
<p align="center">网页制作教程Copyright©江西应用工程职业学院</p>
</body>
</html>