WEB前端基础知识
2012-06-05 17:50
471 查看
WEB前端基础知识
Web标准是什么？
“WEB标准”是一系列标准的总称，包括HTML4.0、XHTML1.1、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。所以这里要跟大家指出来一下，WEB标准不仅仅是大家常说的DIV+CSS。但我们接下来要了解的主要集中在XHTML1.1 和 CSS2.1，也就是web2.0时代，后面会讲到web3.0.
HTML部分
1，合理的结构
Html4.0的时候我们基本都是用table来布局，但是web2.0时代也是如大家所知道的那样用div+css来布局，table布局几乎不必用到css来影响web的表现，但是却要一层套一层的table，td，tabel…，如此页面相当难以维护，且不易控制表现；而使用div+css来布局就显得更加合理，它使得html结构层与css表现层分离，便于维护，但是它也带来可怕的兼容性问题，特别是ie系列浏览器，它有自己的一套解析和渲染页面的方式与w3c标准实现有着一系列的差异，不过这些差异可以通过hack来解决，而且一旦你掌握了合理的结构，兼容的css，标准的写法这些差异其实完全可以避免产生。
下面是一段比较常见的页面结构：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>结构化的hmtl</title>
<link href="css/xxx.css" rel="stylesheet" type="text/css" media="all" />
<script language="javascript" type="text/javascript" src="js/xxx.js"></script>
</head>
<body>
<div id="container">
<div id="topbar" class="topbar">
<h1>合理的机构</h1>
<h2>结构化的html</h2>
<p>这里是<span>内容</span>。</p>
<ul>
<li><a href="###">这里是超链接</a></li>
<li><a href="###">这里是超链接</a></li>
<li><a href="###">这里是超链接</a></li>
</ul>
<…>
</div>
</div>
</body>
</html>
第一行声明文档解析模式，当前使用的是XHTML 1.0 Transitional，这个也是比较常用的，但是html5出来后，大家更愿意使用简洁的<!DOCTYPE >,这种写法是利用浏览器向下兼容的机制来处理，支持html5的浏览器会自动使用html5来解析渲染，不支持的浏览器会用标准模式的来处理。
接下来是head用来存放meta信息和引入css，js文件。
中间便是我们操作最多的body，我们可以看到xhtml的标签按照w3c解释是要全部闭合的哪怕是input或者img标签也一样要闭合，当然如果你没有闭合浏览器会帮你自动闭合。
Div我们大部分是用来布局，也就是划分各个模块，而h1-h6用来包裹标题信息，p是段落标签，ul/li,ol/li无序/有序的列表等等，这些标签都有它本身的含义，而且我们要做的则是尽可能的让它们各司其位。其中比较重要的概念便是行内元素和块级元素。
2， 内敛(行内)元素和块级元素
块级元素生成一个元素框，（默认地）它会填充其父级元素的内容，旁边不能有其他元素。换句话说，他在元素框之前和之后生成了“分隔”符。我们最熟悉的HTML元素是p和div.
行内元素在一个文本行内生成元素框，而不会打断这行文本。行内元素最好的例子就是XHTML中的a,span元素。strong和em也属于行内元素。这些元素不会在它本身之前或之后生成“分隔符”，所以可以出现在另一个元素的内容中，而不会破坏其显示。
注意，尽管“块”和“行内”这两个词与HTML和XHTML中的块级和行内元素有很多共同点，但也存在一个重要的差别。在HTML和XHTML中，块级元素不能继承自行内元素（即不能嵌套在行内元素中）。但是CSS中，对于显示内容如何嵌套不存在任何限制。
CSS部分
对于一条css如何定义，不用多讲，但是在定义css的时候我们最好考虑一下是否有必要加上这个className，因为定义css我们完全可以使用标签来定义，比如上面的例子里，我们想给span里的文字加粗或者换成红色字体，没有必要给这个span标签特意加上一个className，可以直接这样来定义
.topbar p span{font-weight:bold;color:red;}
这样我们可以节约很多className名字，避免因为相同的样式名而覆盖了之前的属性，而且层次结构也足够的清晰。
关于ie6经典bug，举几个常见的例子来说明。
1，ie6对浮动的元素使用margin属性便会产生双倍边距，解决办法：对每一个浮动元素在css里都加上display:inline;属性。
2，ie6两个并列的元素，第一个左浮动，而第二个没有浮动，则两个元素间会产生3像素的间隙，解决办法：在第二个元素上面也加上左浮动。
3，在ie6下遇到浮动之后出现诡异的问题可以试着去触发它的haslayout，方法是为css设置一个高度或宽度（zoom也可以用，但是zoom并不是css标准的一部分）。但是有的时候我们根本不需要设置宽高，所以使用zoom也是不错的选择
4，使用!important来改变css优先顺序，但在IE6里，重复的属性写在同一对大括号里，后面的将会覆盖前面的，不管上面的属性是否加有!important声明；而写在不同的大括号里，它则会去认加有!important声明的那条属性，其他浏览器则都会使用加有!important声明的那条属性。
关于浮动的问题，建议任何的浮动完了后都要清除浮动，而且清除浮动有很多方法，这里推荐使用一个div标签放在浮动元素后面，加上一个“clear:both;”的样式来清除。
关于css hack，针对不同的浏览器写不同的CSS code的过程，就叫CSS hack!
background:blue;//所有浏览器都识别；
_background:blue;//在css属性前面加上下划线，只有ie6识别它；
*+background:blue;//加星号和加号，只有ie7识别，注意必须保证HTML顶部有如下声明：http://www.w3.org/TR/html4/loose.dtd
*background:blue;//加星号，只有ie6，ie7识别
background:blue \0;//结尾处加上“\0”，只有ie8,ie9识别
background:blue \9;//结尾处加上“\9”，只有ie6，ie7,ie8识别
background:blue \9\0;//结尾处加上“\9\0”，只有ie9识别
JavaScript部分
前面讲到结构，表现，现在来看看最为重要的行为层，也是一门比较热门的编程语言，ie下面也有自己的一套叫做Jscript，当然我们一般提到Javascript是指对标准文档规范ecma v262的一个实现。
它是一门独立的语言，跟java没有任何关系，目前主要工作在浏览器端，而一旦涉及到浏览器则不可避免的遇到让人头疼的兼容问题，且不说dom部分的兼容就是语法解析，容错也是各有千秋，所以为了填平这些坑坑洼洼js框架应用而生，最具典型的代表莫过于JQuery了，JQuery有官方API文档这里就不作讲述。虽然有了方法类库但还是有必要了解原生语法以及语言特性等等。
从兼容性开始吧，还是ie系列与标准系列的差异。
1， document.all.*的写法来取得一个页面元素的引用，用这种方式在页面上获取元素看似很方便，可惜只有ie家族才认识它，标准浏览器报错。建议使用document.getElementById和document.getElementsByTagName来获取dom元素
2， 获取元素里的内容使用dom.innerHTML，但是如果只想取文本内容那怎么办？ie下使用dom. innerText,其他浏览器得用dom. textContent
3， Dom.onclick=function(e){alert(e); alert(window.event);} ie下事件对象通过window.event来传递，而其他浏览器则需要通过参数来传递。
4， Ie下使用event.srcElement来获取事件发生的元素，其他浏览器用event.target来获取
5， 如果是鼠标事件想取得当前鼠标的坐标，ie下你可以这样来取得event.x和event.y，而火狐和其他标准浏览器则用event.pageX和event.pageY
6， Ie下添加多投事件使用element.attachEvent("onclick", function);，而其他浏览器则用element.addEventListener("click", function, true)；
7， Ie下可以通过dom.attr直接取得元素的自定义属性，而标准浏览器则只能通过dom. getAttribute(‘attr’)来获取。
8， Ie下面这样数组([1,2,3,])会报错，而标准浏览器会自动过滤掉最后的逗号。
结束语，之所以有前端开发工程师这个职位，这都是拜浏览器大战所赐，正是因为有了各种各样的浏览器才需要前端工程师去摆平那些兼容的问题，所以在处理兼容的时候特别是ie6下面的各种奇异怪蜀的bug时咱们需要多一份耐心，把代码再规范点，结构再合理点，css hack再少一点。
虽然ie6必将被时代埋葬，html5必定席卷全球，但这尚需时日。。。
Web标准是什么？
“WEB标准”是一系列标准的总称，包括HTML4.0、XHTML1.1、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。所以这里要跟大家指出来一下，WEB标准不仅仅是大家常说的DIV+CSS。但我们接下来要了解的主要集中在XHTML1.1 和 CSS2.1，也就是web2.0时代，后面会讲到web3.0.
HTML部分
1，合理的结构
Html4.0的时候我们基本都是用table来布局，但是web2.0时代也是如大家所知道的那样用div+css来布局，table布局几乎不必用到css来影响web的表现，但是却要一层套一层的table，td，tabel…，如此页面相当难以维护，且不易控制表现；而使用div+css来布局就显得更加合理，它使得html结构层与css表现层分离，便于维护，但是它也带来可怕的兼容性问题，特别是ie系列浏览器，它有自己的一套解析和渲染页面的方式与w3c标准实现有着一系列的差异，不过这些差异可以通过hack来解决，而且一旦你掌握了合理的结构，兼容的css，标准的写法这些差异其实完全可以避免产生。
下面是一段比较常见的页面结构：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>结构化的hmtl</title>
<link href="css/xxx.css" rel="stylesheet" type="text/css" media="all" />
<script language="javascript" type="text/javascript" src="js/xxx.js"></script>
</head>
<body>
<div id="container">
<div id="topbar" class="topbar">
<h1>合理的机构</h1>
<h2>结构化的html</h2>
<p>这里是<span>内容</span>。</p>
<ul>
<li><a href="###">这里是超链接</a></li>
<li><a href="###">这里是超链接</a></li>
<li><a href="###">这里是超链接</a></li>
</ul>
<…>
</div>
</div>
</body>
</html>
第一行声明文档解析模式，当前使用的是XHTML 1.0 Transitional，这个也是比较常用的，但是html5出来后，大家更愿意使用简洁的<!DOCTYPE >,这种写法是利用浏览器向下兼容的机制来处理，支持html5的浏览器会自动使用html5来解析渲染，不支持的浏览器会用标准模式的来处理。
接下来是head用来存放meta信息和引入css，js文件。
中间便是我们操作最多的body，我们可以看到xhtml的标签按照w3c解释是要全部闭合的哪怕是input或者img标签也一样要闭合，当然如果你没有闭合浏览器会帮你自动闭合。
Div我们大部分是用来布局，也就是划分各个模块，而h1-h6用来包裹标题信息，p是段落标签，ul/li,ol/li无序/有序的列表等等，这些标签都有它本身的含义，而且我们要做的则是尽可能的让它们各司其位。其中比较重要的概念便是行内元素和块级元素。
2， 内敛(行内)元素和块级元素
块级元素生成一个元素框，（默认地）它会填充其父级元素的内容，旁边不能有其他元素。换句话说，他在元素框之前和之后生成了“分隔”符。我们最熟悉的HTML元素是p和div.
行内元素在一个文本行内生成元素框，而不会打断这行文本。行内元素最好的例子就是XHTML中的a,span元素。strong和em也属于行内元素。这些元素不会在它本身之前或之后生成“分隔符”，所以可以出现在另一个元素的内容中，而不会破坏其显示。
注意，尽管“块”和“行内”这两个词与HTML和XHTML中的块级和行内元素有很多共同点，但也存在一个重要的差别。在HTML和XHTML中，块级元素不能继承自行内元素（即不能嵌套在行内元素中）。但是CSS中，对于显示内容如何嵌套不存在任何限制。
CSS部分
对于一条css如何定义，不用多讲，但是在定义css的时候我们最好考虑一下是否有必要加上这个className，因为定义css我们完全可以使用标签来定义，比如上面的例子里，我们想给span里的文字加粗或者换成红色字体，没有必要给这个span标签特意加上一个className，可以直接这样来定义
.topbar p span{font-weight:bold;color:red;}
这样我们可以节约很多className名字，避免因为相同的样式名而覆盖了之前的属性，而且层次结构也足够的清晰。
关于ie6经典bug，举几个常见的例子来说明。
1，ie6对浮动的元素使用margin属性便会产生双倍边距，解决办法：对每一个浮动元素在css里都加上display:inline;属性。
2，ie6两个并列的元素，第一个左浮动，而第二个没有浮动，则两个元素间会产生3像素的间隙，解决办法：在第二个元素上面也加上左浮动。
3，在ie6下遇到浮动之后出现诡异的问题可以试着去触发它的haslayout，方法是为css设置一个高度或宽度（zoom也可以用，但是zoom并不是css标准的一部分）。但是有的时候我们根本不需要设置宽高，所以使用zoom也是不错的选择
4，使用!important来改变css优先顺序，但在IE6里，重复的属性写在同一对大括号里，后面的将会覆盖前面的，不管上面的属性是否加有!important声明；而写在不同的大括号里，它则会去认加有!important声明的那条属性，其他浏览器则都会使用加有!important声明的那条属性。
关于浮动的问题，建议任何的浮动完了后都要清除浮动，而且清除浮动有很多方法，这里推荐使用一个div标签放在浮动元素后面，加上一个“clear:both;”的样式来清除。
关于css hack，针对不同的浏览器写不同的CSS code的过程，就叫CSS hack!
background:blue;//所有浏览器都识别；
_background:blue;//在css属性前面加上下划线，只有ie6识别它；
*+background:blue;//加星号和加号，只有ie7识别，注意必须保证HTML顶部有如下声明：http://www.w3.org/TR/html4/loose.dtd
*background:blue;//加星号，只有ie6，ie7识别
background:blue \0;//结尾处加上“\0”，只有ie8,ie9识别
background:blue \9;//结尾处加上“\9”，只有ie6，ie7,ie8识别
background:blue \9\0;//结尾处加上“\9\0”，只有ie9识别
JavaScript部分
前面讲到结构，表现，现在来看看最为重要的行为层，也是一门比较热门的编程语言，ie下面也有自己的一套叫做Jscript，当然我们一般提到Javascript是指对标准文档规范ecma v262的一个实现。
它是一门独立的语言，跟java没有任何关系，目前主要工作在浏览器端，而一旦涉及到浏览器则不可避免的遇到让人头疼的兼容问题，且不说dom部分的兼容就是语法解析，容错也是各有千秋，所以为了填平这些坑坑洼洼js框架应用而生，最具典型的代表莫过于JQuery了，JQuery有官方API文档这里就不作讲述。虽然有了方法类库但还是有必要了解原生语法以及语言特性等等。
从兼容性开始吧，还是ie系列与标准系列的差异。
1， document.all.*的写法来取得一个页面元素的引用，用这种方式在页面上获取元素看似很方便，可惜只有ie家族才认识它，标准浏览器报错。建议使用document.getElementById和document.getElementsByTagName来获取dom元素
2， 获取元素里的内容使用dom.innerHTML，但是如果只想取文本内容那怎么办？ie下使用dom. innerText,其他浏览器得用dom. textContent
3， Dom.onclick=function(e){alert(e); alert(window.event);} ie下事件对象通过window.event来传递，而其他浏览器则需要通过参数来传递。
4， Ie下使用event.srcElement来获取事件发生的元素，其他浏览器用event.target来获取
5， 如果是鼠标事件想取得当前鼠标的坐标，ie下你可以这样来取得event.x和event.y，而火狐和其他标准浏览器则用event.pageX和event.pageY
6， Ie下添加多投事件使用element.attachEvent("onclick", function);，而其他浏览器则用element.addEventListener("click", function, true)；
7， Ie下可以通过dom.attr直接取得元素的自定义属性，而标准浏览器则只能通过dom. getAttribute(‘attr’)来获取。
8， Ie下面这样数组([1,2,3,])会报错，而标准浏览器会自动过滤掉最后的逗号。
结束语，之所以有前端开发工程师这个职位，这都是拜浏览器大战所赐，正是因为有了各种各样的浏览器才需要前端工程师去摆平那些兼容的问题，所以在处理兼容的时候特别是ie6下面的各种奇异怪蜀的bug时咱们需要多一份耐心，把代码再规范点，结构再合理点，css hack再少一点。
虽然ie6必将被时代埋葬，html5必定席卷全球，但这尚需时日。。。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- web前端面试中常见的js基础又实用的知识回顾
- Web前端学习①Web基础知识
- web前端入门：javascrip基础知识
- web前端基础知识总结
- web前端基础知识及快速入门指南
- web前端开发基础知识随笔
- Web前端基础知识（四）——垂直居中的四种方式
- Web前端工程师知识体系大全，Web前端入门基础体系
- web前端入门知识笔记——html基础（传智播客）
- web前端-HTML基础知识
- web前端基础知识（三）——CSS编码规范
- web前端入门知识笔记——html基础（传智播客）
- Web前端面试基础知识（一）
- WEB前端模块化基础知识
- web前端入门知识笔记——html基础（传智播客）
- 小熊进阶之WEB前端javascript的基础知识汇总
- Web前端基础知识(1)
- web前端脚本编程（一）--JavaScript脚本基础知识
- 零基础学习web前端开发需要学习的前端知识
- web前端基础知识