1.1 网页的基本概念

思维导图:

网页设计基础知识

---

**导言:** 随着互联网的迅速蔓延,世界各地的数亿人群均可以通过网络实现聊天、购物、阅读新闻、查询天气等功能。而在幕后,是成千上万的网页支撑这一切。但这些网页是如何制作的?我们是如何通过各种设备访问它们的?

**学习目标:**

- 探究网页与网站的基础理念。
- 学习网页设计的关键技术。
- 了解静态网页的运行机制。
- 熟悉市面上常用的网页设计工具。
- 探讨网页的设计与开发流程。
- 学会如何建立网页制作的环境。

---

1.1 网页的基本概念

随着互联网的持续进化,网页已经成为我们日常生活中不可或缺的一部分。但是,你真的了解什么是网页吗?它们是如何构建和展现给我们的?

**1.1.1 Web与网页**

- **Internet(互联网)**:是一个全球化的计算机网络,由多台计算机通过公共协议连接在一起。当你的设备连接到其中一个节点时,你便能访问整个互联网。如今,全球有数十亿的用户在使用互联网,而这个数字还在持续增长中。

- **Web(万维网)**:是互联网上的一个超文本信息系统。它将文本信息从传统的线性模式转变为一个可以任意跳转、获取更多信息的非线性模式。

1.1.2 网页设计的三大要素

- **HTML**:超文本标记语言,用于定义网页的内容结构。
- **CSS**:层叠样式表,用于描述网页的布局和外观。
- **JavaScript**:一种编程语言,使网页具有交互性。

---

**小结:** 网页的设计和开发是一个结合了艺术与技术的过程。通过掌握基础知识和工具,你可以创建独特、高效、用户友好的网站和网页。

 1.1.2 网站

---

### 1. Web

**网站 (Web Site)**: 指的是与特定主题或内容相关的一系列网页的集合。

**Web (World Wide Web or 万维网)**: 是一个全球性、动态、交互式、跨平台的分布式图形信息系统,建立在Internet上。Web为用户提供了一个图形化、直观的方式来浏览和查找Internet上的信息,通过超文本和超媒体的结构连接不同的信息节点。

- **超文本 (HyperText)**: 超文本是一种用户接口,用于显示文本和与其相关的内容。我们日常浏览的网页链接都是基于超文本的。最常用的超文本格式为HTML。

- **超媒体 (HyperMedia)**: 超媒体是超文本与多媒体结合的产物。它不仅允许文本跳转,还可以播放声音、显示图形或动画。

- **超文本传输协议 (HTTP)**: 是互联网上应用最广泛的网络协议。

### 2. 网页

当我们使用设备浏览新闻或搜索关键词时,看到的便是网页。网页是包含HTML标签的文件,存放在世界各地的服务器上,呈现给用户的是一个“页”。

- **元素**:
  - 文字与图片是网页的基础元素。
  - 除此外,还有动画、音乐、程序等其他元素。

- **静态网页**:
  - 预定义的内容。
  - 内容更新相对麻烦。
  - 适用于内容更新少的展示型网站。
  - 可以展示动态效果,如GIF动画、Flash、滚动字幕等。

- **动态网页**:
  - 能与用户交互。
  - 基于数据库技术,内容根据用户请求动态生成。
  - 可实现多种功能,如用户注册、登录等。
  - 技术包括JSP、ASP/ASP.NET、PHP等。

不论是静态还是动态网页,用户都可以看到基本的文字和图片。但对于开发者和管理者,两者在开发、管理和维护上有很大的区别。简而言之,网站是由多个网页组成,没有网页的网站是无法访问的。

---

**小结**: 网站是由一系列相关内容的网页组成,为用户提供信息和功能。网页是网站的基本单位,可以是静态或动态的。理解这些基础概念对于进一步深入学习网页设计至关重要。

 

 1.1.2 网站

---

### 定义:

**网站 (Web Site)** 是集合在Internet上的一系列相关网页,用于展示特定内容。它是一种沟通工具,允许用户公开信息或提供网络服务。人们通过网页浏览器访问并获取所需的信息。

### 网站的三大组成部分:

