zoukankan      html  css  js  c++  java
  • HTML5--新增全局属性(1)

    前言:

      HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定,最初设计目的是为了在移动设备上支持多媒体

    HTML5初识:

      1.HTML5并不是新的语言,而是html语言的第五次重大修改

       2.版本支持:所有的主流浏览器都支持HTML5(chrome、firefox、safari......),IE9及以上支持HTML5(有选择性支持,并不是全部支持),但是IE8及以下不支持HTML5

       3.新增了多媒体:video、audio等,以往实现音频、视频的播放需要使用flash,一方面苹果不支持flash,另一方面flash在移动端并不友好。

       4.增加了很多的新特性:语义特性、本地存储、多媒体、二维/三维、文件API、地图等,在后面课程依次学习。

    HTML5新增全局属性:

      1.contentEditable属性

        功能:设置元素是否可被编辑

        取值:默认为true

          true -- 表示元素可被编辑

          false -- 表示元素不可被编辑

        属性继承:

          当子元素没有显示设置值,那么子元素编辑状态继承父元素的contentEditable状态

        示例: 

        <h2>可编辑列表</h2>
        <ul contenteditable>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
        </ul>

        运行结果子元素li继承ul的contenteditable属性可以进行编辑,当点击列表1时,光标就选中列表1的内容。

          

      2.designMode属性

        功能:设置整个页面是否可编辑

        取值只能在JavaScript中进行修改

          on -- 表示此页面允许修改

            页面中所有允许设置contenteditable属性的元素都可编辑

          off -- 表示此页面不允许修改

            页面中所有允许设置contenteditable属性的元素都禁止编辑

        示例:

        <h2>design Mode</h2>
        <ul>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
        </ul>
        <script>
            window.document.designMode = 'on'
        </script>

        运行结果:h2和ul(都可以设置contentEditable属相),都允许被修改

          

      3.hidden属性

        功能:通知浏览器不渲染该元素,使该元素处于隐藏状态

        取值:默认取值为true,且只能通过JavaScript代码修改hidden的值

          true -- 表示此元素不可见

          off -- 表示元素可见

        示例:

        <h2>hidden属性练习</h2>
        <ul hidden>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
        </ul>
    
        <script>
            document.getElementsByTagName('ul')[0].hidden = false
        </script>

        运行结果:通过JavaScript代码对hidden设置为false,ul元素不被隐藏

        

      4.spellcheck属性 

        功能:针对input和textarea元素输入的内容进行拼写和语法检查

        取值:默认为true

          true -- 表示进行拼写和语法检查

          false -- 表示不进行拼写和语法检查

        示例:

        <h2>spellCheck属性</h2>
        <input type="text" spellcheck="">

        运行结果:当文本框中单词拼错就会出现红色的下划线(效果图截不到,大家自行实验)

      5.tabindex属性   

        功能:通过点击tab键访问页面上的元素tableIndex表示被访问到的元素的索引

        取值:为number类型

          正数值 -- 表示正常访问的顺序

          -1-- 表示无法通过tab键获取到焦点

        示例:

        <a href="#" tabindex="1">hello1</a>
        <a href=# tabindex="3">hello3</a>
        <a href="#" tabindex="2">hello2</a>
        <ul tabindex="-1">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>

        运行结果:

          通过按tab键,先选中hello1接着是hello2,最后是hello3,由于ul的tableIndex设置为-1,通过tab键是访问不到的。

  • 相关阅读:
    mysql整理-常用sql语句
    WAMP中的mysql设置密码
    cmd中输入net start mysql 提示:服务名无效或者MySQL正在启动 MySQL无法启动
    “laravel.log” could not be opened: failed to open stream
    RESTful API 设计指南
    理解RESTful架构
    PHP:API 接口规范完整版本
    php的api接口
    laravel5.5部署
    《面向对象程序设计》课程作业二
  • 原文地址:https://www.cnblogs.com/diweikang/p/8546149.html
Copyright © 2011-2022 走看看