h5中的结构元素介绍

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

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


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>`

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

Css元素的显示与隐藏

在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是 display visibility 和 overflow。他们的主要目的是让一个元素在页面中消失,但是不在文档源码中删除。 最常见的是网站广告,

css父元素透明度(opacity)对子元素的影响

设置父元素opacity:0.5,子元素不设置opacity,子元素会受到父元素opacity的影响,也会有0.5的透明度。设置父元素opacity:0.5,即使设置子元素opacity:1,子元素的opacity

jQuery获取元素的大小和位置信息

css()方法获取元素的宽高:css()方法返回的其实是getComputedStyle(node).width的值,也就是元素内容区的宽高;width() / height()这两个方法返回的也是元素内容区的宽高,但是不带单位

jQuery绑定动态元素的点击事件无效

之前就一直受这个问题的困扰,在写ajax加载数据的时候发现,后面追加进来的demo节点元素,失去了之前的点击事件。为什么点击事件失效,我们该怎么去解决呢?那么,我们通过下面的示例简单说明。

使用document.querySelector获取元素

使用 document.querySelector() 和 document.querySelectorAll(), 将 CSS选择器 作为参数传入即可;注意: querySelecotor()返回某个元素节点, querySelectorAll()返回一个NodeList实例对象;

h5中的结构元素header、nav、article、aside、section、footer介绍

结构元素不具有任何样式,只是使页面元素的的语义更加明确。header元素是一种具有引导和导航作用的的结构元素,该元素可以包含所有通常放在页面头部的内容。nav元素用于定义导航链接,是html5新增的元素

css position absolute相对于父元素的设置方式

大家知道css的position absolute默认是根据document来设置的,比如position:absolute后设置left:0;top:0这时候元素会显示到页面的左上角。有时候我们需要在父元素的容器内设置相对的绝对位置

元素focus页面不滚动不定位的JS处理

有时候我们希望元素被focus的时候页面不发生滚动,例如我们点击一个按钮打开一个弹框,此时点击弹框中的关闭按钮隐藏弹框后,希望键盘的焦点回到之前的按钮上,我们就会执行如下JavaScript代码:

html元素间的边距重叠问题与BFC

BFC即块级格式化上下文,创建了 BFC 的元素是一个独立的容器,里面无论如何布局都不会影响到外面的元素;设置 overflow 属性,除了 visible 以外的值(例如 hidden、auto)

JS 的 Element元素对象

在 HTML DOM 中, 元素对象代表着一个 HTML 元素。元素对象 的 子节点可以是, 可以是元素节点,文本节点,注释节点。NodeList 对象 代表了节点列表,类似于 HTML元素的子节点集合。

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

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

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