欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

WEB前端涉及的布局、結(jié)構(gòu)化和標(biāo)準(zhǔn)化

互聯(lián)網(wǎng)   發(fā)布時(shí)間：2008-10-17 19:23:59   作者：佚名   我要評論
很久沒有寫文章，最近一直在忙于找工作和找房子。哎，現(xiàn)在終于安定下來了，哎，又嘆息一下，是因?yàn)槲野讶ヌ詫毭嬖嚨臋C(jī)會(huì)也推掉了，本來以為要卷鋪蓋回武漢了，哎，不提了，很對不起小馬哥，也很對不起自己??！ 現(xiàn)在還是在上海，不扯了，開始正題吧。做前端開發(fā)快有3年時(shí)

我這里先把代碼寫給大家看看（省略了部分代碼）：
<!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標(biāo)簽導(dǎo)航實(shí)例詳解</title>
<link href="css/article.css" _fcksavedurl=""css/article.css"" _fcksavedurl=""css/article.css"" _fcksavedurl=""css/article.css"" _fcksavedurl=""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">站內(nèi)搜索：</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="請輸入搜索關(guān)鍵字" 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標(biāo)簽導(dǎo)航實(shí)例詳解</h2>
<div id="article-info">作者/程序設(shè)計(jì)：<a href="yaohaixiaomailto:haixiao_yao@yahoo.com.cn">yaohaixiao</a> 來源：<a href="http://www.yaohaixiao.com" target="_blank">yaohaixiao.com</a> 發(fā)布時(shí)間：2008年4月28日</div>
<h3>代碼篇</h3>
<p>
之前整理發(fā)表了<a href="http://www.yaohaixiao.com/article.asp?id=44" target="_blank">《XMLHTTPRequest的屬性和方法簡介》</a>,它Ajax要使用的核心的技術(shù)之一，現(xiàn)在就來實(shí)際運(yùn)用它。這個(gè)Ajax標(biāo)簽導(dǎo)航，是我很久前就寫的一個(gè)腳本，很實(shí)用的（還被很多網(wǎng)站收錄了哦），現(xiàn)在拿它來做實(shí)例講解吧！當(dāng)然個(gè)人能力有限，有什么不對的地方還請多包含!
</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、將當(dāng)前選中標(biāo)簽以特殊的樣式顯示<br />
2、將異步加載的頁面信息顯示到指定的DOM節(jié)點(diǎn)中
</p>
<p>
我們來看看處理腳本的代碼吧：
</p>
<div class="code-title">程序代碼：ajaxtab.js</div>
<div class="js code" name="code" id="js-code">
<!--<br />
// 判斷是否支持ActiveX<br />
var useActiveX=(typeof ActiveXObject != "undefined"); <br />
// 判斷是否支持DOM<br />
var useDom=document.implementation && document.implementation.createDocument;<br />
// 判斷是否支持XMLHttpRequest對象<br />
var useXmlHttp=(typeof XMLHttpRequest != "undefined");<br />
// XMLHttpRequest對象版本<br />
var ARR_XMLHTTP_VERS = ["MSXML2.XmlHttp.6.0","MSXML2.XmlHttp.3.0"];<br />
// DOM對象版本 <br />
var ARR_DOM_VERS = ["MSXML2.DOMDocument.6.0","MSXML2.DOMDocument.3.0"]; <br />
/* ===========================================================<br />
* 函數(shù)名稱：$(i)<br />
* 參數(shù)說明：i - 目標(biāo)節(jié)點(diǎn)名稱<br />
* 函數(shù)功能：獲取指定的目標(biāo)DOM節(jié)點(diǎn)<br />
* 返 回 值：返回要搜索的目標(biāo)DOM節(jié)點(diǎn)<br />
* 使用方法：$("frmSearch")<br />
============================================================ */<br />
function $(i){<br />
if(!document.getElementById)return false;<br />
if(typeof i==="string"){<br />
if(document.getElementById && document.getElementById(i)) {<br />
// W3C DOM<br />
return document.getElementById(i);<br />
}<br />
else if (document.all && document.all(i)) {<br />
// MSIE 4 DOM<br />
return document.all(i);<br />
}<br />
else if (document.layers && document.layers[i]) {<br />
// NN 4 DOM.. note: this won't find nested layers<br />
return document.layers[i];<br />
} <br />
else {<br />
return false;<br />
}<br />
}<br />
else{return i;}<br />
}<br />
//-->
</div>
<p>
id="news" - news就是我們的導(dǎo)航標(biāo)簽的ID；<br />
id="newsCnt" - newsCnt就是我們要寫入信息的目標(biāo)DOM節(jié)點(diǎn)；<br />
class="first" - first當(dāng)前(第一個(gè))標(biāo)簽的樣式；<br />
id="news-0" - news-0 通過”-“分開，我們就分別可以得到news(導(dǎo)航標(biāo)簽ID)，0（標(biāo)簽[li]在導(dǎo)航標(biāo)簽中的索引值）<br />
<a href="news/news0.htm">網(wǎng)站重構(gòu)</a> - 超鏈接<br />
<span></span> - 標(biāo)簽間的分割線<br />
</p>
<p>
我羅列的這些東西，相信大家開始看出了些頭緒了，呵呵，不過別急！在我們看處理的腳本之前，先讓我們來看看導(dǎo)航標(biāo)簽的樣式，主要是看看我們對分割線的處理(一點(diǎn)CSS處理的技巧)。
</p>
<p>
本來想偷個(gè)懶，讓大家看我上邊說的那篇文章，想想也就是Ctrl C&Ctrl V,都貼出來吧！呵呵！??！
</p>
<p>
不過還沒有完，最后要說的就是innerHTML這個(gè)特性，這里我們還要感謝微軟啊，innerHTML就是它的專利，我們就是用它來改變指定DOM內(nèi)的HTML字符串的，而不用刷新頁面。詳細(xì)的信息大家還是google一下吧，我也要休息下?。?！喝口茶先??！^-^！
</p>
<p>
以上講了這么多，我們最后來看看，我們這個(gè)ajax標(biāo)簽導(dǎo)航都用到了那些技術(shù)吧：
</p>
<ol>
<li>XHTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>DOM</li>
<li>XMLHttpRequest對象</li>
<li>innerHTML</li>
</ol>
<p>
還有XML，我們這個(gè)例子沒有涉及到。東西雖小，包含的（web前端開發(fā)）知識(shí)可是都用到了啊，我把我會(huì)的點(diǎn)東西都端出來了（要失業(yè)了），呵呵！
</p>
<p>
當(dāng)然我很喜歡跟大家多交流，以后有時(shí)間，我們在來談?wù)凜SS的HACKS技巧，Javascript DOM編程等等的，今天就收工了，謝謝捧場先?。?！
</p>
</div>
<p id="copyright">
Copyright &copy; 2007-2008 <strong><a href="yaohaixiao.comhttp://www.yaohaixiao.com">yaohaixiao.com</a></strong>, All rights reserved. Powered By: <a href="Yaohaixiaomailto:haixiao_yao@yahoo.com.cn">Yaohaixiao</a>
</p>
</body>
</html>
看出來什么沒有？（代碼是很多，呵呵?。┛赡艽蠹乙呀?jīng)發(fā)現(xiàn)，整個(gè)頁面里基本上都是用戶要看的數(shù)據(jù)，其中只包含了很少（必要）的布局(XHTML)標(biāo)簽（請?jiān)试S我這么說）。整個(gè)頁面基本都是由最基礎(chǔ)的h1~h6、p、ul、ol、li、form、div標(biāo)簽來實(shí)現(xiàn)的。
說到這里就要講到我在前面提到的“結(jié)構(gòu)清晰、SEO優(yōu)化、頁面體積小、XHTML代碼中基本上都是用戶要看的數(shù)據(jù)”，看看我的這個(gè)例子做到了沒有？
結(jié)構(gòu)清晰--也就是我們常說的，XHTML標(biāo)簽要結(jié)構(gòu)化（語意化）。

