HTML

HTML(HyperText Markup Language)中文名为超文本标记语言，是一种创建网页的标准标记语言。HTML是一种基础技术，常与CSS，JavaScript一起被用于设计网页，应用程序以及移动应用的用户界面。网页浏览器可以读取HTML文件，并将其渲染为可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为标记语言而非编程语言。
HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素（如<html>），浏览器使用HTML标签和脚本来诠释网页内容，但不会将它们显示在页面上。
HTML可以嵌入如JavaScript的脚本语言，它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表（CSS）来定义文本和其它元素的外观与布局。
HTML的首个公开描述出现于一个名为HTML Tags的文件中，由蒂姆·伯纳斯-李于1991年底提及。它描述18个元素，包括HTML初始的、相对简单的设计。除了超链接标签外，其他设计都深受CERN内部一个以标准通用标记语言（SGML）为基础的文件格式SGMLguid的影响。这些元素仍有11个存在于HTML 4中。

标记

HTML标记包含标签（及其属性）、基于字符的数据类型、字符引用和实体引用等几个关键部分。HTML标签是最常见的，通常成对出现，比如<**h1**>与</**h1**>。这些成对出现的标签中，第一个标签是开始标签，第二个标签是结束标签。两个标签之间为元素的内容，有些标签没有内容，为空元素，如<**img**>。

HTML另一个重要组成部分为文档类型说明，这会触发标准模式渲染。

文档标记类型<!DOCTYPE html>用于HTML5。如果未进行声明，浏览器会使用“怪异模式”进行渲染。
怪异模式是指在计算机领域中，一些网页浏览器为了维持对较旧的网页设计的向后兼容性，而使用的一种技术，有别于严格遵循万维网联盟（W3C）与互联网工程任务组（IETF）标准而设计的“标准模式”。

元素

HTML文档由嵌套的HTML元素构成。它们用HTML标签表示，包含于尖括号中，如<**p**>在一般情况下，一个元素由一对标签表示：“开始标签”<**p**>与“结束标签”</**p**>。元素如果含有文本内容，就被放置在这些标签之间。
在开始与结束标签之间也可以封装另外的标签，包括标签与文本的混合。这些嵌套元素是父元素的子元素。
开始标签也可包含标签属性。这些属性有诸如标识文档区块、将样式信息绑定到文档演示和为一些如<**img**>等的标签嵌入图像、引用图像来源等作用。
一些元素如换行符<**br**>，不允许嵌入任何内容，无论是文字或其他标签。这些元素只需一个单一的空标签（类似于一个开始标签），无需结束标签。
许多标签是可选的，尤其是那些很常用的段落元素<**p**>的闭合端标签。HTML浏览器或其他介质可以从上下文识别出元素的闭合端以及由HTML标准所定义的结构规则。

字符与实体应用

在4.0版本中，HTML定义了一系列共252个字符实体引用和1,114,050个字符值参考。二者都支持单个字符通过简单的标记写入。文字字符与其对应的标记渲染的效果相同。

数据类型

HTML为元素内容定义了多种数据类型，如脚本数据、样式表数据以及许多属性值的类型，包括ID、名称、URI、数字长度单位、语言、媒体描述符颜色、字符编码、日期和时间等等。所有这些数据类型都是字符数据的特殊化。

文档类型说明

HTML文档需要以文档类型声明（英语非正式说法“doctype”）开头。在浏览器中，文档类型声明有助于确定渲染模式——特别是是否使用怪异模式。
文档类型声明的初衷是通过基于文档类型定义（DTD）的SGML工具来解析并验证HTML文档。
HTML5未定义DTD，所以在HTML5中文档类型声明更为简短

语义化HTML

语义化HTML是一种编写HTML的方式，它强调编码信息的含义在其格式（样子）之上。HTML从创立之初就包括语义化标记，但也包括标识性标记如<**font**>、<**i**>和<**center**>标签。也存在一些语义上中立的span与div标签。自1990年代末CSS开始应用于大多数浏览器，网页制作者就被鼓励使用CSS以便呈现与内容分离。
在2001年一次对语义网的讨论中，蒂姆·伯纳斯-李等人给出了一种的方法，使智能软件“代理人”可能有一天会自动抓取网页进行查找、过滤并将之前不相关的联系起来。这种代理甚至在现在也不普遍，但一些Web 2.0、混搭和价格比较网站的想法可能会结束。这些网页应用程序的混合与伯纳斯-李的语义代理人的之间主要区别基于以下事实：当前的聚合与信息混合通常由网页开发者设计，他们早已知道网络位置和他们希望混搭、比较与结合的特定数据的API语义。
网页代理的一个重要类型是网络爬虫或搜索引擎蜘蛛。这些软件代理依赖于它们发现的网页的语义清晰度，因为它们一天要使用各种技术与算法来读取和索引数百万个网页并给网页用户提供搜索工具，没有这些万维网的有效性就会大大降低。
为使搜索引擎蜘蛛评估它们在HTML文档中发现的文本片段的重要性，也为那些创建标记等混合的人与更多的自动化代理工具，HTML中的语义结构需要广泛一致地应用从而将文本的含义呈现给浏览者。
表示性标记在当前的HTML和XHTML推荐中不被鼓励使用。旧版本HTML中的大多数表示功能不再被允许使用，因为它们导致可访问性变差、站点维护成本变高和文档大小变大。
好的语义化HTML也改善了网页文档的可访问性。例如，当屏幕阅读器或音频浏览器可以正确判定一个文档的结构时，视觉障碍用户不会再因阅读重复或无关的信息而浪费时间。

CSS

层叠样式表（英文: Cascading Style Sheets;又称串样式列表、级联样式表、串接样式表、阶层式样式表）是一种用来做结构化文档（例如HTML文档或XML应用）添加样式的计算机语言。

CSS由多组“规则”组成。每个规则由“选择器”（selector）、“属性”（property）和“值”（value）组成：

选择器（Selector）：多个选择器可以半角逗号（,）隔开。
属性（property）：CSS1、CSS2、CSS3规定了许多的属性，目的在控制选择器的样式。
值（value）：指属性接受的设置值，多个关键字时大都以空格隔开。

属性和值之间用半角冒号（:）隔开，属性和值合称为“特性”。多个特性间用“;”隔开，最后用“{ }”括起来。

选择器

CSS里现在共有5种基本选择器（Basic Selectors）和2种伪选择器。不同选择器的优先级别和运作性能往往存在差异。

基本选择器

标签选择器（h1，p等）——elementname
类别选择器（class）——.elementname
ID选择器（ID）——#elementname
万用选择器——* ns|* *|*
属性选择器（也翻译为“通配符选择器”）——[attribute]
属性选择器
属性选择器允许用户自定义属性名称，而不仅仅限于id，class属性。属性选择器共有7种。

代码	说明
`[attribute]`	元素有`attribute` 的属性。
`[attribute="value"]`	属性`attribute` 里是`value`
`[attribute~="value"]`	属性`attribute` 里使用空白分开的字符串里其中一个是`value`
`[attribute\|="value"]`	属性`attribute` 里是`value` 或者以`value-` 开头的字符串
`[attribute^="value"]`	属性`attribute` 里最前的是`value`
`[attribute$="value"]`	属性`attribute` 里最后的是`value`
`[attribute*="value"]`	属性`attribute` 里有`value` 出现过至少一次

组合选择器

CSS里现在共有4种组合选择符（Combinators）

符号	说明
`A > B`	子代选择器，选择A下一层的元素B
`A ~ B`	兄弟选择器，选择与A同层的元素B
`A + B`	相邻兄弟选择器，选择与A相邻的元素B（不能被任何元素相隔）
`A B`	后代选择器，包含选择符

其他选择器

CSS中还提供了伪元素选择器和虚拟类别选择器，但用途单一一些，常与其它选择器组合在一起使用。伪元素的元素主要用于选取与另一个选择器选中对象临近的元素。虚拟类别选择器用于选中处于特定状态或具有特定性质的元素。

引入CSS规则的多种方式及其层叠性

CSS可以有多种引入方式，一个网页可以引入多个CSS文件，同一种CSS规则可以被反复多次添加。这使得CSS的使用方式非常灵活，但也会频繁地出现规则冲突。同时对一个网页元素设定无法并存的2种样式时，就会引起冲突。CSS的特色之一就是其解决规则冲突的方案。CSS的规则冲突可以分为不同来源之间的规则冲突和同一来源内部的规则冲突。CSS分层次、立体化的比较不同规则的优先级的方式，就是所谓层叠性(cascading)的体现。
CSS信息来源多样化，可以来自作者样式，客户端自定义样式（client-side style sheet），浏览器样式。

作者样式
- 作者可以在HTML文件中确定一个外来的、独立的CSS文件（外部样式表），其优先级最低
- 作者可以将CSS信息包含在HTML文件内（内部样式表）
- 作者可以在一个HTML指令内结合CSS指令（内联样式），其优先级最高。一般这样做是为了在特殊情况下，把上面来源的CSS抵消掉
客户端自定义样式（client-side style sheet）
- 浏览网页的用户可以自己在本地计算机上自己写一个CSS文件，然后就可以在浏览器内通过设置好特定选项，来加载自己的CSS文件。这个CSS文件可以用在所有的HTML文件上。当网页作者没有设定某项规则，但存在对应的用户自定义规则时，用户的规则就会起作用。假如作者的CSS文件与读者的相冲突，浏览器会采用作者的规则。如果读者有特殊要求，可以通过在自定义规则末尾添加!important提升自定义规则的显示优先权。(网页作者也可以使用!important给规则提升权限，但是优先级别比不过由用户写的!important声明，!important对于网页作者的意义仅在于网页开发阶段的规则冲突测试)
浏览器样式
- 假如外部没有特别指定一个样式的话，一般浏览器自己有一个内在的样式。由于不同浏览器的默认样式并不一致，所以讲究美观的网页的设计者一般喜欢去掉这个默认的样式。

其次还需知道规则特殊性(specificity)的概念。某个规则的特殊性也常被称为该规则的具体程度。规则特殊性的高低次序如下（依次递减）：

行内样式
ID选择器
class选择器
标签选择器
通用选择器（也就是通配符选择器，用得少）

特殊性优先原则

特殊性优先原则是最重要的优先级比较规则。当引起冲突的2种规则的特殊性存在差异时（例如一个是通过ID选择器指定样式，另一个是通过class选择器指定样式），引擎将优先采用特殊性更高的样式。规则的特殊性的比较是最优先的。如果能直接判断出特殊性的差异，就无需考虑其它规则了。

不同来源的规则优先性

不同来源的规则之间的优先原则是第二重要的。当规则来源相同时（同为外部样式或同为内部样式），下一步就需要比较不同类型来源的优先级别。总地来说，记住“行内样式优先于内部样式，内部样式又优先于外部样式”即可应对多数常见的情形。
如果考虑有可能出现的更复杂的来源冲突，内容就比较多了。但一般在写样式时，应尽可能避免这些复杂情形的出现。具体来说，一般情形下的采纳样式效果的优先级顺序为：

行内样式
内部样式
在HTML中通过<link>标签直接引入的外部样式表
在CSS中通过@import语句间接引入的外部样式表
浏览网页的用户自己定义的样式表（需要手动加载，主要适用于色盲或色弱的上网用户）
浏览器默认的样式（如标题有默认大小、段落之间有默认间距等，不同浏览器的默认样式不完全一样）

CSS中还有用!important修饰的重要性声明。如果计入重要性声明，那么在以上规则的最前面还需要加上2条规则：

用户从本地加载的重要自定义样式
网页设计者设定的重要样式

设计重要性声明是为部分特殊用户和所有开发者提供方便。一方面，色弱或色盲的用户可以通过设置自己的色彩方案，并对其使用重要性声明来提升浏览体验。另一方面，网页的设计者难免会遇到因规则冲突而导致特定样式规则失效的情形，设计者可以通过给不知何故不起作用的规则增加重要性声明，看看是否有样式变化来确定是否是不小心导致了规则冲突而引起特定规则被覆盖失效。

权重分数比较机制

有时还会遇到选择器优先级无法直接判断，而且规则的来源也相同的情形。如果网页设计者很少使用层次比较复杂的选择器（比如多级的后代选择器），那么必须比较权重的情况一般不会遇到（一般要么是可以直接根据前面的规则判断出优先性结果，或者是起冲突的2条规则的权重完全一样，只能继续去看后一条比较出现次序的机制）。此时，CSS还有一套分数加权(或者说是分数累积)的机制用于解决此类规则冲突。先列出基本的分值：

1个行内样式占1000分
1个id选择器占100分
1个class选择器占10分
1个标签选择器占1分

组合使用多个基本选择器时，不同选择器的得分会累加到一起。最终得分高的选择器，其指定的样式会胜出。

靠后者优先原则

当权重比较仍然不能分出优先级胜负时，最后就是把守关底的“靠后优先”的原则了，也就是后定义的样式优先级较高。如果起冲突的规则来源相同，而且得分也相同，那么最后的冲突解决法则就是看CSS代码出现的先后顺序。后出现的规则会覆盖掉与之优先级相当的先出现的规则。也可称作“后发制人”、“后来者居上”或“后浪推前浪”原则，随便你怎么称呼。这种原则的适用情形很常见，所以此规则也很重要。

JavaScript

JavaScript是一种高级的、解释型的编程语言。JavaScript是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象程序设计，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。它已经由ECMA（欧洲电脑制造商协会）通过ECMAScript实现语言的标准化。
JavaScript与Java在名字或语法上都有很多相似性，但这两门编程语言从设计之初就有很大的不同，JavaScript的语言设计主要受到了Self（一种基于原型的编程语言）和Scheme（一门函数式编程语言）的影响。

概论

JavaScript包括以下几个部分：

ECMAScript，描述了该语言的语法和基本对象
文档对象模型（DOM），描述处理网页内容的方法和接口
浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口

JavaScript的基本特点：

是一种解释性脚本语言（代码不进行预编译）。
主要用来向HTML页面添加交互行为。
可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

特性

JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。随着引擎如V8和框架如Node.js的发展，及其事件驱动及异步IO等特性，JavaScript逐渐被用来编写服务器端程序。

弱类型

Javascript是弱类型的，这意味着变量可以被隐式地转换为另一个类型。

二元运算符+会把两个操作数转换为字符串，除非两个操作数都为数字类型。这是因为+也表示字符串连接操作。
二元操作符-会把两个操作数转换为数字类型。
一元操作符，包括+和-，都会把操作数转换为数字。

JavaScript中诡异的隐式转换:

左操作数	操作符	右操作数	结果
`[]` （空数组）	`+`	`[]` （空数组）	`""` （空数组）
`[]` （空数组）	`+`	`{}` （空对象）	`"[object Object]"` （字符串）
`false` （布尔值）	`+`	`[]` （空字符串）	`"false"` （字符串）
`"123"` （字符串）	`+`	`1` （数字）	`"1231"` （字符串）
`"123"` （字符串）	`-`	`1` （数字）	`122` （数字）

动态化

JavaScript是动态类型的，正如大部分脚本语言，其类型与值而不是与变量关联。例如变量可以为数值，随后又可被赋值为字符串。JavaScript提供了包括鸭子类型在内的方法来检测变量类型。

基于原型的面向对象

JavaScript使用原型，而许多其它面向对象语言使用类用于实现继承。有了原型，使得在JavaScript中模拟基于类的面向对象特征变成可能。
函数在JavaScript中兼作为对象构造函数。在函数调用前加上new会创建一个原型的实例，并继承来自构造函数的属性和方法（包括来自Object原型）。ECMAScript 5提供Object.create方法，可以显式地创建实例还不是自动从Object继承。构造函数的prototype属性决定了用于新对象的内部原型。可以通过修改构造函数的原型的方法来为对象添加新的方法。也可以修改JavaScript的内部对象的原型，如Array或Object。尽管可以这么做，但对Object原型进行修改并不是一个好的做法。因为大多数JavaScript对象都会从Object继承，且不会希望其原型做了修改。
ECMAScript ES6加入了对class、extends关键字的支持，使得类的定义与继承行为更加类似于其它面向对象语言，同时也更加容易使用。

函数式

在JavaScript中，函数是一等的，函数也被认为是对象。因此，函数也可以有属性与方法，例如call()和bind等。嵌套函数指定义于其它函数内部的函数，在外部函数被调用时，嵌套函数会被创建。另外，嵌套函数是一个闭包，在外部函数的作用域（包括常量，局部变量和参数）都成为内部函数状态的一部分，甚至在外部函数执行完毕后，内部函数的状态依然保留。JavaScript同时也支持匿名函数。

其他

运行时环境

JavaScript通常依赖于运行时环境（例如浏览器）来提供对象和方法，脚本可以通过这些对象和方法与环境（例如网页DOM）进行交互。

异步

JavaScript一般来说是单线程的。为了并发地处理事件，JavaScript程序输入/输出是使用事件和回调函数执行的。ECMAScript ES6引入了Promise用于优雅地处理异步事件，其可以使得传统的基于回调的异步代码更加清晰与简单。

变长参数

JavaScript中函数的参数长度是可变的，在函数内部可以通过arguments对象访问这些参数。

HTML，CSS，JavaScript概述