1.1 网页的基本概念

news2024/11/18 15:51:45

思维导图:

网页设计基础知识

---

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

**学习目标:**

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

---

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.coloradmin.cn/o/1117409.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Unity之ShaderGraph如何实现靠近显示溶解效果

前言 今天我们来实现一个我再B站看到的一个使用LeapMotion实现的用手部触摸就可以显示的溶解效果。 效果如下图所示: 主要节点 Position:提供对网格顶点或片段的Position 的访问,具体取决于节点所属图形部分的有效着色器阶段。使用Space下…

无痕视频去水印方法分享-这些软件你值得拥有

怎么无痕视频去水印?喜欢剪视频的你是不是经常碰到这种烦人的事?就是每次在网上找到好看的视频素材,下载下来却总是带着各种各样的水印,这些水印不仅影响美观,还挡住了视频里重要的内容,如果你也遇到这种情…

JAVA基础-方法(5)

目录 1、方法介绍<br />2、方法的重载&#xff08;在同一个类中&#xff0c;方法名相同&#xff0c;列表参数不同&#xff08;数量不同&#xff0c;类型不同&#xff0c;顺序&#xff09;&#xff09;3、方法的重写&#xff08;方法的覆盖-参数类别相同&#xff0c;返回值…

java项目容器化(docker)部署注意点

cgroup 支持 从 jdk 8u121 开始支持&#xff0c;即低于这个版本无法使用容器特性 https://bugs.java.com/bugdatabase/view_bug.do?bug_id8170888 https://bugs.openjdk.org/browse/JDK-8170888 https://bugs.java.com/bugdatabase/view_bug.do?bug_id8175898 https://b…

EPLAN_008#3D布局图

一、新建页 多线原理图纸画好以后 打开布局空间导航器——右键——新建 二、插入箱柜 菜单栏——插入——箱柜 三、显示安装板 然后调整视角 四、插入线槽 菜单栏——插入——线槽——选择合适的线槽——确定 按A键可以切换线槽方向&#xff0c;如果位置不对&#xff0c;可以再…

redis的cluster

1.我们的哨兵模式中&#xff0c;当主节点挂掉以后&#xff0c;此时哨兵会重新进行选举&#xff0c;选举出新的主节点去对外提供写服务 在选举的过程中,他redis整个集群是不提供写服务的 &#xff08;因为此时我们哨兵对外提供写服务的只有Master&#xff09; 2.我们单节点的red…

NRK3301语音芯片在智能窗帘上的应用

窗帘是人们日常生活中所经常使用的家居产品&#xff0c;传统的窗帘大多都需要手动拉动窗帘使用&#xff1b;存在着拉拽费劲&#xff0c;挂钩容易掉落等问题。随着数字化转型的升级&#xff0c;推进了窗帘市场的高质量发展。智能窗帘也“适时出现”出现了&#xff0c;一款带有语…

CV计算机视觉每日开源代码Paper with code速览-2023.10.20

精华置顶 墙裂推荐&#xff01;小白如何1个月系统学习CV核心知识&#xff1a;链接 点击CV计算机视觉&#xff0c;关注更多CV干货 论文已打包&#xff0c;点击进入—>下载界面 点击加入—>CV计算机视觉交流群 1.【目标检测】Click on Mask: A Labor-efficient Annotati…

Microsoft Edge中使用开源的ChatGPT

一、双击打开浏览器 找到&#xff1a;扩展&#xff0c;打开 二、打开Microsoft Edge加载项 三、Move tab新标签 获取免费ChatGPT 四、启用Move tab。启用ChatGPT。 扩展 管理扩展 启用 五、新建标签页&#xff0c;使用GPT 六、使用举例 提问 GPT回复

不想加班的小伙伴们,请把这四个神器焊在电脑上~

今天又来给大家分享干货啦&#xff0c;如果你下载视频没渠道&#xff0c;写方案没灵感思路&#xff0c;做表格太慢&#xff0c;做海报太复杂&#xff0c;那你一点要看这一篇&#xff0c;今天分享的四个宝藏网站专门解决以上问题&#xff0c;一起来看看吧&#xff01; 一、WeDow…

