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

光永远会照亮你

        —— 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.mzph.cn/pingmian/1245.shtml

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

相关文章

binary tree Leetcode 二叉树算法题

144.二叉树的前序遍历 前序遍历是&#xff1a;根-左-右 所以记录序列的的时候放在最前面 递归 class Solution {List<Integer> ans new ArrayList<>();public List<Integer> preorderTraversal(TreeNode root) {if(root null) return ans;ans.add(root…

【HCIP】OSPF的高级特性

OSPF的高级特性1 --- 不规则区域 一、OSPF不规则区域类型 产生原因&#xff1a;区域划分不合理&#xff0c;导致的问题 1、非骨干区域无法和骨干区域保持连通 2、骨干区域被分割 造成后果&#xff1a;非骨干区域没和骨干区域相连&#xff0c;导致ABR将不会帮忙转发区域间的路由…

【数据结构练习题】堆——top-k问题

♥♥♥♥♥个人主页♥♥♥♥♥ ♥♥♥♥♥数据结构练习题总结专栏♥♥♥♥♥ ♥♥♥♥♥上一章&#xff1a;【数据结构练习题】二叉树(1)——1.相同的树2.另一颗树的子树3.翻转二叉树4.平衡二叉树5.对称二叉树♥♥♥♥♥ 文章目录 1.top-k问题1.1问题描述1.2思路分析1.3绘图分析…

理光打印机设置扫描文件到共享文件夹教程(线上和现场)

在线设置。 1.点击用户工具/计数器按钮。 2.点击系统设置。 3.点击端口设置&#xff0c;点击机器IPV4地址。 4.获得打印机IP地址。 5.回到共享电脑&#xff0c;新建一个账户或者使用当前账户&#xff0c;为了隐私安全起见&#xff0c;最好设置密码。 6.关闭防火墙。 7.启用…

Mac 下安装PostgreSQL经验

使用homebrew终端软件管理器去安装PostgreSQL 如果没有安装brew命令执行以下命令 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 沙果开源物联网系统 SagooIoT | SagooIoT 1.使用命令安装postgreSQL brew i…

JavaScript之分时函数、分时间段渲染页面、提高用户体验、参数归一化、高阶函数、分段、appendChild、requestIdleCallback

MENU 前言效果图html原始写法优化方式一(参数归一化)优化方式二(当浏览器不支持requestIdleCallback方法的时候)优化方式三(判断环境) 前言 当前需要向页面插入十万个div元素&#xff0c;如果使用普通的渲染方式&#xff0c;会造成延迟。这时候就需要通过分时函数来实现渲染了。…

【Pytorch】VSCode实用技巧 - 默认终端修改为conda activate pytorch

VScode修改配置使得启动终端为conda环境 文章目录 VScode修改配置使得启动终端为conda环境1、找到settings.json 文件2、查找 conda / mamba 相关内容3、编辑 settings.json 文件4、异常处理5、补充检验 VScode跑项目&#xff0c;在启动pytorch项目时往往会有千奇百怪的问题&am…

大学生前端学习第一天:了解前端

引言&#xff1a; 哈喽&#xff0c;各位大学生们&#xff0c;大家好呀&#xff0c;在本篇博客&#xff0c;我们将引入一个新的板块学习&#xff0c;那就是前端&#xff0c;关于前端&#xff0c;GPT是这样描述的&#xff1a;前端通常指的是Web开发中用户界面的部分&#xff0c;…

数据库设计的三范式

简单来说就是&#xff1a;原子性、唯一性、独立性 后一范式都是在前一范式已经满足的情况进行附加的内容 第一范式&#xff08;1NF&#xff09;&#xff1a;原子性 存储的数据应不可再分。 不满足原子性&#xff1a; 满足原子性&#xff1a; 第二范式&#xff08;2NF&#xf…

探索设计模式的魅力:开启智慧之旅,AI与机器学习驱动的微服务设计模式探索

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 ✨欢迎加入探索AI与机器学习驱动的微服务设计模式之旅✨ 亲爱的科技爱好者们&#xff0c;有没…

