• HTML布局（HTML Layout）简介

    HTML布局（HTML Layout）简介

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

    标题：前端的一部分，用于页面顶部。

    标签用于在网页中添加标题部分。

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

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

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

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

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

    标签（tag）

    说明

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

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

    用于在网页中定义一个单独的部分（节），其中可以包含文本、图像、表格等等。

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

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

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

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

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

    用于为

    标签定义标题（摘要）。

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

    下面给出一简单示例源码

    1. html>
    2. <html  lang="zh">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width" /> 
    6.   <title>HTML页面布局测试title>
    7. head>
    8. <body>
    9.   <div id="container" style="width:500px">
    10.     <header>
    11.       <div id="header" style="background-color:#b5dcb3;">
    12.       <h1 style="margin-bottom:0;">网页主标题h1>div>
    13.     header>
    14.     <nav>
    15.       <div id="menu" style="background-color:#aaa;height:200px;width:100px;float:left;">
    16.       <b>侧边栏b><br>
    17.       <a href="#">HTMLa><br>
    18.       <a href="#">CSSa><br>
    19.       <a href="#">JavaScripta>div>
    20.     nav>
    21.     <section>
    22.       <div id="content" style="background-color:#eee;height:200px;width:400px;float:left;">
    23.       内容div>
    24.     section>
    25.     <footer>
    26.       <div id="footer" style="background-color:#b5dcb3;clear:both;text-align:center;">
    27.       页脚div>
    28.     footer>
    29.   div>
    30. body>
    31. html>

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

    顺便说明

    、
  • 相关阅读:
    【论文笔记】RS-Mamba for Large Remote Sensing Image Dense Prediction（附Code）
    高薪程序员&面试题精讲系列152之电商专题(中)-SPU是怎么回事？SPU如何设计？SKU又是什么呢？SN你知道吗？
    01背包问题
    今天是 Java 诞生日，Java 27 岁了~
    【mq】从零开始实现 mq-11-消费者消息回执添加分组信息 pull message ack groupName
    【信创】 JED on 鲲鹏(ARM) 调优步骤与成果 | 京东云技术团队
    STM32F4-ADC-常规通道-转换模式配置-总结
    网络探索利器：深入理解 nc、ncat 和 telnet 的作用和用法
    软考高项-挣值管理-TCPI
    MyBatis-1-学习记录环境搭建和入门案例
  • 原文地址：https://blog.csdn.net/cnds123/article/details/126901017