资讯详情

html5结构标签,nav标签,ruby标签,mark标签,cite标签,section标签，article标签

1.html5结构标签

<!DOCTYPE html><html><head><meta charset="utf-8"/><title>HTML5结构标签</title> <style type="text/css">header,nav,article,aside,section,footer{ border:solid 1px red;padding:10px;margin:6px;} header { width:800px; }nav {width: 800px;}article { float:left; width:580px; height:100px;}section{ height:50px;} aside { width:186px; float:left; height:100px;} footer { clear:both;width:800px;} </style> </head> <body><header>页眉</header> <nav>导航栏</nav> <article>文章<section>文章的内容</section> </article><aside>侧边栏</aside> <footer>页脚</footer> </body></html>

2.nav标签

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head>

<body><!--1.nav标签代表页面的一部分，是一个链接组，可以用作页面导航navigator的缩写。2.nav可应用于传统导航条、侧栏导航、页内导航、翻页操作等场合。--> <nav> <ul> <li><a href="#">公司介绍</a></li> <li><a href="#">产品推荐</a></li> &nbs;<li><a href="#">招聘信息</a></li>            <li><a href="#">联系我们</a></li>            </ul>    </nav></body></html>

3.ruby标签 

<!doctype html><html><head><meta charset="utf-8"><title>ruby标签</title></head><!--<ruby> 标签定义 ruby 注释(中文注音或字符)。在东亚使用，显示的是东亚字符的发音。与<ruby>以及<rt>标签一同使用。ruby元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的rt元素组成，还包括可选的rp元素，定义当浏览器不支持"ruby"元素时显示的内容。-->

<body>    <ruby>    我&nbsp;爱&nbsp;你        <rt>wo&nbsp;ai&nbsp;ni</rt>    </ruby></body></html>

4.mark标签

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head>

<body>    <p>23222<mark>1111111111111111111</mark>2222</p></body</html>

5.cite标签

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head>

<body><!--<cite>标签

<cite>标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。用<cite>标签把指向其他文档的引用分离出来，尤其是分离那些传统媒体中的文档，如书籍、杂志、期刊等等。    -->    <p>111111111</p>    <cite>2222222222</cite></body></html>

6.section标签

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head>

<body><!--1.<section>标签用于对网页的内容进行分区、分块，定义文档中的节。比如章节、页眉、页脚或文档中的其它部分。一般情况下，section标签通常由标题和内容组成。2.<section>标签表示一段专题性的内容，一般会带有标题，没有标题的内容区块不要使用section标签定义。3.根据实际情况，如果article标签、aside标签或nav标签更符合使用条件，那么不要使用section标签。4.当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用 div标签而非section。-->    <section>    <h1>1111111</h1>        <p>2222222</p>        <article>        3333333            <p>44444</p>        </article>    </section></body></html>

7.article标签

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head>

<body><!--1.<article>是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。2.Article标签会有标题部分，通常可以包含header，有时也会包含footer。3.article可以嵌套，内层的article对外层的article标签有隶属关系。例如，一篇博客的文章，可以用article显示，然后一些评论也可以以article的形式嵌入其中。-->    <article>        <header>    <h1>标题信息</h1>    <h2>二级标题</h2>    <p>报道的时间信息等</p>        </header>    <p>文章报道的详细信息</p>        <footer>    供稿人：张三等            </foooter>            </article></body></html>

标签： 60p直针直脚连接器

锐单商城拥有海量元器件数据手册、 IC替代型号，打造 电子元器件IC百科大全！

 锐单商城 - 一站式电子元器件采购平台  

 深圳锐单电子有限公司