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

白衣冉冉109

于 2024-09-11 21:53:19 发布

阅读量1k

点赞数 41

文章标签： html

本文链接：https://blog.csdn.net/2302_80829420/article/details/142052938

版权

1.1.1 网页、网站

网页和网站的区别：

‌定义与组成‌：网页是网站的基本组成单元，它是由HTML、CSS、JavaScript等编写的单个页面，可以包含文本、图像、视频、链接等元素，用于展示信息或提供功能。而网站则是由多个网页组成的集合体，这些网页通过链接相互连接，形成一个完整的在线资源。网站还包括导航菜单、标志、底部信息等共享的元素‌1。
‌功能与技术‌：网页通常实现几个简单功能，如表单提交、图片点击等，而网站功能齐全，可能包括用户注册、登录、评论、搜索等，以满足用户的多样化需求。网站的开发和维护涉及到多种技术，如服务器端编程、数据库管理、前端开发等，而网页的开发主要涉及到前端技术‌23。
‌独立性与结构‌：网站具有独立域名和存放空间，而单个网页没有独立的域名和空间只能称为网页。网站通常具有较为复杂的结构，包括导航栏、侧边栏、底部等多个部分，以便于用户浏览和查找信息。网页的结构相对简单，通常只包含一个主体部分，网页之间的跳转主要通过超链接实现‌34。
‌访问与体验‌：网站需要部署到服务器，利用域名或IP地址访问，而网页可以直接在浏览器访问。网站给用户体验更为全面，是一个完整的系统，而网页只是一个功能界面展示‌2。

综上所述，网页是构成网站的基本单元，而网站是由多个网页通过链接相互连接形成的完整在线资源，具有更复杂的功能和结构

常用术语：

‌1.CSS‌：级联样式表（Cascading Style Sheets），用于描述HTML或XML（包括SVG、XHTML等）文档的样式。
2.DOM‌：文档对象模型（Document Object Model），是网页的标准模型，用于表示和修改网页的结构和内容。
3.HTML‌：超文本标记语言（HyperText Markup Language），用于创建网页的标准标记语言。
4.JavaScript‌：一种在浏览器中运行的脚本语言，用于实现网页的动态效果和交互性。
5.URL‌：统一资源定位符（Uniform Resource Locator），用于标识互联网上资源的地址。
6.Backlink‌：反向链接，也称为入站链接，是指从其他网站链接到特定网页的链接。
7.服务器‌：提供计算服务的设备，具有高处理能力、稳定性、安全性、可扩展性等特点

8.域名‌：网站的地址，用于与IP地址关联，便于用户记忆和访问。

1.1.2 静态网页和动态网页

1.静态网页
静态网页是指客户端的浏览器发送URL请求给WWW服务器，服务器查找需要的超文本文件并不加处理地直接下载到客户端，运行在客户端的页面是已经事先做好并存放在服务器中的网页。静态网页通常由纯粹的HTMI/CSS语言编写。
2.动态网页
动态网页能够根据不同浏览者的请求来显示不同的内容，无论网页本身是否具有视觉意义上的动态效果，只要采用动态网站技术生成的网页都称为动态网页，其本质主要体现在交互性方面。根据程序运行区域的不同，动态网页可分为客户端动态网页与服务端动态网页。
客户端动态网页不需要与服务器进行交互，实现动态功能的代码往往采用脚本语言形式直接嵌入网页中，常见的客户端动态网页技术包括JavaScript，ActiveX和Flash等。
服务端动态网页则需要与客户端共同参与，客户端通过浏览器发出页面请求后，服务端根据URL携带的参数运行服务端程序，产生的结果页面再返回客户端。动态网页比较注重交互性，即网页会根据客户端的要求和选择而动态改变和响应。一般涉及数据库操作的网页（如注册、登录和查询等）都需要服务端动态网页程序。

1.1.3 页面布局结构

1.国字型：国字型是最常见的一种布局方式其上方为网站标题和广告条，中间为正文，左右分列两栏，用于放置导航和工具栏等，下方是站点信息。

2.厂字型：与“国字型”相似，上方为标题和广告条，中间左侧较窄的一栏放超链接一类的功能，右侧为正文，下面为站点信息。

3.海报型：这种结构的布局方式比较简单，主要用于突出需要表达的重点，通常最上方为通栏的标题和导航条，下方是正文部分。

4. Flash型：常用于显示宣传网站首页，常以精美大幅图像为主题，设计方式多为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前端的相关概念进行详细讲解。
Web前端开发是从网页演变而来的，名称上有明显的时代特征。随着用户体验要求越来越高，前端开发的技术难度越来越大，Web前端开发这个职业也从设计和制作不分的局面中独立出来。
早期的前端其实就是Tabel布局，后来发展到Div+CSS网站重构，再到JavaScript 逐渐成为Web前端开发的语言以及Web2.0的出现，每个阶段都涌现出相应的产品，如SNS博客、微博等。随着人们对网页需求的不断增大，Web前端技术也正加速地发展

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

HTML：HTML是制作网页的标准语言。“超文本”就是指页面内可以包含图片、超链接、音乐程序等非文字元素。超文本标记语言的结构包括“头部”(Head)和“主体”(Body)两部分，其中“头部”提供关于网页的信息,“主体”提供网页的具体内容。

CSS语言：CSS是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，并拥有对网页对象和模型样式进行编辑的能力。

