读书频道 > 网站 > 网页设计 > HTML5精粹:利用HTML5开发令人惊奇的Web站点和革命性应用
1.3.4 
12-11-22    奋斗的小年轻
收藏    我要投稿   
Amazon畅销书,被翻译成西班牙语等多种文字,广受好评,被誉为HTML5领域的经典著作。详尽地讲解和分析了HTML5中的所有新特性和核心技术,能为有一定HTML基础的读者迅速提升HTML5开发技能提供绝佳指导。全书包含2...立即去当当网订购

在标准设计中,接下来的部分是主信息栏和边栏,如图1-1所示。如前所述,主信息栏包含文档中最重要的信息,这些信息可能有不同的表现形式,例如,划分为几个块或几列。由于这些列和块使用很普遍,因此HTML5将这些节直接定义为<section>。

代码清单1-12:使用<section>元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="description" content="This is an HTML5 example">
  <meta name="keywords" content="HTML5, CSS3, JavaScript">
  <title>This text is the title of the document</title>
  <link rel="stylesheet" href="mystyles.css">
</head>
<body>
  <header>
    <h1>This is the main title of the website</h1>
  </header>
  <nav>
    <ul>
      <li>home</li>
      <li>photos</li>
      <li>videos</li>
      <li>contact</li>
    </ul>
  </nav>
  <section>

  </section>

</body>
</html>

与导航栏类似,主信息栏是单独的一个节。因此,包含主信息栏的节位于结束标签</nav>之下。

动手实践:对比代码清单1-12的代码和图1-3的布局,理解代码中标签的位置,以及这些标签在可视化网页表现中生成了哪些节。

重要提示:表示文档各节的标签位于代码的列表元素中,它们的位置前后相连,但是在网站中,有一些节是左右并排的(例如,主信息栏和边栏)。在HTML5中,这些元素在屏幕上的表现由CSS控制。这个设计可通过在各个元素上设置CSS样式实现。下一章将介绍CSS。

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:1.3 功能
下一篇:1.5 小结
相关文章
图文推荐
JavaScript网页动画设
1.9 响应式
1.8 登陆页式
1.7 主题式
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站