文
章
目
录
章
目
录
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="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
</nav>
HTML <section>
HTML <section>元素代表网页的一个独立部分，其中包含相关元素分组在一起。它可以包含文本、图像、表格、视频等。
示例：
<section style="background-color:#ff7f50; width: 100%; border: 1px solid black;">
<h2>Introduction to HTML</h2>
<p>HTML is a markup language which is used for creating attractive web pages with the help of styling, and which looks in a nice format on a web browser..</p>
</section>
HTML <article>
HTML <article>标签用于包含自包含文章，如大型故事或大型文章等。
示例：
<article style="width: 100%; border:2px solid black; background-color: #fff0f5;">
<h2>History of Computer</h2>
<p>Write your content here for the history of computer</p>
</article>
HTML <aside>
HTML <aside>定义与主要内容相关的附属内容。 <aside>内容必须与主要内容相关。它可以作为网页的主要内容的侧边栏。
示例：
<aside style="background-color:#e6e6fa">
<h2>Sidebar information</h2>
<p>This conatins information which will represent like a side bar for a webpage</p>
</aside>
HTML <footer>
HTML <footer>元素定义了文档或网页的页脚。它主要包含有关作者、版权、其他链接等信息。
示例：
<footer style="background-color: #f0f8ff; width: 100%; text-align: center;">
<h3>Footer Example</h3>
<p>© Copyright 2018-2020. </p>
</footer>
HTML <details>
HTML <details>元素用于添加有关网页的额外细节，并根据需要隐藏或显示细节。
示例：
<details style="background-color: #f5deb3">
<summary>This is visible section: click to show other details</summary>
<p>This section only shows if user want to see it. </p>
</details>
HTML <summary>
HTML <summary>元素与网页中的<details>元素一起使用。它用作有关<details>元素内容的摘要和标题。
示例：
<details>
<summary>HTML is acronym for?</summary>
<p style="color: blue; font-size: 20px;">Hypertext Markup Language</p>
</details> 
