HTML布局(HTML Layout)简介

这篇具有很好参考价值的文章主要介绍了HTML布局(HTML Layout)简介。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

HTML布局(HTML Layout)简介

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

HTML布局(HTML Layout)简介

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

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

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

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

(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,用浏览器打开,效果如下:

HTML布局(HTML Layout)简介

顺便说明<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文章来源地址https://www.toymoban.com/news/detail-475865.html

到了这里,关于HTML布局(HTML Layout)简介的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【CSS 20】website layout 网站布局 页眉 导航栏 列布局 不相等栏 页脚

    website layout 网站布局 header 页眉 页眉(header)通常位于网站顶部(或顶部导航菜单的正下方) 通常包含徽标(logo)或网站名称 navbar 导航栏 导航栏包含链接列表,以帮助访问者浏览您的网站 内容 使用哪种布局通常取决于您的目标用户 最常见的布局是以下布局之一(或将它

    2024年02月13日
    浏览(83)
  • Flutter 笔记 | Flutter 核心原理(三)布局(Layout )过程

    Layout(布局)过程主要是确定每一个组件的布局信息(大小和位置),Flutter 的布局过程如下: 父节点向子节点传递约束(constraints)信息,限制子节点的最大和最小宽高。 子节点根据约束信息确定自己的大小(size)。 父节点根据特定布局规则(不同布局组件会有不同的布

    2024年02月09日
    浏览(88)
  • 设置layout布局嵌套路由格式正确但是看不见页面问题

    一定确保格式正确.试试重置component路径 children: [

    2024年02月13日
    浏览(55)
  • 【ArcGIS Pro二次开发】(50):布局(Layout)的基本操作

    ArcGIS Pro SDK中的布局(Layout)是用于创建和编辑打印布局的一组功能。 Layout是打印布局的容器,它可以包含多个元素,例如地图框、文本框、图例、比例尺等。 Layout中包含多种元素,比较重要的有:地图(MapFrameElement)、文本(TextElement)、图片(PictureElement)、图例(LegendElement)等。

    2024年02月16日
    浏览(48)
  • Solidity内存布局介绍 Layout in Memory and Storage

    Solidity reserves four 32-byte slots, with specific byte ranges (inclusive of endpoints) being used as follows: 0x00 - 0x3f (64 bytes): scratch space(暂存空间) for hashing methods  Hash方法的暂存空间. 0x40 - 0x5f (32 bytes): currently allocated memory size (aka. free memory pointer) 0x60 - 0x7f (32 bytes): zero slot Solidity保留了四个32字节的

    2024年02月16日
    浏览(45)
  • Vue Grid Layout - 适用Vue.js的栅格布局系统(项目实例)

    gitee:grid-project-gitee B站视频:Vue-Grid-Layout 创建vue项目 vue create vite-layout // 使用 vue/cli 创建 vue 项目 下载依赖 npm i vue-grid-layout less less-loader@4 --s // 下载 vue-grid-layout依赖、less预处理器(两者保持版本相兼容即可) 项目样式重置 搭建 vue-grid-layout的环境 文件结构(暂定) - src |

    2024年02月09日
    浏览(35)
  • Layout工程师们--Allegro X AI实现pcb自动布局布线

    Cadence 推出 Allegro X AI,旨在加速 PCB 设计流程,可将周转时间缩短 10 倍以上 楷登电子(美国 Cadence 公司,NASDAQ:CDNS)今日宣布推出 Cadence® Allegro® X AI technology,这是 Cadence 新一代系统设计技术,在性能和自动化方面实现了革命性的提升。这款 AI 新产品依托于 Allegro X Design

    2024年02月01日
    浏览(67)
  • 【Python_PySide2学习笔记(六)】在布局Layout下调整控件大小

    为了实现控件随着窗体自适应大小,一般都会加入Layout布局,如QHBoxLayout(),QVBoxLayout()等,加入布局后,无法通过设置控件的长宽来改变控件的大小,通过试验发现可以通过设置控件的sizePolicy属性来实现想要的效果。 ** 上图是在布局中加入QPlainTextEdit()的控件后得到的效果,

    2023年04月15日
    浏览(60)
  • 【完整代码】用HTML/CSS制作一个美观的个人简介网页

    用HTML/CSS制作一个美观的个人简介网页——学习周记1 HELLO!大家好,由于《用HTML/CSS制作一个美观的个人简介网页》这篇笔记有幸被很多伙伴关注,于是特意去找了之前写的完整代码,久等啦~ 这个页面是在自己刚接触前端代码时使用HBuilder所作,以下是建立的项目及文件↓↓

    2024年01月25日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包