HTML布局
HTML 布局作用
HTML布局提供了一种以操作简便，结构合理，响应式的形式排列网页的方法，或者我们可以说HTML布局在哪些网页可以安排。网页布局与HTML文档的可视元素的布局一起使用。
网页布局是创建网站时要牢记的最重要部分，这样我们的网站才能以美观的外观显得专业。您还可以使用基于CSS和JAVASCRIPT的框架来创建用于响应式和动态网站设计的布局。
每个网站都有特定的布局，以特定的方式显示内容。
以下是用于定义网页不同部分的不同HTML5元素。
<header>：用于定义文档或节的标题。
<nav>：用于定义导航链接的容器
<section>：用于在文档中定义一个部分
<article>：用于定义独立的独立文章
<aside>：除了内容（如边栏）之外，还用于定义内容
<footer>：用于定义文档或节的页脚
<details>：用于定义其他详细信息
<summary>：用于定义<details>元素的标题
注意：注意：HTML布局为网页的每个部分创建了一个单独的空间。这样每个元素都可以按重要顺序排列。
各种布局元素的说明
HTML <header>
<header>元素用于创建标题网页部分。标头包含介绍性内容，标题元素，网页徽标或图标以及作者身份信息。
示例：
<header style="background-color: #303030; height: 80px; width: 100%">
h1 style="font-size: 30px; color: white;text-align: center; padding-top: 15px;">Welcome to MyFirstWebpage</h1>
</header>
HTML <nav>
<nav>元素是导航链接主要块的容器。它可以包含同一页面或其他页面的链接。
示例：
<nav style="background-color:#bcdeef;">
<h1 style="text-align: center;">Navgation Links</h1>
<ul>
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
<li><a href="#">链接3</a></li>
<li><a href="#">链接4</a></li>
</ul>
</nav>
HTML <section>
HTML <section>元素代表网页的单独部分，其中包含分组在一起的相关元素。它可以包含：文本，图像，表格，视频等。
示例：
<section style="background-color:#ff7f50; width: 100%; border: 1px solid black;">
<h2> HTML简介</h2>
<p>HTML是用来标记语言 用于 与造型的帮助下，它看起来在Web浏览器中一个很好的格式创建具有吸引力的网页.. </p>
</section>
HTML <article>
HTML <article>标签用于包含独立的文章，例如大故事，大文章等。
示例：
<article style="width: 100%; border:2px solid black; background-color: #fff0f5;">
<h2>计算机历史</h2>
<p>在此处为 计算机的历史记录内容</p>
</article>
HTML <aside>
HTML <aside>定义与主要内容相关的其他内容。 <aside>内容必须与主要内容相关。它可以用作网页主要内容的侧边栏。
示例：
<aside style="background-color:#e6e6fa">
<h2>主要内容相关的内容</h2>
<p>主要内容相关的内容...</p>
</aside>
HTML <footer>
HTML <footer>元素定义该文档或网页的页脚。它主要包含有关作者，版权，其他链接等的信息。
示例：
<footer style="background-color: #f0f8ff; width: 100%; text-align: center;">
<h3>网页的页脚</h3>
<p>© Copyright 2018-2020. </p>
</footer>
HTML <details>
HTML <details>元素用于添加有关网页的额外详细信息，并可以根据需要隐藏或显示详细信息。
示例：
<details style="background-color:#f5deb3">
<summary>这是可见的部分：单击以显示其他详细信息</summary>
<p>这部分内容如果用户想看到它，点击展开就可以。</p>
</details>
HTML <summary>
HTML <summary>元素与网页中的<details>元素一起使用。它用作摘要，有关<details>元素内容的标题。
示例：
<details>
<summary>HTML是什么意思？</summary>
<p style="color: blue; font-size: 20px;">超文本标记语言</p>
</details>