中文编程开发语言工具应用案例:ps5体验馆计时收费管理系统软件

中文编程开发语言工具应用案例&#xff1a;ps5体验馆计时收费管理系统软件 软件部分功能&#xff1a; 1、计时计费功能&#xff1a;只需点开始计时即可&#xff0c;时间直观显示 2、商品管理功能&#xff1a;可以管理饮料等商品 3、会员管理功能&#xff1a;支持只用手机号作…

Android---RecyclerView替代ListView

RecyclerView 简称RV&#xff0c;是作为 ListView 和 GridView 的加强版出现&#xff0c;目的是在有限的屏幕之上展示大量的内容。因此&#xff0c;RecyclerView 的复用机制的实现是它的一个核心部分。 RV 常规使用方式 // 1 RecyclerView.setLayoutManager(); // 2 Recycler…

JavaCV + FFmpeg 播放音视频

JavaCV FFmpeg 播放音视频 1、导入JavaCV库1.1 使用ffmpeg必要库1.2 简单FFmpeg命令 待续~~~~ FFmpeg documentation bytedeco/javacv - GitHub 1、导入JavaCV库 gradle下面这种会导入javacv-platform所有包&#xff0c;非常耗时&#xff1a;https://repo.maven.apache.org/…

西门子博途软件加密保护方法

一、程序块的专有技术保护 程序块的专有技术保护主要是对项目中的程序块&#xff08;OB、FB、FC、DB&#xff09;进行访问保护&#xff0c;如果没有专有技术保护密码则无法看到程序块中的具体内容&#xff0c;对于专有技术保护的 DB 块&#xff0c;如果没有密码只能读不能写。…

怎么理解函数式编程思维?

文章目录 &#xff08;2023年9.29号&#xff0c;正月十五家乡的月亮&#xff09; ​ 理解函数式编程要注重思维的转变。函数式编程聚焦于简洁的高阶函数&#xff0c;高阶函数注重封装底层运作原理来解决复杂的业务场景&#xff0c;比如 Scala、Groovy、Clojure 语言&#xff1a…

解决pip安装包后但是Pycharm检测不到

首先要知道python找包的原理&#xff1a;原理 之后把一下代码打印一下&#xff1a; import sys print(sys.executable)# /usr/bin/python2 print(sys.path)# [/usr/lib/python2.7, /usr/lib/python2.7/dist-packages, /usr/local/lib/python2.7/dist-packages] print(sys.prefi…

Leetcode—动态规划(背包问题)

1、背包基础问题&#xff1a;01背包 输入&#xff1a;背包最大重量为 4。物品重量数组weight[1,3,4]&#xff0c;对应的价值数组value[15,20,30]。 五部曲&#xff1a; 1、确定dp数组以及下标的含义 对于背包问题&#xff0c;dp采用二维数组&#xff0c;即dp[i][j]表示从下标…

第78篇:巧妙方法抓取某商用红队扫描器的4000多个漏洞利用exp

Part1 前言 大家好&#xff0c;我是ABC_123&#xff0c;本期分享一个真实案例。大约在两年前&#xff0c;有机会接触到一台红队扫描器设备&#xff08;也可以理解为渗透测试机器人&#xff09;&#xff0c;我抱着好奇的心态去那里做了一下测试&#xff0c;感觉还不错。里面大概…

jvm内存溢出溯源

1.先上神器 2.远程监控配置 JProfile是一款性能瓶颈分析工具&#xff0c;具体要干啥呢下面看 1&#xff1a;创建一个监控任务 2&#xff1a;选择tomcat版本 3&#xff1a;监控远程服务器 4&#xff1a;选择oracle 1.5.0 5&#xff1a;填写需要监控的服务器地址 6&#x…

后台交互-首页->与后台数据进行交互,wsx的使用

与后台数据进行交互wsx的使用 1.与后台数据进行交互 // index.js // 获取应用实例 const app getApp() const apirequire("../../config/app.js") const utilrequire("../../utils/util.js") Page({data: {imgSrcs:[{"img": "https://cd…