一、什么是Html？

HTML（HyperText Markup Language，超文本标记语言）是一种描述语言，用来定义网页结构。—— 用于定义一个网页结构的基本技术。HTML 用于表示你的网页内容是应该被理解为段落、列表、头部、链接、图像、多媒体播放器、表单或是其他众多可用的元素之一亦或是你定义的新元素。

那么到底什么是Html，怎么去理解？

首先我们需要明确一点，它并不是一门编程语言，不能够实现那些神奇的功能，但是却是能够帮助你展现出你想要的华丽的画面是一种用于定义内容结构的标记语言。

愿我如星君如月，夜夜流光相皎洁。

比方说要输入上面这一句话，可以将这行文字封装成一个段落（paragraph）元素来使其在单独一行呈现：

<p>愿我如星君如月，夜夜流光相皎洁。</p>

简单分析一下这个Html元素，可以给他分为四个部分：这个元素的主要部分有：

开始标签（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
内容（Content）：元素的内容，本例中就是所输入的文本本身。
元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

简单介绍一些常用的标签，根据个元素特点去简单记忆。

空标签 没有闭合标签的标签被称作为空标签。在我们使用的标签中，有的具有闭合标签。例如<td>标签，它有闭合标签</td>。但是也有一部分标签没有闭合标签，例如<br/>标签，这一类标签我们称之为空标签。以下是目前个人掌握也是较为常见的例子。

<br /> 换行标签，通常用于文本格式换行
<input />  用于为基于Web的表单创建交互式控件，以便接受来自用户的数据。
<img /> 代表文档中的一个图像。
<base /> 指定用于一个文档中包含的所有相对URL的基本URL。
<link /> 指定了外部资源与当前文档的关系. 这个元素的使用方法包括为导航定义关系框架.这个元素经常用来链接css文件。
<meta /> 元素表示那些不能由其它HTML元相关元素 (<base>, <link>, <script>, 
         <style> 或 <title>) 之一表示的任何元数据信息.
<wbr /> 一个文本中的位置，其中浏览器可以选择来换行，虽然它的换行规则可能不会在这里换行。

块级标签

块状标签：标签独占一行，可指定宽、高。

特性：

能够识别宽高
margin和padding的上下左右均对其有效
可以自动换行
多个块状元素标签写在一起，默认排列方式为从上至下
可以使用margin:0 auto居中对齐

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>

内联标签：

内联(行级)标签：标签在一行内，宽度与高度由内容决定，只有在内容超过HTML的宽度时，才会换行。

特性：

无法设置宽高
margin上下无效，只有左右有效果，padding都有效果，会撑大空间；box-sizing:border-box;无效，因为该属性针对盒模型。
不会自动换行

常用的内联元素有：

<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

内联块状标签：

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，、标签就是这种内联块状标签。

特性：

不会自动换行
能够设置宽高
默认排列方式为从左到右
可以使用text-align:center使内容相对于父盒子水平居中对齐，例如img标签，可以使用text-align:center，相对父盒子居中对齐、margin:0 auto无效
水平排列，但所有元素默认会有1个空格的间隙，因为元素之间在html中书写有回车换行，浏览器解析会将其解析成一个空格。

常用的内联块状元素有：

<img>、<input>

HTML标签类型是可以转换的：

在有些时候，我们要使用的标签，不具备我们想要的类型，就要在这个时候进行标签类型的转换，这样就能有标签的属性也有想要的类型。

display:inline;转换为行内元素
display:linline-block;转换为行内块元素
display:block;转换为块级元素

二、什么是CSS？

层叠样式表 — 也就是CSS — 是你在HTML之后应该学习的第二门技术。HTML用于定义内容的结构和语义，CSS用于设计风格和布局。比如，您可以使用CSS来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰.

要更好地了解我们的css实际上还是要从Html说起，我们需要知道，如果Html是一个人的骨头，那么css是能够让这个人有血有肉。让我们看起来更有辨识度一些，如果html帮助我们键入的文字是没有排版格式的，那么读起来一定是枯燥无味的。这就需要我们的css来帮助完成了。

CSS 语法

CSS是一门基于规则的语言 —— 你能定义用于你的网页中特定元素样式的一组规则. 比如“我希望页面中的主标题是红色的大字”

下面这段代码使用非常简单的 CSS 规则实现了之前提到的效果:

h1 {
    color: red;
    font-size: 5em;
}

语法由一个选择器(selector)起头。它 选择(selects) 了我们将要用来添加样式的 HTML 元素。在这个例子中我们为一级标题（主标题<h1> (en-US)）添加样式。

接着输入一对大括号{ }。在大括号内部定义一个或多个形式为 属性(property):值(value); 的 声明(declarations) 。每个声明都指定了我们所选择元素的一个属性，之后跟一个我们想赋给这个属性的值。

冒号之前是属性，冒号之后是值。不同的 CSS 属性(properties) (en-US) 对应不同的合法值。在这个例子中，我们指定了 color 属性，它可以接受许多颜色值；还有 font-size 属性，它可以接收许多 size units 值。

一个 CSS 样式表可以包含很多个规则。

h1 {
    color: red;
    font-size: 5em;
}

p {
    color: black;
}

三、什么是Javascript？

JavaScript 是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。（好吧，虽然它不是万能的，但可以通过简短的代码来实现神奇的功能。）

上文也是有所提到，Html和Css已经完成了一个基本的人的创造，有了它独特的样子，与众不同，那么一个人还应该有自己的行为，那么就需要我们Javascript来完成了。

Javascript究竟可以做些什么？

客户端（client-side）JavaScript 语言的核心包含一些普遍的编程特性，以让你可以做到如下的事情：

在变量中储存有用的值。比如上文的示例中，我们请求客户输入一个新名字，然后将其储存到 name 变量中。
操作一段文本（在编程中称为“字符串”（string））。上文的示例中，我们取字符串 "玩家1："，然后把它和 name 变量连结起来，创造出完整的文本标签，比如："玩家1：小明"。
运行代码以响应网页中发生的特定事件。上文的示例中，我们用一个 click (en-US) 事件来检测按钮什么时候被点击，然后运行代码更新文本标签。
以及更多！

JavaScript 语言核心之上所构建的功能更令人兴奋。应用程序接口（Application Programming Interfaces（API））将为你的代码提供额外的超能力。

API 是已经建立好的一套代码组件，可以让开发者实现原本很难甚至无法实现的程序。就像现成的家具套件之于家居建设，用一些已经切好的木板组装一个书柜，显然比自己设计，寻找合适的木材，裁切至合适的尺寸和形状，找到正确尺寸的螺钉，再组装成书柜要简单得多。

Html、Css和JavaScrit