【Web世界探险家】打开Web世界的大门

news2024/11/25 4:44:13

在这里插入图片描述

📚博客主页:爱敲代码的小杨.

✨专栏:《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 |《MySQL探索之旅》

❤️感谢大家点赞👍🏻收藏⭐评论✍🏻,您的三连就是我持续更新的动力❤️

🙏小杨水平有限,欢迎各位大佬指点,相互学习进步!

文章目录

  • 1. 网页
    • 1.1 什么是网页
    • 1.2 什么是HTML
    • 1.3 网页的形成
  • 2. 浏览器
    • 2.1 常见的浏览器
    • 2.2 浏览器内核
  • 3. Web 标准(重点)
    • 3.1 为什么要使用Web标准
    • 3.2 Web 标准的组成
    • 3.3 Web 标准的构成

1. 网页

说到网页,其实大家都不陌生,我们上网时浏览新闻、查询信息、看视频等都是在浏览网页。网页可以看作承载各种网站应用和信息的容器,所有可视化的内容都会通过网页展示给用户。

1.1 什么是网页

网站是指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合。

网页是网站中的“一页”。通常是 HTML 格式的文件,它要通过浏览器来阅读。

网页是构成网站的基本元素,它通过由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页常见的以 .htmlhtm 后缀结尾的文件,因此将其称为 HTML文件

1.2 什么是HTML

HTML 指的是超文本标记语言,它是用来描述网页的一种语言。

所谓超文本,有2层含义:

  1. 它可以加入图片、声音、动画、多媒体等内容(超越了文本的限制)
  2. 它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(超链接文本)

HTML 不是一种编程语言,而是一种标记语言。

标记语言是一套标记标签。

1.3 网页的形成

网页是由网页元素组成的,这些元素是利用 HTML 标签描述出来的,然后通过浏览器解析来显示给用户的。

image-20240312155944605

前端人员开发代码——> 浏览器显示代码(解析、渲染)——> 生成最后的 Web界面

2. 浏览器

网页是通过浏览器来展示的,关于浏览器我们要了解一下两点:

  1. 常见的浏览器
  2. 浏览器的内核

2.1 常见的浏览器

浏览器是网页显示、运行和平台。常用的浏览器有 IE、火狐(Firefox)、谷歌(chrome)、safari和opera等。平常称为五大浏览器。

image-20240312160955781

2.2 浏览器内核

浏览器内核(渲染引擎):负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。

浏览器内核备注
IETridentIE、猎豹安全、360极速浏览器、百度浏览器
FirefoxGecko火狐浏览器内核
SafariWebkit苹果浏览器内核
chrome/operaBlinkchrome / opera浏览器内核。Blink其实是的分支。

目前国内一般浏览器都会采用 Webkit/Blink 内核,如 360、UC、QQ、搜狗等。

3. Web 标准(重点)

Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织。

3.1 为什么要使用Web标准

  • 浏览器不同,它们显示页面或者排版就有些许差异。

image-20240312162308970

  • 遵循 Web 标准除了可以让不同的开发人员写出的页面更标准、更统一外,还有以下优点:
    1. 让 Web 的发展前景更广阔。
    2. 内容能被更广泛的设备访问。
    3. 更容易被搜寻引擎搜索。
    4. 降低网站流量费用。
    5. 使网站更易于维护。
    6. 提高页面浏览速度。

3.2 Web 标准的组成

主要包括结构、表现、和行为三个方面

标准说明
结构结构用于对网页元素进行整理和分类,HTML
表现表现用于设置网页元素的版式、颜色、大小等外观样式,CSS
行为行为是指网页模型的定义及交互的编写,JavaScript

Web 标准提出的最佳体验方案:结构、样式、行为相分离。
简单理解: 结构写到 HTML 文件中, 表现写到 CSS 文件中, 行为写到 JavaScript 文件中。

3.3 Web 标准的构成

image-20240312163010850

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

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

相关文章

2024 年 2 月 NFT 行业动态:加密货币飙升,NFT 市场调整

