html布局结构_html页面布局怎么设置[通俗易懂]

html布局结构_html页面布局怎么设置[通俗易懂]HTML布局(HTMLLayout)是创建一个网站时需要考虑的情况,合理设计网页中内容的排列方式,让网页看起来更加合理、美观,能产生引人注目的视觉效果

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页面布局怎么设置[通俗易懂]

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

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

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

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

(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页面布局怎么设置[通俗易懂]

顺便说明<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

今天的文章html布局结构_html页面布局怎么设置[通俗易懂]分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/69410.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注