HTML语义化的案例分析| 青训营

49 阅读2分钟

#什么是HTML语义化

HTML语义化是指使用恰当语义的HTML标签,使页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容。 HTML 语义化是指在创建 HTML 页面时,使用正确的标记来正确地描述内容的含义和结构。简单来说,它是一种用正确的标记来表示正确的内容的做法。

HTML 标签

声明必须是 HTML 文档的第一行,位于 标签之前。 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

请始终向 HTML 文档添加 声明,这样浏览器才能获知文档类型。

**

<!DOCTYPE html>
<html>
<head>
<title>标题</title>
</head>
<body>
网页内容...
</body>

</html>

标签

标签定义文档的页眉(介绍信息)。

<header>元素描述了文档的头部区域。不要把它和<h1>-<h6>弄混哦。

<header>元素里,应该包含 介绍性的内容

一般出现在<section><article><body>的开头。

介绍的内容可能包括:Logo,公司名,导航栏,作者信息,等等

** 比如掘金乎网站中的这一部分就应该写在<header>元素里。

image.png

<header>
<h1>这里是主页</h1>
    <strong>主页</strong>
</header>

标签

标签定义文档或节的页脚。

**

<footer>
  <p>这是主页的页脚</p>
</footer>

标签

标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

不同于<article>元素,<section>元素并不需要独立于所属文章/页面。

可以把它形容成 带语义的<div>。用来有意义的划分空间。同时,<section>中应该有标题<h1> - <h6> ,用来表明这个区块所包含的内容。

比如说划分文章中的章节;页面中用来区分内容板块(如:音乐,文章,新闻,图片)

**


<section>
  <h1>定义文档中的节</h1>
  <p>dywdzdj</p>
</section>