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

最新推荐文章于 2025-02-21 16:41:18 发布

辛吉聪

最新推荐文章于 2025-02-21 16:41:18 发布

阅读量2.1k

点赞数 49

文章标签： html5

本文链接：https://blog.csdn.net/2402_87190919/article/details/142078500

版权

1.1 认识网页和网站

1.1.1 网页，网站

网页的定义：网页又称Web页面，是构成网站的基本元素，是把文字、图形、声音及动画等多媒体信息相互连接起来而构成的一种信息表达方式。人们在浏览器中输入网址打开的页面，一般称为该网站的首页，可以从中了解网址的有关信息和内容，是用户浏览站点的“入口处”，是整个Web站点的起始点和汇总点。网页一般由站标、导航栏、广告栏、信息区和版权区等组成。

网站的定义：网站是在Internet上通过超链接的形式构成的相关网页的集合，是一个或多个网页组成的一个完善的整体，人们可以通过浏览器来访问网站，以获得自己需要的资源和享受网络提供的服务。网站按其内容可分为门户网站、个人网站、职能网站等类型。

1.1.2 静态网页和动态网页

静态网页: 通常由纯粹的HTML/CSS语言编写
动态网页：只要采用动态网站技术生成的网页、

1.2 网页的基本构成元素

1.2.1 文本

文本的定义：由一定的符号或符码组成的信息结构体

文本的优点：文本具有体积小、网络传输速度快等特点，可使用户更方便地浏览和下载文本信息，是网页最主要的基本元素，也是页面中最主要的信息载体。

1.2.2 图片和动画

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

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

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

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

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

1.3 页面布局结构、

在网页设计中，结构布局是根据设计元素在网页中的位置分布进行分类的。常见的结构布局包括“国”字型、“厂”字型、海报型和 ash 型等，如图所示。

1.3.2 网页色彩搭配
1.网络安全色的介绍：由于不同的系统使用不同的调色板，而网络浏览器有各自的色板，碰到哪些它没有的色彩，会用最为相似的颜色来代替，这样必然会造成色彩的失真，网络安全色选的216种颜色是让所有的浏览器都支持的颜色。网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合（调色板），也就是说这些颜色在任何终端浏览用户显示设备上的现实效果都是相同的。

2.网页中色彩的表达。在网页设计中，颜色值最常见的表达方式是十六进制。十六进制是计算机中数据的一种表示方法，由数字0~9和字母A~F组成，字母不区分大小写颜色值可以采用6位的十六进制来进行表示，并且需要在前面加上特殊符号“#”，如#0E533D。还可通过RGB，HSB，Lab和CMYK来进行表示;RGB色彩模式是通过对红(R)、绿(C)、蓝(B)3个颜色通道的变化以及相互之间的叠加来得到各种颜色，是目前运用最广的颜色系统之一。HSB色彩模式是普及型设计软件中常见的色彩模式。Lab颜色模型由亮度(L)和a、b两个颜色通道组成，这种颜色混合后将产生具有明亮效果的色彩CMYK也称作印刷色彩模式，由青、洋红(品红)、黄和黑4种色彩组合成各种颜色。

1.4 Web前端技术简介

1.4.1 初识WEB前端
web前端即指平常上网浏览的网页，如上网浏览新闻、查询快递信息、淘宝购物等是在浏览网页。

1.4.2 WEB前端开发的三大核心技术
Web前端开发所包括的三大核心技术:HTML、CSS语言和JavaScript语言。
1. HTML
HTML是制作网页的标准语言。“超文本”就是指页面内可以包含图片、超链接、音乐、程序等非文字元素。超文本标记语言的结构包括“头部”(Head)和“主体”(Body)两部分，其中“头部”提供关于网页的信息,“主体”提供网页的具体内容。
2. CSS语言
CSS是一种用来表现HTML或XML等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，并拥有对网页对象和模型样式进行编辑的能力。
3. JavaScript语言
Javascript是一种属于网络的脚本语言,Javascript脚本通过嵌人在HTML,中的方式来实现自身的功能。

1.4.3 前端开发工具
在HTML+CSS开发过程中，需要先来选择适合的相关开发工具。HTML+CSS开发过程中主要涉及三大类工具:浏览器、网页编辑器和切图软件。
1. 浏览器
浏览器是网页的运行平台，是可以把HTML文件展示在其中，供用户进行浏览的一种软件。目前主流的浏览器有正浏览器、Chrome浏览器、Firefox浏览器、Safari 浏览器和 Opera浏览器等。
2. 网页编辑器
HTML,CSS,JavaScrip源代码文件均为纯文本内容，用计算机操作系统中自带的写字板或记事本工具就可以打开和编辑源代码内容。这里介绍几款常用的网页开发工具软件: Adobe Dreamweaver, Sublime Text, NotePad++, EditPlus 和 HBwilder.
3. 切图软件
切图软件是对UI设计师设计出的效果进行切图操作，也可以对网页中的图片进行修改等处理。常用的修图软件有photoshop和fireworks。

