HTML5新增的几个布局结构元素
2019-04-29 14:33
232 查看
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元素:1.通常用来设置侧边栏。
2.同时也可以嵌套在article元素内部使用,作为主要内容的附属信息,比如参考资料,名词解释等
3.也可以定义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元素: 1.表示24小时中的某个时刻或某个日期,,表示时刻允许带时差
2.datetime属性中日期与时间要用”T“文字分隔 使用”z“表示UTC标准时间
3.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元素:1.progress元素:是HTML5新增的元素,用来建立一个进度条;通常用来与JavaScript结合使用,来显示任务的进度
2. 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>
欢迎各位大神指点!!
相关文章推荐
- html5新增的结构元素
- HTML5新增的非主体结构元素:
- Html5相对于Html4的新增的主体结构元素
- html5新增结构元素
- [HTML5]:HTML5新增多媒体元素和结构语义元素
- html5新增主题结构元素之article
- HTML5新增的非主体结构元素
- HTML5新增结构元素 article
- HTML5新增主题结构元素之section
- HTML5学习笔记一:新增主体结构元素
- HTML5新增的主体结构元素
- HTML5新增与结构有关的元素
- HTML5中新增主体结构元素与非主体结构元素解析
- HTML5 学习笔记2-新增的主体结构元素
- HTML5新增的主体结构元素
- html5新增的主题结构元素
- HTML5新增与结构有关的元素
- HTML5新的网页结构及主要新增元素的使用
- 【原】HTML5 新增的结构元素——能用并不代表对了
- 【HTML5初涉】新增主体结构元素和非主体结构元素