HTML文档的基本组成部分-研究示例代码

[复制链接]
2946 0
HTML 代码中可根据功能来为区段添加标记。可使用元素来无歧义地表示内容区段。

为了实现语义化标记,HTML 提供了明确这些区段的专用标签,例如:
  • <header>:页眉。
  • <nav>:导航栏。
  • <main>:主内容。主内容中还可以有各种子内容区段,可用<article>、<section> 和 <div> 等元素表示。
  • <aside>:侧边栏,经常嵌套在 <main> 中。
  • <footer>:页脚。

示例代码:
  1. <!doctype html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>俱乐部</title>
  6.     <link
  7.       href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One"
  8.       rel="stylesheet" />
  9.     <link
  10.       href="https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe"
  11.       rel="stylesheet" />
  12.     <link href="style.css" rel="stylesheet" />
  13.   </head>

  14.   <body>
  15.     <header>
  16.       <!-- 本站所有网页的统一主标题 -->
  17.       <h1>聆听天籁之音</h1>
  18.     </header>

  19.     <nav>
  20.       <!-- 本站统一的导航栏 -->
  21.       <ul>
  22.         <li><a href="#">主页</a></li>
  23.         <!-- 共 n 个导航栏项目,省略…… -->
  24.       </ul>

  25.       <form>
  26.         <!-- 搜索栏是站点内导航的一个非线性的方式。 -->
  27.         <input type="search" name="q" placeholder="要搜索的内容" />
  28.         <input type="submit" value="搜索" />
  29.       </form>
  30.     </nav>

  31.     <main>
  32.       <!-- 网页主体内容 -->
  33.       <article>
  34.         <!-- 此处包含一个 article(一篇文章),内容略…… -->
  35.       </article>

  36.       <aside>
  37.         <!-- 侧边栏在主内容右侧 -->
  38.         <h2>相关链接</h2>
  39.         <ul>
  40.           <li><a href="#">这是一个超链接</a></li>
  41.           <!-- 侧边栏有 n 个超链接,略略略…… -->
  42.         </ul>
  43.       </aside>
  44.     </main>

  45.     <footer>
  46.       <!-- 本站所有网页的统一页脚 -->
  47.       <p>&#169; 2050 某某保留所有权利</p>
  48.     </footer>
  49.   </body>
  50. </html>
复制代码

HTML 布局元素细节

理解所有 HTML 区段元素具体含义是很有益处的,这一点将随着个人 web 开发经验的逐渐丰富日趋显现。更多细节请查阅 HTML 元素参考。现在,你只需要理解以下主要元素的意义:
  • <main> 存放每个页面独有的内容。每个页面上只能用一次 <main>,且直接位于 <body> 中。最好不要把它嵌套进其他元素。
  • <article> 包围的内容即一篇文章,与页面其他部分无关(比如一篇博文)。
  • <section> 与 <article> 类似,但 <section> 更适用于组织页面使其按功能(比如迷你地图、一组文章标题和摘要)分块。一般的最佳用法是:以 标题 作为开头;也可以把一篇 <article> 分成若干部分并分别置于不同的 <section> 中,也可以把一个区段 <section> 分成若干部分并分别置于不同的 <article> 中,取决于上下文。
  • <aside> 包含一些间接信息(术语条目、作者简介、相关链接,等等)。
  • <header> 是简介形式的内容。如果它是 <body> 的子元素,那么就是网站的全局页眉。如果它是 <article> 或<section> 的子元素,那么它是这些部分特有的页眉(此 <header> 非彼 标题)。
  • <nav> 包含页面主导航功能。其中不应包含二级链接等内容。
  • <footer> 包含了页面的页脚部分。
搜索

研究报告

更多

社区同学

更多

客服中心

Admin@tjrzzl.com 周一至周日 10:00-22:00 仅收市话费

关注我们

  • 加入QQ群组
  • 关注官方微信
关于我们
关于我们
友情链接
联系我们
帮助中心
运营理念
注册说明
获取硬币
服务说明
社区规范
免责声明
账户安全
关注我们
官方微博
官方空间
官方微信
快速回复 返回顶部 返回列表