前端三剑客 HTML+CSS+JavaScript ① 基础入门

news2025/1/18 7:41:29

光永远会照亮你

        —— 24.4.18

一、C/S架构和B/S架构

C:Client(客户端)

B:Browser(浏览器)

S:Server(服务器)

C/S 架构:

B/S 架构:

大型专业应用、安全性要求较高的应用,还要采用C/S架构

总结:

应用软件,有两种架构模式:C/S架构、B/S架构

前端工程师主要开发B/S架构的应用 —— 写网页

二、认识WEB

1.认识Web

网页主要是由文字、图像和超链接等元素构成,当然,除了这些元素,网页中还可以包含音频、视频 以及flash等,一个或多个网页,构成了一个网站

网页是如何形成的?

前端人员写出代码 ——> 通过浏览器进行渲染 ——> 最终呈现出客户眼中的网站

总结

网页由图片、链接、文字等元素组成,我们后面的任务是要把这部分网页元素通过代码写出来

2.浏览器(显示代码)

        浏览器是网页显示、运行的平台,常用的浏览器有IE、火狐、谷歌、Safari和Opera等,我们平时称为五大浏览器

        五大浏览器因为他们都有领先的市场份额以及自己独有的浏览器内核

2.1 浏览器市场份额

谷歌公司研发的谷歌浏览器chrome

2.2. 常见浏览器内核

浏览器内核是什么?

        内核时浏览器的核心,用于处理浏览器所得到的各种资源,负责读取网页内容,整理讯息,计算网页的显示方式并显示页面

五大浏览器,四大内核

3.Web标准

通过以上浏览器不同内核不同,我们知道他们显示页面或者排版就有些许差异

目标

        记忆

                能说出网页中web标准三层组成

        理解

                能结合人来表述web标准三层

web标准不是某一个标准,而是由W3C组织和其他标准化组织制定的一系列标准的集合

W3C万维网联盟是国际最著名的标准化组织

W3C就类似于现实世界中的联合国

3.1 为什么要遵循WEB标准?

通过以上浏览器不同内核不同,我们知道他们显示页面或者排版就有所差异

3.2 Web标准的好处

通过web标准可以让不同我们写的页面更标准统一以外,还有许多优点:

1.让Web的发展前景更广阔

2.内容能被更广泛的设备访问

3.更容易被搜寻引擎搜索

4.降低网站流量费用

5.使网站更易于维护

6.提高页面浏览速度

3.3 Web标准构成

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

①结构:结构用于对网页元素进行整理和分类,我们主要学的是HTML

②表现:表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS

③行为:行为是指网页模型的定义以及交互的编写,主要学的是JavaScript

Web标准小结

web标准有三层结构,分别是结构(html)、表现(css)、行为(JavaScript)

结构类似人的身体,表现类似人的着装,行为雷死人的行为动作

理想状态下,他们三层都是独立的,放在不同的文件中

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

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

相关文章

2024华中杯C题完整论文讲解(含完整python代码及所有曲率插值和坐标数据表格)

大家好呀,从发布赛题一直到现在,总算完成了2024华中杯C题光纤平面曲线重构完整的成品论文。 本论文可以保证原创,保证高质量。绝不是随便引用一大堆模型和代码复制粘贴进来完全没有应用糊弄人的垃圾半成品论文。 共38页,一些修改…

2024年国内五大企业邮箱,哪个最靠谱?

电子邮件是企业办公的重要手段,目前我国五大企业的邮箱都有Zoho Mail公司邮箱、腾讯企业邮箱、阿里企业邮箱、网易企业邮箱、263公司邮箱。可是哪个电子邮件最可靠呢?可靠的企业邮箱必须要安全性高、稳定性高,能够保护企业的隐私不被泄露&…

【毕业设计】基于JAVA的两个通用安全模块的设计与实现(源代码+论文)

目录 1.说明 2.系统设计与实现 2.1总体结构图 2.2与数据库建立连接 2.3与数据库建立连接 2.4数字证书创建 2.5关键代码说明 1.说明 详细介绍基于口令的身份认证与文件安全传输两个通用安全模块的设计原理和实现过程,分析了当前口令保存的安全性,提出了…

噪声系数测试之增益法

提到增益法测试噪声系数,大家并不陌生,这是一种简洁的测试方法,精度不如Y因子法,但是在某些测试场合,比如只有频谱仪而没有噪声头时,且待测件具有非常高的增益时,就可以使用增益法测试噪声系数。 增益法测试噪声系数的连接示意图如图1所示,其思路为:DUT输入端端接50 …

2024的新宠儿——Mamba(3):Mamba的三大创新

