现在的位置: 首页 > 综合 > 正文

从0开始学习ASP.NET(2.0为例)系列——06HTML、CSS、JavaScript相关知识介绍

2012年06月12日 ⁄ 综合 ⁄ 共 9099字 ⁄ 字号 小 中 大 ⁄ 评论关闭

简介：

 

经过前面几篇博文的基础介绍，BlogBoy接下来希望与大家一起学习更加具体和形象的WEB技术，我们都知道这将是一条细长的小道，存在较多的分岔的路口（事实上，有时候我们并不是不知道怎么做，反而是因为可选方案太多而导致的抉择问题）。有时候我偶尔也会反思，如何在描述一些错杂纠结的问题时做到尽量避免事无巨细的同时也尽量避免蜻蜓点水式的阐述，关于这个问题BlogBoy认为引导十分重要，有时候描述一些话题重点并不在于问题本身，而是这个问题能否引发读者自身的思考，因为这才是解决所有问题的关键。本篇博文需要讨论的就是关于构建WEB页面这样一个错杂的事物（形容为错杂，并不是说这个问题有多么的有深度或复杂度，而是因为最基本WEB页面的构成也需要HTML/CSS/JS来互相协调工作，同时由于WEB浏览器现状的特殊性，增加了构建WEB页面的难度。但是如果将这些问题一一拆分开来学习，呵呵，你会发现这些问题都不是问题）。

关于WEB页面的制作，许多开发人员对WEB页面感到不胜其烦，即使是专业的前端开发人员也时常会为一个WEB页面的兼容性问题而感到措手不及，因而也容易产生烦躁和厌恶的情绪。我们可以适当的分析一下产生反感的原因，并尝试在以后的工作中避免或减轻这些因素带来的不必要的障碍：

原因零：简单的说属于态度问题。之所以把这个原因归结为零级别的首恶，是因为很多时候我们感到厌烦是因为我们不愿意和界面直接打交道，会偏执地认为界面技术是浅显简陋的东西，并没有什么可以值得说道。我们都曾听说过（也许曾今说过）类似的话，比如：HTML、CSS、JS脚本这种玩意，当初我学了一个礼拜就OK了，太简单了！；不就是HTML和CSS嘛，有什么好讲的！###才是王道……，我们谁都无法说服别人去干什么，因为只有当自己觉得重要的时候才会愿意去那么做！同样的，BlogBoy也无法使大家都认同我的个人观点，但是据BlogBoy的了解，在一个相对良好的企业环境中，前后端的职责分开有助于提高整体效率和保障质量，但是对于众多小企业而言（其实不管什么企业都需要具备一定的页面基础），这样的条件还是比较苛刻的，因此，掌握基本的页面制作技术同样也是WEB程序员的一项基本技能，要掌握这项技能，先得克服这种不知不觉的厌烦感。

原因一：对HTML标签感到困惑。如：W3C对<P>元素的解释是代表一个文本段，自然而然的我们会将一段文本置于其中。然而在实际的项目代码中，CSS可以使得<P>元素也具有和<div>块或者<h1>/<h2>/<span>…….完全相同的特性（虽然这并不是一种良好的习惯，但现象确实是普遍存在的。良好的习惯是“语义化”标签，即按照人们的语义习惯使用标签和命名，更多关于语义化的问题或规范，BlogBoy将在代码中给出一些参考）。

原因二：CSS的兼容性问题。和HTML不同，虽然HTML也有多个版本，但是每个浏览器对他们的解释基本一致，但是CSS却不同，以CSS2.0为例，我们将主流的WEB浏览器分为简单的两种，IE系列（IE内核浏览器，主要包括IE6-IE9，还包括360等浏览器），非IE系列（火狐（FireFox）、谷歌（Chrome））这里没有提到苹果浏览器（Safari）、Opera等浏览器的原因是因为它们在国内所占的市场份额比较少。其中非IE系列的浏览器表现不错，他们都更加的遵循W3C的标准、包括CSS盒子模型、CSS属性、CSS伪类，而IE系列的则需要依据特定的版本分别对待（尤其是IE6，缺陷较多，希望读者要耐心对待，当然如果可以的话，就舍弃它吧！）。

原因三：JavaScript的兼容性问题。这个问题在以前十分严重，尤其是DOM模型及EVENT模型的问题，还好现在只要注意一些IE系列和非IE系列下的一组DOM API上的不同即可，因为现在几乎所有浏览器都支持更加符合标准的JavaScript对象和函数，而且值得推荐的是。有许多著名的JavaScript库（Prototype、jQuery、ExtJS等等，它们和原生JavaScript的最大区别就是，它们都拥有十分丰富的UI和操作，能够快速的帮助我们实现原生JS的功能）都能够比较好的解决浏览器兼容问题（也不是全部）。

 

 

