html5里面新增的用于网页布局的标签有哪些

如题所述

    <header>标签

    <header>标签定义文档的页眉(介绍信息)

    用法: 

    <header><h1>windyauang的Dreamweaver专栏</h1></header>

    <nav>标签

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

    <section> 标签

    <section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分

    用法:  <section>   

    <h1>标题一</h1>    

    <p>文章段落内容</p> 

    </section>

    <article> 标签

    <article> 标签定义外部的内容。  外部内容可以是来自一个外部的新闻提供者的一篇新的文章,或者来自blog的文本,或者是来自论坛的文本。亦或是来自其他外部源内容。总之,可以理解为article所表示的就是文章内容。

    用法:<article> 

    <a href="#">文章内链接</a><br />

    文章内容文章内容文章内容 

    </article>

    <aside> 标签

    <aside>标签定义article以外的内容。aside的内容应该与article的内容相关,如上图所示,它类似于布局中的辅助侧边栏。

    用法:  <aside>  

    <h4>小标题</h4>  

    段落内容段落内容 

    </aside>

    <footer> 标签

    <footer> 标签定义section或document的页脚。在典型情况下,该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息,也就是类似于版权信息的东西。

    用法:  <footer>

    页脚文字,版权信息等

    </footer>

    整体的Html5代码应该如下:

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>无标题文档</title>

    </head>

    <body> 

    <header> <h1><a href="#">windyauang的Dreamweaver专栏-Html5布局示范文档</a></h1> </header> 

    <nav> 

    <ul> 

    <li><a href="#">菜单一</a></li>

    <li><a href="#">菜单二</a></li>

    <li><a href="#">菜单三</a></li> 

    <li><a href="#">菜单四</a></li> </ul>  

    </nav> 

    <section> 

    <header>内容标题</header> 

    <article>文章内容</article> 

    <footer>文章版权内容</footer> 

    </section> <aside>相关内容</aside>

    <footer>页脚、页面版权内容</footer>

    </body>

温馨提示:内容为网友见解,仅供参考
无其他回答

html5里面新增的用于网页布局的标签有哪些?
html5新增的一些语义话标签,可以使用比如头部可以使用header标签,导航nav,主体部分可以使用section,底部footer,中间文章article。div,ul li标签都是使用比较频繁的标签,span,i,em可以对文字进行单独的描述,表示等。<article>标签定义外部的内容,比如来自一个外部的新闻提供者的一篇新的文章,或者来自 ...

html5新增标签有哪些
1、<header>:定义文档或区块的页眉,通常包含标题、导航和其他相关信息。2、<nav>:定义导航链接的容器,用于包裹网站的导航部分。3、<section>:定义文档的一个独立节或区块,用于组织相关的内容。4、<article>:定义一个独立的、完整的、可以独自分发或独立引用的内容块,如博客文章、新闻报道等。5、...

html5网页结构布局标签
DIV 这个标签一直是我们见得最多、用得最多的标签。 它本身无任何语义,用作布局以及样式化标签。 Section 与div相似,但它有更进一步的语义。 section用作一段有专题性的内容,一般在它里面会带有标题。 section典型的应用场景应该是文章的章节、标签对话框中的标签页、或者论文中有编号的部分。 Articl...

HTML5新增标签一
介绍HTML5中新添加的标签用法于说明。aside 添加附注,用于包含于当前文档相关的内容,如侧栏提示文档相关文档,也可以使用来放广告、相关内容链接,一个完全独立的区块——作为页面主要内容的陪衬 article 独立文档标记(表示一个完整的、自成一体的内容块),比如博客文章或新闻报道。hgroup 标注副标题\/标...

html5新增标签有哪些?
·footer:页面底部。多媒体标签:·video:支持视频文件直接播放,兼容多种格式如WEBM、MP4、OGG。·audio:实现音频文件直接播放,兼容格式如MP3、OGG、WAV。·source:定义媒介。表单标签:·datalist:配合<input>标签定义下拉列表。以上内容概述了HTML5新增标签的基本用法,旨在提供网页结构、多媒体展示与...

html5新增标签都有哪些
html5新增标签大致如下:<canvas> 新元素 <canvas> 标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API 新多媒体元素 <audio> 定义音频内容 <video> 定义视频(video 或者 movie)<source> 定义多媒体资源 <video> 和 <audio> <embed> 定义嵌入的内容,比如插件。<...

html5新增和废除的标签有哪些
新增的结构标签:1、section元素 ,表示页面中的一个内容区块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2……等元素结合起来使用,表示文档结构。例:HTML5中<section>…<\/section>;HTML4中<div> ……<\/div>。2、article元素 ,表示页面中一块与上下文不相关的独立内容。比如一篇文章。3...

Html5新增的标签有哪些
新增的结构标签:1、header元素 表示页面中一个内容区块或真个页面的标题。2、hgroup元素 表示对真个页面或页面中的一个内容区块的标题进行组合。3、article元素 表示页面中一块与上下文不相关的独立内容。比如一篇文章。4、aside元素 表示article元素内容之外的、与article元素内容相关的辅助信息。5、footer...

Html5新增的标签有哪些
HTML5中新增标签较多,下面说几个常见的 <article> 定义外部的内容,外部内容可以是来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦或是来自其他外部源内容。<aside> 定义 article 以外的内容。aside 的内容应该与 article 的内容相关。<audio> 定义声音,比如...

html5 新加的标签元素例如:<header><section><article><footer>解...
新增加的header、footer标签主要用于表现DOM的语义 没有特殊的样式 在HTML5之前,不论是header还是body或footer都需要用div来表达 而HTML5的新标签可以直接用header、article、footer这些清晰明了的标签来表达,使文档的结构更清晰,以前设计时还要div然后id="container"这一类的属性,现在可以用一个article等...

相似回答