HTML 核心总结

ThisGravity
113 阅读3分钟

HTML5 元素周期表

image.png

地址：HTML5元素周期表 (xuanfengge.com)

为什么需要语义化

  1. 为了搜索引擎优化（SEO）

    所谓的SEO，就是让搜索引擎更好的理解网页

    搜索引擎：百度、搜搜、Bing、Google

    每隔一段时间，搜索引擎就会从整个互联网中，抓取网页源代码

    页面语义化写得好，可以让搜索引擎更好的理解网页，从而提高排名

  2. 为了让浏览器更好的理解网页

    如网页的阅读模式、语音模式、屏幕阅读器等（主要针对视障人群）

空白折叠问题

在html源代码中出现的多个连续空白字符（空格、回车、制表符），在页面显示时，会被折叠为一个空格。如：

<body>
    空白       折叠
</body>

image.png

但是在<pre>元素中的内容不会出现空白折叠

在<pre>元素内部出现的内容，会按照源代码的格式显示到页面上。如：

<body>
   <pre>空白                   折叠</pre>
</body>

image.png

因此，<pre>元素通常用于在网页中显示一些代码段，如：

<body>
    <pre>
        var a = 1;
        function haha() {
            console.log(a);
        }
        haha();
    </pre>
</body>

image.png

那<pre>元素为什么不会空白折叠？

本质上是因为浏览器默认样式：white-space: pre;

image.png

<pre>元素主要用于消除空白折叠，其本身并没有什么语义

加之，我们常用<pre>显示代码片段。因此，为了让浏览器知道我们<pre>中写的是代码，我们通常会在外部套一层<code>，如下：

<body>
<code>
   <pre>
   	var a = 1;
   	function b() {
   		console.log(a);
   	}
   	b();
   </pre>
</code>
</body>

因为<code>元素的语义是代码片段，所以浏览器一看到<code>元素，就知道这里写的是代码。

图片元素

<img src="" alt="">

  • 和<a>联用
    当需要点击图片跳转到某个页面时，可以在<img>外套一层<a>

    <a href="https://zh.wikipedia.org/wiki/%E5%A4%AA%E9%98%B3%E7%B3%BB" target="_blank">
    <img src="https://www.108hei.com/wp-content/uploads/2022/09/2022090604455362.jpg">
</a>

  • 和<map>联用，area
    当需要点击图片中的不同区域跳转到不同页面时，可以使用<map> <area>划分区域

    <a href="https://zh.wikipedia.org/wiki/%E5%A4%AA%E9%98%B3%E7%B3%BB" target="_blank">
    <img usemap="#sun" src="https://www.108hei.com/wp-content/uploads/2022/09/2022090604455362.jpg">
</a>

  <map name="sun">
      <area shape="circle" coords="246,255,33" href="https://zh.wikipedia.org/wiki/%E5%9C%B0%E7%90%83" alt="地球">
  </map>

  • 和<figure>联用，figcaption

    详见：MSD-figcaption

    <!-- 有标题的图像 -->
<figure>
  <img src="favicon-192x192.png" alt="The beautiful MDN logo.">
  <figcaption>MDN Logo</figcaption>
</figure>

    上面的操作，说白了就是，浏览器不认识<img>图片，通过<figcaption>加上图片标题后，加强了语义化，让浏览器知道这张照片代表的是什么东西。

语义化容器元素

  • <header></header>

    通常用于表示页头，也可以用于表示文章的头部

  • <footer></footer>

    通常用于表示页脚，也可以用于表示文章的尾部

  • <article></article>

    通常用于表示整篇文章

  • <section></section>

    通常用于表示文章的章节

  • <aside></aside>

    通常用于表示侧边栏

  • <nav></nav>

    通常用于表示导航栏菜单

元素包含关系

以前：

  • 块级元素独占一行，行级元素不换行
  • 块级元素可以包含行级元素，反之不行
  • a元素除外，a元素是行级元素，但是可以包含块级元素

现在：

H5 废弃了 行级元素和块级元素的概念

元素的包含关系由元素的内容类别决定

例如：

查看 h1 元素中是否可以包含 p 元素（从语义化逻辑来看：标题中不可能包含段落，所以 h1 不能包含 p）

MDN：搜索 h1 元素，然后点击查看 [允许内容]

h元素只能包含[短语内容]，p元素不属于短语内容，因此 h 元素 不应该包含 p 元素

总结：

  1. 容器元素（div、article...）中可以包含任何元素
  2. a 元素中几乎可以包含任何元素
  3. 某些元素有固定的子元素（ul > li，ol > li，dl > dt + dd.....）
  4. 标题元素（h1~h6）和段落元素（p）不能互相嵌套，并且不能包含容器元素
avatar
文章
阅读
粉丝