mamba(其对应论文为:https://arxiv.org/abs/2312.00752,这是其对应的GitHub代码地址:GitCode - 开发者的代码家园),在语言、音频、DNA序列模态上都实现SOTA,在最受关注的语言任务上,Mamba-3B超越同等规模的Transformer,与两倍大的Transformer匹敌,并且相关代码、预训练模…

PR CC 2024安装教程(附免费安装包资源)

鼠标右击软件压缩包,选择“解压到当前文件夹”。 打开解压后的文件夹,鼠标右击“Set-up”选择“以管理员身份运行”。 点击文件夹图标。” 点击“更改位置”。 更改完位置,点击“继续”。 软件正在安装,请耐心等待,谢谢…

3D打印随形水路:模具提质降本增效的利器

在科技飞速发展的时代,3D打印技术以其独特的优势,正在逐步改写传统制造业。其中,3D打印随形水路技术的出现,无疑是科技与制造领域的一次革命性结合。那么,随形水路的魅力究竟体现在何处呢? 随形水路&#x…

乡政府管理系统|基于Springboot的乡政府管理系统设计与实现(源码+数据库+文档)

乡政府管理系统目录 目录 基于Springboot的乡政府管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、用户信息管理 2、活动信息管理 3、新闻类型管理 4、新闻动态管理 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计算机毕设选题推…

浅浅了解一下 LibTorch

🍉 CSDN 叶庭云:https://yetingyun.blog.csdn.net/ LibTorch 是 PyTorch 提供的一个二进制发行版,包含了所有必要的头文件、库和 CMake 配置文件,便于开发者依赖 PyTorch 开发应用。用户可以从 PyTorch 官网下载包含最新 LibTorch…

Java全套智慧校园系统源码springboot+elmentui +Quartz可视化校园管理平台系统源码 建设智慧校园的5大关键技术

Java全套智慧校园系统源码springbootelmentui Quartz可视化校园管理平台系统源码 建设智慧校园的5大关键技术 智慧校园指的是以物联网为基础的智慧化的校园工作、学习和生活一体化环境,这个一体化环境以各种应用服务系统为载体,将教学、科研、管理和校园…

nodejs工具模块学习

util 是一个Node.js 核心模块,提供常用函数的集合; util.inspect(object,[showHidden],[depth],[colors]) 是一个将任意对象转换 为字符串的方法,通常用于调试和错误输出; 如果只有一个参数 object,是要转换的对象&…

【星瑞格】SinoDB国产数据库安装初体验及学习指南

今天和大家一起来看看一款来自福建的国产数据库——SinoDB。本人很早就听说过这款数据库,而且星瑞格公司就在同一栋办公楼。虽然以前就已经对这颗国产数据库有一定的了解,并没有真正的去使用一把。随着数据库国产化改造工作的推进,身边的客户…

【科研】YOLOv8中anchor_points可视化(更新中)

目录 写在前面anchor-point可视化 写在前面 感叹一下:如果GPT能在我刚上大学的时候出来,也许我能学的比现在好太多,毕竟大学有一个比自己优秀太多的人引导着是多么地捷径。 anchor-point可视化

Qt | 远程仓库

git | 基本操作 01 远程仓库 在了解之前,先注册github(gitee或者gitcode等等)账号,由于你的本地Git仓库和github仓库之间的传输是通过SSH加密的,所以需要一点设置: 第一步:创建SSH Key。在用户主目录下,看看…

网工内推 | 兴业银行总行正编,科技运维部,硕士以上学历

01 兴业银行 招聘岗位:安全渗透专家 职责描述: 1.负责牵头组织本行红蓝对抗、攻防演练等工作; 2.负责牵头制定有效的渗透测试方案,开展对本行防御体系的验证工作; 3.负责牵头组织本行各类应用系统的渗透测试与漏洞扫…

Dinov2 + Faiss 图片检索

MetaAI 通过开源 DINOv2,在计算机视觉领域取得了一个显着的里程碑,这是一个在包含1.42 亿张图像的令人印象深刻的数据集上训练的模型。产生适用于图像级视觉任务(图像分类、实例检索、视频理解)以及像素级视觉任务(深度…

【可视化大屏开发】19. 加餐-百度地图API实现导航加线路热力图

需求 Web端使用场景中会涉及到地图导航路线情况,并利用热力图显示路况信息。 实现效果如下: 输入起始地点,选择并开始导航 最终效果 思路步骤 利用百度地图API显示地图交通拥堵情况的热力图,需要按照以下步骤进行开发 步骤1&a…

Ubuntu的终端中启用鼠标左键即为选中复制,右键粘贴的功能

在Ubuntu终端中启用鼠标复制和粘贴的功能需要进行一些设置。 首先,打开终端窗口,在菜单栏中找到“Edit”选项,点击“Profile Preferences”。然后,在“General”选项卡中,勾选“Use custom font”选项,可以…

【IEEE列表会议】第五届信息科学与并行、分布式处理国际学术会议(ISPDS 2024)火热征稿中!

IEEE列表会议,院士报告,高校背书,快至3天录用! 第五届信息科学与并行、分布式处理国际学术会议(ISPDS 2024) 2024 5th International Conference on Information Science, Parallel and Distributed Sys…

万物皆可计算|下一个风口:近内存计算-2

虽然PIM可以有缓解内存墙的问题,但是PIM设计面临着一系列技术和工程上的挑战,这些挑战直接影响着PIM技术的实用化和广泛应用: 地址翻译与操作映射: 在传统计算机体系结构中,地址空间由操作系统管理和调度,通…