第一章网页制作的基础知识

最新推荐文章于 2024-09-11 20:31:47 发布

榴莲千丞

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量509

点赞数 20

文章标签： css html 大数据

本文链接：https://blog.csdn.net/H2629896520/article/details/142078132

版权

1.1 认识网页和网站

1.1.1 网页、网站

网页和网站的区别：

（1）网址和地址（通过 URL 可以更好地理解网页和网站之间的主要区别）

网页：对于网页来说，它就像单个网页的特定地址。它由协议（如“https://”）、域名（如“www.example.com”）和页面的特定路径（如“/contact”）组成。

网站：网站的地址包括整个域或网站位置。它涵盖该特定 Web 域内的所有页面、子页面和内容。

（2）导航和结构

网页：众所周知，网页就像网站中的单个页面，类似于书中的章节。它包含可通过唯一 URL 访问的特定信息。因此，网页内的导航通常仅限于滚动或单击内部链接。

网站：网站是公共域下相关网页的集合。它就像一整本书，每个网页都是一个单独的章节。

（3）内容范围

网页：旨在传达特定主题的详细信息或服务于特定目的。例如，智能手机的产品网页将仅提供有关该特定产品的深入详细信息。

网站：将包含互连网页的集合。因此，其内容范围广泛，涵盖了同一屋檐下的各种主题或产品。

常用术语：

HTML、CSS、JavaScrip、t响应式设计、语义标记、aas、WWW、URL、IP、域名、FTP、站点、发布等等。

1.1.2 静态网页和动态网页

静态网页是实际存在的，无需经过服务器的编译，直接加载到客户浏览器上显示出来。静态页面需要占一定的服务器空间，且不能自主管理发布更新的页面，如果想更新网页内容，要通过FTP软件把文件DOWN下来用网页制作软件修改（通过fso等技术例外）。常见的静态页面举例：.html扩展名的、.htm扩展名的。

动态网页是一个对所有动态生成与动态更新的网页的统称。与传统的静态网页相反，它会因为变量的改变而产生不同的网页。这既可能是服务器端生成的网页，也可能是用户端生成的网页，或是两者的混合。

1.2 网页的基本构成元素

1.2.1 文本

文字能准确地表达信息的内容和含义，且同样信息量的文本字节往往比图象小，比较适合大信息量的网站。

1.2.2 图片和动画

图片在网页中使用GIF, JPEG(JPG), PNG三种图象格式，其中使用最广泛的是GIF和JPEG两种格式。动画主要指由FLASH软件制作的动画,由于其是准流媒体文件,加上矢量动画,文件小,使其在网络运行具有强大优势,是网页设计者必学的软件。

1.2.3 超级链接

从一个网页指向另一个目的端的链接。

1.2.4 音频和视频用

中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮JavaScript与 ActiveX等各种特效，它们不仅能点缀网页，使网页更活泼有趣，还在网上娱乐、电子商务等方面也有着不可忽视的作用。

1.3 页面布局结构

1.3.1 网页页面布局

根据不同的网页制作风格，可以将网页分为个人网页和商业网页。商业网页内容丰富.信息量大，一般都有统一的布局；个人网页风格比较多样、内容比较专一、形式比较灵活，更容易创造出美感。
确定好网页风格，要对网页的布局进行规划，也就是确定网页上网站标识、导航栏以及菜单元素等的位置。在网页设计中，结构布局是根据设计元素在网页中的位置分布进行分类的。常见的结构布局包括“国”字型、“广”字型、海报型和Flash型等，如图所示：

1.3.2 网页色彩搭配

