mkimq

页面结构

语义标签

使用语义化标签使页面结构更加清晰可读。

<article>
    <h1>mkimq</h1>
    <p>在线文档！</p>
</article>

嵌套关系

元素互相嵌套包裹，即元素存在父子关系。

基本结构

标签说明
DOCTYPE声明为HTML文档
htmllang:网页的语言，如en/zh等，非必选项目
head文档说明部分，对搜索引擎提供信息或加载CSS、JS等
title网页标题
keyword向搜索引擎说明你的网页的关键词
description向搜索引擎描述网页内容的摘要信息
body页面主体内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="keyword" content="html,css,js" />
    <meta name="description" content="在线文档" />
    <title>mkimq</title>
</head>
<body>

</body>
</html>

内容标题

标题使用h1 - h6

页眉页脚

<header>
    <nav>
        <ul>
            <li><a href="">规范</a></li>
            <li><a href="">开发</a></li>
        </ul>
    </nav>
</header>

<footer>
    <p>mkimq版权所有 © 2020-2022</p>
</footer>

导航元素

<nav>
    <ul>
        <li><a href="">规范</a></li>
        <li><a href="">开发</a></li>
    </ul>
</nav>

主要区域

<main>
    ...
</main>

内容区域

<article>
    ...
</article>

区块定义

<setion>
    ...
</setion>

附加区域

<aside>
    ...
</aside>

通用容器

div作为通用容器标签使用最多，我们应该更倾向于语义化标签。

贡献者: mankueng