作者:stellafootprint.network 数据来源:NFT 研究页面 - Footprint Analytics 2024 年 2 月,加密货币与 NFT 市场显现出了复杂性。该月,NFT 领域的交易量达到 12 亿美元,环比下降了 3.7%。值得关注的是,包…

鸿蒙原生应用元服务开发-WebGL网页图形库开发无着色器绘制2D图形

无着色器绘制2D图形 使用WebGL开发时&#xff0c;为保证界面图形显示效果&#xff0c;请使用真机运行。 此场景为未使用WebGL绘制的2D图形&#xff08;CPU绘制非GPU绘制&#xff09;。开发示例如下&#xff1a; 1.创建页面布局。index.hml示例如下&#xff1a; <div class…

【Spring】学习Spring框架那点小事儿

Spring作者&#xff1a;Rod Johnson Rod Johnson 是一位软件开发人员和作家&#xff0c;他在软件开发领域有着广泛的影响力。他出生于澳大利亚&#xff0c;拥有计算机科学和音乐双学位&#xff08;能写出有优雅的代码一定有艺术细胞&#xff09;。 Rod Johnson 在 2002 年出版…

【Vuforia+Unity】一个简单AR识别图像弹出按钮播放暂停视频

场景搭建 2.按钮播放视频这部分写一个按钮回调函数即可 3.控制视频的代码 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.Video;public class videomanager : MonoBehaviour {// 这个脚本实现按钮控制VIDEO播放GameO…

机试:最大子序列的和

问题描述: 算法思想: 若第(i-1)个序列的小于0,则第i个序列的最大值为nums[i]; 若第(i-1)个序列的小于0,则第i个序列的最大值为max(i-1) nums[i]; 如果max(i-1)>0,max(i)max(i-1)Nums(i) 如果max(i-1)<0,max(i)Nums(i)代码示例: #include <bits/stdc.h> //该算法…

Scrapy 爬虫框架

网络爬虫框架scrapy &#xff08;配置型爬虫&#xff09; 什么是爬虫框架&#xff1f; 爬虫框架是实现爬虫功能的一个软件结构和功能组件集合爬虫框架是个半成品&#xff0c;帮助用户实现专业网络爬虫 scrapy框架结构("52"结构) spider: 解析downloader返回的响…

unity3d Animal Controller的动物组件使用明天继续

控制器介绍 动物脚本负责控制动物的所有运动逻辑.它管理所有的动画师和刚体参数,以及所有的状态和模式,动物可以做。 动物控制器 是一个动画框架控制器,根动或到位,为任何生物或人形。它利用刚体与物理世界的互动和动画师的玩动画。 States States 是不互相重叠的动画。例如…

算法刷题Day7 | 454.四数相加II、383. 赎金信、15. 三数之和、18. 四数之和

目录 0 引言1 四数相加II1.1 使用map解题1.2 总结 2 赎金信2.1 我的解题 3 三数之和3.1 双指针法 4 四数之和4.1 双指针题解 &#x1f64b;‍♂️ 作者&#xff1a;海码007&#x1f4dc; 专栏&#xff1a;算法专栏&#x1f4a5; 标题&#xff1a;算法刷题Day7 | 454.四数相加II…

Python 导入Excel三维坐标数据 生成三维曲面地形图(面) 4-4、线条平滑曲面(修改颜色)去除无效点

环境和包: 环境 python:python-3.12.0-amd64包: matplotlib 3.8.2 pandas 2.1.4 openpyxl 3.1.2 scipy 1.12.0 代码: import pandas as pd import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D from scipy.interpolate import griddata fro…

redis 中的八大问题

前言 在分布式系统中&#xff0c;由于redis分布式锁相对于更简单和高效&#xff0c;成为了分布式锁的首先&#xff0c;被我们用到了很多实际业务场景当中。 但不是说用了redis分布式锁&#xff0c;就可以高枕无忧了&#xff0c;如果没有用好或者用对&#xff0c;也会引来一些意…

查找和最小的 K 对数字

优质博文IT-BLOG-CN 一、题目 给定两个以 非递减顺序排列 的整数数组nums1和nums2, 以及一个整数k。 定义一对值(u,v)&#xff0c;其中第一个元素来自nums1&#xff0c;第二个元素来自nums2。 请找到和最小的k个数对(u1,v1), (u2,v2) ... (uk,vk)。 示例 1: 输入: nums1 […

PTA L2-007 家庭房产

给定每个人的家庭成员和其自己名下的房产&#xff0c;请你统计出每个家庭的人口数、人均房产面积及房产套数。 输入格式&#xff1a; 输入第一行给出一个正整数N&#xff08;≤1000&#xff09;&#xff0c;随后N行&#xff0c;每行按下列格式给出一个人的房产&#xff1a; …

k8s中calico网络组件部署时一个节点一直处于Pending状态

k8s中calico网络组件部署时一个节点一直处于Pending状态 故障截图 故障排查思路&#xff0c;通过describe查看具体原因 ~]# kubectl describe pod calico-node-pzlfv -n kube-system通过describe查看得知报错 Warning FailedScheduling 58s (x23 over 23m) default-sche…

pytest生成allure的报告

首先要下载安装配置allure allure serve ./outputs/allure_report 可以生成html的文件自动在默认浏览器中打开

【NR 定位】3GPP NR Positioning 5G定位标准解读(十六)-UL-AoA 定位

前言 3GPP NR Positioning 5G定位标准&#xff1a;3GPP TS 38.305 V18 3GPP 标准网址&#xff1a;Directory Listing /ftp/ 【NR 定位】3GPP NR Positioning 5G定位标准解读&#xff08;一&#xff09;-CSDN博客 【NR 定位】3GPP NR Positioning 5G定位标准解读&#xff08;…

Java输出流之BufferWriter类

咦咦咦&#xff0c;各位小可爱&#xff0c;我是你们的好伙伴——bug菌&#xff0c;今天又来给大家普及Java SE相关知识点了&#xff0c;别躲起来啊&#xff0c;听我讲干货还不快点赞&#xff0c;赞多了我就有动力讲得更嗨啦&#xff01;所以呀&#xff0c;养成先点赞后阅读的好…

<AI大模型学习>——《人工智能AI》

&#xff1c;AI大模型学习&#xff1e;——《人工智能AI》 一、AI大模型通识 1.AI介绍 人工智能&#xff08;Artificial Intelligence&#xff09;&#xff0c;英文缩写为AI。 是新一轮科技革命和产业变革的重要驱动力量&#xff0c; 是研究、开发用于模拟、延伸和扩展人的智…

【滤波专题-第8篇】ICA降噪方法——类EMD联合ICA降噪及MATLAB代码实现(以VMD-ICA为例)

今天来介绍一种效果颇为不错的降噪方法。&#xff08;针对高频白噪声&#xff09; 上一篇文章我们讲到了FastICA方法。在现实世界的许多情况下&#xff0c;噪声往往接近高斯分布&#xff0c;而有用的信号&#xff08;如语音、图像特征等&#xff09;往往表现出非高斯的特性。F…

【大厂面试演练】知道ZooKeeper有什么应用场景吗

面试官&#xff1a;咳咳咳&#xff0c;看你简历写了精通ZooKeeper&#xff0c;那我就随便考考你吧 面试官&#xff1a;不用慌尽管说&#xff0c;错了也没关系&#x1f60a;。。。 每日分享大厂面试演练&#xff0c;感兴趣就关注我吧❤️ 面试官&#xff1a;知道ZooKeeper有什么…

Docker安装步骤笔记

一、环境准备 VM网络配置 打开VMware软件 --编辑 --虚拟网络编辑器 二、VM创建虚拟机 三、安装rhel8.9操作系统 1、rhel8.9 镜像下载 第一步&#xff1a;进入redhat官网进行注册第二步&#xff1a;下载rhel8.9镜像文件 https://access.redhat.com/downloads/content/rhel …