（1）网页安全色。网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合。在使用网页安全色进行配色后，这些颜色在任何终端用户的显示设备上都将显示为相同的效果。
网页安全色是红色、绿色和蓝色。当颜色数字信号值为0，51，102，153，204和255
时，构成的颜色组合一共有216种颜色。
（2）网页中色彩的表达。在网页设计中，颜色值最常见的表达方式是十六进制。十六进制是计算机中数据的一种表示方法，由数字0~9和字母A~F组成，字母不区分大小写。颜色值可以采用6位的十六进制来进行表示，并且需要在前面加上特殊符号“#”，如#0E533D。还可通过RGB，HSB，Lab和CMYK来进行表示；RGB色彩模式是通过对红(R)、绿（G)、蓝（B）3个颜色通道的变化以及相互之间的叠加来得到各种颜色，是目前运用最广的颜色系统之一。HSB色彩模式是普及型设计软件中常见的色彩模式。Lab颜色模型由亮度（L）和a、b两个颜色通道组成，这种颜色混合后将产生具有明亮效果的色彩。CMYK也称作印刷色彩模式，由青、洋红（品红）、黄和黑4种色彩组合成各种颜色。
（3）常见的色彩搭配：
采用相近色配色：相近色是指相同色系的颜色，使用相近色进行网页色彩的搭配，可以使网页的效果更加统一和谐，如暖色调和冷色调就是相近色的两种运用。
采用近似色配色：在色相环中每一个颜色对面的颜色，称为互补色，也是对比最强的色组。也可以指两种明显区分的色彩，包括色相对比、明度对比、饱和度对比、冷暖对比等，如黄和蓝，紫和绿，红和青。任何色彩和黑、白、灰，深色和浅色，冷色和暖色，亮色和暗色都是对比色关系。

1.4 Web前端技术简介

1.4.1 初识WEB前端

Web 前端即指平常上网浏览的网页，如上网浏览新闻、查询快递信息、淘宝购物等都是在浏览网页。但网页制作还需要了解与网页相关的基本概念，下面对Web前端的相关概念进行详细讲解。
1991年8月6日，来自欧洲核子研究中心的科学家Tim Berners-Lee，启动了世界上第一个可以正式访问的网站（http：//ino.cerm.ch），标志着万维网时代的到来。随着互联网的飞速发展，网站开发人员也变得炙手可热。
Web 前端开发是从网页演变而来的，名称上有明显的时代特征。随着用户体验要求越来越高，前端开发的技术难度越来越大，Wch 前端开发这个职业也从设计和制作不分的局面中独立出来。
早期的前端其实就是 Tabel布局，后来发展到Div+CSS网站重构，再到JavaScript逐渐成为Web 前端开发的语言以及Web 2.0的出现，每个阶段都涌现出相应的产品，如SNS、博客、微博等。随着人们对网页需求的不断增大，Web前端技术也正加速地发展。

1.4.2 WEB前端开发的三大核心技术

（1）HTML：HTML是制作网页的标准语言。“超文本”就是指页面内可以包含图片、超链接、音乐、程序等非文字元素。超文本标记语言的结构包括“头部”（Head）和“主体”（Body）两部分，其中“头部”提供关于网页的信息，“主体”提供网页的具体内容。
（2）CSS语言：CSS 是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，并拥有对网页对象和模型样式进行编辑的能力。
（3）JavaScript 语言：采文使览于JavaScript 是一种属于网络的脚本语言，已经被广泛地用于Web应用开发，常用来为网

1.4.3 前端开发工具
安涉及三大类工具：浏览器、网贡编辑器。
（一）浏览器

浏览器是网页的运行平台，是可以把HTML文件展示在其中，供用户进行浏览的一种软件。目前主流的浏览器有IE浏览器、Chrome 浏览器、Firefox 浏览器、Safari 浏览器和Opera浏览器等，由于某些因素，这些浏览器没有完全采用统一的Web标准，或者说不同的浏览器对同一个CSS样式有不同的解析，这就导致了同样的页面在不同的浏览器下显示效果可能不同。用户使用的浏览器可能不同，因此制作网页时，需要保证该网页可以兼容所有的主流浏览器。
（1) IE 浏览器。IE是 Intemet Explorer 的简称，是由微软公司推出的一款网页浏览器.采用 Trident 内核实现，有6.0，7.0，8.0，9.0，10.0和11.0等版本。在I7.0以前，中文直译为“网络探路者”，但在IE7.0以后官方便直接称为“IE浏览器”。
使用低版本的浏览器，因此在制作网页时，一般也需要兼容低版本的浏览器。
一些用户仍然在一些其他的浏览器也是基于IE内核的，如360安全浏览器和拽狗浏览器等，只要兼容IE浏览器，这些基于I内核的浏览器也都兼容。

（2）Chrome 浏览器。Chrome 浏览器一般指Google Chrome。Google Chrome 是由Google公司开发的一款设计简单、高效的Web 浏览器，采用JavaScript引擎，可快速运行复杂的大型网站，从而降低浏览者访问的等待时长。该浏览器基于其他开源软件撰写，采用Webki和Blink内核实现，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。

