1.1 认识网页网站
1.1.1 网页、网站
网页和网站的区别：
1.网页是HTML编写，通过WWW网传输，是被浏览器编译后供用户获取信息的页面文，网站是Web站点的基本信息单位是Internet服务的一个位置。
2.网站是多个网页的集合。
常用术语：
Internet,WWW,URL,IP,域名,HTTP,FIP,发布,地点,超链接,客户机和服务器。
Internet：由各种不同类型的计算机网络连接起来的全球性网络。
WWW：让Web客户端访问Web服务器中的网页。
URL:统一资源定位符，指定通信协议和地址。
IP：网际协议。
域名：网站的网址。
HTTP：超文件传输协议。
发布：上传网站。
站点：一个站点是一个网页所有内容存放的文件夹。
超链接：从一个网页指向一个目标的连接关系。
客户机和服务器：发送请求的个人计算机叫客户机，internet中的计算机叫服务器。
1.1.2 静态网页和动态网页
静态网页：
指客户端的浏览器发送URL请求给WWW服务器，服务器查找需要的超文本文件不加处理直接下载到客户端，运行在客户端的页面是已经事先做好的并存放在服务器中的网页。静态网通常由纯粹的HTML/CSS语言编写，随着html代码的生成，页面的内容和显示效果就基本上不会发生变化了——除非你修改页面代码。
动态网页：
页面代码虽然没有变，但是显示的内容却是可以随着时间、环境或者数据管理的结果而发生改变的。是基本的html语法规范与Java、、VC等高级程序设计语言、数据库编程等多种技术的融合，以期实现对网站内容和风格的高效、动态和交互式的管理。因此，从这个意义上来讲，凡是结合了HTML以外的高级程序设计语言和数据库技术进行的网页编程技术生成的网页都是动态网页。
1.2 网页的基本构成元素
1.2.1.文本
有体积小、网络传输速度快等特点，是网页的最主要的基本元素，也是页面最主要的信息载体。文本有字体，字号，颜色，底纹和边框等属性。
1.2.2.图片和动画
具有强烈的视觉冲击力，可以更好的吸引浏览者的注意力。
1.2.3.超链接
可以在当前页面跳转也可以在页面外进行跳转。
1.2.4.音频和视频
音频：使网页效果多样化，常见格式有mid和MP3
视频：一般格式是flv，具有文件小，加载速度快等特点。
1.2.5.交互表单
接受用户在浏览器端的输入，将这些信息发送到用户设置的目标端。
1.2.6.其他常见元素
悬停按钮，JavaScript和ActiveX。
1.3 页面布局结构
1.3.1 网页页面布局
1.3.2 网页色彩搭配
1.网页安全色：红色，绿色，蓝色
2.网页中色彩的表达：十六进制
3.常见色彩搭配：采用相近颜色和相似颜色
1.4.1 初识WEB前端
前端开发就是把我们设计好的UI（User Interface用户界面），按照W3C标准做成HTML页面，再用CSS来进行布局，通过JavaScript脚本语言实现某些功能，通过这些功能与用户在页面上进行互动。
1.4.2 WEB前端开发的三大核心技术
HTML
是一门标记型语言，主要由一些具备特殊含义的标签构成（建筑物结构）
所谓HTML是“超文本标记语言”的英文缩写。我们上网所看到网页，多数都是由HTML写成的。“超文本”是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。而“标记”指的是这些超文本必须由包含属性的开头与结尾标志来标记。浏览器通过解码HTML，就可以把网页内容显示出来，它也构成了互联网兴起的基础
CSS
是一门描述性语言，主要一系列选择器(html元素)和属性构成(建筑的外部与内部装饰)
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化
JavaScript
是一门脚本编程语言，包含类似java的语法(数据类型，数组，条件分支，循环，对象..)(对外运营)
是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。
1.4.3 前端开发工具
1.浏览器
2.网页编辑器
3.切图软件
1.5 HTML语法基础
1.5.1 HTML概述：
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
1.5.2 HTML基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
我的第一个网页
</body>
</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文档都必须声明它们所使用的编码语言。文档声明的编码应该与实际编码一致，否则会成乱码。对于中文网页的设计
者来说，用户一般使用GB2313（简体中文）
1.5.2.4 HTML文档主体标签<body>...</body>
HTML文档主体标签的格式为<body>网页的内容</body>
.</body>
主体位于头部以后，以<body>为开始标签，</body>为结束标签。它定义网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在主体中。
1.6 创建HTML文档
- 打开文本编辑器。
- 输入HTML的基本结构代码。 一个基本的HTML文档通常包括以下元素： <!DOCTYPE html>：声明文档类型和HTML版本。 <html>：根元素，包含整个HTML文档。 <head>：头部信息，包含文档的元数据，如标题、字符编码等。 <title>：定义网页的标题。 <body>：包含可见的页面内容，比如文本、图片、链接等。 一个最简单的HTML文件的代码如下所示： ...
- 将文件保存时，选择“所有文件”，文件名后缀为.html。 例如，你可以将文件保存为 index.html。
- 使用浏览器打开这个HTML文件。 双击文件或者在浏览器中选择“文件”>“打开文件”，然后选择刚才保存的.html 文件即可看到你的网页内容。
1.7 网页头部标签
1.7.1 <title>标签
页面标题标签，位于<bead>和</head>，格式是<title>标题</title>
1.7.2 <meta>标签
元信息标签，<meta>标签分两大属性：HTTP 标题属性（http-equiv）和页面描述属性（name）。不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。name属性，用于设置搜索关键字和描述。<meta>标签的name属性的语法：
<meta name="参数"content="参数值">
name属性主要用于描述网页摘要信息，与之对应的属性值为content。主要是便于搜索引擎查找信息和分类信息用。
content中的内容
1.7.2.1 keywords
keywords用来告诉搜索引擎网页使用的关键字。
1.7.2.2 description
description 用来告诉搜索引擎网站主要的内容
1.7.3 <link>标签
用于连接外部资源和当前HTML文档，只在首部标签<head>和<head>中，格式为<link rel="stylesheet"href="外部样式表文件名.css"type="text/css”/>
1.7.4 <script>标签
是脚本标签，用于为HTML文档定义客户端脚本信息。此标签可以在文中包含一段客户端脚本程序，可以位于文档中任何位置，但常位于<head>标签内，以便维护。格式如下：
<scriptype="tex/ ess" src="脚本文件名 n.js"></scripl>
1.8HTML5文档注释和特殊符号
1.8.1 注释
为增加 HTML5文档的可读性，可为其添加注释部分。注释是文档中的说明文字，不会被浏览器执行。HTML5 使用<！-
-->标签为文档进行注释，注释标签以“<！--”开
头，以“一->”结束，中间的“….”替换为注释文字内容即可。
和多行注释。
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: large;
}
</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 scr="img/1.1.jpg"/>
<!--水平线-->
<hr size="2" color="black" width="100%">
<p align="center">网页制作教程 copyright©江西应用工程职业学院</p>
</body>
</html>
7373
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
