HTML 教程

HTML 属性

HTML 标签列表

HTML API

HTML 案例

HTML 颜色

HTML5 进阶

HTML 其它

HTML 面试问题

HTML 布局

HTML 布局提供了一种以礼貌、结构良好和响应式形式排列网页的方法，或者我们可以说 HTML 布局指定了一种排列网页的方式。网页布局与 HTML 文档的可视元素的排列一起工作。

网页布局是创建网站时要牢记的最重要的部分，这样我们的网站才能显得专业且美观。您还可以使用基于 CSS 和 JAVASCRIPT 的框架为响应式和动态网站设计创建布局。

HTML 布局

每个网站都有特定的布局，以特定方式显示内容。

以下是用于定义网页不同部分的不同 HTML5 元素。

  • <header>：用于定义文档或节的标题。

  • <nav>：用于定义导航链接的容器

  • <section>：用于定义文档中的一个section

  • <article>：用于定义独立的自包含文章

  • <aside>：用于定义内容之外的内容（如侧边栏）

  • <footer>：用于定义文档或节的页脚

  • <details>：用于定义附加细节

  • <summary>：用于定义 <details> 元素的标题

注意：HTML 布局为网页的每个部分创建一个单独的空间。这样每个元素都可以按重要顺序排列。

各种布局元素的描述

HTML <标题>

<header> 元素用于创建网页的标题部分。标题包含介绍性内容、标题元素、网页的徽标或图标以及作者信息。

例子：

<!DOCTYPE html>
<html>
  <head>
	<title>First Webpage</title>
  </head>
 <body>
    <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>
 </body>
</html>

HTML <导航>

<nav> 元素是导航链接主块的容器。它可以包含同一页面或其他页面的链接。

例子：

<!DOCTYPE html>
<html>
 <head>
	<style>
		li{  display: inline-block;
			padding: 10px}
	</style>
  </head>
  <body>
	<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>
 </body>
</html>

HTML <部分>

HTML <section> 元素代表网页的一个单独部分，其中包含组合在一起的相关元素。它可以包含：文本、图像、表格、视频等。

例子：

<!DOCTYPE html>
<html>
<head>
	<title>Page Section</title>
 </head>
  <body>
   <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>
  </body>
</html>

HTML <article>

HTML


标签用于包含独立的文章，例如大故事、大文章等。


例子：


<!DOCTYPE html>
<html>
<head>
	<title>Article Example</title>
</head>
<body>
<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>
</body>
</html>

HTML <aside>

HTML <aside> 定义与主要内容相关的旁白内容。<aside> 内容必须与主要内容相关。它可以作为网页主要内容的侧边栏。

例子：

<!DOCTYPE html>
<html>
<head>
	<title>Aside Example</title>
</head>
<body>
  <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>
</body>
</html>

HTML <footer>

HTML <footer> 元素定义该文档或网页的页脚。它主要包含有关作者、版权、其他链接等的信息。

例子：

<!DOCTYPE html>
<html>
 <head>
	<title>Footer Section</title>
 </head>
  <body>
  <footer style="background-color:#f0f8ff; width: 100%; text-align: center;">
	<h3>Footer Example</h3>
	<p>© Copyright 2018-2020. </p>
   </footer>
  </body>
</html>

HTML <details>

HTML <details> 元素用于添加有关网页的额外详细信息，使用可以根据需要隐藏或显示详细信息。

例子：

<!DOCTYPE html>
<html>
<head>
	<title>Deatils element</title>
</head>
<body>
 <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>
</body>
</html>

HTML <summary>

HTML <summary> 元素与网页中的 <details> 元素一起使用。它用作摘要，关于 <details> 元素内容的标题。

例子：

<!DOCTYPE html>
<html>
<head>
	<title>Summary Example</title>
</head>
<body>
 <details>
 	<summary>HTML is acronym for?</summary>
 	<p style="color: blue; font-size: 20px;">Hypertext Markup Language</p>
 </details>
</body>
</html>


上一主题 HTML 头 下一主题 HTML 布局技术
  • 使用社交账号登录,本站支持
全部评论(0)

便捷工具