1.5 HTML语法基础

1.5.1 HTML概述
HTML是Hyper Text Markup langunge 的缩写，即超文本标记语言，是一种用来制作超文本文档的简单标记语言
1. 语言
HTML,作为一种超文本标记语言，有指定的语法规则、超文本传输协议规定了例览器在运行HTNL文档时所遵循的规则和进行的操作。
2. 超文本
超文本是可以加入图片、声音、动画、影视等内容的文本。
3. 标记
HTML5 实际上不算是一种编程语言，而是一种标记语言。HTML5 文件是由一系列成对出现的元素标签嵌套组合而成的。这些标签用“<”和“>”括起来。它们被称为标记，也称标签，是用来划分网页的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档的某个部分。在HTML中每个用作标签的符号都是一条命令，它会告诉浏览器如何显示文本。这些标签均由“<”和“>”符号以及一个字符串组成。如<head>，<body>等。而浏览器的功能是对这些标记进行解释，显示出文字图片、动画和播放声音。这些标签符号用“<标签名字属性>”来表示
1.5.2 HTML基本结构
HTML文档是由一系列的元素和标签组成的。元素名不区分大小写，HTML用标签来规定元素的属性和它在文件中的位置，HTML文档分为头部和主体两部分，在文档头部对文档进行一些必要的定义，主体部分是文档要显示的信息。
1. HTML 文档标签<htmI>…</html>、

2. HTML 文档头标签<head>…</head>
HTML文档包括头部(head)和主体(body)。HTML文档头标签的格式为 <head>头部的内容</head>文档头部内容在开始标签<html>和结束标签</html>

3. 文档编码
格式如下 <meta charset="utf-8"/>
4. HTML 文档主体标签<body>…</body>
HTML文档主体标签的格式为
<body>网页的内容</body>
主体位于头部以后，以<body>为开始标签，</body>为结束标签。它定义网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在主体中。

1.6 网页头部标签

1.6.1 <tile>标签

<tile>标签是页面标题标签。它将HTML文件的标题显示在浏览器的标题栏中,用以说明文件的用途。这个标签只能应用于<head>与</head>之间。
<tile>标签位于<head>与</head>中，用于标示文档标题，格式如下, <tile>标題</tile>
1.6.2 <meta>标签
<meta>标签是元信息标签，在HTML中是一个单标签。该标签可重复出现在头部用采指明本页的作者、制作工具、所包含的关键字，以及其他一些描述网页的信息。<meta>标签分两大属性:HTTP标题属性(htp-equiv)和页面描述属性(name)。不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。本节主要讲name 属性，用于设置搜索关键字和描述。<meta>标签的name 属性的语法 <meta name="参数"content="参数值">
mme属性主要用于描述网页摘要信息，与之对应的属性值为conten。condrent 中能主要是便于搜索引擎查找信息和分类信息用。
name属性主要有以下两个参数; keywords（关键字)和 descipion(网站描述）。
1.6.3 <link>标签
<link>标签用于连接外部资源和当前HTML文档，它只在首部标签<head>和</head>中。link 标签最常用的是用来链接 CSS 样式文件,格式如下:
<link rel="stylesheet" href="外部样式表文件名 .css "type=" tex/css”/>
1.6.4 <script>标签
<script>标签是脚本标签，用于为HTML文档定义客户端脚本信息。此标签可以在文中包含一段客户端脚本程序,可以位于文档中任何位置，但常位于<head>标签内，以便维护。格式如下:
<saripttype="tex/css" src="脚本文件名 n.js"></script>、

1.7 HTML5文档注释和特殊符号

1.7.1 注释
为增加HTML5文档的可读性，可为其添加注释部分。注释是文档中的说明文字,不会被浏览器执行。HTMI5 使用标签为文档进行注释，注释标签以“标签支持

1.7.2 特殊符号

<! --案例-->
<!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>
           <! --使用的效果-->
           <p>一别都门三改火，天涯踏尽红尘。<br/>
                   依然一笑作春温。<br/>
               无波真古井，有节是秋筠。<br/>
               惆怅孤帆连夜发，送行淡月微云。<br/>
               尊前不用翠梅颦。<br/>
               <font color ="brown" face="微软雅黑">人生如逆旅，我亦是行人。</font></p>
           <img src=""/>
           
           <hr size="2" color="black" with="100%" />
           <p align="center">网页制作教程Copyright&copy；广东南方职业学院</p>
   </body>
</html>