zoukankan      html  css  js  c++  java
  • HTML5 十大新特性(一)——语义标签

      说语义标签前先来理解下什么叫语义化,当下html是靠div+css来铸造页面的整体框架和结构的,通篇大量的div可读性极低,因此诞生了这些特殊的标签,简单地说就是见名知义,使页面更清晰,方便维护和开发。

      HTML5为我们提供了一系列的语义标签。

      1、<section></section>

        定义文档中的主体部分的节、段。

      2、<article></article>

        一个特殊的section标签,比section有更明确的语义。定义来自外部的一个独立的、完整的内容块,例如什么论坛的文章,博客的文本。。。

      3、<aside></aside>

        用来装载页面中非正文的内容,独立于其他模块。例如广告、成组的链接、侧边栏。。。

      4、<header></header>

        定义文档、页面的页眉。通常是一些引导和导航信息,不局限于整个页面头部,也可以用在内容里。

      5、<footer></footer>

        定义了文档、页面的页脚,和header类似。

      6、<nav></nav>

        定义了一个链接组组成的导航部分,其中的链接可以链接到其他网页或者当前页面的其他部分。

      7、<hgroup></hgroup>

        用于对网页或区段(section)的标题元素(h1~h6)进行组合。

      8、<figure></figure>

        用于对元素进行组合。

      9、<figcaption></figcaption>

        为figure元素加标题。一般放在figure第一个子元素或者最后一个。

      10、<details></details>

        定义元素的细节,用户可以点击查看或者隐藏。

      11、<summary></summary>

        和details连用,用来包含details的标题。

      12、<canvas></canvas>

        用来进行canvas绘图。

      13、<video></video>

        定义视频。

      14、<audio></audio>

        定义音频。

      15、<embed></embed>

        定义嵌入网页的内容。比如插件。

      16、<source></source>

        该标签为媒介元素(比如video、audio)定义媒介元素。

      17、<datalist id='dl'></datalist>

        定义可选数据的列表,与input配合使用(<input list='dl'>)可制作输入值的下拉列表。

      18、<mark></mark>

        在视觉上向用户展现出那些想要突出的文字。比如搜索结果中向用户高亮显示搜索关键词。

      19、<meter [min/max/low/high/optimum/value]></meter>

        度量衡,用红黄绿表示出一个数值所在范围。

      20、<output></output>

        定义不同类型的输出,样式与span无异。

      21、<progress></progress>

        进度条,运行中的进度。

      22、<time></time>

        定义日期或者时间。

      23、<keygen></keygen>

        定义加密内容。

      24、<command></command>

        定义命令行为。

  • 相关阅读:
    dubbo、dubbox、motan、thrift、grpc等RPC框架比较及选型
    web攻击之八:溢出攻击(nginx服务器防sql注入/溢出攻击/spam及禁User-agents)
    crontab的安装及crontab命令介绍
    开启Nginx的gzip压缩功能详解
    nginx限制请求之四:目录进行IP限制
    nginx上传目录配置,禁止执行权限
    EhCache 分布式缓存/缓存集群
    Nginx 反向代理、负载均衡、页面缓存、URL重写、读写分离及简单双机热备详解
    CDN模式介绍
    IT基础架构规划方案一(网络系统规划)
  • 原文地址:https://www.cnblogs.com/patcher/p/6240067.html
Copyright © 2011-2022 走看看