1. HTML 基础

  2. 常用的元素

  3. 工具与规范

相对于非语义化的元素 <div><span> ,使用含有语义的元素能更清晰地描述内容。

这么做可以让辅助程序更容易理解网站的内容,帮助视觉障碍人群更方便地使用网站,也可帮助搜索引擎的爬虫更好地解析网站内容。

一个非语义化的页面:

<div>
    <h1>编程教室</h1>
    <span>
        <a href="#">主页</a>
        <a href="#">课程</a>
        <a href="#">介绍</a>
        <a href="#">登录</a>
    </span>
</div>
<div>
    <p>学习编程是件很开心的事情。</p>
    <div>
        <img src="/coding.png" alt="编程" />
        <p>小猫爱编程</p>
    </div>
</div>
<div>©copyright 2022</div>

$$demo

<div>

<h1>编程教室</h1>

<span>

<a href="#">主页</a> <a href="#">课程</a> <a href="#">介绍</a> <a href="#">登录</a>

</span>

</div>

<div>

<p>学习编程是件很开心的事情。</p>

<div>

<img src="/coding.png" alt="编程" />

<p>小猫爱编程</p>

</div>

</div>

<div>©copyright 2022</div>

$$

一个语义化的页面:

<header>
    <h1>编程教室</h1>
    <nav>
        <a href="#">主页</a>
        <a href="#">课程</a>
        <a href="#">介绍</a>
        <a href="#">登录</a>
    </nav>
</header>
<article>
    <p>学习编程是件很开心的事情。</p>
    <figure>
        <img src="/coding.png" alt="编程" />
        <figcaption>小猫爱编程</figcaption>
    </figure>
</article>
<footer>©copyright 2022</footer>

$$demo

<header>

<h1>编程教室</h1>

<nav>

<a href="#">主页</a> <a href="#">课程</a> <a href="#">介绍</a> <a href="#">登录</a>

</nav>

</header>

<article>

<p>学习编程是件很开心的事情。</p>

<figure>

<img src="/coding.png" alt="编程" />

<figcaption>小猫爱编程</figcaption>

</figure>

</article>

<footer>©copyright 2022</footer>

$$

image

常用的语义化元素

以下是一些常用的语义化元素,大部分元素在 HTML5 标准中定义。

元素 描述
<article> 文章
<aside> 侧边栏
<details> 文档的详细信息
<figcaption> <figure> 的说明文本
<figure> 定义独立的内容,图片、代码、列表等等
<footer> 文档的页脚、底部栏等
<header> 文档的页眉、头部栏等
<main> 文档的主体内容
<mark> 标记文本
<nav> 导航栏
<section> 文档中的区块
<summary> <details> 的标题
<time> 定义时间
<em> 强调文本
<strong> 重要文本
<del> 删除文本
<ins> 插入文本