（3) Firefox 浏览器。Firefox 浏览器一般指 Mozilla firefox，中文俗称“火狐”，是由Mozilla 公司出品的一款自由的及开放源代码的Web浏览器，采用Gecko内核实现，支持多种操作系统，如Windows 和 Mac OSX及GNU/Linux等。
（4)Safari 浏览器。Safari 浏览器是由苹果公司出品的用于苹果计算机操作系统Mac 0S X中的浏览器，采用Webkit 内核实现，使用了KDE的KHTML作为浏览器的运算核心。无论是在Mac还是在 PC上运行时，Safari 都可提供极致愉悦的网络体验方式。
（5）Opera 浏览器。Opera 浏览器是由挪威Opera Software ASA公司制作的一款支持多页面标签式浏览的浏览器，采用 Presto 内核实现。它是跨平台浏览器，可以在Windows，Mac和Linux3个操作系统平台上运行。

（二）网页编辑器

HTML，CSS和JavaScript 源代码文件均为纯文本内容，用计算机操作系统中自带的写字板或记事本工具就可以打开和编辑源代码内容。因此本书不对开发工具作特定要求，使用任意一款纯文本编辑器均可以进行网页内容的编写。这里介绍几款常用的网页开发工具软件：Adobe，Dreamweaver,Sublime Text,NotePad++，EditPlus 和 HBuilder。
（1) Adobe Dreamweaver。Adobe Dreamweaver 是一款所见即所得的网页编辑器，中文名称为“梦想编织者”或“织梦”。该软件最初的1.0版是1997年由美国Macromedia公司发布的，该公司于2005年被 Adobe 公司收购。Dreamweaver 也是当时第一套针对专业Web前端工程师所设计的可视化网页开发工具，整合了网页开发与网站管理的功能。
Dreamweaver 支持HTML5/CSS3源代码的编辑和预览功能，最大的优点是可视化性能带来的直观效果，开发界面可以分屏为代码部分与预览视图，当开发者修改代码部分时，预览视图会随着修改内容实时变化。Dreamweaver 也有它的弱点，由于不同浏览器存在兼容性问题，Dreamweaver的预览视图难以达到与所有浏览器完全一致的效果。

（2)Sublime Text。Sublime Text 的界面布局非常有特色，它支持文件夹导航图和代码缩略图效果。该软件支持多种编程语言的语法高亮显示，也具有代码自动完成提示功能。该软件还具有自动恢复功能，如果在编程过程中意外退出，在下次启动该软件时文件会自动恢复为关闭之前的编辑状态。
（3)NotePad++。NotePad++的名称来源于Windows 系列操作系统自带的记事本NotePad，在此基础上多了两个加号，立刻带来了质的飞跃。这是一款免费开源的纯文本编辑器，具有完整中文化接口并支持UTF-8技术。它具有语法高亮显示、代码折叠等功能，因此也非常适合作为计算机程序的编辑器。

（4)EditPlus。EditPlus 是由韩国Sangil Kim （ES-Computing）公司发布的一款文字编辑器，支持HTML、CSS，JavaScript，PHP和Java等多种计算机程序的语法高亮显示与代码折叠功能。其中最具特色的是EditPlus具有自动完成功能。例如，在CSS源文件中输入字母b，加上空格，就会自动生成“border：Ipx solid red”语句，开发者可以自行编辑快捷键所代表的代码块，然后在开发过程中使用快捷方式让 EditPlus自动完成指定的代码内容。
（5)HBuilder。HBuilder 是由 DCloud（数字天堂）推出的一款支持 HTML5的Web开发IDE。HBuilder 主要用于开发HTML，JS（JavaScript）和CSS，同时配合 HTML的后端脚本语言如PHP和JSP也可以适用，还有前端的预编译语言如less以及人们钟爱的markdown都可以良好地进行编辑。从2013年夏大发布至今，IIBuilder已经成为业内主流的开发工具。目前，HBuilderX发布了1.0正式版。
（三）切图软件
切图软件是对UI设计师设计出的效果图进行切图操作，也可以对网页中的图片进行修改等处理。常用的切图软件有Photoshop和Fireworks两种。

1.5 HTML语法基础

1.5.1 HTML概述

1.5.1.1 语言

HTML作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了浏览器在运行HTML.文档时所遵循的规则和进行的操作。协议的制定使测览器在运行超文本时有了统一的规则和标准。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台。自 1990年以来 HTML就一直被用作WWW的信息表示语言，使用HTMI描述的文件，需要通过Web浏览器HTTP显示出效果。

1.5.1.2 超文本

超文本是可以加入图片、声音、动画、影视等内容的文本。

