标签 · 程序员开发笔记

[TOC] #### 新增标签article标签 article • article 字面意思为“文章”。在web页面中表现为独立的内容，如一篇新闻，一篇评论，一段名言，一段联系方式 • 代码独立的、完整的相关内容块，一般来说， article 会有标题部分(通常包含在 header 内)，有时也会包含 footer 示例： <!doctype html> <title>html5站案例</title> <body> <article> <h1></h1> <p>主内容</p> </article> <aside> 侧边内容 </aside> </body> #### 新增标签section标签(章节) • section 字面上理解为“块”，“部分”。在html5网页中表现的意思跟字面理解差不多，即部分，块，模块，主要作用为对页面的内容进行分块或者对文章的内容进行分段。示例： <!doctype html> <article> <h1>常见水果对比</h1> <p>市面上常见的水果有苹果、桃子、梨...</p> <section> <h2>苹果</h2> <p>苹果树属于蔷薇科,落叶乔木,叶椭圆形,有锯齿。</p> </section> <section> <h2>桃</h2> <p>蔷薇科、桃属植物,树冠宽广而平展;树皮暗红褐色,老时粗糙呈鳞片状</p> </section> </article> #### 新增标签nav • 页面导航的链接组注： • 并不是所有链接都要放在nav中，只需要将主要的链接放到nav中适用场合： 1. 传统顶部导航条（首页，关于我们等) 2. 商城左侧导航条 3. 页面分页部分示例： <nav> <a href="">首页</a> <a href="">关于后盾网</a> </nav> #### 新增标签aside • aside字面理解为“旁边”，在html5中范围更广一点，是跟主内容相关，但是又可以独立的内容，可以是广告、引用、侧边栏等等。适用场合： 1.广告、引用、侧边栏示例： <article> <h2>新闻列表</h2> <ul> 主内容 </ul> </article> <aside> <section> <h3>Html5最新动态</h3> </section> <section> <h3>Html5新增元素</h3> </section> <section> <h3>Html5新增Api</h3> </section> <section> <h2>Html5文章推荐</h2> </section> </aside> <footer></footer> #### Time标签 time • time 字面理解为“时间”，在html5中用于定义元素的时间、日期或者日期时间。注： • pubdate表示发布日期示例： <article> <h2>快学网上线了</h2> <p>今天是今天是<time datetime="2014-03-06">2014-3-6</time> <time datetime=“2014-02-25” pubdate=“pubdate”>2014年2月25日 </time> </article> #### header标签 header • header字面意思为头部，在html5可以理解为页头，文档头，页眉。示例： <header> <h1>Web编程语言比较</h1> <nav> <ul> <li><a href="#asp">asp</a></li> <li><a href="aspnet">asp.net</a></li> <li><a href="php">php</a></li> </ul> </nav> <header> #### footer标签 footer • footer字面意思为“页脚”，“结尾”，在html5中跟字面意思类似，是页脚和结尾的意思。它与header是相对的一对。footer可以包含该区块相关的作者信息、相关文档的链接、版权信息、导航、附录，索引，长的版本记录，冗长的许可协议和其他的诸于此类的内容等。示例： <footer> <section> <h1>友情链接</h1> </section> 后盾网版权所有 copyright houdunwang.com </footer> #### address标签 address • address字面理解为“地址”，在html5中，它用于文档或者文章作者或拥有者的联系信息。注意，这里放的不是字面上理解的“地址”，而是指“联系信息”，可以包括文档创建者的名字、站点链接、电子邮箱、真实地址、电话号码等各类联系信息。示例： <footer> 后盾网 <address> <ul> <li>网址：http://www.houdunwang.com</li> <li>电话：010-64825057</li> <li>网址：houdunwang.com</li> </ul> </address> </footer> #### code标签 • 用于显示程序代码。示例： <code> <?php echo "hello word";?> </code> #### mark标签 • 突出显示文本示例：后盾网 <mark>houdunwang.com</mark> #### ins与del标签 ins与del • Ins与del用于显示突出或删除的文本示例：后盾网址：<ins>houdunwang.com</ins> 百度网址：<del>baidu.com</del> #### optgroup标签 • 对select标签中的option进行分组示例： <select name="select" id="select"> <optgroup label="城市"> <option value="beijing">北京</option> <option value="nanjing">南京</option> </optgroup> <optgroup label="sex"> <option value="boy">男</option> <option value="girl">女</option> </optgroup> </select> #### progress标签 progress • 显示完成的进度示例： <progress value="10" max="100"></progress> <progress value="50" max="100"></progress>