HTML教程-HTML网页布局

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 <旁白>

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>