站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

html5布局元素有哪几个

时间:2021-12-18 [网络编程]作者:fabuyuan 浏览:10 次

html5布局元素有:1、header元素,定义网页的头部内容;2、footer元素;3、nav元素;4、article元素;5、section元素;6、aside元素;7、time元素;8、progress元素;9、meter元素等。

html5布局元素有哪几个

本教程操作环境:windows7系统、HTML5版、Dell G3电脑。

HTML5新增的几个布局结构元素

1、header元素:

一般用于网页的头部,定义头部的区域块,也可以定义一块内容,所定义的内容是一块独立的。

<header>
    <h1>中国最大的搜索引擎</h1>
    <a href="http://www.baidu.com">百度</a>
    <nav>
        <ul>
            <li><a href="#">谷歌</a></li>
            <li><a href="#">火狐</a></li>
            <li><a href="#">360</a></li>
        </ul>
    </nav>
</header>

2、footer元素:

与header元素基本一致,但是footer元素一般定义网页的底部内容

<footer>
    <ul>
        <li>关于我们</li>
        <li>联系客服</li>
        <li>合作招商</li>
        <li>隐私政策</li>
    </ul>
</footer>

3、nav元素:

可以用来定义导航栏,目录,超链接等;并不是需要把所有的连接组都放进nav元素中,只需要将主要的,基本的连接组放进nav元素即可

4、article元素:

用于定义一个独立的内容区块;可以是一篇博客,一篇文章或者是独立的插件;可以嵌套使用,也可以表示插件。类似于div元素

<article>
    <header>
        <h1>Article元素</h1>
        <p>欢迎学习Article元素</p>
    </header>
    <footer>
        <p>这是底部</p>
    </footer>
</article>
<article>
    <h1>这是一个内嵌页面</h1>
    <object data="#" type="" width="600px" height="600px"></object>
</article>

5、section元素:

用来定义页面中的内容进行分块;强调分块。一般用于页面中具有明显独立的内容

<article>
    <section>
        <h1>第一章:桃园三结义</h1>
        <p>桃园三结义最初是小说《三国演义》里记载的故事,述说当年刘备、关羽和张飞三位仁人志士,为了共同干一番大事业的目标,意气相投,
            言行相依,选在一个桃花盛开的季节、选在一个桃花绚烂的园林,举酒结义,对天盟誓,有苦同受,有难同当,有福同享,共同实现自己人生的美好理想。</p>
    </section>
    <section>
        <h1>第二章:</h1>
        <p>草船借箭是我国古典名著《三国演义》中赤壁之战的一个故事。借箭由周瑜故意提出(限十天造十万支箭),机智的诸葛亮一眼识破是一条害人之计,
            却淡定表示“只需要三天”。后来,有大雾天帮忙,诸葛亮再利用曹操多疑的性格,调了几条草船诱敌,终于借足十万支箭,立下奇功。</p>
    </section>
</article>

6、aside元素:

  • 通常用来设置侧边栏。

  • 同时也可以嵌套在article元素内部使用,作为主要内容的附属信息,比如参考资料,名词解释等

  • 也可以定义article元素之外的内容,,前提是这些内容与article元素内容相关联

<article class="film_review">
    <header>
        <h2>侏罗纪公园</h2>
    </header>
    <section class="main_review">
        <p>Dinos were great!</p>
    </section>
    <section class="user_reviews">
        <article class="user_review">
            <p>Way too scary for me.</p>
            <footer>
                <p>
                    Posted on <time datetime="2015-05-16 19:00">May 16</time> by Lisa.
                </p>
            </footer>
        </article>
        <article class="user_review">
            <p>I agree, dinos are my favorite.</p>
            <footer>
                <p>
                    Posted on <time datetime="2015-05-17 19:00">May 17</time> by Tom.
                </p>
            </footer>
        </article>
    </section>
    <footer>
        <p>
            Posted on <time datetime="2015-05-15 19:00">May 15</time> by Staff.
        </p>
    </footer>
</article>

7、time元素:

  • 表示24小时中的某个时刻或某个日期,,表示时刻允许带时差

  • datetime属性中日期与时间要用”T“文字分隔 使用”z“表示UTC标准时间

  • pubbdate属性是一个可选标签,可以让搜索引擎很方便就识别出文章日期,新闻的发表日期

<section>
    <time datetime="2019-4-27">2019-4-27</time>
    <time datetime="2019-4-27T20:00">2019-4-27</time>
    <time datetime="2019-4-27T20:00Z">2019-4-27</time>
    <time datetime="2019-4-27+09:00">2019-4-27</time>
</section>

8、progress和meter元素:

  • progress元素:是HTML5新增的元素,用来建立一个进度条;通常用来与JavaScript结合使用,来显示任务的进度

  • meter元素:是HTML5新增的元素,用来建立一个度量条,用来表示度量衡的评定;通常与JavaScript结合使用

<form action="">
    <!--max:规定当前进度条的最大值 ; value属性:设定进度条当前显示的默认值  form:规定进度条所属的一个或多个表单-->
    <p>当前下载进度:</p>
    <progress value="30" max="100">

    </progress>

    <meter value="40" max="100" min="10">

    </meter>
</form>

相关推荐:《html视频教程》

以上就是html5布局元素有哪几个的详细内容,更多请关注站长家园其它相关文章!

本文标签:  html5布局结构元素

转载请注明来源:html5布局元素有哪几个

本文永久链接地址:https://www.adminjie.com/post/6592.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • html如何给背景图片设置透明度

      html如何给背景图片设置透明度

      html给背景图片设置透明度的方法:1、使用opacity属性,给设置背景图片的元素添加“opacity:透明度值;”样式即可;2、使用filter属性,给设置...

    • HTML里怎么设置thead表头的颜色

      HTML里怎么设置thead表头的颜色

      HTML中设置thead表头颜色的方法:1、使用“thead{color:颜色值;}”语句设置表头的字体颜色;2、使用"thead{background:...

    • 演示文稿储存以后默认的文件扩展名是什么

      演示文稿储存以后默认的文件扩展名是什么

      演示文稿储存以后默认的文件扩展名是ppt,一套完整的演示文稿文件一般包含片头动画、PPT封面、前言、目录、过渡页、图表页、图片页、文字页、封底、片尾动画等。本文...

    • oracle中not的用法是什么

      oracle中not的用法是什么

      在oracle中,not用于对指定的条件取反,当指定的条件为真时,not的结果就是假,当指定的条件为假时,not的结果就是真,语法为“Selectwhere...

    • Vue3中5个可以提高开发效率的小知识【整理分享】

      Vue3中5个可以提高开发效率的小知识【整理分享】

      本篇文章给大家聊聊Vue3开发,整理分享5个可以提高开发效率的小知识,让你在Vue3的项目开发中更加丝滑,希望对大家有所帮助!最近鼓捣了一下Vue3+...

    热门文章