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

坤FL · 2018-8-15 09:35

HTML 代码中可根据功能来为区段添加标记。可使用元素来无歧义地表示内容区段。

为了实现语义化标记，HTML 提供了明确这些区段的专用标签，例如：

示例代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>俱乐部</title>
<link
href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One"
rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe"
rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<header>
<h1>聆听天籁之音</h1>
</header>
<nav>
<ul>
<li><a href="#">主页</a></li>
</ul>
<form>
<input type="search" name="q" placeholder="要搜索的内容" />
<input type="submit" value="搜索" />
</form>
</nav>
<main>
<article>
</article>
<aside>
<h2>相关链接</h2>
<ul>
<li><a href="#">这是一个超链接</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2050 某某保留所有权利</p>
</footer>
</body>
</html>

复制代码

HTML 布局元素细节

理解所有 HTML 区段元素具体含义是很有益处的，这一点将随着个人 web 开发经验的逐渐丰富日趋显现。更多细节请查阅 HTML 元素参考。现在，你只需要理解以下主要元素的意义：

<main> 存放每个页面独有的内容。每个页面上只能用一次 <main>，且直接位于 <body> 中。最好不要把它嵌套进其他元素。
<article> 包围的内容即一篇文章，与页面其他部分无关（比如一篇博文）。
<section> 与 <article> 类似，但 <section> 更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。一般的最佳用法是：以标题作为开头；也可以把一篇 <article> 分成若干部分并分别置于不同的 <section> 中，也可以把一个区段 <section> 分成若干部分并分别置于不同的 <article> 中，取决于上下文。
<aside> 包含一些间接信息（术语条目、作者简介、相关链接，等等）。
<header> 是简介形式的内容。如果它是 <body> 的子元素，那么就是网站的全局页眉。如果它是 <article> 或<section> 的子元素，那么它是这些部分特有的页眉（此 <header> 非彼标题）。
<nav> 包含页面主导航功能。其中不应包含二级链接等内容。
<footer> 包含了页面的页脚部分。

相关帖子