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

立即测试