想要学习前端开发，就必须了解HTML(Hyper-Text Markup Language)超文本标记语言，CSS(Cascading Style Sheets)层叠样式表，Javascript。在一个网页中，HTML显示内容，css渲染界面，js负责行为。

HTML

上面我们说到HTML是一门超文本标记语言，其实也可以理解为标签语言，因为所有的内容都是写在特定的标签中的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Document</title>
</head>
<body>
    <h1>Hello,World</h1>
</body>
</html>

上面就是一个最简单的网页代码，我想每个前端开发人员刚开始学习的时候都见到过这个页面。下面我们就来盘点一下HTML中的标签。

标题标签<h1>到<h6>
段落标签<p>
文本格式化标签:定义粗体文本<b>,定义这种文字<em>,定义斜体字<i>,定义小号字<small>
定义下标字<sub>,定义上标字<sup>
超文本链接<a>
图像标签<img>
表格<table><td><th>内容</th></td></table>
列表：有序列表<ol><li></li></ol>,无序列表<ul><li></li></ul>
块标签<div>
表单<form>
<form  id="form" action="" method="post" enctype="multipart/form-data">
        <fieldset id="login">
            <legend>用户信息</legend>
            <div class="formitem">
                <label for="username">用户名：</label>
                <input type="text" name="username" id="username"/>
                <span id="uidHint" class="hint"></span>
            </div>
            <div class="formitem">
                <label for="pass">请设置密码：</label>
                <input type="password" name="pass" id="pass"/>
                <span id="pwdHint" class="hint"></span>
            </div>
            <div class="formitem">
                <label>请确认密码：</label>
                <input type="password" name="check-pass" id="check-pass"/>
                <span id="checkHint" class="hint"></span>
            </div>
            <div class="formitem">
                <label>手机号：</label>
                <input type="text" name="tel" id="tel"/>
                <span id="telHint" class="hint"></span>
            </div>
            <div class="formitem">
                <label>验证码：</label>
                <input type="text"/ size="2">
                <button>获取验证码</button>
                <span id="varification" class="hint"></span>
            </div>
            <div class="formitem">
                <input type="submit" value="立即注册" />
            </div>
            <div class="formitem">
                <input type="checkbox" name="" id=""/>我同意<a href="">《网站服务协议》</a>
            </div>
        </fieldset>

    </form>
html5新元素：<canvas>基于JavaScript的绘图API，<audio>定义音频内容，<video>定义视频，<source>定义多媒体资源,<embed>定义嵌入的类容，比如插件。

上面只是一些常用到的HTML标签元素，在HTML中还有很多各种各样的标签元素，想要详细了解的可以到runoob了解一下。

CSS

CSS用于控制网页的样式和布局。css一些重要的模块如下：选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、用户界面。

border-radius:圆角
box-shadow:阴影
border-image:做漂亮的伸缩按钮
background:背景
background-image、background-color
linear-gradient、redial-gradient:线性渐变和径向渐变
text-shadow、text-overflow:文本阴影和文本超出隐藏
font-size、font-family、font-weight:字体大小、字体类型、字体粗细
2D转换：translate、transform
动画：@keyframes
过渡：hover

JavaScript

JavaScript事web编程语言，所有现代的html页面都使用JavaScript。

JS创建函数的三种方式即其区别

函数声明

function foo(x, y)
    return x * y

函数表达式，又叫函数字面量

var foo function(x, y)
    return x + y

前两者的区别：解析器回先读取函数声明，并使其在执行任何代码之前可以访问；而函数表达式必须等到解析器执行到它所在的代码才会真正的被解释执行
3. 函数构造法

var name = 'foo';
    function bar(){
        var name = 'test';
        return new function('return name');//不能获取局部变量
    }

JS HTML DOM

改变html内容 innerHTML/testContent
改变html属性
改变html样式
html事件：当用户点击鼠标时、当页面加载时、当图像加载时、当鼠标移动到元素上时、当输入字段被改变时、当提交html表单时、当用户触发按键时
addEventListener()方法element.addEventListener(event, function, useCapture);第一个参数时事件的类型（如”click”或”mousedown”），第二个参数时事件触发后的调用函数，第三个参数时个布尔值用于描述事件是冒泡还是捕获，改参数是可选的。
通过DOM创建和删除html元素：1，创建新的html元素。var element = document.createElement("h3");2，删除一个html元素。var child = document.getElementById("child");parent.removeChild(child);

JavaScript Window - 浏览器对象模型

Window方法：
window.open()-打开新窗口 window.close()-关闭当前窗口 window.moveTo()-移动当前窗口 window.resizeTo()-调整当前窗口 window.screen(availWidth-可用的屏幕宽度，availHeight-可用的屏幕高度) window.location(hostname-返回web主机的域名，pathname-返回当前页面的路径和文件名，port-返回web主机的端口号，protocol-返回所使用的web协议，href-返回当前页面的URL，assign-加载新的文档)

jQuery

jQuery是一个JavaScript库，极大地简化了JavaScript编程

前端开发