前端内容介绍(代码片段)

mingerlcm mingerlcm     2023-03-09     732

关键词:

 

 

web1.0时代的网页制作

网页制作是web1.0时代的产物,那个时候的网页主要是静态网页所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页,我们当时称为“牛皮癣”网页。例如一篇QQ日志、一篇博文等展示性文章。在web1.0时代,用户能做的唯一事情就是浏览这个网站的文字图片内容这时用户也不能像现在在大多数网站都可以评论交流(缺乏交互性)。相信可能大多数人都听过“网页三剑客 Dreamweaver+Fireworks+Flash”吧,这个组合就是web1.0时代额产物

 

web2.0时代的前端开发

“前端开发”是从“网页制作”演变而来的。

从2005年开始,互联网进入web 2.0时代,由单一的文字和图片组成的静态网页已经不能满足用户的需求,用户需要更好的体验。在web 2.0时代,网页有静态网页动态网页所谓动态网页,就是用户不仅仅可以浏览网页,还可以与服务器进行交互。举个例子,你登陆新浪微博,要输入账号密码,这个时候就需要服务器对你的账号和密码进行验证通过才行。web2.0时代的网页不仅包含炫丽的动画、音频和视频,还可以让用户在网页中进行评论交流、上传和下载文件等(交互性)。这个时代的网页,如果是用“网页三剑客Dreamweaver+Fireworks+Flash”制作的,那是远远不能满足需求。现在网站开发无论是开发难度,还是开发方式上,都更接近传统的网站后台开发,所以现在不再叫“网页制作”,而是叫“web前端开发”。

所以,处于web2.0时代的你,如果要学习网站开发技术,就不要再相信所谓的“网页三剑客Dreamweaver+Fireworks+Flash”,因为这个组合已经是上个互联网时代的产物。而且这个组合开发出来的网站问题也非常多,例如代码冗余、网站维护困难(学习到后期,你会知道为什么不用这个组合了

 

Web前端能做什么?

公司官网(在PC通过浏览器来访问公司网站)移动端网页(在手机上来浏览公司信息、小游戏等)移动端APP(例如:淘宝、去哪儿旅游、携程等)微信小程序(微信最新推出的功能,随用随装,不占用手机空间)皮皮虾我们走可乐在厨房 红牛在冰箱66666。前端开发所学技术由简单到难,所以在很多网站上你会看到“七天入门前端”的视频博客等等,也就是说一星期就学会了HTML+CSS。那么最基本的页面你就可以书写了。

 

 

前端开发都有哪些内容

 

我们知道,用所谓的网页三剑客已经不能满足需求了,那前端开发究竟要学习什么技术呢?网页最主要由3部分组成:结构、表现和行为。网页现在新的标准是W3C,目前模式是HTML、CSS和JavaScrip

结构就是HTML

表现就是CSS

行为就是JavaScrip

 

三部分都是做什么的

(1)HTML是什么?

HTML,全称“Hyper Text Markup Language(超文本标记语言)”,简单来说,网页就是用HTML语言制作的。HTML是一门描述性语言,是一门非常容易入门的语言。

2)CSS

CSS,全称“(层叠样式表)”。以后我们在别的地方看到“层叠样式表”、“CSS样式”,指的就是CSS。

 

(3)JavaScript

JavaScript是一门脚本语言。

(4)HTML、CSS和JavaScript的区别 我们都知道前端技术最核心的是HTML、CSS和JavaScript这三种。但是这三者究竟是干嘛的呢?

“HTML是网页的结构,CSS是网页的外观,而JavaScript是页面的行为

打个比喻。我们把前端开发的过程比喻成“建房子”,做一个网页就像盖一栋房子,先把房子结构建好(HTML)。建好房子之后给房子装修(CSS),例如往窗户安上窗帘、往地板铺上漂亮的瓷砖。最后呢,装修完了之后,当夜幕降临的时候,我们要开灯(JavaScript),这样才能看得见里面

 

 

 

web标准

web准备介绍:

  • w3c:万维网联盟组织,用来制定web标准的机构(组织)
  • web标准:制作网页遵循的规范
  • web准备规范的分类:结构标准、表现标准、行为标准。
  • 结构:html。表示:css。行为:Javascript。

web准备总结:

  • 结构标准:相当于人的骨架。html就是用来制作网页的。
  • 表现标准: 相当于人的衣服。css就是对网页进行美化的。
  • 行为标准: 相当于人的动作。JS就是让网页动起来,具有生命力的

 

W3C简介

 

  • W3C是英文World Wide Web Consortium的缩写, 翻译过来就是W3C理事会或万维网联盟, W3C是全球互联网最具权威的技术标准化组织.
  • W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者Tim Berners-Lee
  • W3C负责web方面标准的制定,像HTML、XHTML、CSS、XML的标准就是由W3C来定制的。

 

 

 

浏览器介绍

 

浏览器是网页运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、猎豹浏览器、Safari和Opera等

 

技术图片

 

浏览器内核

 

浏览器  内核
IE trident
chrome blink
火狐 gecko
Safari webkit

 

 

 

PS:「浏览器内核」也就是浏览器所采用的「渲染引擎」,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。

 

总结:渲染引擎是兼容性问题出现的根本原因。

 

前端小游戏——植物大战僵尸(代码片段)

给大家分享一个植物大战僵尸网页游戏源代码,感兴趣的小伙伴可收藏学习👉完整源码文章目录⌛️效果展示⌛️游戏介绍⌛️游戏内容(1)冒险模式(2)小游戏⌛️图片资源⌛️代码展示(1)H... 查看详情

前端基本知识介绍(代码片段)