LabVIEW多设备控制与数据采集系统

LabVIEW多设备控制与数据采集系统 随着科技的进步&#xff0c;自动化测试与控制系统在工业、科研等领域的应用越来越广泛。开发了一种基于LabVIEW平台开发的多设备控制与数据采集系统&#xff0c;旨在解决多设备手动设置复杂、多路数据显示不直观、数据存储不便等问题。通过RS…

【记录】Python3|Selenium 下载 PDF 不预览不弹窗(2024年)

版本&#xff1a; Chrome 124Python 3.12Selenium 4.19.0 版本与我有差异不要紧&#xff0c;只要别差异太大比如 Chrome 用 57 之前的版本了&#xff0c;就可以看本文。 如果你从前完全没使用过、没安装过Selenium&#xff0c;可以参考这篇博客《【记录】Python3&#xff5c;Se…

密码学 | 承诺:绑定性 + 隐藏性

&#x1f951;原文&#xff1a;承诺方案&#xff08;Commitment&#xff09;学习笔记 &#x1f951;写在前面&#xff1a; 本文属搬运博客&#xff0c;自己留存学习。本文只会讲承诺的两个安全属性&#xff0c;不会再讲解承诺的定义。 正文 承诺方案需要满足两个安全属性&…

Oracle之SQL plus的一些经验心得

每次登入SQL plus后,不知道时哪个用户登入,非常不方便,只能使用show user查看。 以下时可以通过一些设置实现上述的效果,知道时哪个用户登入,和实现输出效果等 1)SQL plus使用细则 SQL plus登录时,我们可以设置一些通用的设置,在每次登入SQL plus的时候生效。 [root@c…

安装Zipkin

官网&#xff1a;https://zipkin.io/pages/quickstart.html Jar包方式 下载 方式一&#xff1a;百度网盘下载 链接&#xff1a;https://pan.baidu.com/s/1PRV1RamJ8IWX32IJb7jw3Q?pwde8vu 提取码&#xff1a;e8vu 方式二&#xff1a;Central Repository: io/zipkin/zipk…

react 项目路由配置(react-router-dom 版本 v6.3、v6.4)

根据 react-router-dom 的版本&#xff0c;有不同的方式 一、react-router-dom v6.3 用到的主要 api: BrowserRouteruseRoutesOutlet 下面是详细步骤&#xff1a; 1、index.js BrowserRouter 用来实现 单页的客户端路由使用 BrowserRouter 包裹 App放在 顶级 位置&#x…

(1)认识人工智能

第一章 认识人工智能 引言 本人目前大三&#xff0c;双非一本的人工智能专业&#xff0c;代码能力不算太差&#xff0c;做过项目&#xff0c;也打了比赛&#xff0c;获了奖&#xff0c;但是走技术路线总会有否定自己的感觉&#xff0c;可能是感觉自己的才能没有在搞技术方面实…

小红书电商运营实战课,从0打造全程实操(65节视频课)

课程内容&#xff1a; 1.小红书的电商介绍 .mp4 2.小红书的开店流程,mp4 3.小红书店铺基础设置介绍 ,mp4 4.小红书店铺产品上架流程 .mp4 5.客服的聊天过程和子账号建立 .mp4 6.店铺营销工具使用和后台活动参加 .mp4 7.小红书产品上架以及拍单教程,mp4 8.小红书如何选品…

数据分析_商品维度占比及变化可视化分析(Pandas和Matplotlib)

数据分析_商品维度占比及变化可视化分析(Pandas和Matplotlib) 分析维度包括: 各商品年度销量占比 各商品月度销量变化 构建测试数据 这里你可以了解到: 如何生成时间相关的数据。 如何从列表&#xff08;可迭代对象&#xff09;中生成随机数据。 Pandas 的 DataFrame 自…

【JVM系列】关于静态块、静态属性、构造块、构造方法的执行顺序

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…