位置：首页>> 网络编程>> 网页设计>> WEB前端开发经验总结（8）

WEB前端开发经验总结（8）

作者：海啸　来源：Yaohaixiao博客　发布时间：2009-07-20 18:01:00　

标签：开发,经验,前端,web

让我们再回顾一下行内元素的说明：行内元素在一个文本行内生成元素框，而不会打断这行文本。而我们这里要做的就是在一行内生成两个不同的元素框，而又不打破这行文本（直白的说法：在同一行显示）。好了，现在我们就得到了这部分的代码了：

<div>
<p>
<span><a href=”#1″>Homepage</a> | <a href=”#1″>About Us</a> | <a href=”#1″>Contact Us</a> | <a href=”#1″>Site Map</a> | <a href=”#1″>FAQs</a></span>
<span>Copyright © 2004 FD, All rights reserved.</span>
</p>
</div>

大功告成，现在我们就把这个页面里的全部XHTML代码都获得了，看看我们一步步的分析，对页面数据的的显示做了充分的语意化了。现在就把这个页面完整的代码给出来了，看看它是否也做到了，

尽量少的嵌套

页面里基本只显示用户需要看的数据（我们用CSS直接控制用户需要看的数据的显示的样式

页面对搜索引擎友好（没有CSS支持时，浏览页面时同样清晰，层次分明，十分容易查看数据。），已做了基本的SEO优化

<!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″ />
<meta name=”keywords” content=”Frame Design,a person of artistic mind,temperament,trun,What’s News,Green event,Couer Story,Cooperation,Project Work” />
<meta name=”description” content=”Frame Design,a person of artistic mind,temperament,trun,What’s News,Green event,Couer Story,Cooperation,Project Work” />
<meta name=”author” content=”Frame Design! Scripted by Yaohaixiao” />
<title>Frame Design</title>
</head>
<div><!–Top Sub Navigation–>
    <a href=”#1″>Cart</a> | <a href=”#1″>Account</a> | <a href=”#1″>GuestBook</a> | <a href=”#1″>FAQs</a>
</div>
<div><!–LOGO and Main Navigation–>
    <h1><a href=”#1″ title=”FrameDesign”>Frame Design</a></h1>
    <ul>
        <li><a href=”#1″>ARTICLES</a></li>
        <li><a href=”#1″>TOPICS</a></li>
        <li><a href=”#1″>ABOUT</a></li>
        <li><a href=”#1″>CONTACT</a></li>
        <li><a href=”#1″>FEED</a></li>
    </ul>
</div>
<div><!–Banner–>
    <img src=”img/banner.gif” alt=”Nature is the best physician” />
</div>
<div><!–Main Content–>
<div><!–Left Part–>
    <h2>What’s News a person of artistic temperament[nature]</h2>
    <div><img src=”img/tlt-banner.gif” alt=”What’s News” /></a>
    <ul>
        <li><a href=”#1″>A person of artistic temperament[nature]</a></li>
        <li><a href=”#1″>A person of artistic temperament[nature]</a></li>
        <li><a href=”#1″>A person of artistic temperament[nature]</a></li>
        <li><a href=”#1″>A person of artistic temperament[nature]</a></li>
        <li><a href=”#1″>A person of artistic temperament[nature]</a></li>
    </ul>
    <h2>Green event a person of artistic temperament</h2>
    <ul>
        <li><a href=”#1″>A person of artistic temperament[nature]</a></li>
        <li><a href=”#1″>A person of artistic temperament[nature]</a></li>
        <li><a href=”#1″>A person of artistic temperament[nature]</a></li>
        <li><a href=”#1″>A person of artistic temperament[nature]</a></li>
    </ul>
</div>
<div><!–Center Part–>
    <p>
       <strong>a person of an artistic turnof mind;</strong><br />
       a person of artistic temperament[nature] <br />
       a person of an artistic turn
    </p>
    <div><img src=”img/pic-1.gif” alt=”picture-1″ /></div>
    <p>
       <strong>a person of an artistic turnof mind;</strong><br />
       a person of artistic temperament[nature] <br />
       a person of an artistic turn
    </p>
    <div><img src=”img/pic-2.gif” alt=”picture-2″ /></div>
</div>
<div><!–Right Part–>
    <h2>Couer Story</h2>
    <p>
        a person of an artistic turnof mind; a person of artistic temperament[nature] a person of an artistic turn
    </p>
    <div><img src=”img/Cooperation.gif” alt=”Cooperation” /></div>
    <div><img src=”img/ProjectWORK.gif” alt=”Project WORK” /></div>
    <p>
        a person of an artistic turnof mind;<br />
        a person of artistic temperament[nature]
    </p>
</div>
</div>
<div><!–Footer–>
<p>
   <span><a href=”#1″>Homepage</a> | <a href=”#1″>About Us</a> | <a href=”#1″>Contact Us</a> | <a href=”#1″>Site Map</a> | <a href=”#1″>FAQs</a></span>
   <span>Copyright © 2004  FD, All rights reserved.</span>
</p>
</div>
<body>
</body>
</html>

看看我们得到的代码，是不是[b]结构清晰[/b]啊，页面上都是[b]运用合理的标签显示相应特征的数据（新闻标题、新闻列表、文字说明、图片、导航链接）[/b]了，做到了[b]XHTML标签充分的语意化[/b]。大家也看到了，没有多余的嵌套，做到了[b]尽量少的嵌套[/b]。而且页面里显示的基本是用户需要的数据，所以我们也做到了[b]页面里基本只显示用户需要看的数据[/b]，而[b]我们用CSS直接控制用户需要看的数据的显示的样式[/b]，由于我这里还没有添加任何的CSS样式，所以暂时我们还做不到，不过CSS的运用技巧会在我接下文章里介绍，很快我们做到这个也不是什么问题了。

第一页上一页 5 6 7

9 下一页

投稿

WEB前端开发经验总结（8）

猜你喜欢