HTML布局

文
章
目
录

• 各种布局元素的描述
• HTML <header>
• HTML <nav>
• HTML <section>
• HTML <article>
• HTML <aside>
• HTML <footer>
• HTML <details>
• HTML <summary>

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>