1.1认识网页和网站
1.1.1网页、网站
网页和网站的区别：
网页：是由多行 HTML 代码和一个界面组成，又称Web页，实际上是一个文件，里面可以包含文字、图像、声音、视频等信息。网页可以看成是网站的一个元素，是用户访问网站时最直接接触到的部分。
网站：Web网站也称网站，www信息是由无数的Web站点组成的，是一个存放网络服务器上的完整信息的集合体，它包含一个或多个网页。这些网页以一定的方式链接在一起，成为一个整体，用来描述一组完整的信息或达到某种期望的宣传效果。例如，新浪、搜狐等门户网站就是大型的网站。
-
网站包含了网页，网页是包含了HTML代码集合，呈现一个界面；
-
网站是按照一定规范和规则，使用HTML、JavaScript和CSS构成的网页集合；网页是网站的基本元素，展示给用户；
-
网站由域名、服务器、空间等构成，而网页是由HTML、JavaScript等代码构成；
-
网站功能齐全，包含了注册功能、登录功能、业务功能；网页一般实现几个简单功能；
-
网站需要部署到服务器，利用域名或IP地址访问；而网页可以直接在浏览器访问；
-
网站给用户体验更为全面，是一个完整的系统；而网页只是一个功能界面展示；
常见术语：
internet：由各种不同类型的计算机网络连接起来的全球性网络；
www：让Web客户端（常见浏览器）访问Web服务器中的网页；
浏览器：将internet中的文本文档和其他文件翻译成网页的软件，通过浏览器可以快捷地获Intemet中的内容。常用的浏览器有IntermetExplorer(E)浏览器，Firefox浏览器和Chrome浏览器等；
URL：统一资源定位符，指定通信协议和地址，如“http://www.baidu.com”是一个URL,“http://”表示通信协议为超文本传输协议,“www.baidu.com”表示网站名称；
IP：网际协议。Intemmet中的每台计算机都有唯一的P地址，表示该计算机在Intemet中的位置。IP通常分为A、B和C三类；
域名：指网站名称，在全世界是唯一的。通常把域名看成网站的网址。域名由固定的网络域名管理组织进行全球统一管理。域名需向各地的网络管理机构进行申请才能获取。域名的书写格式:机构名，主机名，类别名地区名（更直观）；
HTTP：超文本传输协议，是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准；
FTP：文件传输协议，通过该协议，可把文件从一个地方传到另外一个地方，从而真正地实现资源共享；
发布：指将制作好的网页传到网络上的过程，也称为上传网站；
站点：一个站点就是一个网站所有内容所存放的文件夹。Dreamweaver的使用是以站点为基础的，必须为每一个要处理的网站建立一个本地站点。站点可分父子站点。站点管理是对一个Intemnel的站点进行组织、维护和管理的功能集合；
超链接：从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，可以是相同网页的不同位置，也可以是一个图片、一个电子邮件地址、一个文件，甚至是一个程序。在浏览网页时单击超链接就能跳转到与之相应的页面；
客户机和服务器：浏览网页是由个人计算机向Imtemet中的计算机发出请求，Intemet中的计算机在接受到请求后响应请求，将需要的内容发到个人计算机上，这种发送请求的个人计算机称为客户机或客户端，而Intermet中的计算机称为服务器或服务端。
1.1.2静态网页和动态网页
静态网页是指客户端与服务器端不发生交互，访问者只能被动地浏览网站建设者提供的网页内容。其特点是网页内容不会发生变化，除非网页设计者修改了网页的内容，信息流向是单向的。
动态网页是指浏览器可以和服务器数据库进行实时数据交流的交互网页。动态网页可以实现更多的功能，如用户注册、用户登录、搜索查询、用户管理、订单管理等，信息流向是双向的。
只有HTML、CSS是静态网页，加了JavaScript是动态网页
HTML、CSS、JavaScript
1.2网页的基本构成元素
1.2.1.文本
文本具有体积小、网络传输速度快等特点，可使用户更方便地浏览和下载文本信息，是网页最主要的基本元素，也是页面中最主要的信息载体。与图片相比，文本虽然不如图片那样能够很快引起浏览者的注意，但却能准确地表达信息的内容和含义。为了克服文本固有的缺点，人们赋予了网页中文本更多的属性，如字体、字号、颜色、底纹和边框等，通过不同格式的区别，突出显示重要的内容。此外，用户还可以在网页中设计各种各样的文字列表清晰地表达一系列项目。
1.2.2.图片和动画
图片比文本更加生动和直观，可以传递一些文本不能表达的信息，具有强烈的视觉冲击力。网页中的网站标识、背景、链接等都可以是图片。用户在网页中使用的图片格式主要包括CIF、JPEG和PNG等，其中使用最广泛的是CIF和JPEG两种格式。在网页中，为了更有效地吸引浏览者的注意，许多网站的广告都做成了动画形式。
1.2.3.超链接
超链接技术是WWW流行起来的最主要的原因。超链接是从一个网页指向另一个目的端的链接，指定从一个位置跳转到另一个位置，可以是文本链接、图像链接和锚链接等。超链接可以在当前页面中进行跳转，也可以在页面外进行跳转。
1.2.4.音频和视频
音频文件可使网页效果多样化，网页中常用的音频格式有mid和mp3。其中mp3为压缩文件，其压缩率非常高，音质也不错，是背景音乐的首选。网页中的视频文件一般为v格式，它是一种基于FashMX的视频流格式，具有文件小、加载速度快等特点，是网络视频格式的首选。
1.2.5.交互表单
网页中的表单通常用来接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。这个目标可以是文本文件、网页和电子邮件，也可以是服务器端的应用程序。表单般用来收集联系信息，接收用户要求，获得反馈意见，让浏览者注册为会员并以会员的身份登录站点等。
1.2.6.其他常见元素
网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮Javaserip与Activex等各种特效，它们不仅能点缀网页，使网页更活泼有趣，还在网上好乐、电子商务等方面也有着不可忽视的作用。
1.3 页面布局结构
1.3.1.网页页面布局
1.3.2.网页色彩搭配
每一个网站都有一个主色调（常见色调：红色、蓝色、绿色）
1.三个数字型:RGB，逗号隔开形式
2.三个数字型:RGB，十六进制形式
1.4Web前端技术简介
1.4.1.初识Web前端
Web前端即指平时上网浏览的网页，如上网浏览新闻，查询快递信息，淘宝购物等都是在浏览网页。
1.4.2.Web前端开发的三大核心技术
HTML（页面结构文件）
CSS（页面样式文件）
JavaScript（静态功能变为动态功能）
1.4.3. 前端开发工具
1.浏览器：谷歌浏览器 GoogleChrome
2.网页编辑器：HBuilderX
3.切图软件
1.5 HTML语法基础
1.5.1 HTML概述
超文本标记语言，是一种用来制作超文本文档的简单标记语言
1.5.1.1 语言
HTML 作为一种超文本标记语言， 有指定的语法规则， 超文本传输协议规定了浏览器在运行HTML 文档时所遵循的规则和进行的操作。协议的制定使浏览器在运行超文本时有了统一的规则和标准。用HTML 编写的超文本文档称为HTML文档， 它能独立于各种操作系统平台。自1990年以来 HTML 就一直被用作 WWW的信息表示语言， 使用HTML描述的文件，需要通过 Web 浏览器 HTTP 显示出效果。
1.5.1.2 超文本
超文本是可以加入图片、声音、动画、影视等内容的文本。事实上每一个HTML文档都是一种静态的网页文件， 这个文件里面包含了HTML 指令代码， 这些指令代码并不是一种程序语言， 它只是一种排版网页中资料显示位置的标记结构语言， 简单且易学易懂。
1.5.1.3 标记
<xxx>内容</xxx>
定义：由一系列成对出现的元素标签嵌套组合而成。这些标签用“<”和“>”括起来。它们称为标记也称标签。分为两大类：
单标签：指的是只存在一个标签的写法， 如< meta>< input>等。
双标签：指的是存在一对标签的写法, 如< head></ head>, < body></ body>等。注意， 在双标签中第一个标签称为起始标签， 第二个标签称为结束标签， 结束标签需要在左尖括号后添加一个关闭符“/”。如<xxx>内容</xxx>等。
1.5.2 HTML基本结构
1.5.2.1 HTML文档标签<html>...</html>
HTML 文档标签的格式为<html>HTML文档的内容</ html>< html>处于文档的最前面， 表示HTML 文档的开始， 即浏览器从<html>开始解释， 直到遇到</ html>为止。每个HTML 文档都以<html>开始， 以</html>结束。
1.5.2.2 HTML文档头标签<head>...</head>
HTML 文档头标签< head>…</ head>，HTML 文档包括头部( head) 和主体( body)。HTML 文档头标签的格式为< head>头部的内容</ head>，文档头部内容在开始标签<html>和结束标签</html>。
1.5.2.3 文档编码
文档编码基本形式如下：<metacharset="utf-8"/>
为了被浏览器正确解释和通过W3C 代码标准， 所有的HTML 文档都必须声明它们所使用的编码语言。 文档声明的编码应该与实际编码一致， 否则会成乱码。对于中文网页的设计者来说， 用户一般使用GB2313(简体中文)。
1.5.2.4 HTML文档主体标签<body>...</body>
HTML文档主体标签的格式为<body>网页的内容</body>主体位于头部以后，以<body>为开始标签， </body>为结束标签。它定义网页上显示的主要内容与显示格式， 是整个网页的核心， 网页中要真正显示的内容都包含在主体中。
1.6 创建HTML文档
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>这是我的第一个网页项目</p>
<p>十个勤天 做大做强</p>
<a href="http://www.baidu.cm">百度一下</a>
</body>
</html>1.7 网页头部标签
定义：是元信息标签，是一个单标签。可重复出现在头部标签中，用来指明本页的作者、制作工具、所包含的关键字以及其他一些描述网页的信息。分两大属性：HTTP和页面描述属性。
基本形式：<meta name="xxx" content="xxx"/>
1.7.1 <title>标签
定义：页面标题标签，这个标签只能应用于<head>与</head>之间。<tite>标签是对文件内容的概括。一个好的标题能使读者从中判断出该文件的大概内容。页面标题标签。它将HTM文件的标题显示在浏览器的标题栏中，用以说明文件的用途。这个标签只能应用于<head>与</head>之间。<tite>标签是对文件内容的概括。一个好的标题能使读者从中判断出该文件的大概内容。
基本形式：<title>标题<\title>
1.7.2 <meta>标签
1.7.2.1 keywords （关键词）
定义：是元信息标签，在HTML中是一个单标签。该标签可重复出现在头部标签用来指明本页的作者、制作工具、所包含的关键字，以及其他一些描述网页的信息。
基本形式：<meta name="keywords" content="xxx"/>
1.7.2.2 description（ 描述）
定义：用来告诉搜索引擎网站主要内容
基本形式：<meta name="description” content="xxx"/>
1.7.3 <link>标签
定义：用来链接外部资源和当前HTML文档（引入“xxx”文件）。
基本形式：<link rel="stylesheet" href="css/index.css" type="text/css"/>
1.7.4 <script>标签
定义：脚本标签，用于HTML文档定义客户端脚本信息。
基本形式·：<script src="js/index.js" type="text/javascript"></script>
1.8 HTML5文档注释和特殊符号
1.8.1 注释
为增加 HTML5文档的可读性，可为其添加注释部分。注释是文档中的说明文字，不会被浏览器执行。HTML5 使用<！--->标签为文档进行注释，注释标签以“<！--”开头，以“-->”结束，中间的“….”替换为注释文字内容即可。<！--...-->标签支持单行和多行注释。
快捷键：Ctrl+斜杠键
基本形式：<!--单行注释内容-->
<!--
多行注释内容
多行注释内容
多行注释内容
-->
1.8.2 特殊符号
由于大于号“>”和小于号“<”等已作为HTML的语法符号，所以，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示。这些特殊符号对应的HTML代码被称为字符实体。
常用的特殊符号及对应的字符，这些字符实体都以“&”开头，以“；”结尾。
1.9 综合案例——临江仙 · 送钱穆父
<!DOCTYPE html>
<html>
<head>
<meta name="keywords"content="宋词,苏轼" charset="utf-8">
<meta name="description"content="本网站收录精选宋词"/>
<title>宋词精选</title>
<style type="text/css">
p{
text-align: center;
text-size:larger;
}
</style>
</head>
<body bgcolor="antiquewhite" text="#333333">
<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>
7382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