1. **域名 (Domain Name)**:
   - 识别特定计算机或计算机组的名称。
   - 域名就像是一个地址或门牌号码,例如: www.baidu.com。
     - 其中,“baidu”是主域名。
     - “com”是顶级域名后缀。
     - “www”是网络名。
   - 域名由英文字母、数字和连字符组成,每部分的字符不能超过63个,不区分大小写。

2. **网站空间 (Web Hosting)**:
   - 用于存放网站内容的空间,也称为虚拟主机空间。
   - 定义空间的大小,存储网站文件和资料。

3. **程序 (Program)**:
   - 使用特定编程语言创建和修改网站。
   - 以源代码形式出现,按照特定格式书写的文字和符号组成。

### 网站结构简介:

网站本质上是一个文件夹,该文件夹内存有所有相关的网页文件和资源文件。设计网站就是设计各个网页并按分类保存。

- **根目录**:
   - 也称为网站文件夹或网站的起始点。
   - **index.html**: 网站的主页文件,是网站的核心。名字可更改,可以是静态或动态的页面。
   - 子文件夹: 可根据需求定制,不固定。

```
网站名称 (Root Directory)

├── 系统文件

├── index.html (主页文件)

├── Images (图片文件夹)

├── style (样式文件夹)

├── script (脚本文件夹)

└── 其他子目录 (如分类子目录)
```

**小结**: 网站是Internet上的一系列网页集合,用于展示信息或服务。其由域名、空间和程序组成,具有特定的目录结构。对于初学者,理解这些基础结构是设计和管理网站的关键。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/165504.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

阿里低代码Low Code Engine快速上手

一、环境准备 在正式开始之前,我们需要先安装相应的软件:WSL、Node等。Window 环境需要使用 WSL 在 windows 下进行低代码引擎相关的开发。安装教程➡️ WSL 安装教程。对于 Window 环境来说,之后所有需要执行命令的操作都是在 WSL 终端执行的。 2.1 Node 推荐安装Node 1…

如何实现前端音频和视频播放?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

2022年京东双11食品饮料品类数据回顾

2022年双11,根据京东官方发布的数据显示,京东百货中,京东新百货的589个品类10025个品牌成交额同比增长100%。而在食品饮料行业中,也有一些在大促期间成交额同比涨幅超过100%的品牌。 下面,结合鲸参谋平台提供的数据&am…

【c#】Quartz开源任务调度框架学习及练习Demo

Quartz开源任务调度框架学习及练习Demo 1、定义、作用 2、原理 3、使用步骤 4、使用场景 5、Demo代码参考示例 6、注意事项 7、一些Trigger属性说明 1、定义、作用 Quartz是一个开源的任务调度框架,作用是支持开发人员可以定时处理业务,比如定时…

npm publish发布到在线仓库时,提示:Scope not found

当npm publish发布时,控制台提示:Scope not found,具体错误信息如下: npm notice npm ERR! code E404 npm ERR! 404 Not Found - PUT https://registry.npmjs.org/xxx%2fxxx - Scope not found npm ERR! 404 npm ERR! 404 xxx/xx…

easyphoto 妙鸭相机

AIGC专栏7——EasyPhoto 人像训练与生成原理详解-CSDN博客如何训练一个高品质的人像Lora与应用高品质Lora的链路对于写真生成而言非常重要。由《LoRA: Low-Rank Adaptation of Large Language Models》 提出的一种基于低秩矩阵的对大参数模型进行少量参数微调训练的方法&#x…

【算法练习Day24】递增子序列全排列全排列 II

​📝个人主页:Sherry的成长之路 🏠学习社区:Sherry的成长之路(个人社区) 📖专栏链接:练题 🎯长路漫漫浩浩,万事皆有期待 文章目录 递增子序列容易出错的地方 …

安装Git和git命令使用

文章目录 安装Git创建版本库版本回退工作区和暂存区管理修改撤销修改 安装Git 在Windows上安装Git 在Windows上使用Git,可以从Git官网直接下载安装程序,然后按默认选项安装即可。 安装完成后,在开始菜单里找到“Git”->“Git Bash”&…

CentOS 7 安装 nginx

