第一章网页制作的基础知识-CSDN博客

本文链接：https://blog.csdn.net/l1397222107/article/details/142078575

1.1 认识网页和网站

1.1.1 网页，网站

网站和网站的区别：

网站是一个集合，由多个网页和其他元素组成，而网页是构成网站的单个页面，网站是有独立域名，独立存放空间的内容的集合，这些内容可能是网页，也可能是程序或者其他文件。

网页：网页是展示信息的单一页面，每个网页都附加到一个唯一的URL地址。网页作为网站的一部分，通常包含指向网站内其他主题的链接。每个网页可以有独特的内容，但整体上是为了支持网站的主题和结构网站包括多种类型的内容，如文本、媒体等，并且具有更复杂的结构和链接关系，旨在提供完整的用户体验和信息展示。
网站：网站是由多个相互链接的网页组成的集合，所有网页都链接在一个域下，以唯一标识网站。

常用术语：如 Internet、WWW、浏览器、URL、IP、域名、HTLP、FTP、站点、发布

超链接、导航条、和服务器等。

例如：

WWW：其功能是让Web客户端访问Web服务器中的网页。

HTTP：超文本传输协议，是互联网上应用最为广泛的一个网络协议。所有的WWW文件都必须遵守这个标准

超链接：从一个网页指向一个目标的链接关系，这个目标可一是另一个网页，可以是相同网页的不同位置，也可以是一张图片，一个电子邮件地址，一个文件，甚至是一个程序。在浏览网页时点击超链接就能跳转到与之相应的页面。

1.1.2静态网页和动态网页

静态网页是指客户端的浏览器发送URL请求给Www服务器，服务器查找需要的超文本文件并不加处理地直接下载到客户端，运行在客户端的页面是已经事先做好并存放在服务器中的网页。静态网页通常由纯粹的HTML/CSS 语言编写。

动态网页能够根据不同浏览者的请求来显示不同的内容，无论网页本身是否具有视觉意义上的动态效果，只要采用动态网站技术生成的网页都称为动态网页，其本质主要体现在交互性方面。根据程序运行区域的不同，动态网页可分为客户端动态网页与服务端动态网页。客户端动态网页不需要与服务器进行交互，实现动态功能的代码往往采用脚本语言形式直接嵌人网页中，常见的客户端动态网页技术包括JavaScript，ActiveX 和 Flash等。

1.2 网页的基本构成元素

基本构成元素：文本、图片和动画、超链接、音频和视频、交互表单，气体常用元素（包括：悬停按钮、JavaScript与ActiveX等各种特效）。

（1）文本：具有体积小、网络传输速度快等特点，可使用户更方便地浏览和下载文本信息，是网页最主要的基本元素，也是页面中最主要的信息载体。与图片相比，文本虽然不如图片那样能够很快引起浏览者的注意，但却能准确地表达信息的内容和含义。为了克服文本固有的缺点，人们赋予了网页中文本更多的属性，如字体、字号、颜色、底纹和边框等，通过不同格式的区别，突出显示重要的内容。此外，用户还可以在网页中设计各种各样的文字列表，清晰地表达一系列项目。

（2）图片和动画：图片比文本更加生动和直观，可以传递一些文本不能表达的信息，具有强烈的视觉冲击力。网页中的网站标识、背景、链接等都可以是图片。用户在网页中使用的图片格式主要包括 GIF、JPEG和 PNG等，其中使用最广泛的是GIF和JPEG两种格式。在网页中，为了更有效地吸引浏览者的注意，许多网站的广告都做成了动画形式。

（3）超链接：超链接技术是WWW流行起来的最主要的原因。超链接是从一个网页指向另一个目的端的链接，指定从一个位置跳转到另一个位置，可以是文本链接、图像链接和锚链接等。超链接可以在当前页面中进行跳转，也可以在页面外进行跳转。

（4）音频和视频：音频文件可使网页效果多样化，网页中常用的音频格式有mid和mp3。其中mp3为压缩文件，其压缩率非常高，音质也不错，是背景音乐的首选。
网页中的视频文件一般为flv格式，它是一种基于FlashMX的视频流格式，具有文件小、加载速度快等特点，是网络视频格式的首选。

（5）交互表单：网页中的表单通常用来接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。这个目标可以是文本文件、网页和电子邮件，也可以是服务器端的应用程序。表单一般用来收集联系信息，接收用户要求，获得反馈意见，让浏览者注册为会员并以会员的身份登录站点等。

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

1.3网页的结构

1.3.1网页页面布局

1.3.2网页色彩搭配

例如：

（1）网页安全色

（2）网页中色彩的表达

（3）常见的色彩搭配

1.4Web前端技术简介

1.4.1初识Web的前端

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

1.4.2 Web前端开发的三大核心技术包括：

（1）HTML（2）CSS（3）JavaScript

1.4.3前端开发工具

一.浏览器

（1）IE浏览器（2）Chrome浏览器（3）Firefox浏览器（4）Safari浏览器（5）Opera浏览器

二.网页编辑器

（1）Adobe Dreamweaver（2）Sublime text（3）NotePad++（4）EditPlus（5）HBuilder

三.切图软件

（1）photoshop（2）Fireworks

1.5HTML语法基础

1.5.1 HTML概述

(1)语言

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

（2）超文本

超文本是可以加入图片、声音、动画、影视等内容的文本。事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，简单且易学易懂。

（3）标记

HTML5实际上不算是一种编程语言，而是一种标记语言。HTML5文件是由一系列成对出现的元素标签嵌套组合而成的。这些标签用“<”和“>”括起来。它们被称为标记，也称标签，是用来划分网页的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档的某个部分。在HTML中每个用作标签的符号都是一条命令，它会告诉浏览器如何显示文本。这些标签均由“<”和“>”符号以及一个字符串组成。如<head>，<body>等。而浏览器的功能是对这些标记进行解释，显示出文字、图片、动画和播放声音。这些标签符号用“<标签名字属性>”来表示。

1.5.2 HTML基本结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	你好，谷歌
</html>

基本结构

<p> </p>为段落标签

<html>……</HTML>文档标签

<head>...</head>文档头标签

1.6创建HTML文档

1.7网页头部标签

1.7.1<title>标签

<title>标签是页面标题标签。它将HTML文件的标题显示在浏览器的标题栏中，用以谈明文件的用途。这个标签只能应用于<head>与</head>之间。<tide>标签是对文件内容的括。一个好的标题能使读者从中判断出该文件的大概内容。
网页的标题不会显示在文本窗口中，而以窗口的名称显示出来，每个文档只允许有一个标题。网页的标题能给浏览者带来方便，如果浏览者喜欢该网页，将它加人书签中或保存磁盘上，标题就作为该页面的标志或文件名。另外，使用搜索引擎时显示的结果也是页面的标题。
<tde>标签位于<bead>与</head>中，用于标示文档标题，格式如下:<ite>标题</tite>

1.7.2<meta>标签

1.7.3<link>标签(引用"ass")

1.7.4<script>标签（引用“js”）

1.8 HTML5 文档注释和特殊符号

1.8.1 注释

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

1.8.特殊符号

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/>
	        依然一笑作春温。<hr />
			无波真古井,有节是秋筠。<br />
			惆怅孤帆连夜发,送行淡月微云。<br/>	
			尊前不用翠眉颦。<br/>
			<font color =" brown"face="微软雅黑">人生如逆旅,我亦是行人。</font></p >
		<img src="de89dbc3f641374e422db2acdf07508.jpg"/></img>
		<!--水平线-->
		<hr size="2"color="black” width =" 100%"/>
	</body>
</html>