一文搞懂HTML+CSS+JavaScript

HTML超文本标记语言

1、定义

HTML的全称为超文本标记语言（Hyper Text Markup Language），是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接（超文本：不止文本）等。超文本标记语言是标准通用标记语言下的一个应用，是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。

2、简介

使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，只是一种排版网页中资料显示位置的标记结构语言。HTML的普遍应用带来了超文本的技术——通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一页面，与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP的制定使浏览器在运行超文本时有了统一的规则和标准。HTML是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。

3、特点

HTML文档支持不同数据格式的文件镶入其主要特点如下：

• 简易性：HTML版本升级采用超集方式，从而更加灵活方便。
• 可扩展性：文本标记语言采取子类元素的方式，为系统扩展带来保证。
• 平台无关性：HTML可以使用在广泛的平台上
• 通用性： HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

4、编辑方式

编辑

HTML其实是文本，它需要浏览器的解释，它的编辑器大体可以分为以下几种：

• 基本文本、文档编辑软件，使用微软自带的记事本或写字板都可以编写，保存时使用.htm或.html作为扩展名方便浏览器直接解释执行。
• 半所见即所得软件。
• 所见即所得软件。所见即所得软件与半所见即所得的软件相比，开发速度更快，效率更高，且直观的表现更强。任何地方进行修改只需要刷新即可显示。缺点是生成的代码结构复杂，不利于大型网站的多人协作和精准定位等高级功能的实现。

字符集

除ASCII字符和汉字，HTML还有特殊字符，它们一起构成了HTML字符集。有2种情况需要使用特殊字符，一是网页中有其特殊意义的字符，二是键盘上没有的字符。HTML字符可以用一些代码来表示，代码可以有2种表示方式。即字符代码（命名实体）和数字代码（编号实体）。字符代码以“&”符开始，以分号";“结束，其间是字符名，如®。数字代码以“&#”符开始，以分号”;"结束，其间是编号，如®。

数据类型

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

CSS层叠样式表

1、定义

