1.1 认识网页和网站
1.1.1 网页、网站
网页和网站的区别：含义不同：网站是指在因特网上根据一定的规则，使用HTML等工具制作的用于展示特定内容相关网页的集合。网页是网站的基本元素，是承载各种网站应用的平台。
关系不同：网站包含了网页，网页是包含了HTML代码集合，呈现一个界面。
组成不同：网站由域名、服务器、空间等构成，而网页是由HTML、JavaScript等代码构成。
功能不同：网站功能齐全，包含了注册功能、登录功能、业务功能，网页一般实现几个简单功能。
常用术语：Interent、WWW、浏览器、URL、IP、域名、HTTP、FTP、站点、发布、超链接、导航条、客户机和服务器等。
1.1.2 静态网页和动态网页
三大核心技术：HTML、CSS、JavaScript。（前两者是静态网页，添加了JavaScript之后变成了动态网页。）网页有动画，视频不能叫做静态网页。
静态网页和动态网页的区别：静态网页每个网页中都有一个固定的URL，网页URL以htm、HTML、shtml等常见形式为后缀，而且不含有问号。
动态网页以数据库技术为基础，可以大大降低网站维护的工作量，采用动态网页技术的网站，可以实现更多的功能，如用户注册，用户登录，在线调查等。
1.2 网页的基本构成元素
1.2.1 文本
文本具有体积小、网络传输速度快等特点，可以使用户更方便地浏览和下载文本信息，是网页最主要的基本元素，也是网页中最主要的信息载体。
1.2.2 图片和动画
图片比文本更加生动和直观，可以传递一些文本不能表达的信息，具有强烈的视觉冲击力。网页中的网站标识、背景、链接等都可以是图片。
1.2.3 超链接
超链接技术是WWW流行起来的主要原因。超链接是从一个网页指向另一个目的端的链接，指定从一个位置转跳到另一个位置，可以是文本链接、图像链接和锚链接等。
1.2.4 音频和视频
音频文件可使网页效果多样化，网页中常用的音频格式有mid和mp3。其中mp3为压缩文件，其压缩率非常高，音质也不错，是背景音乐的首选。
网页中的视频文件一般为flv格式，它是一种基于Flash MX的视频流格式，具有文件小、加载速度快等特点，是网络视频格式的首选。
1.2.5 交互表单
网页中的表单通常用来接收用户在浏览器端的输人，然后将这些信息发送到用户设置的目标端。这个目标可以是文本文件、网页和电子邮件，也可以是服务器端的应用程序。表单一般用来收集联系信息，接收用户要求，获得反馈意见，让浏览者注册为会员并以会员的身份登录站点等。
1.2.6 其他常见元素
网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮JavaScript与ActveX等各种特效，它们不仅能点缀网页，使网页更活泼有趣，还在网上娱乐、电子商务等方面也有着不可忽视的作用。
1.3 页面布局结构
对一个网站来说，除了内容之外，还要对网站进行整体规划设计。格局凌乱的网站内容再精彩，也不是一个好网站。在网页插人各种对象和装饰效果前，要先确定网页的总体风格和布局。
1.3.1 网页页面布局
在网页设计中，结构布局是根据设计元素在网页的位置中分别进行分类的。上示所图是常见的布局结构。
1.3.2 网页色彩搭配
R（红色），G（绿色)，B(蓝色），这三种颜色是最常见的三个主色调。
在网页设计中，颜色值最常见的表达方式是十六进制。颜色值可以采用6位的十六进制来进行表示，并且需要在前面加上特殊符号“#”，如#0E533D。还可通过RGB，HSB，Lab和CMYK来进行表示;RGB色彩模式是通过对红(R)、绿(G)、蓝(B)3个颜色通道的变化以及相互之间的叠加来得到各种颜色，是目前运用最广的颜色系统之一。HSB色彩模式是普及型设计软件中常见的色彩模式。Lab颜色模型由亮度(L)和a、b两个颜色通道组成，这种颜色混合后将产生具有明亮效果的色彩，CMYK也称作印刷色彩模式，由青、洋红(品红)、黄和黑4种色彩组合成各种颜色。
1.4 Web前端技术简介
1.4.1 初识WEB前端
Web前端就是指平常上网浏览的网页，比如上网浏览新闻、查询快递信息、淘宝购物等都是在浏览网页。Web前端开发是从网页演变而来的，名称上有明显的时代特征。随着用户体验要求越来越高，前端开发的技术难度越来越大，Web前端开发这个职业也从设计和制作不分的局面中独立出来。
1.4.2 WEB前端开发的三大核心技术
HTML是制作网页的标准语言，它决定了页面结构文件。
CSS是一种用来表现HTML或XML等文件样式的计算机语言，它决定了页面样式文件。
JavaScript是一种属于网络的脚本语言，它决定了页面文件动态技术。
1.4.3 前端开发工具
1.4.3.1 浏览器
浏览器，是网页的运行平台，是可以把HTML文件展示在其中，供用户进行浏览的一种软件。
IE浏览器
它是微软公司为对抗网景公司于1994年夏天开始研发的一款浏览器 ，但微软并没有时间从零开始，而是微软和Spyglass合作，于是IE从早期一款商业性的专利网页浏览器Spyglass Mosaic派生出来的，最好的版本是IE6。
Chrome浏览器
它是一款由Google公司开发的网页浏览器，最开始Chrome采用webkit作为浏览器内核，直到2013年，Google宣布不再使用苹果的webkit内核，开始使用webkit的分支内核Blink。它的特点是简洁、快速。它有IOS,Android，Windows、Ponne等多个系统的浏览器。
FirFox浏览器
它由Mozilla基金会与数百个志愿者所开发的，原名“Phoenix”（凤凰），之后改名“Mozilla Firebird”（火鸟）再改为现在的名字Firefox。目前最新的正式版本为Firefox 53.0.2。
Safari浏览器
它是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。第二次浏览器大战也是从苹果公司发布Safari浏览器开始的，2003年苹果公司在手机上发布Safari浏览器，苹果公司利用其得天独厚的手机市场份额使Safari浏览器成为世界主流浏览器，Safari是最早使用webkit内核的浏览器也是现在苹果默认的浏览器。
Opera浏览器
它是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器，跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。
五大浏览器的特点：
IE浏览器: 兼容性好，使用方便无需下载（Windows系统自带的浏览器）。漏洞最多，最容易被攻击流氓软件多，很多流氓软件都是加载在IE上。
Chrome浏览器: 不容易奔溃（多线程架构），运行速度快，安全性高，搜索更加简单…，这些优点也是Chrome浏览器的市场份额比其他浏览器市场份额加起来还多的原因。也是我最喜欢的浏览器。
FirFox浏览器： 免费下载，完全开源，安全性高，稳定性好，运行速度快，占用系统资源少，非常个性化（它的代码完全公开，插件丰富，用户可根据自己的喜好定制）。
Safari浏览器： 安全性高，页面简洁，书签同步等。
Opera浏览器: 安全性高，兼容性好，支持多个操作系统（indows、Linux、 Mac、FreeBSD、Solaris、BeOS、OS/2、QNX）。
1.4.3.2 网页编辑器
HTML,CSS和JavaScript源代码文件均为纯文本内容，用计算机操作系统中自带的写字板或者记事本工具就可以打开和编辑源代码内容。这里介绍几款常用的网页开发软件：Adobe Dreamweaver,Sublime Text,NotePad++,EditPlus和HBuilder。
1.4.3.3 切图软件
切图软件是对UI设计师出的效果图进行切图操作，也可以对网页中的图片进行修改等处理。常用的切图软件有Photoshop和Fireworks两种。
1.5 HTML语法基础
HTML是制作网页的基础语言，是初学者必学的内容。
1.5.1 HTML概述
HTML,是 HyperTent Mnkaplangmge 的缩写，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。
1.5.1.1 语言
HTML作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了浏览器在运行HTML 文档时所遵循的规则和进行的操作。协议的制定使浏览器在运行超文本时有了统一的规则和标准。用HTML编写的超文本文档称为HTML,文档，它能独立于各种操作系统平台。自1990年以来HTML就一直被用作www的信息表示语言，使用HTML描述的文件需要通过 Web 浏览器 HTTP 显示出效果。
1.5.1.2 超文本
超文本是可以加人图片、声音、动画、影视等内容的文本。事实上每一个 HTML 文档者是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种和序语言，它只是一种排版网页中资料显示位置的标记结构语言，简单且易学易懂。
1.5.1.3 标记
HTML5 实际上不算是一种编程语言，而是一种标记语言。HTML5 文件是由一系列成出现的元素标签嵌套组合而成的。这些标签用“<”和“>”括起来。它们被称为标记,称标签，是用来划分网页的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。通过指定某块信息为段落或标题等来标识文档的某个部分。在HTML中每个用作标签的都是一条命令，它会告诉浏览器如何显示文本。这些标签均由“<”和“>”符号以及字符串组成。如<head>，<body>等。而浏览器的功能是对这些标记进行解释，显示出文图片、动画和播放声音。这些标签符号用“<标签名字属性>”来表示。标签分为单标双标签两大类:
单标签指的是只存在一个标签的写法，如<meta><input>等。双标签指的是存在一对标签的写法，如<head></head>，<body></body>等。注意，在双标签中第一个标签称为起始标签，第二个标签称为结束标签，结束标签在左尖括号后添加一个关闭符“/”。
HTML只是一个纯文本文件。创建一个HTML文档，需要HTML编辑器和Web两个工具。HTML编辑器是用于生成和保存HTML文档的应用程序。Web浏览器用Web网页文件，提供查看Web资源的客户端程序。
1.5.2 HTML基本结构
HTML文档是由一系列的元素和标签组成的。元素名不区分大小写，HTML用标定元素的属性和它在文件中的位置，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)和主体(body)。HTML文档头标签的格式为
<head>头部的内容</head>
文档头部内容在开始标签<html>和结束标签</html>之间的定义，其内容可以是标题名或者是文本文件地址、创作信息等网页信息说明。
1.5.2.3 文档编码
文档编码格式如下:
<meta charset=" utf-8" />
为了被浏览器正确解释和通过W3C代码标准，所有的HTML文档都必须声明它们所使用的编码语言。文档声明的编码应该与实际编码一致，否则会成乱码。
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.com">百度一下</a>
</body>
</html>
1.7 网页头部标签
网页的头部标签主要包括：<title>、<meta>、<link>、<style>、<script>。
1.7.1 <title>标签
定义文档的标题，这个标题显示在浏览器的标题栏中。
1.7.2 <meta>标签
提供关于HTML文档的信息，比如字符集、文档描述、关键词等。
1.7.2.1 keywords
是用来搜索引擎的网页使用的关键字。
1.7.2.2 description
是用来告诉搜索引擎的网站主要内容。
1.7.3 <link>标签
引入css文件 样式脚本 href引入
用于连接外部资源，如CSS样式表、RSS订阅等。
1.7.4 <script>标签
scr引入 指定路径指定js文件
type指定文件类型
包含或连接到JavaScript文件，用于实现页面的动态功能。
1.8 HTML5文档注释和特殊符号
1.8.1 注释
注释是文档中的说明文字，不会被浏览器执行。。HTMIS 使用<!--…-->标签为文档进行注释，注释标签以“<!--”开头，以“-->”结束，中间的“…”替换为注释文字内容即可。<!--…-->标签支持单行和多行注释。
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;
font: 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>
7384
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
