html布局设计（HTML布局（HTML Layout）简介）

时间2025-06-15 19:00:45分类IT科技浏览4436

导读：HTML布局（HTML Layout）简介 HTML布局（HTML Layout）是创建一个网站时需要考虑的情况，合理设计网页中内容的排列方式，让网页看起来更加合理、美观，能产生引人注目的视觉效果。页面布局一般包括：...

HTML布局（HTML Layout）简介

HTML布局（HTML Layout）是创建一个网站时需要考虑的情况，合理设计网页中内容的排列方式，让网页看起来更加合理、美观，能产生引人注目的视觉效果。页面布局一般包括：

标题：前端的一部分，用于页面顶部。<header>标签用于在网页中添加标题部分。

导航栏：导航栏与菜单列表相同。它用于使用超链接显示内容信息。

索引/侧边栏：它包含其他信息或广告，并不总是需要添加到页面中。

内容部分：内容部分是显示内容的主要部分。

页脚：页脚部分包含联系信息和与网页相关的其他查询。页脚部分始终放在网页的底部。

为此HTML5 提供了一些布局元素（Layout Elements）用于定义页面不同部分：

标签（tag）

说明

用于定义整个网页的头部（页眉）信息，一般包含一些介绍性的内容，例如网站名称、logo 或者作者的信息。

<nav>

用于定义网页中的导航栏（导航链接）。

用于在网页中定义一个单独的部分（节

），其中可以包含文本、图像、表格等等。

<section> 代表 HTML 文档中的“节 ”或“段 ” ，“段”可以理解为一篇文章里按照主题的分段，“节 ”则可以理解为一个页面里的分组。其主要作用就是对页面的内容进行分块或者对文章的内容进行分段。

用于定义文章或者其它独立的信息，代表一个页面中自成一体的内容，例如论坛的帖子、博客上的文章、一篇用户的评论等。

<aside>

用于定义网页内容以外的部分，例如网页的侧边栏。

用于定义网页的底部（页脚），例如作者、版权等信息。

用于定义一些详细信息，并且可以根据需要隐藏或显示这些详细信息。

用于为<details>标签定义标题（摘要）。

“HTML 标签参考手册 ” 可见：

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

https://www.w3schools.cn/tags/tag_article.asp

不同类型的网站、不同类型的页面往往有不同布局。

网站上网页布局，网站布局设计要点是要在美观与实用性之间取得平衡，没有一成不变的固定格式，不同类型的网站、不同类型的页面往往有不同布局，并且，需要综合考虑背景、导航条、图像、文字等的风格特色。

下面给出一些布局的原则：

网页布局的原则包括：协调、一致、流动、均衡、强调等，另外在进行网页布局设计的时候，需要考虑到网站页面的醒目性、创造性、造型性、可读性、和明快性等因素;

(1)协调：将网站中的每一个构成要素有效的结合或者联系起来，给浏览着一个既美观又实用的网页界面。

(2)一致：网站整个页面的构成部分要保持统一的风格，使其在视觉上整齐、一致。

(3)流动：网页布局的设计能够让浏览者凭着自己的感觉走，并且页面的功能能够根据浏览着的兴趣连接到其感兴趣的内容上。

(4)均衡：网页的布局设计要有序的进行排列，UI设计中网页的设计规范总结并且保持页面的稳定性，适当地加强页面的使用性。

(5)强调：把页面中想要突出展示的内容在不影响整体设计的情况下，用色彩搭配或者留白的方式将其最大限度地展示出来。

下面给出一简单示例源码

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width" /> <title>HTML页面布局测试</title> </head> <body> <div id="container" style="width:500px"> <header> <div id="header" style="background-color:#b5dcb3;"> <h1 style="margin-bottom:0;">网页主标题</h1></div> </header> <nav> <div id="menu" style="background-color:#aaa;height:200px;width:100px;float:left;"> <b>侧边栏</b><br> <a href="#">HTML</a><br> <a href="#">CSS</a><br> <a href="#">JavaScript</a></div> </nav> <section> <div id="content" style="background-color:#eee;height:200px;width:400px;float:left;"> 内容</div> </section> <footer> <div id="footer" style="background-color:#b5dcb3;clear:both;text-align:center;"> 页脚</div> </footer> </div> </body> </html>

保存文件名为：HTML页面布局示例A.html，用浏览器打开，效果如下：

顺便说明<header> 、<nav> 、<section>等标签（标记，tag）不是必须的，也可以去掉：

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width" /> <title>HTML页面布局测试</title> </head> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#b5dcb3;"> <h1 style="margin-bottom:0;">网页主标题</h1></div> <div id="menu" style="background-color:#aaa;height:200px;width:100px;float:left;"> <b>侧边栏</b><br> <a href="#">HTML</a><br> <a href="#">CSS</a><br> <a href="#">JavaScript</a></div> <div id="content" style="background-color:#eee;height:200px;width:400px;float:left;"> 内容</div> <div id="footer" style="background-color:#b5dcb3;clear:both;text-align:center;"> 页脚</div> </div> </body> </html>

保存文件名为：HTML页面布局示例B.html ，用浏览器打开，效果和上面的一样。

进一步了解可见：

网页UI设计规范、布局及提升用户体验设计 - 知乎

html页面的布局技术有哪些-html教程-PHP中文网

https://www.jb51.net/web/18809.html