第一章 网页制作和基础作用

1.1 网页、网站
网页和网站的区别：

定义：
网页：互联网上的一个独立页面，包含文本、图片、视频等元素，通过HTML等语言编写。
网站：由多个相互关联的网页组成的集合，提供一系列功能和服务。
功能：
网页：主要用于展示信息或提供简单的交互。
网站：功能更丰富，如在线购物、社交互动、信息检索等。
访问：
网页：直接通过URL在浏览器中访问。
网站：通过域名访问，进入主页后可通过链接访问其他页面。
独立性：
网页：相对独立，可以单独存在。
网站：由多个页面组成，页面间相互关联。
技术与实现：
网页：主要依赖前端技术（HTML, CSS, JavaScript）构建。
网站：除了前端技术，还需要后端技术（如PHP, Java, Python）和服务器支持
1.1.1 常用术语
URL：统一资源定位符，指定通信协议和地址，如“http: // www.baidu.com”是一个URL,其中http: //表示通信协议为超文本传输协议,www.baidu.com表示为网站名称。

IP：即网络协议。Internet中的每台计算机都有唯一的IP地址，表示计算机在Internet中的位置。ip通常分为A、B和C三类

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

FTP：文件传输协议，通过该协议，可把文件从一个地方传到另外一个地方，从而真正地实现资源分享。

2401_87136665
关注

11

5

1

第一章 网页设计与制作基础
cellan_nhm的专栏
 1086
学习网页之前先熟悉一些概念：1）WWW（World Wide Web，万维网）：是Internet上最重要的信息服务之一，一个基于超文本（Hypertext）方式的信息检索服务工具。2）URL（Uniform Resource Locator，统一资源定位器）：用于描述Internet上资源的位置和访问方式，它的功能相当于在实际生活中写信的通信地址。例如：https://www.csdn.net/ 就是CSDN的网址。3）网站（Web Site）
第一章 网页制作的基础知识总结
2401_87161606的博客
 965