正文：

 

单纯的介绍所有HTML标签及其作用显得毫无意义，因为这些标签的定义你都可以在w3cschool的网站中轻而易举的得到；同样的，单独罗列一些CSS的属性或则JavaScript的技巧也不是一种好的选择，我们把重点移到一些实际问题上来，它们曾经或一直被热议：

  • HTML相关知识介绍：

1、使用table还是使用div布局：这个话题产生的原因是因为在以前的WEB布局中，使用table布局十分普遍，而table的加载机制又成为使用table布局产生的一个弊端，关于他们的具体利弊，BlogBoy很难在短短的篇幅中阐述完整，不过BlogBoy依然认为采用何种标签布局这些不是问题，重点还是要理解语义化HTML，这样你就知道什么时候该用table，而什么时候又该使用div。

2、语义化HTML：语义化HTML的最大特点就是HTML文档的所有标签，包括其CSS CLASS的命名、属性的命名等都按照直白的语义来定义，比如我们使用table来表现一个WEB表格，而不是使用一大堆的div来构建，同样的我们使用一个h1来表示标题，p表示文本段，而不是反过来使用。对于命名上的语义化，读者可以参考文中的Demo。

3、是否有必要遵循W3c标准：我们在做一些管理系统的时候会考虑使用<Frame>这样不符合标准的标签，也会在一些元素中添加自定义的属性如：<p index=”0”></p>，这个index就是自定义属性，标准并不支持；同时如：<img />这样的标签，他要求必须使用其alt属性（用于图片地址错误时作为替补的文字说明），BlogBoy认为这部分的内容暂时可以无需纠结，放心大胆的使用即可，除非项目有特殊要求必须符合W3C。

4、如何灵活的使用标签：虽然语义化标签会让整个文档更显合理，但有时为了实现一些效果，也可以破坏这种情况，比如下面这个例子：

<a class="lighttxt"><input name="demo" style="width: 250px;" type="text" /></a>

 input { outline: none; }

