1.1 认识网页和网站
1.1.1 网页、网站
1.1.1.1 网页
网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。网页又称为超文本，分为静态网页和动态网页两种类型。
1.1.1.2 网站
网站是指在因特网上根据一定的规则，使用HTML等工具制作的用于展示特定内容相关网页的集合。网站也不一定需要很多的网页，只要有独立的域名和空间，哪怕只有一个页面也可以称为网站。
1.1.1.3 常用术语
Internet：由各种不同类型的计算机网络连接起来的全球性网络。
浏览器：能够把Internet中的文本文档和其他文件翻译成网页、快捷获取Internet内容的软件。
URL：统一资源定位符，指定通信协议和地址，“http://”表示通讯协议为超文本传输协议。
IP：网际协议。
域名：指网站名称，在全世界是唯一的。通常看成网站的网址。
超链接：是Web页面区别于其他媒体的重要特征之一。它允许用户通过点击网页中的文本、图片或按钮等对象，自动跳转到另一个网页、网页内的不同位置、文件、电子邮件地址，甚至是一个应用程序。
1.1.2 静态网页和动态网页
1.1.2.1 静态网页
静态网页通常由纯粹的HTML/CSS语言编写。
1.1.2.2 动态网页
动态页面通常使用服务器端脚本语言（如PHP、Python、Java等）来处理用户请求并生成动态内容。
动态网页可分为客户端动态网页与服务端动态网页。 动态网页技术包括JavaScript，ActiveX和Flash等。
1.2 网页的基本构成元素
1.2.1 文本
文本是网页最主要的基本元素，也是页面中最主要的信息载体。能够准确表达信息的内容和含义。
特点：体积小、网络传输速度快等。
1.2.2 图片和动画
图片和动画更加生动和直观，具有强烈的视觉冲击力。
图片格式包括：GIF、JPEG和PNG等，最广泛的是GIF和JPEG。
1.2.3 超链接
超链接技术是WWW流行起来的最主要的原因。
1.2.4 音频视频
音频文件可使网页效果多样化，常用格式有mid和mp3，mp3为压缩文件，是背景音乐首选。
网页中的视频文件一般为flv格式，基于Flash MX，是网络视频格式的首选。
1.2.5 交互表单
表单一般用来收集联系信息。
1.2.6 其他常见元素
其他常见元素包括悬停按钮、JavaScript与ActiveX等各种特效，在网上娱乐、电子商务方面也有着不可忽视的作用。
1.3 页面布局结构
1.3.1 网页页面布局
网页可分为个人网页和商务网页。商务网站一般都有统一的布局；个人网站风格比较多样。
常见的结构布局包括：
1.3.2 网页色彩搭配
网络安全色：指在任何终端用户的显示设备上都将显示相同的效果。是红色，绿色，蓝色。
网页中色彩的表达：在网页设计中，颜色值最常见的表达方式是十六进制。十六进制由数字0~9和字母A~F组成， 不区分大小写。颜色值采用6位的十六进制来进行表示，并需要在前面加上特殊符号“#”，如#0E533D。还可通过RGB，HSB，Lab和CMYK来进行表示;RGB色彩模式是通过对红 、绿 、蓝3个颜色通道的变化以及相互之间的叠加来得到各种颜色，是目前运用最广的颜色系统之一。HSB色彩模式是普及型 Lab颜色模型由亮度(L)和a、b两个颜色通道组成，这种颜色混合后将产生具有明亮效果的色彩。CMYK也称作印刷色彩模式由4种色彩组合成 。
常见的色彩搭配：
相近色配色：使用相近色搭配，可以使网页的效果更加统一和谐。
近似色配色：在色相环中每一个颜色对面的颜色，称为互补色，也是对比最强的色组。如黄和蓝，紫和绿 。任何色彩和黑、白、灰，深色和浅色，冷色和暖色，亮色和暗色都是对比色关系。
1.4 Web前端技术简介
1.4.1 初识Web前端
Web前端指平时上网浏览的网页，如查询快递信息、淘宝购物等都是浏览网页。
Web前端开发是从网页演变过来的，名称上有明显的时代特征。
前端变化：Tabel布局——Div+CSS网站重构——JavaScript。
1.4.2 Web前端开发的三大核心技术
1.4.2.1 HTML
HTML是制作网页的标准语言。
“超文本”就是指页面内可以包含图片、超链接、音乐、程序等非文字元素。超文本标记语言的结构包括“头部”(Head)和“主体”(Body) 两部分，其中“头部”提供关于网页的信息，“主体”提供网页的具体内容。
1.4.2.2 CSS语言
CSS是一种用来表现HTML或XML等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以 对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，并拥有对网页对象和模型样式进行编辑的能力。
1.4.2.3 JavaScript语言
JavaScript是一种属于网络的脚本语言， 被广泛地用于Web应用开发，提供更流畅美观的浏览效果。JavaScript代码由浏览器边解释边执行。通常JavaScript脚本通过嵌入在HTML中的方式来实现自身的功能。
1.4.3 前端开发工具
1.4.3.1 浏览器
浏览器是网页的运行平台，是可以把HTML文件展示在其中，供用户进行浏览的一种软件。
目前主流的浏览器有：IE浏览器、Chrome浏览器、Firefox浏览器、Safari浏览器和Opera浏览器等。
1.4.3.2 网页编辑器
HTML、CSS、JavaScript源代码文件均为纯文本内容，用计算机操作系统中自带的写字板或记事本工具就可以打开和编辑源代码内容。几款常用的网页开发工具软件有：Adobe Dreamweaver、Sublime Test、NotePad++、Editplus和Hbuilder。
1.4.3.3 切图软件
切图软件是对UI设计师设计出的效果图进行切图操作，也可以对网页中的图片进行修改等处理。常用的切图软件有Photoshop和 Fireworks两种。
1.5 HTML语法基础
1.5.1 HTML概述
1.5.1.1 语言
HTML是一种超文本标记语言，使用HTML描述的文件，需要通过Web浏览器HTTP显示出效果。
1.5.1.2 超文本
超文本是可以加入图片、声音、动画、影视等内容的文本。
1.5.1.3 标记
HTML5实际上不算是一种编程语言，而是一种标记语言。是由一系列成对出现的元素标签嵌套组合而成的。
标签分为单标签和双标签两大类：
单标签指的是只存在一个标签的写法，如<meta>，<input>等。
双标签指的是存在一对标签的写法，如<html>...</html>，<head>...</head>。
（注意：在双标签中第一个为开始标签，第二个为结束标签，结束标签在左尖括号后添加一个关闭符 “ / ” 。）
1.5.2 HTML基本结构
1.5.2.1 HTML文档标签<html>...</html>
文档标签的格式为：<html>HTML文档的内容</html>
1.5.2.2 HTML文档头标签<head>...</head>
HTML文档包括头部(head)和主体(body)。HTML文档头标签的格式为<head>头部的内容</head>
文档头部内容在开始标签<html>和结束标签</html>之间定义，其内容可以是标题名或者文本文件地址、创作信息等网页信息说明。
<head>
<meta charset="utf-8" />
<meta name="keywords"/ content="百度">
<!-- content="xxx" xxx代表关键词 -->
<meta name="description"/ content="百度是一个查询许多问题的软件">
<!-- content="xxxxx" xxxxx代表更详细的网站内容描述 -->
<title>第一个网页项目</title>
<!-- <title></title>设置标题（网页的名字） -->
<link rel="stylesheet" href="/css/frist.css" type="text/css"/>
<!-- <link rel="文件作用" href="路径" type="文件类型">/ (引入css文件)-->
<script type="text/javascript " src="js/frist.js"></script>
<!-- <script></script>(引入js文件，同上) -->
</head>
1.5.2.3 文档编码
文档编码格式如下:<meta charset =" utf-8" />
1.5.2.4 HTML文档主体标签<body>...</body>
<body>
<h1>我的第一个网页项目</h1>
<!-- <h1></h1>将字体设置为标题1 -->
<p>2023级软件技术三班</p>
<!-- <p></p>将文字设置为段落，作为换行使用 -->
<a href="http://www.baidu.com">百度一下</a>
</body>
1.6 创建HTML文档
使用HBuilder新建项目。依次点击选择“文件”→“新建”→“Web项目"，如图1-7所示。
创建项目名称，设置项目所在的位置确定即可，完成之后会在左边的项目栏管理器中出现，如图1-8所示。在本示例中，项目名称为“课堂练习”。
打开项目“课堂练习”的文件夹，会看到里面有首页index.html，如图1-9所示，有js文件夹，有css文件夹，还有图片的文件夹，基本齐全。
到了这一步之后，便可以编写网页代码了，可以直接在index.html 中编写代码。网页完成后，可以执行菜单“运行”→“浏览器运行”，选择电脑中已有的浏览器进行预览，我使用的是Chrome 浏览器，完整代码图如下：（完整代码与图1-9不是同一个代码，但代码原理相同）
代码注释可按快捷键 Ctrl+/ 或写成 <!--需要被注释的文字或段落--> 的形式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords"/ content="百度">
<!-- content="xxx" xxx代表关键词 -->
<meta name="description"/ content="百度是一个查询许多问题的软件">
<!-- content="xxxxx" xxxxx代表更详细的网站内容描述 -->
<title>第一个网页项目</title>
<!-- <title></title>设置标题（网页的名字） -->
<link rel="stylesheet" href="/css/frist.css" type="text/css"/>
<!-- <link rel="文件作用" href="路径" type="文件类型">/ (引入css文件)-->
<script type="text/javascript " src="js/frist.js"></script>
<!-- <script></script>(引入js文件，同上) -->
</head>
<body>
<h1>我的第一个网页项目</h1>
<!-- <h1></h1>将字体设置为标题1 -->
<p>2023级软件技术三班</p>
<!-- <p></p>将文字设置为段落，作为换行使用 -->
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>运行结果如下图：
1.7 网页头部标签
1.7.1 <title>标签
<title>标签是页面标题标签。这个标签只能应用于<head>与</head>之间，用于标示文档标题，格式如下:<title>标题</title>
例如，京东商城的文档标题:
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!</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.7.2.1 keywords
keywords 用来告诉搜索引擎网页使用的关键字。关键字设置如下:
<meta name =" keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"/>
1.7.2.2 description
description 用来告诉搜索引擎网站主要的内容。例如，京东商城网站主页的内容描述设置如下:
<meta name=" description" content="京东JD.COM-专业的综合网上购物商城,为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家,囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类,满足各种购物需求。"/>
当浏览者通过百度搜索引擎(百度)搜索“京东”时，就可以看到搜索结果中显示出网站主页的标题、关键字和内容描述，如下图所示。
1.7.3 <link>标签
<link>标签用于连接外部资源和当前 HTML 文档，它只在首部标签<head>和</head>中，通常用于链接外部样式表。并不直接链接到当前文档中，只是提供链接的路径。
<link>标签最常用的是用来链接CSS样式文件，格式如下:
<link rel=" stylesheet"href="外部样式表文件名.css "type=" text/css”/>
如果需要同时引用多个外部样式表文件，则需要为每一个CSS样式文件单独使用一次<link>标签。
1.7.4 <script>标签
<script>标签是脚本标签，用于为 HTML,文档定义客户端脚本信息。此标签可以在文档中包含一段客户端脚本程序，可以位于文档中任何位置，但常位于<head>标签内，以便于维护。格式如下:
<scripttype="texVcss" src="脚本文件名 n.js"></script>
1.8 HTML5文档注释和特殊符号
1.8.1 注释
为增加 HTML5 文档的可读性，可为其添加注释部分。注释是文档中的说明文字，不会被浏览器执行。HTMLS 使用<!--…-->标签为文档进行注释，注释标签以“<!--”开头，以“-->”结束，中间的“…”替换为注释文字内容即可。<!--…-->标签支持单行和多行注释。
1.8.2 特殊符号
由于大于号“>”和小于号“<”等已作为 HTML的语法符号，所以，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示。这些特殊符号对应的HTML 代码被称为字符实体。
常用的特殊符号及对应的字符实体见表1-1。这些字符实体都以“&”开头，以“;”结束，下表为常用的特殊符号及对应的字符实体特殊符号。
1.9 综合案例——临江仙 · 送钱穆父
运行代码如下：
<!-- 综合案例 -->
<!DOCTYPE html>
<html>
<head>
<meta name="keywords"/ content="宋词,苏轼" charset="utf-8">
<!-- content="xxx" xxx代表关键词 -->
<meta name="description"/ content="本网站收录精选宋词">
<!-- content="xxxxx" xxxxx代表更详细的网站内容描述 -->
<title>宋词精选</title>
<!-- <title></title>设置标题（网页的名字） -->
<style type="text/css">
p{
text-align:center;
font-size:larger;
}
</style>
</head>
<body bgcolor="antiquewhite" text="#333333">
<h2 align="center">临江仙·送钱穆父</h2>
<!-- <h2></h2>将字体设置为标题2 -->
<!-- align="center" 将字体设为居中-->
<p>宋 苏轼</p>
<!-- <p></p>将文字设置为段落，作为换行使用 -->
<p>一别都门三改火,天涯踏尽红尘。<br />
依然一笑作春温。<br />无波真古井,有节是秋筠。<br />
惆怅孤帆连夜发,送行淡月微云。<br/>尊前不用翠眉颦。<br/>
<font color=" brown" face="微软雅黑">人生如逆旅,我亦是行人。</font></p >
<img src="img/微信图片_20240912085237.jpg"/>
<!--将插入的图片放置在img文件夹下，src="路径"-->
<!--水平线-->
<hr size ="2" color=" black" width =" 100%"/>
<p align="center">网页制作教程 Copyright©广东南方职业学院</p>
</body>
</html>
运行结果如下：
1393
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
