用于为标签定义标题(摘要)。
“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,用浏览器打开,效果如下:
顺便说明
<!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