.lighttxt { background: #fff; border: 1px solid #ccc; border-radius: 5px; padding: 4px; *padding:1px;}

.lighttxt input { padding: 2px; border-width: 0px; }

.lighttxt:hover { border: 1px solid #7bb844; box-shadow: 1px 1px 8px rgba(123,184,68,0.5); }

       解释：这样写的目的是为了实现文本框的边框效果（火狐下有CSS3的边框效果，试试吧！）：

 
 

一般这样的效果使用JavaScript事件来实现，使用CSS来实现的好处是代码简洁、无需客户端JavaScript支持。在这里BlogBoy只是做个例子，希望读者对其他的元素也能举一反三。

 

  • CSS相关知识介绍：

1、CSS应该内嵌还是独立成单独的文件：将CSS独立为文件可以保持页面文档结构的简洁，同时也有助于代码的通用，但是也带来HTTP请求增多的问题，所以比较合理的做法是二者结合使用，独立文件的数量尽量减少，尽量提高CSS代码的重用。

2、几个常见的CSS问题：PNG透明问题，解决这个问题就需要我们学习CSS滤镜的相关知识，具体的解决办法可以在如下地址中得到http://mengqing.org/archives/ie6-png24-transparent.html；IE盒子模型的问题，这就需要我们学习CSS Hacker的知识。

3、CSS Hacker：以上面那个输入框为例，.lighttxt { background: #fff; border: 1px solid #ccc; border-radius: 5px; padding: 4px; *padding:1px;}定义了两种padding,其中*padding并不是标准的CSS属性，他只在IE6、IE7中生效并替换标准的padding值，如果换成_padding，那么就只能生效于IE6；这个例子不足以说明所有的CSS Hacker问题，不过读者可以在以下的地址中得到相关的介绍：http://www.aa25.cn/web_w3c/270.shtml

4、CSS滤镜：该技术也属于IE系列的低版本浏览器才会使用，因为非IE系列或IE高版本（IE7以上）都能够直接使用PNG格式的透明图片，而IE6需要使用CSS滤镜才能实现（或则使用GIF代替）。有关一些滤镜知识您可以在这个地址中获取：http://www.cnblogs.com/shiyangxt/archive/2008/11/16/1334633.html

  • JavaScript相关知识：（由于JavaScript比较复杂，本文之后还会继续介绍相关的细节，因此“未完待续！”）

1、JS学习对象：基本的JavaScript语法、脚本化DOM操作、脚本化CSS、脚本化窗体、学习异步请求

2、JS内嵌还是独立为文件：同CSS内嵌还是独立为文件的问题。

3、该不该OOP：BlogBoy认为思想可以做些了解，但是不必急于OOP。

4、选择一个JavaScript库：推荐jQuery1.6以上版本，ExtJS也相当不错。

  • 一个完整的Demo：

    HTML代码：

    View Code 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>新疆行知书</title>
    <link href="css/page.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="container">
    <div id="banner">
    <img src="banner.jpg" /> </div>
    <div id="globallink">
    <ul>
    <li>
    <a href="#">首页</a></li>
    <li>
    <a href="#">新疆简介</a></li>
    <li>
    <a href="#">风土人情</a></li>
    <li>
    <a href="#">吃在新疆</a></li>
    <li>
    <a href="#">路线选择</a></li>
    <li>
    <a href="#">自助行</a></li>
    <li>
    <a href="#">摄影摄像</a></li>
    <li>
    <a href="#">游记精选</a></li>
    <li>
    <a href="#">资源下载</a></li>
    <li>
    <a href="#">雁过留声</a></li>
    </ul>
    <br>
    </div>
    <div id="left">
    <div id="weather">
    <h3><span>天气查询</span></h3>
    <ul>
    <li>乌鲁木齐&nbsp;&nbsp;&nbsp;雷阵雨 20℃-31℃</li>
    <li>吐鲁番&nbsp;&nbsp;&nbsp;多云转阴 20℃-28℃</li>
    <li>喀什&nbsp;&nbsp;&nbsp;阵雨转多云 25℃-32℃</li>
    <li>库尔勒&nbsp;&nbsp;&nbsp;阵雨转阴 21℃-28℃</li>
    <li>克拉马依&nbsp;&nbsp;&nbsp;雷阵雨 26℃-30℃</li>
    </ul>
    <br>
    </div>
    <div id="today">
    <h3><span>今日推荐</span></h3>
    <ul>
    <li>
    <a href="#">
    <img src="tuijian1.jpg"></a></li>
    <li>
    <a href="#">喀纳斯河</a></li>
    <li>
    <a href="#">
    <img src="tuijian2.jpg"></a></li>
    <li>
    <a href="#">布尔津</a></li>
    <li>
    <a href="#">
    <img src="tuijian3.jpg"></a></li>
    <li>
    <a href="#">天山之路</a></li>
    </ul>
    <br>
    </div>
    </div>
    <div id="middle">
    <div id="ghost">
    <a href="#" title="魔鬼城探秘">
    <img src="ghost.jpg" border="0"></a></div>
    <div id="beauty">
    <h3><span>美景寻踪</span></h3>
    <ul>
    <li>
    <a href="#">
    <img src="beauty1.jpg"></a></li>
    <li>
    <a href="#">
    <img src="beauty2.jpg"></a></li>
    <li>
    <a href="#">
    <img src="beauty3.jpg"></a></li>
    <li>
    <a href="#">
    <img src="beauty4.jpg"></a></li>
    </ul>
    <br>
    </div>
    <div id="route">
    <h3><span>线路精选</span></h3>
    <ul>
    <li>
    <a href="#">吐鲁番——库尔勒——库车——塔中——和田——喀什</a></li>
    <li>
    <a href="#">乌鲁木齐——天池——克拉马依——乌伦古湖——喀纳斯</a></li>
    <li>
    <a href="#">乌鲁木齐——奎屯——乔尔玛——那拉提——巴音布鲁克</a></li>
    <li>
    <a href="#">乌鲁木齐——五彩城——将军隔壁——吉木萨尔</a></li>
    </ul>
    <br>
    </div>
    </div>
    <div id="right">
    <div id="map">
    <h3><span>新疆风光</span></h3>
    <p>
    <a href="#" title="点击看大图">
    <img src="map1.jpg"></a></p>
    <p>
    <a href="#" title="点击看大图">
    <img src="map2.jpg"></a></p>
    </div>
    <div id="food">
    <h3><span>小吃推荐</span></h3>
    <ul>
    <li>
    <a href="#">17号抓饭</a></li>
    <li>
    <a href="#">大盘鸡</a></li>
    <li>
    <a href="#">五一夜市</a></li>
    <li>
    <a href="#">水果</a></li>
    </ul>
    <br>
    </div>
    <div id="life">
    <h3><span>宾馆酒店</span></h3>
    <ul>
    <li>
    <a href="#">美丽华大饭店</a></li>
    <li>
    <a href="#">海德大饭店</a></li>
    <li>
    <a href="#">银都大饭店</a></li>
    <li>
    <a href="#">鸿福大饭店</a></li>
    <li>
    <a href="#">友好大酒店</a></li>
    <li>
    <a href="#">棉麻宾馆</a></li>
    <li>
    <a href="#">电信宾馆</a></li>
    </ul>
    <br>
    </div>
    </div>
    <div id="footer">
    <p>艾萨克 &copy;版权所有
    <a href="mailto:demo@demo.com">demo@demo.com</a></p>
    </div>
    </div>
    </body>
    </html>

     

    CSS代码：

    View Code 

            body { background-color: #2286c6; margin: 0px; padding: 0px; text-align: center; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
            #container     { position: relative; margin: 0px auto 0px auto; width: 780px; text-align: left; }
            div br     { display: none; }
            #globallink     { margin: 0px; padding: 0px; }
            #globallink ul     { list-style: none; padding: 0px; margin: 0px; }
            #globallink li     { float: left; text-align: center; width: 78px; }
            #globallink a     { display: block; padding: 9px 6px 11px 6px; background: url(button1.jpg) no-repeat; margin: 0px; }
            #globallink a:link, #globallink a:visited     { color: #004a87; text-decoration: underline; }
            #globallink a:hover     { color: #FFFFFF; text-decoration: underline; background: url(button1_bg.jpg) no-repeat; }
            #left     { float: left; width: 200px; background-color: #FFFFFF; margin: 0px; padding: 0px 0px 5px 0px; color: #d8ecff; }
            #left div     { background-color: #5ea6eb; margin: 0px 5px 0px 5px; }
            #weather     { background: url(weather.jpg) no-repeat -5px 0px; margin: 0px 5px 0px 5px; background-color: #5ea6eb; }
            div#left #weather h3     { font-size: 12px; padding: 24px 0px 0px 74px; color: #FFFFFF; background: none; margin: 0px; }
            div#weather ul     { margin: 8px 5px 0px 5px; padding: 10px 0px 8px 5px; list-style: none; }
            #weather ul li     { background: url(icon1.gif) no-repeat 0px 6px; padding: 1px 0px 0px 10px; }
            #left div h3     { font-size: 12px; padding: 4px 0px 2px 15px; color: #003973; margin: 0px 0px 5px 0px; background: #bbddff url(icon2.gif) no-repeat 5px 7px; }
            #today     { padding: 0px 0px 10px 0px; }
            #today ul     { list-style: none; margin: -5px 0px 0px 0px; padding: 0px; }
            #today ul li     { text-align: center; }
            #today ul li img     { border: 1px solid #FFFFFF; margin: 8px 0px 0px 0px; }
            #today ul li a:link, #today ul li a:visited     { color: #d8ecff; text-decoration: none; }
            #today ul li a:hover     { color: #FFFF00; text-decoration: underline; }
            #middle     { background-color: #FFFFFF; margin: 0px 0px 0px 2px; padding: 5px 0px 0px 0px; width: 400px; float: left; }
            #middle div     { margin-left: 5px; margin-right: 5px; position: relative; }
            #middle h3     { margin: 0px; padding: 0px; height: 41px; }
            #middle h3 span     { display: none; /* 文字去掉，换成图片 */ }
            #beauty     { margin: 15px 0px 0px 0px; padding: 0px; }
            #beauty h3     { background: url(picture_h1.gif) no-repeat; }
            #beauty ul, #route ul     { list-style: none; margin: 8px 1px 0px 1px; padding: 0px; }
            #beauty ul li     { float: left; width: 97px; text-align: center; }
            #beauty ul li img     { border: 1px solid #4ab0ff; }
            #route     { clear: both; margin: 0px; padding: 5px 0px 15px 0px; }
            #route h3     { background: url(route_h1.gif) no-repeat; }
            #route ul li     { padding: 3px 0px 0px 30px; background: url(icon1.gif) no-repeat 20px 7px; }
            #route ul li a:link, #route ul li a:visited     { color: #004e8a; text-decoration: none; }
            #route ul li a:hover     { color: #000000; text-decoration: underline; }
            #right     { float: left; margin: 0px 0px 1px 2px; width: 176px; background-color: #FFFFFF; color: #d8ecff; }
            #right div     { position: relative; margin-left: 5px; margin-right: 5px; background-color: #5ea6eb; }
            #right div h3     { font-size: 12px; padding: 4px 0px 2px 15px; color: #003973; margin: 0px 0px 5px 0px
    返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）