HTML布局提供了一种以良好的方式, 良好的结构和响应形式来布置网页的方法, 或者我们可以说HTML布局指定了一种可以布置网页的方法。网页布局与HTML文档的可视元素的布局一起使用。
网页布局是创建网站时要记住的最重要部分, 这样我们的网站才能以美观的外观显得专业。你还可以使用基于CSS和JAVASCRIPT的框架来创建用于响应式和动态网站设计的布局。
每个网站都有特定的布局以特定方式显示内容。
以下是用于定义网页不同部分的不同HTML5元素。
- <header>：用于定义文档或节的标题。
- <nav>：用于定义导航链接的容器
- <section>：用于在文档中定义一个部分
- <article>：用于定义独立的自包含文章
- <aside>：用于定义内容以外的内容（如边栏）
- <footer>：用于为文档或节定义页脚
- <details>：用于定义其他详细信息
- <summary>：用于定义<details>元素的标题
注意：HTML布局为网页的每个部分创建了一个单独的空间。这样每个元素都可以按重要顺序排列。
各种布局元素的描述
HTML <标题>
<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 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 <节>
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 <文章>
HTML
标签用于包含独立的文章, 例如大故事, 大文章等。
例：
<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 <页脚>
HTML <footer>元素定义该文档或网页的页脚。它主要包含有关作者, 版权, 其他链接等的信息。
例：
<footer style="background-color: #f0f8ff; width: 100%; text-align: center;">
<h3>Footer Example</h3>
<p>� Copyright 2018-2020. </p>
</footer>立即测试
HTML <详细信息>
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 <摘要>
HTML <summary>元素与网页中的<details>元素一起使用。它用作摘要, 有关<details>元素内容的标题。
例：
<details>
<summary>HTML is acronym for?</summary>
<p style="color: blue; font-size: 20px;">Hypertext Markup Language</p>
</details>立即测试
