html5网页结构布局标签

html5网页结构布局标签

操作方法

  • 01

    对于HTML5来讲,在网页结构上标签定义与使用更加语义化,让搜索引擎以及工程师更加迅速理解当前网页的整个重心所在! 列举常用HTML5结构组合 header nav section article figure figcaption aside footer 一般首页结构,如图所示 当然也可以是下面的结构

  • 02

    其中<section>和<article>最为相似,而且和div标签貌似也有很大相似之处。 但看似相似,并不是真的相似,这些标签是为了布局而生的,自然有它们更精确的语义定位,或者说他们更将强调Html的语义。 DIV 这个标签一直是我们见得最多、用得最多的标签。 它本身无任何语义,用作布局以及样式化标签。 Section 与div相似,但它有更进一步的语义。 section用作一段有专题性的内容,一般在它里面会带有标题。  section典型的应用场景应该是文章的章节、标签对话框中的标签页、或者论文中有编号的部分。 Article article是一个特殊的section标签,它比section具有更明确的语义, 它代表一个独立的、完整的相关内容块。 div、section、article,语义是从无到有,逐渐增强的。 div无任何语义,仅仅用作样式化或者脚本化的标签,对于一段主题性的内容,则就适用section,而假如这段内容可以脱离上下文,作为完整的独立存在的一段内容,则就适用 article。 原则上来说,能使用article的时候,也是可以使用section的,但是实际上,假如使用article更合适,那么就不要使用section。

(0)

相关推荐

  • 传统的网页结构及布局方法

    此处介绍的是传统的网页结构组成部分,以及基本的布局方法. 网页组成部分 01 从上而下,传统的经典网页可以分为基本的页头.主体.页尾三个部分,各个部分又可以细分. 02 网页的页头称为header.标 ...

  • VisualStudio怎么使用body标签定义网页的布局格式?

    Visual Studio中想要定义网页的布局格式,今天我们就来看看使用body标签来定义布局的教程. 1.用Visual Studio打开一个已有动态网页,本例为upper.aspx网页文件. 2. ...

  • 响应式网页设计布局

    响应式网页设计是目前流行的一种WEB设计形式,主要特色是页面布局能根据不同设备(平板电脑.台式电脑.智能手机)下能让内容适应性的展示,从而让用户在不同设备都能够友好的浏览网页内容,响应式有点像自适应的 ...

  • HTML5中的meta标签是什么?

    做响应式网站的时候,我们经常看到什么HTML5黑科技,独特的meta标签独得搜索引擎喜爱,收录快之类的宣传语,不少用户都是云里雾里.其实这个HTML5中的meta标签到底是何方神圣,为什么直接影响网站 ...

  • 如何用DIV+CSS进行网页样式布局

    在html网页编辑中,对于新手来讲,接触最多的就是div+css:那么如何使用div+css就行网页简单布局呢 操作方法 01 一个网页设计时,我们可以将一个页面设置为头部,中间,和底部三部分:  头 ...

  • Dreamweaver怎样控制网页的布局

    DW是第一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页,很多人不知道Dreamweaver怎样控制网页的布局,下面让我们一起 ...

  • HTML网页浮动布局怎么用,div float布局怎么用

    float布局在PC端布局用得算是普遍,现在小编我就分享一下 float浮动布局的,希望可以帮助各位宝宝们,这样宝宝们就知道 网页浮动布局怎么用了. 操作方法 01 如图,先设定一个大容器,里面有两个 ...

  • 网页页面布局中需要注意的是哪八大问题

    网页页面布局中需要注意 操作方法 01 广告与内容的合理搭配 是要对网页正常内容和网络广告二者的合理搭配,一方面不能过多的让广告挤占内容空间,过多的影响访客浏览,另一方面,在访客浏览内容时,能进一步的 ...

  • 网页css布局:div水平居中各种设置形式

    操作方法 01 网页制作Webjx文章简介:在Web标准中的页面布局是使用Div配合CSS来实现的.这其中最常用到的就是使整个页面水平居中的效果,这是在页面布局中基本,也是最应该首先掌握的知识.不过, ...