JavaScript语言：JavaScript 是一种属于网络的脚本语言，已经被广泛地用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。它的解释器被称为JavaScript引|擎，属于浏览器的一部分，因此JavaScript代码由浏览器边解释边执行。通常JavaScript 脚本通过嵌入在 HTML,中的方式来实现自身的功能

1.4.3 前端开发工具

1.浏览器

浏览器是网页的运行平台，是可以把HTML文件展示在其中，供用户进行浏览的一种软件。目前主流的浏览器有正浏览器、Chrome浏览器、Firefox浏览器、Safari浏览器和Opera浏览器······

①IE浏览器：IE是Intermet Explorer 的简称，是由微软公司推出的一款网页浏览器采用 Trident 内核实现

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

③Firefox浏览器：Firefox浏览器一般指Mozillafirefox，中文俗称“火狐”，是由Mozilla 公司出品的一款自由的及开放源代码的Web浏览器，采用Gecko内核实现，支持多种操作系统。

④Safari浏览器：Safari 浏览器是由苹果公司出品的用于苹果计算机操作系统MacOSX中的浏览器，采用Webkit内核实现，使用了KDE的KHTML作为浏览器的运算核心。

⑤Opera浏览器：Opera 浏览器是由挪威Opera Software ASA 公司制作的一款支持多页面标签式浏览的浏览器，采用Presto内核实现。它是跨平台浏览器，可以在Wimndows，Mac和 Linux 3个操作系统平台上运行

2.网页编辑器

①Adobe Dreamweaver：Adobe Dreamweaver 是一款所见即所得的网页编辑器，中文名称为“梦想编织者”或“织梦”。Dreamweaver支持HTML5/CSS3 源代码的编辑和预览功能，最大的优点是可视化性能带来的直观效果，开发界面可以分屏为代码部分与预览视图，当开发者修改代码部分时，预览视图会随着修改内容实时变化。Dreamweaver也有它的弱点，由于不同浏览器存在兼容性问题，Dreamweaver 的预览视图难以达到与所有浏览器完全一致的效果。

②Sublime Text：Sublime Text的界面布局非常有特色，它支持文件夹导航图和代码缩略图效果。该软件支持多种编程语言的语法高亮显示，也具有代码自动完成提示功能。该软件还具有自动恢复功能，如果在编程过程中意外退出，在下次启动该软件时文件会自动恢复为关闭之前的编辑状态。

③NotePad++：NotePad++的名称来源于Windows系列操作系统自带的记事本NotePad，在此基础上多了两个加号，立刻带来了质的飞跃。这是一款免费开源的纯文本编辑器，具有完整中文化接口并支持UTF-8技术。它具有语法高亮显示、代码折叠等功能，因此也非常适合作为计算机程序的编辑器。

④EditPlus：EditPlus是由韩国 Sangil Kim(ES-Computing)公司发布的一款文字编辑器，支持HTML，CSS，JavaScript，PHP和Java等多种计算机程序的语法高亮显示与代码折叠功能。其中最具特色的是EditPlus具有自动完成功能。

⑤HBuilder：HBuilder 是由 DCloud(数字天堂)推出的一款支持 HTML5 的 Web 开发IDE。HBuilder主要用于开发HTML，JS(JavaScript)和CSS、同时配合 HTML 的后端脚本语言如PHP和JSP也可以适用，还有前端的预编译语言如less 以及人们钟爱的 markdown都可以良好地进行编辑

3.切图软件

切图软件是对UI设计师设计出的效果图进行切图操作，也可以对网页中的图片进行修改等处理。常用的切图软件有Photoshop和Fireworks两种

1.5 HTML 语法基础

1.5.1 HTML 概述

HTML是Hyper Text Markup Language 的缩写，即超文本标记语言，是一种用来制作超文本文档的简单标记语言

1.5.1.1 语言

HTML作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台

1.5.1.2 超文本

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

1.5.1.3 标记

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

1.5.2 HTML 基本结构

HTML文档是由一系列的元素和标签组成的

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

HTML文档标签的格式为：<html>HTML文档的内容</html>
<html>处于文档的最前面，表示 HTML文档的开始，即浏览器从<html>开始解释，直到遇到</html>

1.5.2.2 HTML文档头标签<head>···</head>

HTML文档包括头部(head)和主体(body)
HTML文档头标签的格式为：<head>头部的内容</head>

1.5.2.3 文档编码

文档编码格式如下：<meta charset= " utf-8"/>

1.5.2.4 HTML文档主体标签<body>···</body>

HTML文档主体标签的格式为：<body>网页的内容</body>
主体位于头部以后，以<body>为开始标签，</body>为结束标签。它定义网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在主体中

1.6 创建 HTML 文档

①使用 HBuilder新建项目。依次点击选择“文件”→“新建”→“Web项目”
②创建项目名称，设置项目所在的位置确定即可，完成之后会在左边的项目栏管理器中出现
③打开项目“课堂练习”的文件夹，会看到里面有首页 index.html
④之后，便可以编写网页代码了，可以直接在 imdex.html 中编写代码
⑤在“创建文件向导”对话框中，选择好文件所在目录，并为文件命名，模板为html5
⑥本实例将文件命名为“示例程序1.2.html”，开始编写网页代码
⑦网页完成后，可以执行菜单“运行”然后选择“浏览器运行”，选择电脑中已有的浏览器进行预览