HTML:文档和网页的结构

一、文档的结构

  一个文档是由五部分组成:文档头(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. 试着手画一个粗略的网站地图。用一个气泡表示一个网站,用连线表示工作流。首页很可能出现在中心,并连接着大多数页面。小的站点应该从大的站点导航过来。气泡里面还可以写上什么内容将出现的注释。
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值