您现在的位置是：首页 > 文章详情

前端概述及网页入门

日期：2018-09-18点击：427收藏

一、前端简介

前端是什么？

前端就是网站的前台，运行在PC端，移动端等浏览器上展现给用户浏览的网页。 - 广义前端：所有用户可以直接看见并交互的界面 - 侠义前端：浏览器上运行的用户交互界面 随着互联网技术的发展，前端领域的技术发展也越来越快，各种新的思想、设计模式、工具和平台都快速发展，对前端工程师的技能要求也越来越高。JavaScript的应用也越来越广泛，在各个端，各个领域，前端也在慢慢地渗入与腐蚀其他开发语言的领地，行业对前端程序员的热度需求并没有下降，未来还是有很好的前景的。

二、前端开发技术栈

前端工程师需要学习哪些技能呢？

首先你需要掌握前端三剑客，再去学习一些框架就可以去上班啦！

HTML（超文本标记语言 Hyper Text Markup Language）

html为标记语言，非编程语言，不具备编程语言具备的程序逻辑。文件后缀名（.html/.htm） html是一个网页的骨架，无论是静态网页还是动态网页，最终返回到浏览器端的都是HTML代码，浏览器将HTML代码解释渲染后呈现给用户。因此，我们必须掌握HTML的基本结构和常用标记及属性。 有人将html比做建房子的框架（地基，架子），我觉得很好，这里就借鉴一下。

1.html组成（标签、指令、转义字符）

标签：被尖括号包裹，由字母开头包含合法字符的，可以被浏览器解析的标记。eg:系统标签，自定义标签 指令：被尖括号包裹，由!开头的标记。eg:<!doctype html> <!-- --> 转义字符：被&与;包裹的特殊字母组合或#开头的十进制数。eg:&#60; &#62; &nbsp;

v_hint：转义字符

2.html发展版本

① html1：在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准） ② html2：1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时 ③ html3.2：1997年1月14日，W3C推荐标准 ④ html4.0：1997年12月18日，W3C推荐标准 ⑤ html4.01(微小改进)：1999年12月24日，W3C推荐标准 ⑤ html5：2014年10月28日，W3C推荐标准(h5草案的前身名为Web Applications 1.0。于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案发布。)

3.文档类型

<!-- 标签语法规范 --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html>

CSS（层叠样式表 Cascading Style Sheet）

css也是标记语言，非编程语言。文件后缀名（.css） CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言其样式是可以复用的，这样就极大地提高了我们开发的速度，降低了维护的成本。负责页面的风格设计，样式、美观。 把html比作建房子的架子，那么css就是对房子的装修，粉刷墙壁颜色等。

1.css组成（选择器、作用域、样式块）

选择器：由标签、类、id单独或组合出现 作用域：一组大括号包含的区域 样式块：满足css连接语法的众多样式

2.css发展版本

① 1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。 ② 1994年哈坤·利提出了CSS的最初建议。而当时伯特·波斯（Bert Bos）正在设计一个名为Argo的浏览器，于是他们决定一起设计CSS。 ③ 哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议，1995年的www网络会议上CSS又一次被提出，博斯演示了Argo浏览器支持CSS的例子，哈肯也展示了支持CSS的Arena浏览器。 ④ 1997年初，W3C组织负责CSS的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了1998年5月出版的CSS规范第二版。 ⑤ CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

JavaScript

不同于html和css，它是一门实实在在的编程语言，有完善的语法，可以完成复杂的程序逻辑。 文件后缀名（.js） JavaScript是浏览器脚本语言，可以编写运行在浏览器上的程序，实现更多地动态功能，表现出更加丰富的视觉效果。主要负责编写页面特效、调用浏览器的API\(BOM\)、操作改变页面内容\(DOM\)，从后端获取数据\(Ajax\)，渲染页面等。 JavaScript就好比房子过程中的人，房子通过打地基建造（html），装修（css），最后住人（js）。有了JavaScript网页才有灵魂。

1.JavaScript的组成（DOM、BOM、ES）

DOM：文档对象模型(Document Object Model)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。 BOM：浏览器对象模型(Browser Object Model)，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。 ES：ES是一种开放的、国际上广为接受的脚本语言规范(ECMAScript)，正式名称为 ECMA 262 和 ISO/IEC 16262，是宿主环境中脚本语言的国际 Web 标准。

2.JavaScript发展史

它最初由Netscape的Brendan Eich设计。JavaScript是甲骨文公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合，如服务器端编程。完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型，浏览器对象模型。 Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。为了取得技术优势，微软推出了JScript来迎战JavaScript的脚本语言。为了互用性，Ecma国际（前身为欧洲计算机制造商协会）创建了ECMA-262标准（ECMAScript）。两者都属于ECMAScript的实现。尽管JavaScript作为给非程序人员的脚本语言，而非作为给程序人员的脚本语言来推广和宣传，但是JavaScript具有非常丰富的特性。 发展初期，JavaScript的标准并未确定，同期有Netscape的JavaScript，微软的JScript和CEnvi的ScriptEase三足鼎立。1997年，在ECMA（欧洲计算机制造商协会）的协调下，由Netscape、Sun、微软、Borland组成的工作组确定统一标准：ECMA-262。

3.js框架

Angular、React与Vue等均是JavaScript主流框架

三、第一个页面

(一)、基础模板

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>第一个页面</title> </head> <body> </body> </html>

(二)、模板解读

DOCTYPE：指定文档类型，规定html标签语法

html：文档根标签，标注着文档(页面)的开始与结束

head：文档头标签，可以引用脚步文件、指定样式表、书写代码逻辑块、提供元信息

body：文档主体标签，包含文档所有文本与超文本内容

title：文档tag标题标签，设置文档tag的标题内容

(三)、其它模板标签

1、meta（元标签）

字符编码 <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> SEO <meta name="keywords" content="8-12个以英文逗号隔开的单词或词语"> <meta name="description" content="80字以内的一段话，与网站内容相关"> 移动适配 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

2、link(链接标签)

外联样式表 <link rel="stylesheet" type="text/css" href="style.css" /> 文档tag图标 <link rel="shortcut icon" type="image/x-icon" href="http://www.baidu.com/favicon.ico" />

3、style(样式标签)

内联样式表 <style></style>

4、script(脚本标签)

<script type="text/javascript"></script>

焚膏油以继晷，恒兀兀以穷年。

原文链接：https://yq.aliyun.com/articles/642640

关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。

Java分享