前端语言的基本能力

前端语言的基本能力：HTML、JS、CSS

HTML

超文本标记语言或超文本链接标示语言（标准通用标记语言下的一个应用）HTML（HyperText Mark-up Language）是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。

HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素（如），浏览器使用HTML标签和脚本来诠释网页内容，但不会将它们显示在页面上。

HTML可以嵌入如JavaScript的脚本语言，它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表（CSS）来定义文本和其它元素的外观与布局。维护HTML和CSS标准的组织万维网联盟（W3C）鼓励人们使用CSS替代一些用于表现的HTML元素。

CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

JS

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

JavaScript的标准是ECMAScript。截至2012年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为ECMAScript 2015，但通常被称为ECMAScript 6或者ES2015。

借鉴C语言的基本语法
借鉴Java语言的数据类型的内存管理
借鉴Scheme语言，将函数提升到“第一等公民”（first class）的地位
借鉴Self语言，使用基于原型（protoype）的继承机制

前端语言的协作配合

CSS in HTML

Inline CSS

    <p style="color: blue;" > This is a paragraph.</p>

Tnternal CSS

    <head>
		<style type="text/css">
			body {background-color: blue;}
			p {color: yellow;}
		</style>
	</head>

External CSS

    <head>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>

Javascript in HTML

HTML in JavaScriot

    function renderHello(){
		var template = document.getElementById('template').innerHTML;
		var rendered = Mustache.render(template,{name:'Luke'});
		document.getElementById('target').innerHTML = rendered;
	}

    <html>
	<body onload="renderHello()">
		<div id="target">Loading...</div>
		<script id="template" type="x-tmpl-mustache">
			Hello {{name}}!
		</script>
		
		<script src="https://unpkg.com/mustache@latest"></script>
		<script src="render.js"></script>
	</body>
</html>