WEB前端开发经验总结
作者：海啸 来源：Yaohaixiao博客 时间：2009-07-20 18:01:00
不错，这个是一个文章详细页，没有左右两栏布局，不过这里我重点要讲的是合理的布局，在稍后的文章中我会详细的介绍浮动元素。好，回到刚才的话题，大家看到了这个页面了。
我这里先把代码写给大家看看（省略了部分代码）：
<!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=gb2312″ />
<title>Ajax标签导航实例详解</title>
<link href=”css/article.css” rel=”stylesheet” type=”text/css” media=”all” />
<script language=”javascript” type=”text/javascript” src=”js/common.js”></script>
</head>
<body>
<div id=”container”>
<div id=”topbar”>
<h1><a href=”http://www.yaohaixiao.com/” target=”_blank” title=”海啸的地盘–享受生活，享受每一天！”>海啸的地盘–享受生活，享受每一天！</a></h1>
<div id=”search-bar”>
<form name=”frmsearch” id=”frmsearch” action=”" method=”post”>
<label for=”keyword”>站内搜索：</label>
<select id=”topics”>
<option value=”0″>全部主题</option>
<option value=”1″>(X)HTML</option>
<option value=”2″>CSS</option>
<option value=”3″>Javascript</option>
<option value=”4″>XML</option>
<option value=”5″>ASP/ASP.NET</option>
</select>
<input type=”text” name=”keyword” id=”keyword” value=”请输入搜索关键字” maxlength=”60″ />
<input type=”reset” name=”btnsearch” id=”btnsearch” value=”开始搜索” />
</form>
</div>
</div>
<ul id=”nav”>
<li><a href=”#2″>ARTICLES</a></li>
<li><a href=”#2″>TOPICS</a></li>
<li><a href=”#2″>ABOUT</a></li>
<li><a href=”#2″>CONTACT</a></li>
<li><a href=”#2″>GESTBOOK</a></li>
<li><a href=”#2″>FEED</a></li>
</ul>
<h2>Ajax标签导航实例详解</h2>
<div id=”article-info”>作者/程序设计：<a href=”mailto:haixiao_yao@yahoo.com.cn”>yaohaixiao</a> 来源：<a href=”http://www.yaohaixiao.com” target=”_blank”>yaohaixiao.com</a> 发布时间：2008年4月28日</div>
<h3>代码篇</h3>
<p>
之前整理发表了<a href=”http://www.yaohaixiao.com/article.asp?id=44” target=”_blank”>《XMLHTTPRequest的属性和方法简介》</a>,它Ajax要使用的核心的技术之一，现在就来实际运用它。这个Ajax标签导航，是我很久前就写的一个脚本，很实用的（还被很多网站收录了哦），现在拿它来做实例讲解吧！当然个人能力有限，有什么不对的地方还请多包含!
</p>
<p>
演示地址：<a href=”http://www.yaohaixiao.com/code/ajaxtab/index.htm” target=”_blank”>http://www.yaohaixiao.com/code/ajaxtab/index.htm</a>
</p>
<p>
效果大家看到了，核心功能有：<br />
1、将当前选中标签以特殊的样式显示<br />
2、将异步加载的页面信息显示到指定的DOM节点中
</p>
<p>
我们来看看处理脚本的代码吧：
</p>
<div class=”code-title”>程序代码：ajaxtab.js</div>
<div class=”js code” name=”code” id=”js-code”>
<!–<br />
…
//–>
</div>
<p>
id=”news” - news就是我们的导航标签的ID；<br />
id=”newsCnt” - newsCnt就是我们要写入信息的目标DOM节点；<br />
class=”first” - first当前(第一个)标签的样式；<br />
id=”news-0″ - news-0 通过”-“分开，我们就分别可以得到news(导航标签ID)，0（标签[li]在导航标签中的索引值）<br />
<a href=”news/news0.htm”>网站重构</a> - 超链接<br />
<span></span> - 标签间的分割线<br />
</p>
<p>
我罗列的这些东西，相信大家开始看出了些头绪了，呵呵，不过别急！在我们看处理的脚本之前，先让我们来看看导航标签的样式，主要是看看我们对分割线的处理(一点CSS处理的技巧)。
</p>
<p>
本来想偷个懒，让大家看我上边说的那篇文章，想想也就是Ctrl+C&Ctrl+V,都贴出来吧！呵呵！！！
</p>
<p>
不过还没有完，最后要说的就是innerHTML这个特性，这里我们还要感谢微软啊，innerHTML就是它的专利，我们就是用它来改变指定DOM内的HTML字符串的，而不用刷新页面。详细的信息大家还是google一下吧，我也要休息下啊！！喝口茶先！！^-^！
</p>
<p>
以上讲了这么多，我们最后来看看，我们这个ajax标签导航都用到了那些技术吧：
</p>
<ol>
<li>XHTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>DOM</li>
<li>XMLHttpRequest对象</li>
<li>innerHTML</li>
</ol>
<p>
还有XML，我们这个例子没有涉及到。东西虽小，包含的（web前端开发）知识可是都用到了啊，我把我会的点东西都端出来了（要失业了），呵呵！
</p>
<p>
当然我很喜欢跟大家多交流，以后有时间，我们在来谈谈CSS的HACKS技巧，Javascript DOM编程等等的，今天就收工了，谢谢捧场先！！！
</p>
</div>
<p id=”copyright”>
Copyright © 2007-2008 <strong><a href=”http://www.yaohaixiao.com”>yaohaixiao.com</a></strong>, All rights reserved. Powered By: <a href=”mailto:haixiao_yao@yahoo.com.cn”>Yaohaixiao</a>
</p>
</body>
</html>
看出来什么没有？（代码是很多，呵呵！）可能大家已经发现，整个页面里基本上都是用户要看的数据，其中只包含了很少（必要）的布局(XHTML)标签（请允许我这么说）。整个页面基本都是由最基础的h1~h6、p、ul、ol、li、form、div标签来实现的。
说到这里就要讲到我在前面提到的“结构清晰、SEO优化、页面体积小、XHTML代码中基本上都是用户要看的数据”，看看我的这个例子做到了没有？
[b]结构清晰[/b]–也就是我们常说的，XHTML标签要结构化（语意化）。
[u]什么叫结构化？[/u]
由于个人认为这个知识点是十分重要的，所以请允许我在这里多罗嗦几句，我们采用WEB标准的方法制作页面的优势就体现在页面结构清晰。我们以前用table布局的时候，我们的表现（数据）和形式（布局样式）是混在一起的，有很多冗余的数据混杂在一起，而大家再看看我上面给大家展示的代码，很明显，结构十分清晰。
0
投稿猜你喜欢
MySQL查询性能优化七种方式索引潜水
vue圆环百分比进度条组件功能的实现
keras实现调用自己训练的模型,并去掉全连接层
oracle中存储函数与存储过程的区别介绍
朋友去一家游戏公司的机试题，被难住了
基于Python log 的正确打开方式
Python+selenium 获取浏览器窗口坐标、句柄的方法
Python使用循环神经网络解决文本分类问题的方法详解
Python命名空间与作用域深入全面详解
JavaScript实现鼠标经过显示下拉框
python opencv实现信用卡的数字识别
Python的进制转换和ASCLL转换你了解吗
oracle应用程序实现打包 的方法
mysql jdbc连接步骤及常见参数
vue 获取视频时长的实例代码
在PHP中读取和写入WORD文档的代码
python实现图像拼接
SQL 多表连接查询实现语句
python爬取Ajax动态加载网页过程解析
SQL 中 CASE 表达式的使用方式
