Web前端的基础知识什么是web？
WEB标准是一系列标准的总称，包括HTML4.0、XHTML1.1、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。WEB标准不仅仅是大家常说的DIV+CSS。
一、HTML部分
合理的结构
Html4.0的时候我们基本都是用table来布局，但是web2.0时代也是如大家所知道的那样用div+css来布局，table布局几乎不必用到css来影响web的表现，但是却要一层套一层的table，td，tabel…，如此页面相当难以维护，且不易控制表现；而使用div+css来布局就显得更加合理，它使得html结构层与css表现层分离，便于维护，但是它也带来可怕的兼容性问题，特别是ie系列浏览器，它有自己的一套解析和渲染页面的方式与w3c标准实现有着一系列的差异，不过这些差异可以通过hack来解决，而且一旦你掌握了合理的结构，兼容的css，标准的写法这些差异其实完全可以避免产生。html标签通常由尖括号包围的关键词<html>，其标签通常是成对出现的 和开始和结束标签也被称为开放标签和闭合标签。
元数据（metadata）是关于数据的信息。
<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta> 标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> //指明文字编码
<meta http-equiv="Content-Language" content="zh-CN" /> //指明采用的语法
<meta name="author" content="Csdn" /> //指明作者
<meta name="Copyright" content="Csdn" /> //指明版权
<meta name="description" content=" " /> //对网站的简单描述
<meta name="keywords" content=" " /> //说明了本网站的关键字。
<html>
<head>
<meta http-equiv="Refresh" content="5;url=www.baidu.com" />
<body>
<p>
对不起。我们已经搬家了。您的 URL 是 <a href="www.baidu.com">http://www.baidu.com</a>
</p>
<p>您将在 5 秒内被重定向到新的地址。</p>
<p>如果超过 5 秒后您仍然看到本消息，请点击上面的链接。</p>
</body>
后面2行主要是被百度这些搜索网站检索的时候用到的，非常重要。
html链接： 标签进行定义的。
例子：<a href="http://www.baidu.com"> baidu </a> href:在href属性中指定连链接的地址，是超文本引用的意思。
style=”text-decoration:none”创建一个没有下划线的超链接
定义没有下划线
html图像：<img>标签来进行定义的。
<img src=” ” width=”104″ height=”142″/> 图像的名称和尺寸是以属性的形式提供的。
tppabs：该软件是离线浏览器。
<body background=”../i/eg_background.jpg” ，在网页中插入背景图像。
替换文本属性（Alt）
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
<img src=”boat.gif” alt=”Big Boat”>
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
<img src=”xx” alt=”向左转” />
设置图像的对齐方式：
<p>图像 <img src=”xxoo” align=”bottom”> 在文本中</p>，，，使图片底部与网页中的字的下划线对齐，若不指定，默认的也是这项。 align=”top”> 在文本中</p> 使图像顶部与文字对齐； align=”middle”>居中对齐。
设置图像的浮动方式：
<img src =”XX” align =”left”>
带有图像的一个段落。图像的 align 属性设置为 “left”。图像将浮动到文本的左侧。
</p>
<p>
<img src =”XXOO” align =”right”>
带有图像的一个段落。图像的 align 属性设置为 “right”。图像将浮动到文本的右侧。
</p>
某些html元素具有空内容
就是没有关闭标签的空元素。 （
)标签定义换行，在开始标签中添加斜杠<br/>,是关闭空元素的方法。使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用
标签代替它！
html（提示：使用小写标签）
属性为html元素提供附加信息。 属性总是以名称/值对的形式出现。Name=value 属性总是在html元素的开始标签中规定。
<meta charset=”utf-8″/> 设置在html中字体的格式。
<h1 align=”center”> 拥有关于对齐 方式的附加信息，居中排列标题。
标签在 HTML 页面中创建水平线。
html注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
注释是这样写的：
实例
<!– This is a comment –> 注释列表
html拆行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：<p>This is
a para
graph with line breaks</p>
浏览器忽略了源代码中的排版（省略了多余的空格和换行）
始终为属性值加引号。属性值应该始终被包括在括号内。双引号是最常用的，若属性值本身含有双引号，则必须使用单引号。
1、标头元素<head>定义title，搜索引擎关键字
2、标题元素<h n (n=1:6)>
3、段落元素<p>
4、字形元素 定义一个粗体字形元素。
5、下划线字体<u> :</u>
6、定义斜体字体
7、链接元素定义一个锚元素，也就是链接元素
8、图像元素 <img src=url>定义个图像元素。
9、表格元素<table> </table>
<thead>定义表头元素，需要加入rules=groups
<tbody> 定义表主体元素
<tfoot>定义表尾中的元素。
创建页面表格：都以像素作为单位；width：设置表格的宽度。
10、列表元素：html中的列表：无序列表以及有序列表
<ul>:无序列表 若需要更改列表项的标志，type的属性可是disc、square 、circle中的任意一个。
<li>每一个列表<ol>：有序列表
<li> 每一个列表
11、表单元素：
表单元素一般作为数据，提交给后台服务器做处理。它是由<form> </form>来定义的。如果要在表单中包括一个或多个文件选择字段，必须把<form>标签的enctype属性设置为multipart/form-data。
最常用的表单标签<input> 标签的类型由标签属性type决定。
<input type=”text” 定义文本输入框
"password" 定义密码输入框。
"radio"用来定义单选按钮。
"checkbox"定义个复选框。
"submit"定义个提交按钮。
input：accpet属性：可约束浏览器允许用户选择的文件类型。<input accpet=image>
<form>的主要属性：action以及method:
action:用来指定表单数据被提交后，处理这些数据的程序的地址 <form action=”login.php”>
Method: 1 post:将表单数据放在http数据的正文部分进行传递。将与action中指定的表单处理服务器连接；浏览器按分段传输的方法将数据传给服务器。
2 get:将表单数据加到action所指的地址之后进行传递。浏览器先与表单处理服务器建立链接，在一个步骤中发送所有的表单数据。
get：从服务器上获取数据；
post：向服务器传送数据。 其中get是form的默认方法。
<option>标签：定义一个select表单控制中的每个条目，浏览器将<option>标签中的内容作为<Select>标签的菜单或是滚动列表中的一个元素显示，其内容只能是纯文本，不能有任何装饰。
<html>
<body>
<select multiple="multiple" size="2">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
selected属性：在option标签中包含selected属性后，就能预定一个或多个选项。
二、CSS部分
对于一条css如何定义，不用多讲，但是在定义css的时候我们最好考虑一下是否有必要加上这个className，因为定义css我们完全可以使用标签来定义，比如上面的例子里，我们想给span里的文字加粗或者换成红色字体，没有必要给这个span标签特意加上一个className，可以直接这样来定义
.topbar p span{font-weight:bold;color:red;}
这样我们可以节约很多className名字，避免因为相同的样式名而覆盖了之前的属性，而且层次结构也足够的清晰。
行内元素和块级元素
块级元素生成一个元素框，（默认地）它会填充其父级元素的内容，旁边不能有其他元素。换句话说，他在元素框之前和之后生成了“分隔”符。我们最熟悉的HTML元素就是是p和div.
行内元素在一个文本行内生成元素框，而不会打断这行文本。行内元素最好的例子就是XHTML中的a,span元素。strong和em也属于行内元素。这些元素不会在它本身之前或之后生成“分隔符”，所以可以出现在另一个元素的内容中，而不会破坏其显示。
注意，尽管“块”和“行内”这两个词与HTML和XHTML中的块级和行内元素有很多共同点，但也存在一个重要的差别。在HTML和XHTML中，块级元素不能继承自行内元素（即不能嵌套在行内元素中）。但是CSS中，对于显示内容如何嵌套不存在任何限制。
1、内部样式表 内部样式表只对所在的网页有效。
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。style标签用于为html文档定义样式信息。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
p.no2 {background-color: gray; padding: 20px;}
</style>
</head>
2、外部样式表：将样式写在一个以.css为后缀的css文件里面。
当样式需要被应用到很多页面的时候。外部样式将是理想的选择，使用外部样式表，可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
rel 属性规定当前文档与被链接文档之间的关系
你的例子里rel 属性指示被链接的文档是一个样式表只有 rel 属性的 “stylesheet” 值得到了所有浏览器的支持。其他值只得到了部分地支持。
3、内嵌样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color: red; margin-left: 20px"> ，用style定义内嵌的。
This is a paragraph
</p>
<style>:定义样式定义
<link>:定义资源引用
<div>：定义文档中的节或区域<块集>
使用图像作为超链接：1 a href: 设定超链接的地址；
2 img src:设定超链接的图片；
html链接：-target属性；
使用target属性，可定义被链接的文档在何处显示。Target=”_blank” ，在空白处建立一个新的链接。
链接到同一个文本的其他地方：查看 Chapter 4。，其中C4是本段代码中的一个段落。 <target=”_top”>跳出框架之外。
邮件链接：
<p>这是邮件链接：发送邮件
</p>，只有使用20%，才能正确的显示文本。
什么是设计模式？
设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问，设计模式于己于他人于系统都是多赢的；设计模式使代码编制真正工程化；设计模式是软件工程的基石脉络，如同大厦的结构一样。
既然要对CSS进行设计，那么肯定是它本身存在一些问题或者缺陷，其中，一个最明显的就是，它的任何一个规则，都是全局性的声明，会对引入它的页面当中所有相关元素起作用，不管那是不是你想要的。而独立及可组合的模块是一个可维护系统的关键所在。下面，我们就从多个层面来探讨一下，到底该怎样写CSS，才是更科学的。
刚开始，我们只是去定义规则，能用对了属性，语法正确，把页面实现出来了，就好。慢慢地，就会发现，页面也是有结构的，我们按照页面的结构去组织代码，会不会更好？比如，分成头部、导航、侧边栏、banner区、主内容区、底部等。
然而这样貌似还是不够，因为还有一些东西，复用度是很高的，又不好把它归为任何一个固有模块，比如：面包屑、分页、弹窗等，它们不适合被放到某一个固有模块的代码中，就可以单独的分出一段专属的css和js，或许，这就是组件化的由来~
浏览器在解析CSS规则的时候，是从右向左，一层层的去遍历寻找，如果层级太多，必然增加了渲染时间，影响渲染速度。另外，如果选择器层级过多，也就间接反应了，你的HTML结构可能写得不够简洁。那么具体多少层合适？一般建议是不超过4层，但话又说回来，超过4层会怎样吗？不会有多明显的影响，除非你写到很恐怖的数量，或者项目极其庞杂，可能看出来影响，其实从我们日常需求来看，4层以内足可以解决绝大多数问题，故而，是合理的。
文件引入的数量和顺序
对于刚接触网页的朋友来说，这两点也是容易忽视的，因为它们看起来没什么大影响，多几次请求，样式是否已经加载，都没那么容易把人逼疯。但是出于对用户体验的极致追求，我们还是希望文件请求次数尽量少，内容的显示有个优先顺序，文件加载有个先后顺序。这样，在实在难以缩减文件大小的时候，让用户先看到更重要的，正常展示的内容。
三、JavaScript部分
前面讲到结构，表现，现在来看看最为重要的行为层，也是一门比较热门的编程语言，ie下面也有自己的一套叫做Jscript，当然我们一般提到Javascript是指对标准文档规范ECMA v262的一个实现。
它是一门独立的语言，跟java没有任何关系，目前主要工作在浏览器端，而一旦涉及到浏览器则不可避免的遇到让人头疼的兼容问题，且不说dom部分的兼容就是语法解析，容错也是各有千秋，所以为了填平这些坑坑洼洼js框架应用而生，最具典型的代表莫过于JQuery了，JQuery有官方API文档这里就不作讲述。虽然有了方法类库但还是有必要了解原生语法以及语言特性等等。
在前端中，有一个很重要的概念就是事件。对于事件的理解就是使用者对浏览器进行的一个动作，或者说一个操作。
Javascript绑定事件的方式
非传统的事件绑定
非常传统的事件的绑定方式，是在一个元素上直接绑定方法，element.onclick = function(e){}。这是传统的事件绑定，它非常简单而且稳定，适应不同浏览器。e表示事件，this指向当前元素。但是这样的绑定只会在事件冒泡中运行，捕获不行。一个元素一次只能绑定一个事件函数。
W3C方式的事件绑定
W3C中推荐使用的事件绑定是用addEventListener()函数，element.addEventListener(‘click’,function(e){…},false)。这种绑定同时支持捕获和冒泡，addEventListener()函数最后的参数表达了事件处理的阶段——false(冒泡)，true(捕获)。这种方式最重要的好处就是对同一元素的同一个类型事件做绑定不会覆盖，会全部生效。比如对上面代码bt元素在进行一次click的绑定，那么两次绑定的事件处理函数都会执行，按照代码书写顺序。
但是IE浏览器不支持addEventListener()函数，只能在IE9以上(包括IE9)可以使用，IE浏览器相应的要使用attachEvent()函数代替。
编写JS代码需要注意的问题
代码的可维护性：1、可理解性：其他人可接手代码能理解其意图以及途径，无需开发人员的完整解释。
2、直观性：代码中的东西一看就能明白。
3、 可适应性：代码以一种数据的变化不要求完全重写的方法撰写.
4、可扩展性：在代码架构上已考虑到在未来允许对核心功能进行扩展。
5、可调试性：当代码出错时，代码可以给予足够的信息来尽可能确定问题所在。
代码约定： 1、可读性：通常会使用若干空格而非制表符来缩进；对每个方法的注释都视为一个可行的实践；每个 函数或方法都应该包含一个注释。大段代码：用于完成单个任务的多行代码应该在前面放一个描述任务的注释。复杂的算法：hack因为存在浏览器差异，Js代码一般会包含一些hack。
2、命名规则：变量名应该为名词如car或person。 函数名应该以动词开始getName（）；返回布尔类型的值一般以is开头 isEnable（）；
3、变量类型透明：
1、初始化 var someone= " ";
2、使用匈牙利标记法： "o"：对象； "s"：字符串；i：整数。 f：浮点数； b：布尔值。
最后一种指定变量类型的方式是使用类型注释。类型注释放在变量名右边。
JavaScript的构建过程；
1、知识产权问题：不能把带有完整注释的代码放到线上。
2、文件大小：书写代码要保证容易阅读，但对于性能是不利的。
3、代码组织：考虑到可维护性并不一定是传送给浏览器的最好方式。
JS代码应该用来定义行为，而HTML应该定义内容。css应该定义外观。
DOM交互开销很大，故需限制DOM操作次数。浏览器是如何呈现一张页面的
一个浏览器有许多模块，其中负责呈现页面的是渲染引擎模块，比较熟悉的有WebKit和Gecko等，这里也只会涉及这个模块的内容。
浏览器会解析三个东西：
一个是 HTML/SVG/XHTML，事实上，Webkit 有三个 C++ 的类对应这三类文档。解析这三种文件会产生一个 DOM Tree。
CSS，解析 CSS 会产生 CSS 规则树。
Javascript，脚本，主要是通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree.
火星时代教育
一个小胖子