CentOS 7 安装 nginx 官网下载 nginx nginx官网下载链接:http://nginx.org/en/download.html 下载稳定版即可 将压缩包上传到 CentOS 7 虚拟机中 这里由于上传工具很多,不予展示 安装步骤 检查是否存在 nginx(有的话需要卸载掉自带的&a…

【C++ 学习 ㉙】- 详解 C++11 的 constexpr 和 decltype 关键字

目录 一、constexpr 关键字 1.1 - constexpr 修饰普通变量 1.2 - constexpr 修饰函数 1.3 - constexpr 修饰类的构造函数 1.4 - constexpr 和 const 的区别 二、decltype 关键字 2.1 - 推导规则 2.2 - 实际应用 一、constexpr 关键字 constexpr 是 C11 新引入的关键字…

蓝牙资讯|AirPods Pro 2推送新固件,苹果Find My功能受到好评

苹果公司今天面向采用 Lightning 端口和 USB-C 端口的 AirPods Pro 2 耳机,更新推出了内部编号为 6A305 的全新固件,高于 10 月 10 日发布的 6A303 更新。 苹果官方并没有公布固件的更新日志,目前尚不清楚具体引入了哪些新功能、新特性。苹…

2019年亚太杯APMCM数学建模大赛A题基于图像分析的二氧化硅熔化表示模型求解全过程文档及程序

2019年亚太杯APMCM数学建模大赛 A题 基于图像分析的二氧化硅熔化表示模型 原题再现 铁尾矿的主要成分是二氧化硅,而二氧化硅是铁尾矿成分中最难熔化的部分。因此,铁尾矿的熔融行为可以用二氧化硅的熔融行为来表示。然而,高温熔池的温度超过…

jdk21的外部函数和内存API(官方翻译)

1、jdk21: 引入一个 API,通过该 API,Java 程序可以与 Java 运行时之外的代码和数据进行互操作。通过有效地调用外部函数(即JVM外部的代码)和安全地访问外部内存(即不由JVM管理的内存)&#xf…

统计学习方法 感知机

文章目录 统计学习方法 感知机模型定义学习策略学习算法原始算法对偶算法 学习算法的收敛性 统计学习方法 感知机 读李航的《统计学习方法》时,关于感知机的笔记。 感知机(perceptron)是一种二元分类的线性分类模型,属于判别模型…

大模型,重构自动驾驶

文|刘俊宏 编|王一粟 大模型如何重构自动驾驶?答案已经逐渐露出水面。 “在大数据、大模型为特征,以数据驱动为开发模式的自动驾驶3.0时代,自动驾驶大模型将在车端、云端上实现一个统一的端到端的平台管理。”毫末智…

uni-app:实现时钟自走(动态时钟效果)

效果 核心代码 使用钩子函数 mounted(),设置定时器,是指每秒都要去执行时间的获取,以至于实现时间自走的效果 mounted() { this.updateTime(); // 初始化时间 setInterval(this.updateTime, 1000); // 每秒更新时间 }, 自定义方法…

NodeMCU ESP8266 读取按键外部输入信号详解(图文并茂)

NodeMCU ESP8266 读取按键外部输入信号教程(图文并茂) 文章目录 NodeMCU ESP8266 读取按键外部输入信号教程(图文并茂)前言按键输入常用接口pinModedigitalRead 示例代码结论 前言 ESP8266如何检测外部信号的输入,通常…

Java封装:面向对象的三大特性之一

👑专栏内容:Java⛪个人主页:子夜的星的主页💕座右铭:前路未远,步履不停 目录 一、封装的概念二、访问修饰限定符三、包1、包的概念2、导入包中的类3、常见的包 嗨!前面我们简单的认识了一下什么…

常用的设计模式以及操作Redis、MySQL数据库、各种MQ、数据类型转换的方法

文章目录 🌟 如何优雅地写出高质量的Java代码🍊 设计模式🎉 单例模式🎉 工厂模式🎉 观察者模式 🍊 操作Redis🎉 连接Redis🎉 存储数据🎉 获取数据🎉 删除数据…

Java注解处理器APT

注解处理器介绍 什么是APT? 在JDK6的时候引入了JSR269的标准,即APT(Annotation Processing Tool),用于在编译时处理源代码中的注解,从而生成额外的代码、配置文件或其他资源。与传统的运行时反射相比&…