HTML布局 HTML布局|HTML5

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 toMyFirstWebpage< /h1> < /header>

【HTML布局】立即测试
HTML < 导航>
< nav> 元素是导航链接主要块的容器。它可以包含同一页面或其他页面的链接。
例：

< nav style="background-color:#bcdeef; "> < h1 style="text-align: center; "> Navgation Links< /h1> < ul> < li> < a href="http://www.srcmini.com/#"> link1< /a> < /li> < li> < a href="http://www.srcmini.com/#"> link2< /a> < /li> < li> < a href="http://www.srcmini.com/#"> link3< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 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> 元素内容的标题。
例：