• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > HTML5与CSS3.0 > html5学习记录(2): 新增元素标签和全局属性

    html5学习记录(2): 新增元素标签和全局属性

    作者: 分类:HTML5与CSS3.0 点击: 224 次
    wordpress CMS主题:ssmay主题

      html5在继承了原有html4大部标签和属性外,还新增了许多新的元素标签和全局属性。通过新增加的这些元素标签,可以让页面的代码更加易懂,如:<footer>标签就表示页面角代码,可以让前台程序员更加容易地识别代码。而新增加的全局属性,会让页面的静态功能更加丰富。下面一起来看看html5都新增了哪些元素标签和全局属性。

      1、几个主体结构元素

      这些结构性元素,一般情况下,只用来布局,不直接定义CSS样式。样式上用div来完成。

      article               完全【独立】内容的标签。如:文章、论坛帖子、用户评论、独立插件等。

      section             用于对网页面内容进行【分块】。通常由内容及其标题组成。

      nav                   页面导航及翻页操作。

      aside                页面或文章附属信息部分。如:引用解说、侧边栏、广告、导航条等。

      header             头部元素,用于页面或独立区块的头部或标题,

      footer              底部元素。用于页面或区块面容的脚注。如:页面底部、相关链接等。

      hgroup            标题组元素。多标题时可以使用。单标题时不需要使用。如:

      <hgroup>  <h1>主标题<h1>  <h2>副标题</h2>  </hgroup>

      address           地址元素。用于 电子邮箱、地址、网站链接、联系人所有信息等。

      time                 时间标签。是给机器看的。让机器知道这是个时间。

      datetime属性:     规定日期 / 时间。否则,由元素的内容给定日期 / 时间。

      pubdate属性:      指示<time>元素中的日期或时间是 文档或 <article> 元素的发布日期。

      meter                                        表示特定范围的值,如:工资、百分比、

      <meter max=10 min=0 value=5></meter>   最大值10,最小值0,值是5,即进度条50%,如下图:

      html5学习记录(2): 新增元素标签和全局属性

      prograss         进度条

      <progress max=100 min=0 value=30></progress> 参数与meter相同,效果图如上图

      meter与prograss标签可结合setInterval实现动态加载进度条。如:下载进度、上传进度等。

      2、HTML5新增的全局属性

      contenteditable=’true’   内容可编辑。false表示不可编辑。可在任何标签下使用。

      contenteditable=’’          内容可编辑。等于空时。如:<li contenteditable=’’>aaaaaa</li>

      contenteditable               内容可编辑。没有等于号时

      designMode=’on’            内容可编辑状态。off表示不可编辑。直接写在标签中,好像没什么用。

      可通过JS来实现:<li  onclick="document.designMode='on';">aaaaaa</li>

      hidden                            内容隐藏,如:<li hidden> aaaaaa </li>

      spellcheck=’true’          对内容进行拼写检查。false表示不可编辑。只在谷歌浏览器有效。

      可对 input (text)类型、textarea、可编辑元素(contenteditable) 这3种。

      tabindex           "tab" 键进行导航。

      如下面代码,按 tab键,先每1行,再第3行,再到第2行:

      <li tabindex=1>gaogagaogao</li>

      <li tabindex=3>gaogagaogao</li>

      <li tabindex=2>gaogagaogao</li>

      draggable        元素可否拖拽,true可拖拽,false不可拖,必须结合JS来操作。



      QQ二维码

    文章作者:hero2018
    本文地址:http://wanlimm.com/77201808066465.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.