h5中的结构元素介绍

时间: 2019-10-02阅读: 574标签: 元素

结构元素不具有任何样式,只是使页面元素的的语义更加明确。


header元素

header元素是一种具有引导和导航作用的的结构元素,该元素可以包含所有通常放在页面头部的内容。header元素通常用来放置整个页面或页面内的一个内容区块的标题,也可以包含网站Logo图片、搜索表单或者其他相关内容。

<header>
    <h1>网页主题</h1>
</header>

一个网页中可以使用多个header元素,也可以为每一个内容块添加header元素。


nav元素

nav元素用于定义导航链接,是html5新增的元素。该元素可以将具有导航性质的链接归纳在一个区域中,使页面元素的语义更加明确。

nav元素通常可以用于以下场合中:

  • 传统导航条
  • 侧边栏导航
  • 页内导航
  • 翻页操作
<nav>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">公司概况</a></li>
        <li><a href="#">产品展示</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</nav>

article元素

article元素代表文档、页面或者应用程序中与上下文不相关的独立部分,该元素经常被用于定义一篇日志、一条新闻或用户评论等。article元素通常使用多个section元素进行划分,一个页面中article元素可以出现多次。

<article>
    <header>
        <h1>第一章</h1>

    </header>
    <section>
        <header>
            <h2>第1节</h2>
        </header>
    </section>
    <section>
        <header>
            <h2>第2节</h2>
        </header>
    </section>
</article>

aside元素

aside元素用来定义当前页面或者文章的复数信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分。

aside元素主要的用法分为两种:

  • 被包含在article元素内作为主要内容的附属信息。
  • 在article元素之外使用,作为页面或者站点全局的附属信息部分。最常用的形式是侧边栏,其中的内容可以使友情链接、广告单元等。
`<article>
    <header>
        <h1>标题</h1>
    </header>
    <section>文章主要内容</section>
    <aside>其他相关内容</aside>
</article>
<aside>右侧菜单</aside>`


section元素

section元素用于对网站或应用程序中页面上的内容进行分块,一个section元素通常由内容和标题组成。在使用section元素时,需要注意一下三点:

  • 不要将section元素用作设置样式的页面容器,那是div的特性。
  • 如果article元素、aside元素或nav元素更符合使用条件,那么不要使用section元素。
  • 没有标题的内容区块不要使用section元素定义。
<article>
    <header>
        <h2>小张的个人介绍</h2>
    </header>
    <p>小张是一个好学生,是一个帅哥。。。</p>
    <section>
        <h2>评论</h2>
        <article>
            <h3>评论者:A</h3>
            <p>小张真的很帅</p>
        </article>
        <article>
            <h3>评论者:B</h3>
            <p>小张是一个好学生</p>
        </article>
    </section>
</article>`

在html5中,article元素可以看作是一种特殊的section元素,它比section元素更具有独立性,即section元素强调分段或分块,而article元素强调独立性。如果一块内容相对来说比较独立、完整时,应该使用article元素;但是如果想要将一块内容分成多段时,应该使用section元素。


footer元素

footer元素用于定义一个页面或者区域的底部,它可以包含所有通常放在页面底部的内容。与header元素相同,一个页面中可以包含多个footer元素。同时,也可以在article元素或者section元素中添加footer元素。

`<article>
    文章内容
    <footer>
        文章分页列表
    </footer>
</article>
<footer>
    页面底部
</footer>`
站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/5768

设置overflow:hiden行内元素会发生偏移的现象

行内元素的默认对齐方式是基线对齐即(vertical-align:baseline),设置设置overflow不为visible之后改变了他的默认对齐方式为下边距边缘;其他行内元素依然还是基线对齐就会出现下沉的视觉效果

如何取消inline-block元素的空隙?

最近做移动端页面时,经常会用到inline-block元素来布局,但无可避免都会遇到一个问题,就是inline-block元素之间的间隙。这些间隙会导致一些布局上的问题,需要把间隙去掉

HTML/CSS中空元素有哪些?

在用来描述网页的计算机语言中,有一种超文本标记语言,被称为HTML(Hyper Text Markup Language) 。而构成HTML内容的标记语言是由一套标记标签组成。这套标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签是由尖括号包围的关键词,比如 <html>

如何用 CSS 强调标记文本元素?

当我们在 Web 上做文本编辑器时,最常见的一个场景便是和文字样式打交道了。比如像语文课本那样需要在每篇文章要学习的生字上标上一个小黑点,这个时候就该用到 CSS 中 text-emphasis-style 这个属性。

元素的显示与隐藏

如果希望元素不可见,同时不占据空间,辅助设备无法访问,同时不渲染,可以使用 <script> 标签隐藏,如果希望在 <script> 标签中再放置其他不渲染的模板内容,可以试试使用 <textarea> 元素

Js中获取HTML元素的方式有哪些?

对于许多前端开发项目来说,获取元素进行操作是必不可少的,例如tab标签,全屏切换,自动滚播等效果都需要通过获取节点元素来实现。下面我们来看一下JavaScript获取HTML元素的方式。

元素显示隐藏的9种思路

在网页制作中,元素的显示隐藏是非常常见的需求。本文将介绍元素显示隐藏的9种思路,对于元素显隐来说,最常见就是display:none | display:block,但是使用这种方法有个问题

angular怎么删除(remove)元素?

angular删除(remove)元素可以使用angular.element中的remove()方法,此方法可以将匹配元素集合从DOM中删除(同时移除元素上的事件及jQuery数据)。

Js在Array数组中按指定位置删除或添加元素对象

JavaScript的数据中可通过splice/slice在指定位置添加或删除元素。另外还有slice、delete等方法实现。splice方法向/从数组中添加/删除项目,然后返回被删除的项目

HTML中的块级元素有哪些?

在css基础当中,我们往往会遇到块元素和行内元素,块元素和行内元素也是很重要的基础知识。那么块级元素是什么?HTML中的块级元素有哪些?

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广