位置: IT常识 - 正文
HTML布局（HTML Layout）简介(HTML布局方式)
编辑：rootadmin推荐整理分享HTML布局（HTML Layout）简介(HTML布局方式)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:HTML布局技术,HTML布局代码,HTML布局模板,HTML布局代码,HTML布局大框套小框,HTML布局设计,HTML布局设计,HTML布局设计,内容如对您有帮助，希望把文章链接给更多的朋友！
HTML布局（HTML Layout）是创建一个网站时需要考虑的情况，合理设计网页中内容的排列方式，让网页看起来更加合理、美观，能产生引人注目的视觉效果。页面布局一般包括：
标题：前端的一部分，用于页面顶部。<header>标签用于在网页中添加标题部分。
导航栏：导航栏与菜单列表相同。它用于使用超链接显示内容信息。
索引/侧边栏：它包含其他信息或广告，并不总是需要添加到页面中。
内容部分：内容部分是显示内容的主要部分。
页脚：页脚部分包含联系信息和与网页相关的其他查询。页脚部分始终放在网页的底部。
为此HTML5 提供了一些布局元素（Layout Elements）用于定义页面不同部分：
标签（tag）
说明
<header>
用于定义整个网页的头部（页眉）信息，一般包含一些介绍性的内容，例如网站名称、logo 或者作者的信息。
<nav>
用于定义网页中的导航栏（导航链接）。
<section>
用于在网页中定义一个单独的部分（节），其中可以包含文本、图像、表格等等。 <section> 代表 HTML 文档中的“节”或“段”，“段”可以理解为一篇文章里按照主题的分段，“节”则可以理解为一个页面里的分组。其主要作用就是对页面的内容进行分块或者对文章的内容进行分段。
<article>
用于定义文章或者其它独立的信息，代表一个页面中自成一体的内容，例如论坛的帖子、博客上的文章、一篇用户的评论等。
<aside>
用于定义网页内容以外的部分，例如网页的侧边栏。
<footer>
用于定义网页的底部（页脚），例如作者、版权等信息。
<details>
用于定义一些详细信息，并且可以根据需要隐藏或显示这些详细信息。
<summary>
用于为<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
上一篇：前端毕业设计|基于Vue+Nodejs实现游戏资讯平台(前端毕业设计项目)
下一篇：远眺格斯韦因斯泰因村和格斯韦因斯泰因城堡 (© Juergen Sack/Getty Images)