目录一.前端三剑客1.前导2.三剑客的分工二.VsCode的介绍与配置1.vscode的介绍2.vscode的下载安装3.vscode的使用3.1图形界面操作3.3常用插件三.HTML基础标签HTML基础知识1.HTML为何物?2.标签介绍3.HTML属性4.HTML标签骨架基本的HTML标签1.HT... 查看详情

html介绍(代码片段)

...签十一.表单提交一.HTML介绍HTML:超文本标记语言作用:书写前端页面前端三大技术(三大标准):HTML:结构标准(页面中有什么内容)CSS:样式美化(美化页面)Javascript(js):行为标准,交互效果,Jquery是JS的一个函数库二.创建使用vscode,创建带.html... 查看详情

前端团队代码规范最佳实践,个人成长必备!(代码片段)

作者:杨成功(已获转载授权)原文:https://segmentfault.com/a/1190000040948561本文从代码规范,代码检查,代码格式化,以及编辑器自动化实现的方向,介绍代码规范统一在我们团队的实践应用。大纲预... 查看详情

前端开发规范(代码片段)

注意此文章来自于腾讯开发文档官网腾讯前端开发文档页面头部本章将介绍页面的标签含有的内容。包含页面的基本信息、SEO优化、双端页面跳转等。DOCTYPE设置文档类型统一使用html5的doctype:<!DOCTYPEhtml>页面编码编码默... 查看详情

常用前端布局,css技巧介绍(代码片段)

常用前端布局,CSS技巧介绍对前端常用布局的整理总结,并对其性能优劣,兼容等情况进行介绍css常用技巧之可变大小正方形的绘制1:若通过设置width为百分比的方式,则高度不能通过百分比来控制.在这个地方可以使用padding来... 查看详情

前端如何部署自我介绍的网页(代码片段)

...回复 “进群” ,拉你进程序员交流群????????作者丨前端君来源丨前端发现相信很多前端程序猿都想在网络上留下自我介绍的网页地址(小编是这么想的 ),这个网页起码可以不同于常人去介绍自己,你可以... 查看详情

前端|antdesign介绍(代码片段)

引入现在的公司前端人员比较少,所以一些简单的前端功能,需要开发人员自己改,公司大部分对的前端,用的AntDesign做的,所以今天先简单做个了解。是什么Antd是基于AntDesign设计体系的ReactUI组件库,主... 查看详情

前端-jquery介绍(代码片段)

目录jQuery介绍jQuery的优势jQuery内容:jQuery版本jQuery对象jQuery基础语法查找标签基本选择器层级选择器:基本筛选器:属性选择器:表单筛选器:筛选器方法操作标签样式操作位置操作尺寸:文本操作属性操作文档处理事件常用事... 查看详情

前端经典面试题:如何理解html语义化?(代码片段)

本文最初于2018-09-21发布于知乎,后在《重学前端》专栏的学习中,重新复习整理,发布于Github上,并计划写一系列前端学习相关的文章。欢迎star。HTML语义化简单来说,我们可以理解为:用正确的标签做正确的事情。例如:段落... 查看详情

前端知识(代码片段)

前端知识web服务的本质:基于B/S网络架构,浏览器和服务端的交互浏览器发送请求,服务端接收请求,服务端响应请求,服务端吧HTML文件内容发给浏览器,浏览器渲染页面发送请求通过OSI网络七层模型:应用层,表示层,会话... 查看详情

gin内容介绍√(代码片段)

Gin内容介绍GolangGin内容介绍主要内容关于Web创建项目为什么要用框架Gin框架介绍Gin框架安装与使用安装第一个Gin示例:RESTfulAPIGin渲染HTML渲染自定义模板函数静态文件处理使用模板继承补充文件路径处理JSON渲染XML渲染YMAL渲染... 查看详情

gin内容介绍√(代码片段)

Gin内容介绍GolangGin内容介绍主要内容关于Web创建项目为什么要用框架Gin框架介绍Gin框架安装与使用安装第一个Gin示例:RESTfulAPIGin渲染HTML渲染自定义模板函数静态文件处理使用模板继承补充文件路径处理JSON渲染XML渲染YMAL渲染... 查看详情

javascript简单介绍(代码片段)

...验证用户输入自动填充表单能够读取本地或者远程数据的前端应用程序,例如http://web-engineering.info/JsFrontendApp-Book通过Nodejs实现像JAVA,C#,C++一样的服务端程序实现分布式 查看详情

前后端分离介绍(代码片段)

...:把流程从 PM:“我要这个功能”后端:“这个先找前端做个模板”前端:“模板做完了”后端:“我来对接一下,这里样式不对”前端:“我改完了”后端:“功能交付”PM:“春节要加这个活动”后端:“这个先找前端... 查看详情

零基础入门前端系列—css介绍(代码片段)

【零基础入门前端系列】—CSS介绍(九)一、为什么需要CSS?使用Css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离,在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素... 查看详情

前端----jquery的介绍(代码片段)

 1.为什么要使用jQuery在用js写代码时,会遇到一些问题:window.onload事件有事件覆盖的问题,因此只能写一个事件。代码容错性差。浏览器兼容性问题。书写很繁琐,代码量多。代码很乱,各个页面到处都是。动画效果很难实... 查看详情

前端介绍开始(—)(代码片段)

web的组成浏览器服务器:代替用户向服务器发送请求通信协议:规范数据传输及打包方式(http,https)服务器:1作用:1接收用户请求并响应2存储数据3具有安全性功能2产品:1Tomcat2Aapache3Nginx4IIS3技术:1pythonweb(djangoflash,tornado)2P... 查看详情