1.5.1.3 标记

HTML5实际上不算是一种编程语言，而是一种标记语言。HTML5文件是由一系列成对出现的元素标签嵌套组合而成的。这些标签用“<”和“>”括起来。它们被称为标记，也称标签，是用来划分网页的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。

1.5.2 HTML基本结构

<！DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /><title>HTML文档结构</title></head>
<body>
<p>HTML文档结构由 head,body 标记组成</p >
<h3>标题3</h3>
</body>
</html>

1.5.2.1 HTML文档标签<html>...</html>

HTML文档标签的格式为，<html>HTML文档的内容</html>，<html>处于文档的最前面，表示 HTMI文档的开始，即浏览器从<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>为结束标签。它定义网页上显示的
主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在主体中。

1.6 创建HTML文档

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="Keywords"content="XXX"/>
		<meta name="description"content="XXX"/>
		<link rel="stylesheet" href="/css/index.css" type="text/css"/>
		<script type="text/javascript" src="js/index.js"></script>
		<title>第一个网页</title>
	</head>
	<body>
		<P>我的第一个网页</P>
		<!--单行注释内容-->
		<P>2023软件技术1班</P>
		<!--
		多行注释第一行
		多行注释第二行
		多行注释第三行
		-->
		<a href="http://WWW.baidu.com">百度一下</a>
	</body>
</html>

1.7 网页头部标签

1.7.1 <title>标签

<title>标签是页面标题标签。它将HTML文件的标题显示在浏览器的标题栏中，用以说明文件的用途。这个标签只能应用于<head>与</head>之间。<title>标签是对文件内容的概括。一个好的标题能使读者从中判断出该文件的大概内容。

1.7.2 <meta>标签

1.7.2.1 keywords

keywords 用来告诉拽索引擎网页使用的关键字。

1.7.2.2 description

description 用来告诉搜索引擎网站主要的内容。

1.7.3 <link>标签

1.7.4 <script>标签

1.8 HTML5文档注释和特殊符号

1.8.1 注释

为增加HTML5文档的可读性，可为其添加注释部分。注释是文档中的说明文字，不会被浏览器执行。HTML5使用<！--…-->标签为文档进行注释，注释标签以“<！--”开头，以“-->”结束，中间的“…·”替换为注释文字内容即可。标签支持单行和多行注释。

<！DOCTYPE html><html>
<head>
<meta charset="utf-8"/>
<title>带有注释语句的页面</title>
</head>
<body>
你好，HTML5!
<！--接下来出现一条水平线--><hr size="3" color=" black"><！--
这是一个多行注释语句
注释语句不会被浏览器执行
也不会在浏览器中显示
<p>网页制作工作室&nbsp；&nbsp；热线：400-111-1111</p >
</body>
</html>

1.8.2 特殊符号

由于大于号“>”和小于号“<”等已作为HTML的语法符号，所以，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示。这些特殊符号对应的HTML代码被称为字符实体。

特殊符号	字符实体	示例
空格	&nbsp ;	银河商务  热线:400-111-1111
大于(>)	>	3>2
小于(<)	<	2<3
引号(”)	&quot ;
&quot ;	©	Copyright©网页设计教程

1.9 综合案例——临江仙 · 送钱穆父

以一首宋词为例子，参照给定的HTML代码和图片资源，利用HBuilder设计Web网页。

（图片资源）以下为完整代码，以供参考。

<!DOCTYPE html>
<html>
	<head>
		<meta name="keywords"content="宋词,苏轼" charset="utf-8" />
		<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/images/微信图片_20240911125602.jpg"/>
		<!--水平线-->
		<hr size="2" color="black" width="100%"/>
		<p align="center">网页制作教程 Copyright&copy;广东南方职业学院</p>
	</body>
</html>

本例浏览效果如图所示：

榴莲千丞

关注

20
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
第一章网页制作的基础知识

Web 前端即指平常上网浏览的网页，如上网浏览新闻、查询快递信息、淘宝购物等都是在浏览网页。但网页制作还需要了解与网页相关的基本概念，下面对Web前端的相关概念进行详细讲解。1991年8月6日，来自欧洲核子研究中心的科学家Tim Berners-Lee，启动了世界上第一个可以正式访问的网站（http：//ino.cerm.ch），标志着万维网时代的到来。随着互联网的飞速发展，网站开发人员也变得炙手可热。Web 前端开发是从网页演变而来的，名称上有明显的时代特征。
复制链接

扫一扫