当前位置:首页 > 建站 > DISCUZ > 结合HTML5标签介绍网页布局方式的规范

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

作者:发布时间:2017-05-16 09:00 我要评论

“没有规矩不成方圆”这句话选用在任何行业都是可行的,因为我们做任何事情都必须要按照一定的规则和顺序来进行,否则你这样做、他那样做,整个社会都会乱套'...

“没有规矩不成方圆”这句话选用在任何行业都是可行的,因为我们做任何事情都必须要按照一定的规则和顺序来进行,否则你这样做、他那样做,整个社会都会乱套,所以按规范办事、工作、生活是非常必要的。网站设计网页布局也是如此,千尤不可掉以轻心。(seo技术

网页如何布局?一直是网站设计网站制作中一个常会谈到的话题,总结起来就是头部、内容、侧栏、底部几个“盒子(Box)”的集合等。看似一个简单的问题在网页设计中会随着网站越来越庞大交错,而变得越来越复杂。所以网站设计师在工作中也要按照正确的规范来进行,否则可以会因为不符合现行的规范,而造成一些逻辑不正确,或是设计元素无法使用的问题。

为什么要规范网页布局的标签使用及命名?

首先,html5提出了标签逻辑化,在标签本身已经规范了内容的使用,无论在页面体验还是搜索引擎亲和方面都是大势所趋。

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

  

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

 

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

规范一,为整个页面添加“容器”标签

这是一种形象的比喻,将整个页面比做一个房间,那么我们需要为这个房间起一个名称标签,以便罩住、囊括里面所有的页面元素。简单的说就是在body内设置一个最外层“div”,有了它我们可以控制整张网页的位置——居左、居右、居中。在名称标签的命名上可以最直观的标写

 

规范二,用

定义页面的“页眉”部分

 

在网站设计网站制作中“页眉”部指的就是网页的顶部部分,又称为head或header。这部分内容包括:网站名称、LOGO、主导航、Banner内容。在代码编写时,统的做法是:使用

来定义网页的头文件部分。

 

HTML5直接提出了用

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

 

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

企业网站中每个页面都有它的主要部分,如文章页里面的文章、列表页的文章标题列表。html5对于这部分内容提供了

标签,但在实际工作中,主要内容页面还面包屑、广告位、评论等内容,这时我们可以单独设置一个


1.四爷推网站上的部分文章来源于互联网,已知作者已经表明。 2.本站原创文章转载请注明来源“四爷推” 3.作者投稿可能会经四爷推编辑修改或补充。