相關(guān)文章

  • css九宮格布局的五種方法

    本文主要介紹了css九宮格布局的五種方法，內(nèi)容包括grid布局、flex布局、table布局、float浮動(dòng)定位、inline-block+letter-spacing屬性這五種方法的實(shí)現(xiàn)，感興趣的可以了解下
    2023-09-18

  • CSS實(shí)現(xiàn)元素水平垂直居中的幾種方法

    在Web開發(fā)中，經(jīng)常會(huì)遇到需要將元素水平和垂直居中的情況,今天，將為大家分享幾種CSS方法，讓你的元素輕松居中，讓頁面更美觀吸引人，感興趣的小伙伴可以自己動(dòng)手試一試
    2023-09-08

  • css實(shí)現(xiàn)元素居中的6種方法

    相信大家在面試的時(shí)候也會(huì)經(jīng)常碰到css實(shí)現(xiàn)元素居中的方法，下面我介紹6種方法給大家，歡迎大家評論區(qū)交流
    2023-09-07

  • flex布局中使用flex-wrap實(shí)現(xiàn)換行的項(xiàng)目實(shí)踐

    最近需要做個(gè)換行的布局，本文主要介紹了flex布局中使用flex-wrap實(shí)現(xiàn)換行的項(xiàng)目實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需
    2022-06-16

  • CSS布局之浮動(dòng)(float)和定位(position)屬性的區(qū)別

    今天看到有朋友留言問浮動(dòng)和定位有什么區(qū)別，如何使用？今天找了篇文章，講的比較通俗易懂，供大家參考
    2021-09-23

  • css實(shí)現(xiàn)元素居中的N種方法

    這篇文章主要介紹了css實(shí)現(xiàn)元素居中的N種方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-02-02

  • div水平布局兩邊對齊的三種實(shí)現(xiàn)方法

    這篇文章主要介紹了div水平布局兩邊對齊的三種實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起
    2021-01-21

  • waterfall瀑布流布局+動(dòng)態(tài)渲染的實(shí)現(xiàn)

    這篇文章主要介紹了waterfall瀑布流布局+動(dòng)態(tài)渲染的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起
    2021-01-19

  • 頁面中有間隔的方格布局如何完美實(shí)現(xiàn)方法

    這篇文章主要介紹了頁面中有間隔的方格布局如何完美實(shí)現(xiàn)方法。文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來
    2020-11-27

  • css實(shí)現(xiàn)六種自適應(yīng)兩欄布局方式

    這篇文章主要介紹了css實(shí)現(xiàn)六種自適應(yīng)兩欄布局方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)
    2020-10-28

最新評論