前端零基础快速入门

本教程适用于对前端知识零基础同学，使对前端有一些概念性的认识，文中很多知识仅提供一些常用的点，旨在快速掌握这些。如有不解或不正确地方，欢迎拍砖。

原文地址 (http://tt-ghost.github.io/2016/05/22/The-ABC-of-front-end/)

前半小时

与其他职位关系

前端工程师(Front-End-Engineer，简称FE)通常跟PM(产品经理)、UI(UI设计师)、RD(后端工程师)是好朋友。

初见三种语言

哪三种语言

前端语言：HTML + CSS + javascript。对应的文件扩展名为.html(或.htm)、.css、.js。

三种语言长什么样？

HTML通常长下面这样，留意会发现 html 文件基本都是以【 < + 字符 + > 】形式开始，以【 < + / + 字符 + > 】形式结束，并嵌套包裹起来的(如 <h1 id="title">Hello World!</h1>)，注意有些html标签是这种形式：【< + 字符 + />】(比如 <br />)

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Hello World!</title>
  </head>
  <body>
    <!--我是注释，页面上你看不见我奥-->
    <h1 id="title">Hello World!</h1>
    <div class="contaner">
      <p>Frist Html</p>
    </div>
  </body>
</html>

CSS通常长下面这样，特点是一些字符（这里指的是body、#title、.container）后面跟一个花括号，花括号里面是多个【属性 + : + 属性值 + ; 】(如color:#555;)形式组成的样式规则。

/* 我是CSS注释 */
body{color:#555;}
#title{font-size:20px;}
.container{padding:10px;margin-bottom:16px;}
body p{margin-bottom:10px;}

Javascript通常长下面这样

function showName(){
  alert('Hello TT!')
}
/*
  我是JS中的多行注释
*/

// 我是JS中的单行注释

showName();

这三种语言关系

这里拿开始盖房子、到装修、再到入住去做个比较，可能并不是很准确，希望能理解意思。

HTML负责文档的结构，就好比盖房子用的材料（砖、钢筋、水泥等），根据不同层次将他们嵌套、组合在一起
CSS负责美化及效果，类似盖房子的装修过程，给墙换个颜色或者给地面铺个地板，让人使用起来更舒服。当然CSS的功能不仅仅是美化这么简单，还可以实现动画等等
JS负责跟用户及服务端交互。房子盖好了，也装修完了，终究是要有人要住，要住人就会交水电费、物业费、打扫卫生等，这些不管是对房子以外的交互(比如交各种费用)还是对房子本身的处理（比如打扫卫生），都需要房子的主人完成某些事情，而JS的交互就好比主人处理这些事情

实例！实例！实例！我要看实例！

第一个实例

首先看一个简单的Hello World!，新建一个文件，我命名为index.html，将以下代码复制到index.html文件中，然后双击打开。

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

恭喜你！已经实现了第一个前端页面，是不是很easy。这是一个仅仅由html显示的Hello World!。，现在看起来还有点太简洁。

代码说明

第一行是文档类型申明。这里指定的是html5文档类型。更多文档申明
接下来是由成对的标签组成的html，当然html也有非闭合的标签，对于非闭合标签一般会在>前添加一个斜线/，虽然很多浏览器能够解析这种不带反斜线的非闭合标签，至少在编码风格一致上也推荐加上反斜线。如：
- <br />：换行符
- <input type="text" />：输入框等
一个标准html文件应该由文档类型申明，然后由html包裹的head、body标签。
- head标签：
  - 标签内容不会在浏览器中直接显示；通常有一个<title> title info</title>：文档名称，会显示在浏览器当前tab上；
  - style、link 标签通常也会放在 head中，分别对应内联样式和外部样式
  - 另外还有一些meta标签，用于描述文档的一些属性，如<meta charset="utf-8" />知名文档编码类型
- body标签
  - body内的内容将显示在浏览器中
  - 另外经常会把一些JS文件放在</body>之前(注意不是<body>之前)，通常通过script标签引入<scrpt src="./js/main.js"></scrpt>
html注释
- 以 ````结束的标签，可以跨行，但不能嵌套

再看第一个实例

html文件(添加样式(style或link)和脚本(script)后的html)

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello World!</title>
    <link rel="stylesheet" type="text/css" src="./css/main.css" />
    <style>
      .red{
        color:red;
      }
    </style>
  </head>
  <body>
    <h1 class="red">Hello World!</h1>
    <button id="butotn">点击我</button>
    <!-- 我是一段注释 -->
    <!--
      <h1 class="red">!</h1>
    -->
    <script src="./lib.js"></script>
    <script>
      var btn = document.getElementById("button");
      btn.addEventListener("click", function(){
        alert("你点击了按钮");
      });
    </script>
  </body>
</html>

main.css文件如下:

*{
  margin: 0;
  padding: 0
}
h1{
  font-size: 20px;
}

lib.js 文件如下:

(function(w, undefined){
  var Lib = {
    this.version ＝ "0.0.1"
  }

  Lib.prototype = (function(){
    var proto = {
      trim: funciton(str){
        return str.repleace(/(^\s*)|(\s*$)/g, '');
      }
    }
    return proto;
  })();

  w.Lib = new Lib();
})(window);

样式的引入：其中一种是通过style 添加页面内样式，另一种通过link引标签入外部的 css 文件。通过 style好处是可以少发一个css文件的请求，缺点是不能被缓存，不易维护，每次打开这个index.html将style内容重新下载。

后半小时

CSS

盒子模型

html标签元素根据显示特性可以分为三种类型：行内元素、块元素、行内块元素

行内元素：span\a\i\em\b\strong\img\canvas
块元素：html\body\div\h1~h6\p\table\ul\ol\li\header\footer\hgroup...
伪元素：::after,::before(现在浏览器基本也都支持单冒号)，注意跟CSS中的伪类(:hover,:focus,:active,:visited)做一下区分；伪元素是会在html中占位置，是一种特殊的元素，默认出现在元素的开始和结束地方，而伪类是元素的一种状态，如：鼠标移入、获取焦点、激活、访问过等的状态

标准盒子模型

如下图，盒子从内到外分别是content->padding->border->margin

|──────────────────────────────────── top ──────────────|
|          |─────────────────────────────────────────|  |
|          |          |───────────────────────────|  |  |
|left      |          |                           |  |  | right
|          |          |           |─────────────| |  |  |
|<-margin->|<-border->|<-padding->|<--content-->| |  |  |
|          |          |           └─────────────  |  |  |
|          |          └───────────────────────────   |  |
|          └──────────────────────────────────────────  |
└─────────────────────────────────── bottom ────────────

容器的width属性指的是content部分的宽度

书写规范

颜色设置

/* 通常颜色使用16进制表示，也可以使用rgb、rgba等表示，如下表示字体白色，纯黑且50%半透明背景，边框颜色为不透明深灰色*/
body{
  color:#fff;
  background-color:rgba(0,0,0,.5);
  border-color:rgb(100,100,100);
}
/* 常见颜色可以直接使用英文单词，如red,green,blue,white,black,yellow,gray等 */
form{color:black}

padding/margin/border及简写

/* 为属性值0时，可以省去单位，以下对``h1``元素设置的样式等价 */
h1{padding:0}
/*
h1{
  padding-top:0;
  padding-right:0;
  padding-bottom:0;
  padding-left:0;
}
 */

/* 最后一个属性可以去掉分号，书写时推荐保留 */
h2{margin:5px; padding:0px}

h3{
  padding:10px 5px;
}
/* 等价于 */
/*
h3{
  padding-top:10px;
  padding-right:5px;
  padding-bottom:10px;
  padding-left:5px;
}
 */

h4{
  padding:10px 5px 8px;
}
/* 设置的顺序为上右下左，同理margin和border属性，等价于 */
/*
h4{
  padding-top:10px 5px 8px;
  padding-right:5px;
  padding-bottom:8px;
  padding-left:5px;
}
 */

h5{
  border:1px solid #f00;
}

常见符合属性
padding\margin\border\background\font\overflow
- 其中padding\margin\border既可以设置容器单独边距离边框，也可以一次对容器多个边统一设置，例如一下两种设置是等价的，对于padding这种可以对容器四个边单独设置的属性，在简写的时候需要遵循顺时针方向顺序设置。

body{padding:1px 2px 3px 4px;}

body{
  padding-top: 1px;
  padding-right: 2px;
  padding-bottom: 3px;
  padding-left: 4px;
}

注释

/* css注释，多行 */

选择器

important(!important)、行内、id(#content)、类(.title)、标签(h1)、属性([type="text"])、后代(div a)、子(div>a)等

CSS属性

根据是否对相邻元素产生影响可以分为以下两种：

只影响自身
常见属性有:background、color
影响相邻元素:padding、border、margin、font、width、height等等

单位

px、%、em、rem

px(像素)相对显示器屏幕分辨率而言的一种单位，通常为整数
%相对容器或自身的一种单位
em继承父级字体大小，font-size:1em即为与父级字体大小一样，font-size:2em，极为父级字体的二倍
rem相对html标签字体比例，如html{font-size:10px}，div{font-size:2rem}相当于20px

常见布局

两栏布局：

两栏都是百分比

html文件

<body>
  <div class="main">
    <div class="left-side">left-side</div>
    <div class="right-side">right-side</div>
  </div>
</body>

css文件

/* ::after是尾元素 */
.main::after{
  content:'',
  display:block;
  clear:both;
  height:0;
}
.left-side, .right-side{
  float:left;
  width:50%;
}

左栏定宽，右栏百分比

<body>
  <div class="main">
    <div class="left-side">left-side</div>
    <div class="right-side">right-side</div>
  </div>
</body>