结合HTML5标签介绍网页布局方式的规范

2022-05-08 分类：网站建设

“没有规矩不成方圆”这句话选用在任何行业都是可行的，因为我们做任何事情都必须要按照一定的规则和顺序来进行，否则你这样做、他那样做，整个社会都会乱套，所以按规范办事、工作、生活是非常必要的。网站设计网页布局也是如此，千尤不可掉以轻心。
网页如何布局？一直是网站设计网站制作中一个常会谈到的话题，总结起来就是头部、内容、侧栏、底部几个“盒子(Box)”的集合等。看似一个简单的问题在网页设计中会随着网站越来越庞大交错，而变得越来越复杂。所以网站设计师在工作中也要按照正确的规范来进行，否则可以会因为不符合现行的规范，而造成一些逻辑不正确，或是设计元素无法使用的问题。
为什么要规范网页布局的标签使用及命名？
首先，html5提出了标签逻辑化，在标签本身已经规范了内容的使用，无论在页面体验还是搜索引擎亲和方面都是大势所趋。

其次，对于一个网站的代码编写，尤其是结构复杂的大项目难免涉及到多人合作、接替的工作内容，因此规范化的使用标签及命名能更好的让多人“兼容”在一起，减少因工作交接而耽搁的工作进程时间。

结合HTML5标签介绍网页布局方式的规范
规范一，为整个页面添加“容器”标签
这是一种形象的比喻，将整个页面比做一个房间，那么我们需要为这个房间起一个名称标签，以便罩住、囊括里面所有的页面元素。简单的说就是在body内设置一个最外层“div”，有了它我们可以控制整张网页的位置——居左、居右、居中。在名称标签的命名上可以最直观的标写<div id=”page”>。

规范二，用<Header>定义页面的“页眉”部分

在网站设计网站制作中“页眉”部指的就是网页的顶部部分，又称为head或header。这部分内容包括：网站名称、LOGO、主导航、Banner内容。在代码编写时，统的做法是：使用 <div id=”header”> 来定义网页的头文件部分。

HTML5直接提出了用<header>标签来更直观的告诉web开发者与搜索引擎：这里是相对父级的头部/顶部/页眉部分。header标签可以在页面里重复出现，我们可以将作为页面布局的header标签命名为 id=”masthead”或其他。

规范三，用“Content”命名页面的主要内容部分

企业网站中每个页面都有它的主要部分，如文章页里面的文章、列表页的文章标题列表。html5对于这部分内容提供了<article>标签，但在实际工作中，主要内容页面还面包屑、广告位、评论等内容，这时我们可以单独设置一个<div=”content”> 来定义它为页面内容部分。

页面的主要内容依据不同层次的页面，其内容各自不同，如网站首页内部则由多个“部分”组成。每一块内容我们可以使用 <section> 标签定义。而<article> 标签我们用于定义页面内的主题内容。

规范四，用 “Sidebar”命名页面的辅助信息部分

Sidebar是页面布局中称为“侧栏”或“边栏”，它往往是页面的可选部分。Sidebar内放置的是相对于Content的相关内容或辅助内容，如“最新文章”、“热门文章”等。html5的新标签<aside>代表与页面内容相关、有别于主要内容的部分。

规范五，用<Footer>定义页面的页脚部分
了解了header标签之后我们就不难了解footer标签了，它是相对于父级的底部/页脚部分。由于网站底部内容主要是体现版权类信息，所以我们可以为footer标签命名为“colophon”。

分享标题：结合HTML5标签介绍网页布局方式的规范
URL标题：https://www.cdcxhl.com/news29/151129.html

成都网站建设公司_创新互联，为您提供定制开发、用户体验、云服务器、软件开发、微信小程序、企业网站制作

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容