Web前端即指平常上网浏览的网页，如上网浏览新闻、查询快递信息、淘宝购物等都是在浏览网页。1991年8月6日，来自欧洲核子研究中心的科学家 Tim Beners-Lee，启动了世界上第一个可以正式访问的网站(http://ino.cerm.ch)，标志着万维网时代的到来。随着互联网的飞速发展，网站开发人员也变得炙手可热。HTML作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。
1 条评论
CSDN-Ada助手
热评
恭喜你这篇博客进入【CSDN每天最佳新人】榜单，全部的排名请看  网页链接。
写评论
第一章 网页制作的基础知识习题
2402_87184304的博客
 385
网页制作的基础知识习题
第一章 网页制作的基础知识作业
2301_80799126的博客
 78
【代码】第一章 网页制作的基础知识作业。
网页设计与制作第一章网页制作基础.ppt
12-23
总的来说，网页设计与制作的第一章主要介绍了Web的基本概念、URL的重要性和浏览器的基本操作，这些都是理解和制作网页不可或缺的基础知识。通过学习这些内容，用户可以更有效地浏览和利用网络资源，同时也为后续深入...
HTML5+CSS3网页设计基础-第一章-网页设计基础.pptx
12-23
HTML5+CSS3网页设计基础-第1章-网页设计基础 本章主要介绍网页设计的基础知识，包括网页的基本元素、网页的布局结构、创建HTML5页面、HTML5基础等内容。本章的学习目标主要是了解网页上常见的基本元素及其特点，...
第一章网页设计基础.ppt
12-23
在这一章中，我们将深入探讨互联网的基础，网页与网站的关系，以及HTML等基础知识。理解这些概念对于网页设计师和开发者至关重要。 首先，Web，即World Wide Web，通常简称为WWW，是一个全球性的信息系统，它结合了...
《网页设计与制作》第一章：网页制作基础.pdf
12-23
《网页设计与制作》第一章主要介绍了网页制作的基础知识，包括Web的基本概念、Web浏览器与服务器的工作原理、URL的构成及作用，以及常用浏览器的使用。 首先，Web是基于超文本（Hypertext）技术的互联网应用，其...
网页设计与制作教程(HTMLCSSJavaScript)第2版第1章网页设计与制作基础.pptx
11-12
网页设计与制作教程（HTML、CSS、JavaScript）第2版第1章网页设计与制作基础。 本章节主要介绍了网页设计与制作的基础知识，包括网页与网站的概念、Web标准、HTML语法基础、HTML文档结构和创建HTML文档等内容。 1....
-webkit-box-reflect属性与倒影效果的实现
最新发布
读心悦
 279
是一个非标准的 CSS 属性，主要用于在 WebKit 浏览器（如 Chrome 和 Safari）中创建元素的倒影效果。这个属性并不是 CSS 规范的一部分，但在实践中经常被用来实现简单而有趣的视觉效果。
TinyWebSever源码逐行注释(五)_ http_conn.cpp
qq_39969848的博客
 1001
根据状态转移,通过主从状态机封装了http连接类。其中,主状态机在内部调用从状态机,从状态机将处理状态和数据传给主状态机。http_conn.cpp利用一个主从状态机来处理客户端的htttp连接并生成相应的响应。Linux下C++轻量级Web服务器，助力初学者快速实践网络编程，搭建属于自己的服务器.
（微服务项目）新闻头条——Day1
weixin_73253843的博客
 691
（微服务项目）新闻头条——Day1
2024伊语IM即时通讯源码/im商城系统/纯源码IM通讯系统安卓+IOS前端纯原生源码
翎风世界
 638
2.4 node安装wget "https://nodejs.org/dist/v12.18.3/node-v12.18.3-linux-x64.tar.xz"资料参考地址：https://www.1234f.com/sj/GitHub/qtym/20240910/677.html。源码下载地址：https://www.123pan.com/s/LA1bVv-5l5Vv。备用下载地址：http://pan.1234f.com:5212/s/5PrS4。api.xxx.com接口。im.xxx.com通讯。
react 基础语法
小白小白从不日别的博客
 1330
React 官方中文文档目前前端最流行的是三大框架：Vue、React、Angularreact是一个用于构建用户界面的 JavaScript 库react官网(Reactreact中文网(React 官方中文文档React 是一个用于构建用户界面（UI，对咱们前端来说，简单理解为：HTML 页面）的 JavaScript 库Vue 是一个渐进式的 JavaScript 框架如果从mvc的角度来看，React仅仅是视图层（V）的解决方案。也就是只负责视图的渲染，并非提供了完整了M和C的功能。
【前端】vue+html+js 实现table表格展示，以及分页按钮添加
weixin_43872912的博客
 497
数据条数太多显示到页面上时可能会渲染较慢，因此需要截取数据进行展示。
在子组件中使用props用于在父组件中给子组件变量设置值

1.2 网页的基本构成元素：如导航栏、广告动画、图片、交互表单、文本和超链接等。
1.2.1 文本:特点 体积小、网络传输快。方便用户浏览与下载文本信息 是网页最主要的基本元素

也是页面中最主要的信息载体。
1.2.2 图片和动画

相较于文本来说更加的生动与直观，网页中的网站标识、背景、链接等都可以是图片。可以更有效的吸引浏览者的注意
1.2.3 超链接  

可从一个网页指向另外一个目的端的链接，指定从一个位置到另外一个位置。可以为文本链接、图片链接和锚链接等。可在当前页面或页面外进行跳转。
1.2.4 音频视频

网页中常用的音频格式有mid和MP3。其中mp3为压缩文件，压缩率高，音质也不错，是背景音乐的首选。网页中的视频文件是flv格式 具有文件小、加载速度快的特点 是网络视频格式的首选。
1.2.5 交互表单

网页中的表单通常用来接收用户在浏览器端的输入，然后发送到用户设置的目标端。目标可以是文本文件、网页和电子邮件等...且表单一般用来收集联系信息，接收用户要求，获得反馈意见，让浏览者注册为会员并以会员的身份登录网站。
1.2.6 其他常见元素 

网页中除了以上最基本的几种元素之外 还包括一些常用元素 如 悬停按钮、JavaScript与ActiveX等特效。不仅能点缀网页 还能在网上娱乐等有着不可忽视的作用。

1.3 页面布局结构
对于一个网站来说，除了内容之外 确定网页的总体风格和布局也尤为重要。
1.3.1 网页页面布局

网页可分为个人网页和商业网页。前者风格多样、内容较为专一、形式较为灵活

易创造出美感。而后者为内容丰富、信息量大 但一般都有统一的布局
1.3.2 网页色彩搭配

网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合。在使用网页安全色进行配色后，这些颜色在任何终端用户的显示设备上都将显示为相同的效果。网页安全色是红色、绿色和蓝色。当颜色数字信号值为0，51，102，153，204和255时，构成的颜色组合一共有 216 种颜色。

1.4 Web前端技术简介。
1.4.1 初识Web前端

    Web前端即指平常上网浏览的网页，如上网浏览新闻、查询快递信息、淘宝购物等都是在浏览网页。但网页制作还需要了解与网页相关的基本概念，下面对Web前端的相关概念进行详细讲解。
        Web前端开发是从网页演变而来的，名称上有明显的时代特征。随着用户体验要求越来越高，前端开发的技术难度越来越大，Web前端开发这个职业也从设计和制作不分的局面中独立出来。
        早期的前端其实就是Tabel布局，后来发展到Div+CSS网站重构，再到JavaScript 逐渐成为Web前端开发的语言以及Web2.0的出现，每个阶段都涌现出相应的产品，如SNS博客、微博等。随着人们对网页需求的不断增大，Web前端技术也正加速地发展。
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代码由浏览器边解释边执行。通常JavaScript 脚本通过嵌入在 HTML,中的方式来实现自身的功能。

1.4.3 前端开发工具

1.4.3.1 浏览器

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

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

2.Chrome:又称Google Chrome 

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

3.Firefox Firefox浏览器一般指Mozillafirefox，中文俗称“火狐”，是由Mozilla 公司出品的一款自由的及开放源代码的Web浏览器，采用Gecko内核实现，支持多种操作系统。如 windos和Mac OS X及GNU/Linux等

4.Safari:Safari 浏览器是由苹果公司出品的用于苹果计算机操作系统MacOSX中的浏览器，采用Webkit内核实现，使用了KDE的KHTML作为浏览器的运算核心。无论在Mac还是PC上运行时，Safari都可提供极致愉悦的网络体验方式。

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

1.4.3.2 网页编辑器

①Adobe Dreamweaver：Adobe Dreamweaver 是一款所见即所得的网页编辑器，中文名称为“梦想编织者”或“织梦”。Dreamweaver支持HTML5/CSS3 源代码的编辑和预览功能，最大的优点是可视化性能带来的直观效果，开发界面可以分屏为代码部分与预览视图，当开发者修改代码部分时，预览视图会随着修改内容实时变化。

②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都可以良好地进行编辑。
1.4.3.3 切图软件

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

1.5 HTML语法基础
1.5.1 HTML概述

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

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