前端三剑客 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)

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Docker使用教程及docker部署Vue项目

什么是Docker及其工作原理 虚拟化技术Docker是什么?三大基本术语核心算法原理和具体操作步骤 Docker和传统虚拟化技术区别为什么使用Docker?Docker有什么作用?1.解决应用部署的环境问题遇到问题达到效果 2.容器化 docker的各种命令解释运行机…

nodejs版本过高导致vue-cli无法启动的解决方案

目录 前言异常现象解决方案总结 前言 之前使用软件管家升级了Nodejs,今天在运行Vue项目的时候老是报错,查了很多资料,最后确定是Nodejs版本过高导致的。 异常现象 E:\project\ry\RuoYi-Cloud\ruoyi-ui>npm run dev> ruoyi3.6.4 dev …

ubuntu上安装调试SVN服务

刚成立团队需要临时搭建一台SVN服务器,所以对照网上的一些提示做了下,操作起来不复杂,还是踩了不少坑,顺便原理性了解了下。 主要操作步骤如下: 1:安装svn sudo apt-get install subversion 2: 创建svn版…

C++入门之类和对象(中)

C入门之类和对象(中) 文章目录 C入门之类和对象(中)1. 类的6个默认对象2. 构造函数2.1 概念2.2 特性2.3 补丁 3. 析构函数3.1 概念3.2 特性3.3 总结 4. 拷贝构造函数4.1 概念4.2 特性4.3 总结 1. 类的6个默认对象 如果一个类中什么都没有,那么这个类就是一个空类。…

NLP任务全览:涵盖各类NLP自然语言处理任务及其面临的挑战

自然语言处理(Natural Language Processing, 简称NLP)是计算机科学与语言学中关注于计算机与人类语言间转换的领域。NLP将非结构化文本数据转换为有意义的见解,促进人与机器之间的无缝通信,使计算机能够理解、解释和生成人类语言。人类等主要…

chatgpt免费使用网站

在人工智能的浪潮中,OpenAI的ChatGPT作为一款前沿的语言处理工具,已经引起了广泛的关注和讨论。 ChatGPT以其卓越的语言理解和生成能力,为用户提供了多样化的应用场景,从日常对话、编程辅助到内容创作等。然而,对于许…

FL Studio21.2.4重磅发布更新发布功能介绍2024最新

FL Studio21是一款功能强大的数字音频工作站(DAW),它在音乐制作领域占据着重要的地位。以下是对FL Studio 21的详细介绍: 一、功能与特点 音频编辑:FL Studio 21提供了强大的音频编辑功能,包括波形编辑&a…

车载诊断系统应用方案选型,ESP8266方案让成本降低了35%,销售数据提升47%

车载诊断系统简称OBD,这个系统随时监控发动机的运行状况和尾气后处理系统的工作状态,一旦发现有可能引起排放超标的情况,会马上发出警示。当系统出现故障时,故障灯(MIL)或检查发动机(Check Engine)警告灯亮,同时OBD系统…

分支结构(if)

一.关于if 1.什么是if 在我们判断一个条件的时候,需要执行一些条件,这时就需要我们的"if"闪亮登场。 2.怎么使用if if是这样使用的: if(判断条件){判断过后执行的 } 然后我们需要一道例题洛谷的P5712 【深基3.例4】Apples&am…

SVN泄露(ctfhub)

目录 下载安装dvcs-ripper 使用SVN 一、什么是SVN? 使用SVN能做什么? 二、SVN泄露(ctfhub) SVN源代码漏洞的主要原因: 工具准备:dirsearch、dvcs-ripper 网络安全之渗透测试全套工具篇(内…

正式发布的Spring AI,能让Java喝上AI赛道的汤吗

作者:鱼仔 博客首页: https://codeease.top 公众号:Java鱼仔 前言 最近几年AI发展实在太快了,仿佛只要半年没关注,一个新的大模型所产生的效果就能超越你的想象。Java在AI这条路上一直没什么好的发展,不过Spring最近出来了一个新的模块叫做S…

【学习笔记】Vue3源码解析:第五部分 - 实现渲染(2)

课程地址:【已完结】全网最详细Vue3源码解析!(一行行带你手写Vue3源码) 第五部分-:(对应课程的第33 - 35节) 第33节:《讲解组件渲染流程》 1、在 render 函数中拿到虚拟dom vnode后…

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

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

博客文章:AWS re:Invent 2023 新产品深度解析 - 第四部分

TOC 🌈你好呀!我是 是Yu欸 🌌 2024每日百字篆刻时光,感谢你的陪伴与支持 ~ 🚀 欢迎一起踏上探险之旅,挖掘无限可能,共同成长! 写在最前面 去年发布文章的一部分,由于内…

微光成束,星火燎原,酷雷曼扶持政策再升级!

从北纬 18 度的三亚海角, 到北纬 53 度的漠河不夜城, 从东经 81 度的塞外江南伊犁, 到东经 120 度的上海魔都。 酷雷曼合作商为客户服务的范围 遍及全国 300 余个地区, 跨越了东南西北的辽阔地域。 即便如此, 面…

基于Bootstrap 5的创新网络服务公司网站模板

一.前言 这个网站的内容包括: 标题:Web service - Business Category Bootstrap Responsive Website Template - Home导航栏:Home, About, Services, Pages(包括Blog posts、Blog single、404、Landing page等页面)、…

fastjson转换json时默认将属性第一个字母转小写

描述: 我新建了一个实体类,但是实体类的首字母是大写的,但是使用fastjson后打印的,Json字符串首字母却是小写的,这是fastjson的一个bug 实体类: Json字符串: 解决方法: 一、使…

一个 .net 8 + Azure 登录 + Ant Design Blazor 的基本后台框架

一个 .net 8 Azure 登录 Ant Design Blazor 的基本后台框架 主界面使用了 Ant Design Blazor 项目模板搭建 后台技术是 .net 8 Blazor run at server 模式 登录方式使用 Azure 实现了菜单导航和路由 此外实现了读取和修改本地Json文件的功能,不是必须的&#x…

Github 2024-04-16Python开源项目日报 Top10

根据Github Trendings的统计,今日(2024-04-16统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目10TypeScript项目1Vue项目1系统设计指南 创建周期:2507 天开发语言:Python协议类型:OtherStar数量:241693 个Fork数量:42010 次…

MySql8快速迁移版的制作过程

首先说明,mysql 8的安装不同与mysql5.x。 做程序的朋友都知道,程序好做,客户难伺候,因为限于用户的情况,如何能让用户把程序运行起来很关键,比如日前我在做 山东高中信息技术 学考 考前练习 系统时&#x…