写个简单不能再简单的教程给 0 基础的人入门用，首先是 html，css 和 js。

前端开发中的前端是用户能够看到的部分，如网页页面和手机 app 的页面，这部分的开发就叫做前端开发。

一个能看到见的页面的基本组成有 3 部分：

  • 页面骨架：最开始的一个标题，标题下面的正文，正文中有段落，二级标题等。
  • 样式：字体颜色，大小，加不加粗等。
  • 交互：鼠标点击页面某个地方触发变化等，如点击红包图片后页面出现红包被打开动画效果。

控制上面 3 样的分别就是 html，css 和 js，这 3 个是前端学习的基础。

html

首先要理解什么是标记型语言，简而言之就是自带格式的文本语言。用过 word 的都是知道处理文本的格式有多么麻烦，所以如果能让这样 <加粗开始>一般文本<加粗结束> 自动变成加粗的样式 “一般文本”，那该有多么幸福，而 html 语言就是这样的工具。

html 的全称是超文本标记语言，简而言之就是给浏览器用的自带格式的文本，可以尝试一个简单的例子，用随便一个记事本文件新建一个文本，名字随意（如 demo.html），注意文件的后缀名要是 .html。

<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个简单的 HTML 页面。</p>
</body>
</html>

双击这个文件，系统会因为这个文件名后缀是 html 自动用浏览器打开（也可以把这文件拖拽到浏览器里），可以看下浏览器会显示成什么样子。

代码的一些简单解释：

  • 无论是什么代码，写起来都是一行一行的形式。
  • <html>：整个网页的根标签，所有的 HTML 代码都要写在这里面。
  • <title>我的第一个网页</title> ，左右是成对出现标签，代表开始和结束，中间的是内容，这里的 title 标签定义网页的标题，在浏览器的标签页上显示。
  • 一个网页的结构是 html 标签 包裹 head 和 body 标签，在 head 标签里是网页的头部，包含网页的标题和一些元信息，在 body 标签定义网页的主体，所有用户能看到的内容都放在这里。
  • <h1>欢迎来到我的网页</h1>：这是一个一级标题，<h1> 到 <h6> 共有 6 级，h1 最大，h6 最小。
  • <p>这是一个简单的 HTML 页面。</p>：段落文本，所有正文内容都可以写在 <p> 里。

还有一些其他的标签有不同的功能，详细的可以自己去查 html 文档，不过建议是用到的时候再查。

可以看到一个 html 页面的结构就是一个树形结构：

html
|- head
|  |- title
|  |- ....
|
|- body
|  |- h1
|  |- p
|  |- ....

这个结构被称为 DOM 树，每个标签是上面的一个节点，即 DOM 节点。

css

CSS 用于控制网页的外观，例如颜色、字体、布局等。在上面的例子中我们可以让 p 标签内的内容是红色的话，就可以这么做：

<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p style="color: red;">这是一个简单的 HTML 页面。</p>
</body>
</html>

可以看到 css 是写在标签里的，标签有自己的一些属性，css 是通过指定它的样式 (style) 属性来进一步修饰 html 标签，打个比喻就是和画人头部一样，先画出一张脸 2 个眼睛一个鼻子一个嘴这种基本框架，然后对眼睛，嘴巴细节处上色，打阴影进行细节修饰。

基本语法就是像这样 color: red; 先指定一个属性，如这里的颜色（color），然后设置为什么值，如这里的红色（red），再以冒号 ; 结束。

js

js，即 JavaScript 主要用于 让网页动起来，例如响应用户点击、动态修改网页内容等。比如我们想给上面的网页加个按钮，当点击它后让页面和我们打招呼：

<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个简单的 HTML 页面。</p>
    <button onclick="sayHello('菜鸟')">点击我</button>
</body>
</html>

<script>
	function sayHello(name) {
		alert(name);
        alert("Hello, 欢迎学习 JavaScript！");
    }
</script>

js 的部分属于网页的脚本部分，要独立于 html 标签外写在 script 标签里。

js 的语法基础就是，它是一种函数型语言，先定义再调用。

函数定义方式:

function 函数名(参数列表) 返回值 {
	// 函数主体部分
}

大括号括起来的是函数的主体部分，用注释来说明上面的代码就是：

// 定义了一个名为sayHello的函数，接收name为参数，没有返回值
function sayHello(name) {
	alert(name);  // 一行以冒号结尾，这里不用管alert是什么
	alert("Hello, 欢迎学习 JavaScript！");
}

上面的注释就是帮助理解代码用的，实际不会对代码的运行有任何影响，可以放心写自己对代码的一些备注。

在 script 标签里定义了后就可以在 html 里使用这个函数：

<button onclick="sayHello('菜鸟')">点击我</button>

上面就是在 button 标签它的 onclick 属性里使用了 sayHello 函数。

总结

简单写了下教程，简而言之就是

  • html 负责搭建页面骨架
  • css 修饰 html 标签的 style 属性，从控制网页的外观，例如颜色、字体、布局
  • js 即 JavaScript 主要用于 让网页动起来，例如响应用户点击、动态修改网页内容等

整个网页的结构大概就是这样：

html
|- head
|  |- title
|  |- ....
|  /head
|
|- body
|  |- h1
|  |- p
|  |- ....
|  /body
|
/html

script
|- ....
/script

当然这 3 个工具还有很多要学的地方，作为入门第一课懂这么多就够了。