页面与结构

1. 基本结构

下面是 HTML 文档的基本组成部分

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

标签	说明
`DOCTYPE`	声明为HTML文档
`html`	lang:网页的语言，如 en/zh 等，非必选项目
`head`	文档说明部分，对搜索引擎提供信息或加载 CSS、JS 等
`title`	网页标题
`keyword`	向搜索引擎说明你的网页的关键词
`description`	向搜索引擎描述网页内容的摘要信息
`body`	页面主体内容

2. 语义标签

HTML标签都有具体语义，非然技术上可以使用div标签表示大部分内容，但选择清晰的语义标签更容易让人看明白。

标签	语义描述
`header`	`header`标签用于定义文档的页眉
`footer`	`footer`标签定义文档或节的页脚，页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等
`nav`	使用`nav`设置导航链接
`main`	`main`标签表示页面主要区域，一个页面中`main`元素最好只出现一次
`article`	使用`article`标签规定独立的自包含内容区域。不要被单词的表面意义所局限，`article`标签表示一个独立的内容容器
`section`	使用`section`定义一个区块，一般是一组相似内容的排列组合
`aside`	使用`aside`用于设置与主要区域无关的内容，比如侧面栏的广告等
`h1`~`h6`	标题使用`h1`~`h6`来定义，用于突出显示文档内容, 从`h1`到`h6`对搜索引擎来说权重会越来越小, 页面中最好只有一个 h1 标签

TIP

div通用容器标签是较早出现的，也是被大多数程序员使用最多的容器，不过我们应该更倾向于使用有语义的标签如article section aside nav 等；有些区域这些有语义的容器不好表达，这时可以采用div容器。

页面与结构 ​

1. 基本结构 ​

2. 语义标签 ​

页面与结构

1. 基本结构

2. 语义标签