网站结构

课后整理 2021-2-25

从宏观角度来审视页面结构,整个页面显示为Tab选项卡。从HTML结构层分析,所有HTML代码都包含在<div id="show">包含框中,其下又嵌套多个子框。

另外,根据网站动态布景设计需要,又添加了一个布景蒙版层<div id="mask"></div>。基本结构代码的具体说明如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>快乐家庭日志</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/onload.js"></script>
<script type="text/javascript" src="js/public.js"></script>
<script type="text/javascript" src="js/init.js"></script>
<script type="text/javascript" src="js/writeform.js"></script>
<script type="text/javascript" src="js/writerecord.js"></script>
<script type="text/javascript" src="js/queryrecord.js"></script>
<script type="text/javascript" src="js/showrecord.js"></script>
<script type="text/javascript" src="js/style.js"></script>
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript" src="js/jquery.uitablefilter.js"></script>
<script type="text/javascript" src="js/jquery.elastic.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
<script type="text/javascript">
$(function(){})
</script>
<style type="text/css"></style>
<!--[if lte IE 7]>
<link href="css/ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if gt IE 7]>
<link href="css/ie8.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div id="show">
    <h1 title="快乐家庭日志">家庭日志<span title="点击进入快乐家庭日志">快乐请进</span></h1>
    <div id="showmenubox">
        <ul id="menu">
            <li>家庭支出</li>
            <li>家庭收入</li>
            <li>家庭日志</li>
            <li>快速查账</li>
            <li>自定义查询</li>
            <li>分类管理</li>
        </ul>
    </div>
    <div id="showformbox"></div>
    <div id="showinfobox"></div>
    <div id="showtablebox"></div>
    <div id="showdetailbox"></div>
    <div id="showsubdetailbox"></div>
</div>
<div id="mask"></div>
</body>
</html>

在构建基本结构时,读者应该注意两个问题。

问题一,结构应简洁、明晰。避免任意使用id和class属性,如果借助包含选择器能够实现样式控制的,就不要定义id属性。class属性作为类样式专用属性一般也不要乱用,除非页面中有两个或更多的元素拥有相同的样式,才可以考虑使用类样式来设计,否则就不要使用。

问题二,使用结构标签一定要注意语义性。基本结构一般使用div元素即可,但是如果内容的语义性比较明确,不妨选用对应的元素,如标题、列表、数据表格和段落文本等。