层叠样式表(Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS可以静态地修饰网页，配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。CSS是一种描述HTML文档样式的语言。CSS 描述应该如何显示 HTML 元素。

2、特点

CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。CSS具有以下特点：

• 丰富的样式定义：CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

• 易于使用和修改：CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。CSS样式表可以将所有的样式声明统一存放，进行统一管理。可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。

• 多页面应用：CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

• 层叠：层叠就是对一个元素多次设置样式，将使用最后一次设置的属性值。

• 页面压缩：使用HTML定义页面效果需要大量或重复的表格和font元素形成各种规格的文字样式，会产生大量的HTML标签，使页面文件的大小增加。将样式的声明单独放到CSS样式表中，可以减小页面的体积，在加载页面时使用的时间也会减少。CSS样式表的复用更大程度的缩减了页面的体积，减少下载的时间。

3、工作原理

CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和显示的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名CSS的外部样式单文档中。样式规则是可应用于网页中元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中，外部样式单保存在独立的文档中，网页通过一个特殊标签链接外部样式单。名称CSS中的“层叠（cascading）”表示样式单规则应用于HTML文档元素的方式。具体地说，CSS样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果。

4、HTML与CSS之间的区别

• 性质不同。HTML（结构）用于定义文档内容结构，该语言写的代码通常会被浏览器解析执行。CSS（布局）用于定义HTML文档的样式（外观）。CSS是页面表现的基础，可以控制布局，控制元素的渲染。HTML是描述网页内容和结构的基本标记语言。CSS是HTML的扩展，它修改了网页的设计和显示。HTML是网页的结构，CSS是网页的样式。
• 语法不同。HTML由围绕内容的标签组成。CSS由一个声明块继承的选择器组成。
• 注释的格式不同。
• HTML文件可以包含CSS代码，而CSS样式表绝对不能包含HTML代码。CSS可以在HTML文件中使用，但HTML不能在CSS样式表中使用。

JavaScript

1、定义

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

2、主要功能

• 嵌入动态文本于HTML页面。
• 对浏览器事件做出响应。
• 读写HTML元素。
• 在数据被提交到服务器之前验证数据。 检测访客的浏览器信息。控制cookies，包括创建和修改等。
• 基于Node.js技术进行服务器端编程。

3、语言组成

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

4、运行模式

JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

• 是一种解释性脚本语言（代码不进行预编译）
• 主要用来向HTML页面添加交互行为
• 可以直接嵌入HTML页面，写成单独的js文件有利于结构和行为的分离
• 跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行
• JavaScript脚本语言同其他语言一样，有它自身的基本数据类型、表达式和算术运算符及程序的基本程序框架。
• JavaScript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。

5、特点

JavaScript脚本语言具有以下特点:

• 脚本语言。JavaScript是一种解释型的脚本语言，在程序的运行过程中逐行进行解释。
• 基于对象。JavaScript是一种基于对象的脚本语言，它可以创建对象，也能使用现有的对象。
• 简单。JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。
• 动态性。JavaScript是采用事件驱动的脚本语言，不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时，鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
• 跨平台性。JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言，JavaScript已被大多数的浏览器所支持。不同于服务器端脚本语言，例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。

6、HTML、CSS、JavaScript之间的联系与区别

HTML+CSS+JS是做网页前台设计的标准套装。

• HTML：（Hypertext Markup Language）超文本标记语言
  结构（structure）——决定网页的结构及内容，即“显示哪些内容”。可以把HTML说成是静态代码。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
• CSS（Cascading Style Sheet）层叠样式表单
  表现（presentation）——设计网页的表现样式，即“如何显示有关内容”。CSS是将样式信息与网页内容分离的一种标记语言，我们使用CSS为每个元素定义样式，主要用于美化HTML页面。通过设置对应的样式属性可以修改html文档内各元素的显示、位置等样式；如修改颜色、字体、字号、宽高、位置、背景等。
• JS（JavaScript）动态脚本语言
  行为（behavior）——控制网页的行为（效果），即“内容应该如何对事件做出反应”。使用JavaScript代码可以让前台变的有交互(点击事件)，常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。JavaScript能够改变HTML内容、改变HTML属性、改变HTML样式 (CSS)、隐藏HTML元素、显示HTML元素

7、DOM文档对象模型

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。当创建好一个页面并加载到浏览器时，DOM会生成，它会把网页文档转换为一个文档对象，主要功能是处理网页内容。
通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。DOM（文档对象模型）当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被结构化为对象树：

通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

• JavaScript 能改变页面中的所有 HTML 元素
• JavaScript 能改变页面中的所有 HTML 属性
• JavaScript 能改变页面中的所有 CSS 样式
• JavaScript 能删除已有的 HTML 元素和属性
• JavaScript 能添加新的 HTML 元素和属性
• JavaScript 能对页面中所有已有的 HTML 事件做出反应
• JavaScript 能在页面中创建新的 HTML 事件

8、BOM浏览器对象模型

BOM（Browser Object Model）浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象。由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window。BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C。BOM最初是Netscape浏览器标准的一部分。现代的浏览器已经（几乎）实现了JavaScript交互相同的方法和属性，因此它经常作为 BOM 的方法和属性被提到。BOM允许JavaScript与浏览器对话。

BOM提供了访问窗口对象的方法，可以用来移动窗口位置，改变窗口大小，打开新窗口和关闭窗口，弹出对话框，进行导航以及获取客户的一些信息。BOM提供了一个访问HTML页面的统一入口——document对象，可以通过这个入口来使用DOM。window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的。由于window是顶层对象，因此调用它的子对象时可以不显示的指明window对象。
所有浏览器都支持 window 对象。它代表浏览器的窗口。所有全局JavaScript 对象，函数和变量自动成为window对象的成员。全局变量是window对象的属性。全局函数是window对象的方法。HTML DOM的document对象也是window对象属性。
BOM定义了JavaScript进行操作浏览器的各个功能部件的接口，提供访问文档各个功能部件（如窗口本身、屏幕功能部件、框架、浏览历史记录等）的途径以及操作方法。