Web前端开发技术包括三个要素：html（结构）、css（样式）、javascript（行为动作）。
现在前端三要素也演化成HTML5、CSS3、jQuery（js中常用的库）。
HTML：
HTML可以简单理解为在前端技术中勾勒出一个结构。就像我们盖楼房,需要钢筋水泥先搭建出来一个轮廓,而HTML5是超文本标记言语(HTML)的第五次严重修正。
HTML5不是对html的改革，而是一种更加“宽容”的HTML。
CSS3：
即层叠款式表，是CSS的升级，是在HTML的结构上进行装潢，能够有用的对页面的规划、字体、色彩、布景和别的结果完成愈加准确的掌握。
CSS被拆分为“模块”，如挑选器、盒模子、布景和边框、笔墨殊效、2D/3D转换、动画、多列规划、用户界面等。
jQuery：
是轻量级的js库，仅仅是js的一部分内容。用户利用jQuery能更便利地处置HTML、events、完成动画结果。
jQuery有很多成熟的插件可供挑选并且可以利用用户的html页面连结代码和html内容别离，不需要在html内里插入一堆js来挪用。
html全称HyperText Mackeup Language，翻译为超文本标记语言，它不是一种编程语言，是一种描述性的标记语言，没有编译过程，用于描述超文本内容的显示方式，HTML页面直接由浏览器解析执行。比如字体、颜色、大小等。
html是一个纯本文文件（就是用txt文件改名而成），用一些标签来描述文字的语义，这些标签在浏览器里面是看不到的，所以叫做超文本标记语言。
前端html术语：
<p>称为开始标记 ，</p>称为结束标记，也叫标签。每个标签都规定好了特殊的含义。<p>内容</p>称为元素.<h1><font></font></h1><span></span><br> 转成 <br /><hr> 转成 <hr />，还有<img src=“URL” /><input type="radio" checked="checked" />HTML不是依靠缩进来表示嵌套的，就是看标签的包裹关系，换行、tab、空格，都不影响页面的结构。
HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。
发展时间线
新建HTML文件，输入【 html:5】或者【!】再按tab键后，自动生成的html的结构代码如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html>
任何一个标准的HTML页面，第一行一定是一个以
<!DOCTYPE...
这是文档声明头，DocType Declaration，简称DTD。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范
head标签都放在头部分之间。这里面包含了：<title>、<meta>、<link>，<style>
<title>：指定整个网页的标题，在浏览器最上方显示。
<meta>：提供有关页面的基本信息
<link>：定义文档与外部资源的关系。
<style>:定义内部样式表与网页的关系
<meta>
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
1: name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到。
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）
2: http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content， content中的内容其实就是各个参数的变量值。
<!--重定向 2秒后跳转到对应的网址，注意分号--> <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> //(注意后面的引号，分别在秒数的前面和网址的后面) <!--指定文档的内容类型和编码类型 --> <meta http-equiv="content-Type" charset=UTF8"> <!--告诉IE浏览器以最高级模式渲染当前网页--> <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />
原文：https://www.cnblogs.com/wqbin/p/12022606.html