一、文档的结构
一个文档是由五部分组成：文档头（header）、导航栏（navigation bar）、正文（main content）、侧边栏（sidebar）、页脚（footer）。
文档头（header），通常是一个长条或一个图案标识。文档头上的信息主要是从一个网页跳转到另一个页面的信息；
导航栏（navigation bar），网站的主要部分，通常是用菜单、链接、或者表格来表示。文档头和导航栏通过在一个网站的各个页面保持一致。有些网站设计者会将导航栏作为文档头的一部分。
正文（main content），是位于每个网站中间，是该网页最独特的内容。
侧边栏（sidebar）， 一些次要的信息，像链接、引用、广告等，通常是主题内容的附加信息；
页脚（footer），一个贯穿页面底部的长条，通常包含附属细则、版权公告、联络信息等。通常放的是不是极其重要的内容或者也网站相关的次要内容。
HTML为文档的这几个部分提供了专门的标签：header <header>；navigation bar <nav>；main content <main>和各种内容的子部分，使用<article>, <section> ,<div>；sidebar <aside> 通常放在<main>里面；footer <footer>。
<main>是这个页面独特的内容，直接放在<body>里面，不应该将其嵌套在其他元素中；
<article>包含一块有意义的内容；
<section>类似与<article>,更倾向于将一个单独的内容组织在一起；
<aside>不直接和正文内容相关，例如：词汇表、作者传记、相关链接等；
<header>表示对一组内容的介绍。如果其定义在<body>下面就是全局页面的头，如果定义在<article>或<section>里面就是特定部分的头；
<nav>包含页面的主要的导航功能；
<footer>代表一组页面结尾的内容；
二、无意义的标签
<span> 是行内元素，当没有为一个文本想到一个有意义的标签或不想为一个文本指定任何的含义，使用<span>;
<div>是块级标签，当没有为个块级内容想到一个更有意义的标签或不想为一个块内容指定任何的含义，使用<div>;
注意：不要滥用无意义的标签，它们会让文档变得很凌乱。
三、策划一个简单的网页
1. 对于一个网站，有一些元素对大多数页面是共用的，例如：导航栏、页脚。因此，记录下你想让其在多个页面同时出现的内容；
2. 画一个草图，展示你希望看到的网站结构，注意每个块是什么；
3. 接下来，努力想是否有其他要添加到页面的内容（不适合于所有页面），并写下一个大的清单；
4. 将内容项进行分组，让你知道哪些部分应该出现在不同的页面；
5. 试着手画一个粗略的网站地图。用一个气泡表示一个网站，用连线表示工作流。首页很可能出现在中心，并连接着大多数页面。小的站点应该从大的站点导航过来。气泡里面还可以写上什么内容将出现的注释。
扫一扫
1509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
