HTML5 1.9 新的布局元素

1.header元素(标签)

a。通常用于设置一个页面的标题部分,通常包含标题,LOGO,导航

b。通常会放在文章的头部

2.footer元素(标签)

a。通常用于设置一个网页的底部区域,会包含友情链接,版权声明,文件建立日期,联系方式等

b。通常会放在页面的页脚

3.article

a。用于定义一个独立的内容区块,比如一篇文章、帖子、论坛的一段用户评论、一篇新闻消息等

b。可以嵌套其他元素,他可以有自己的头、尾、主题等,使用时要特别注意内容的独立性,一般对于独立完整的内容才使用article元素。如果只是一段内容的话应该使用section元素

4.section

<!DOCTYPE html>

< html lang="zh-cn">

<head>

<meta charset="UTF-8">

<title>例1</title>

</head>

<body>

<article>

<header>

<h3>文章标题</h3>

<h5>作者:杜甫</h5>

</header>

<p>我是正文**********************************************<br>**********************************************                            <br>**********************************************<br></p>

<article>

<header><h4>网友A的评论</h4></header>

<p>评论内容:******************江流石不转,遗恨失吞吴。</p>

<footer><h4>发布时间:2016/03/10</h4></footer>

</article>

<article>

<header><h4>网友B的评论</h4></header>

<p>评论内容:******************江流石不转,遗恨失吞吴。</p>

<footer><h4>发布时间:2016/03/15</h4></footer>

</article>

<footer><p>尾部:阅读:300 评论:80</p></footer>

</article>

</body>

</html>

时间: 2024-10-27 01:37:24

HTML5 1.9 新的布局元素的相关文章

HTML5的一些新表单元素

<datalist>        定义可选列表,需要与文本框结合使用 例: <input list="browsers7" name="browser"> <datalist id="browsers7"> <option value="Internet Explorer"> <option value="Firefox"> <option

HTML5中新的语义元素

HTML5提供了新的语义元素来明确一个Web页面的不同部分: <header> <nav> <section> <article> <aside> <figcaption> <figure> <footer>

HTML5新表单元素

新表单元素 datalist 示例 <!-- action表示将表单提交到php文件中--><!-- input中的list与datalist中的id想对应--><form action="demo-form.php" method="get"><input list="browsers" name="browser"><datalist id="browsers

HTML5移动开发之Flexbox布局讲解与使用技巧

现在来详细介绍一下Flexbox布局语法跟使用.大家可能非常关心以下几个问题: 1 .什么是Flexbox布局? 2. Flexbox布局主要用于什么场景? 3. Flexbox布局它的语法是什么? 4. 如何实际使用Flexbox布局? 5. Flexbox布局它的缺陷是什么? 下面就这五个问题给大家分析分析.希望给那些想尝试用Flexbox的行内人有所帮助. 在恰当的地方能够使用恰当的布局方法,如果有说的不到位,希望大家指正,一起进步. 1 .什么是Flexbox布局? 1.1 W3C解释

HTML5列表、块和布局

-----------------siwuxie095 HTML5 列表 标签 描述 <ol> 有序列表 <ul> 无序列表 <li> 列表项 <dl> 列表 <dt> 列表项 <dd> 描述 1.无序列表 标签:<ul>.<li> 属性:disc.circle.square 2.有序列表 标签:<ol>.<li> 属性:A.a.I.i.start 3.嵌套列表 标签:<ul>

HTML5和CSS3新特性一览

HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签 描述 <article> 定义页面独立的内容区域. <aside> 定义页面的侧边栏内容. <bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置. <command> 定义命令按钮,比如单选按钮.复选框或按钮 <details> 用于描述文档或文档某个部分的细节 <dialog> 定义对话框,比如提示框 <summary>

HTML5 学习笔记(二)——HTML5新增属性与表单元素

目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placeholder占位属性 1.7.required必填属性 1.8.pattern正则属性 1.9.autofocus自动聚焦属性 1.10.autocomplete自动完成属性 1.11.novalidate不验证属性 1.12.multiple多选属性 二.HTML5表单新功能解析 2.1.表单结构更自由

HTML5实战与剖析之媒体元素(3、媒体元素的事件及方法)

HTML5中的媒体元素除了拥有非常多的属性之外,video标签和audio标签还能够出发非常多事件和方法. 这些方法监控着不同的属性的变化,这些变化有可能是媒体播放的结果,也可能是用户操作媒体的结果. 以下就为大家開始介绍媒体元素的相关事件. abort:触发时机是下载中断. canplay:在能够播放的时候,readyState的值为2的时候触发. canplaythrough:readyState的值为3的时候,触发.播放能够继续,而应该不会中断的时候触发. canshowcurrentfr

常用的HTML5、CSS3新特性能力检测写法

伴随着今年10月底HTML5标准版的发布,未来使用H5的场景会越来越多,这是令web开发者欢欣鼓舞的事情.然而有一个现实我们不得不看清,那就是IE系列浏览器还占有一大部分市场份额,以IE8.9为主,windows8.1的用户已经用上了IE10/11,而考虑我国的国情,IE6.7依然存留不少.在我们放手用HTML5开发的时候,新特性支持度检测就是必不可少的了.一种方式是用navigator.userAgent或navigator.appName来检测浏览器类型和版本,不过这种方式不是很可靠,浏览器