HTML语言基础（九）

37、图标

图标，favicon.ico，为缩略的网站标志，用于显示网站的logo,它显示位于浏览器的地址栏或者标签上,如图红框的位置。

Favicon.ico的安装

Favicon.ico是图标特有的一种图片文件，可由基本的格式（JPG,PNG等……）转化而来，图标生成网址：https://myico.cn/
生成favicon.ico图像文件后，将favicon.ico图像放入Images文件夹中，再将代码写在html的<head>和</head>标签之间：
```
<head>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head> 
```

38、文档细节 `<details>` `<summary>`

<summary> 标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。

例：

<details>
  <summary>课程表</summary>
  <p>这是这个学期的一个课程表</p>
</details>

鼠标点击"课程表"，将会弹出详细信息：

这是这个学期的一个课程表

</details>

39、HTML5布局元素

<header> 定义文档或节的页眉
<nav> 定义导航链接的容器。
<section> 定义文档中的节
<article> 定义独立的自包含文章
<aside> 定义内容之外的内容（比如侧栏）
<details> 定义额外的细节
<summary> 定义 details 元素的标题
<footer> 定义文档或节的页脚
<hgroup> 定义有关文档中的 section 的信息。<hgroup> 标签用于对网页或区段（section）的标题进行组合。

用这些布局元素，可以组成一个典型的HTML模板（未加CSS）：

<!DOCTYPE html>
<title>HTML</title>

<body>

  <header>
    <h1>The fruit channel reports</h1>
  </header>

  <nav>
    <ul>
      <li>News</li>
      <li>Sports</li>
    </ul>
  </nav>

  <section>
    <h2>Self-reported time</h2>

    <article>
      <h2>A self - description of an apple</h2>
      <p>I am an apple.</p>
    </article>

    <article>
      <h2>A self - description of a banana</h2>
      <p>Hey! I'm a banana.</p>
    </article>

  </section>

  <footer>
    <p>© 2020 The fruit channel reports. </p>
  </footer>

</body>
</html>

代码中body标签内由四大模块组成：header、nav、section和footer。
header（页眉）标签内写入的是页面的标题。
nav（导航链接）写入一个无序列表[ul、li]，列表项目分别为News、sports。
section（文档中的节）可以理解为页面的主体部分，设一个主体的标题，分别放入两个<article>标签，在<article>内可以自由写入内容。
footer（页脚）一般写时间版权等。

加上css美化的效果后：
图片说明
css代码（将在后续博客中讲解css）：

<style>
    body {
        font-family:Verdana,sans-serif;font-size:0.8em;
    }
    header,footer,section,article {
        border:1px solid grey;
        margin:5px;margin-bottom:15px;padding:8px;
        background-color:white;
    }
    header,footer {
        color:white;background-color:#444;margin-bottom:5px;
    }
    section {
        background-color:#ddd;
    }
    nav ul  {
        margin:0;padding:0;
    }
    nav ul li {
        display:inline; margin:5px;
    }
</style>