记不住就存下来---- HTML 5 新增通用属性


contentEditable  
如果属性设为 true ,那么浏览器允许开发者直接编辑 HTML 元素里的内容.
注意:此处 HTML 元素并非文本框,文本域等允许用户输入的表单元素,而是把<table../>,<div../>等元素变为可编辑元素.
同时 contentEditable具有可继承的特点.
除非显式指定 contentEditable = "false "

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>contentEditable</title>
</head>
<body>
  <!-- 直接指定 contentEditable = "true" 标明该元素是可编辑的-->
  <div contenteditable = "true" style = "width:500px;border:1px solid black">
    测试用文章
    <!--该元素集成父类的contentEditable属性,也是编辑的-->
    <table style="width:420px;border-collapse:collapse" border="1">
      <tr><td>TEST_1</td></tr>
      <tr><td>TEST_2</td></tr>
    </table>
  </div>
  <hr>
  <!-- 这个表格默认是不可编辑的,双击后变为可编辑状态-->
  <table id="target" ondblclick="this.contentEditable = true;" style="width:420px;border-collapse:collapse" border="1">
    <tr><td>test_1</td></tr>
    <tr><td>test_2</td></tr>
  </table>
</body>
</html>

记不住就存下来---- HTML 5 新增通用属性_第1张图片



designMode
 相当于一个全局的 contentEditable 属性,如果把整个页面的designMode 属性设为 ON 时, 该页面上所有支持contentEditable 属性的元素都变成可编辑状态; 该属性默认是关闭状态.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>designMode</title>
</head>
<body ondblclick="document.designMode = 'on';">
  <div>test</div>
  <table style="width:420px;border-collapse:collapse" border="1">
    <tr><td>test_1</td> <td>test_2</td></tr>
    <tr><td>test_3</td> <td>test_4</td></tr>
  </table>
</body>
</html>




hidden
HTML 5 为所有元素都提供了一个 hidden 属性,这个属性支持 true,false 两个属性值.一旦把某个 HTML 元素 hidden 设为 true , 就意味着通知浏览器不现实该控件,浏览器也不会保留该组件所占的空间.
注释: hidden 属性可以替代 CSS 样式单中的 display 属性,设置 hidden= “true” 相当于在 CSS 中设置 display:none.





spellcheck
HTML 为 <input../>,<textarea../>等元素增加了 spellcheck 属性.该属性可以支持 true , false 两个属性值,如果设置 spellcheck= “true” , 浏览器会负责对用户输入的文本执行输入检查,如果检查不通过,浏览器会对拼错的单词进行提示.
注释:支持 spellcheck 的浏览 , chrome , Opera 和 Safari.



记不住就存下来---- HTML 5 新增通用属性_第2张图片记不住就存下来---- HTML 5 新增通用属性_第3张图片

你可能感兴趣的:(html,5,新增通用属性)