首页 > 技术文章 > HTML5 新增通用属性

liuruitao 2015-02-13 14:15 原文

一:HTML5保留的常用元素

7. 表格相关元素。表格在html里还算重要的了。   <table>  :用于表格定义。    cellpadding: 单元格内容和单元格边框距离    cellspacing: 单元格间距    width      : 表格宽度  <caption>: 表格标题最多只额能包含一个。  <thead>  : 表格头,可以有多个。  <tfoot>  : 表格脚。  <tbody>  : 表格体。值能包含<tr>  <tr>     : 行  <td>     : 列    colspan: 单元格跨多少个列    rowspan: 单元格跨多少个行    height : 单元格高度    width  :单元格宽度  <th>     : 页眉a  栗子

  1. <html>  
  2. <head>  
  3.  <title>表格栗子</title>  
  4. </head>  
  5. <body>  
  6.  <table border=1>  
  7.   <caption>学生升级表</caption>  
  8.   <tr>  
  9.    <th>姓名</th>  
  10.    <th>级数</th>  
  11.    <th>教练  
  12.   </tr>  
  13.   <tr>  
  14.    <td>小黄</td>  
  15.    <td>黑带一段</td>  
  16.    <td rowspan=2>大佬</td>  
  17.   </tr>  
  18.   <tr>  
  19.    <td>小红</td>  
  20.    <td>白带X段</td>  
  21.   </tr>  
  22.  </table>  
  23. </body>  
  24. </html>  
<html>
<head>
 <title>表格栗子</title>
</head>
<body>
 <table border=1>
  <caption>学生升级表</caption>
  <tr>
   <th>姓名</th>
   <th>级数</th>
   <th>教练
  </tr>
  <tr>
   <td>小黄</td>
   <td>黑带一段</td>
   <td rowspan=2>大佬</td>
  </tr>
  <tr>
   <td>小红</td>
   <td>白带X段</td>
  </tr>
 </table>
</body>
</html>

  8. 框架相关元素     html5删除了<frameset><frame><noframes>这3个标签。  <iframe> : 内联框架。可以显示网页或者别的。    src    : URL源  栗子

  1. <html>  
  2. <head>  
  3.  <title>框架栗子</title>  
  4. </head>  
  5. <body>  
  6.  <iframe src="www.baidu.com" width=400 height=300 />  
  7. </body>  
  8. </html>  
<html>
<head>
 <title>框架栗子</title>
</head>
<body>
 <iframe src="www.baidu.com" width=400 height=300 />
</body>
</html>

二 : HTML5新增的通用属性

1. contentEditable 允许开发人员直接编辑HTML元素内容的开关量。true:false        具有继承性

  1. <html>  
  2. <head>  
  3.  <title>ContentEditable</title>  
  4. </head>  
  5. <body>  
  6.  <div contentEditable="true">  
  7.   <table border=1>  
  8.    <caption>学生升级表</caption>  
  9.    <tr>  
  10.     <th>姓名</th>  
  11.     <th>级数</th>  
  12.     <th>教练  
  13.    </tr>  
  14.    <tr>  
  15.     <td>小黄</td>  
  16.     <td>黑带一段</td>  
  17.     <td rowspan=2>大佬</td>  
  18.    </tr>  
  19.    <tr>  
  20.     <td>小红</td>  
  21.     <td>白带X段</td>  
  22.    </tr>  
  23.   </table>  
  24.  </div>  
  25. </body>  
  26. </html>  
<html>
<head>
 <title>ContentEditable</title>
</head>
<body>
 <div contentEditable="true">
  <table border=1>
   <caption>学生升级表</caption>
   <tr>
    <th>姓名</th>
    <th>级数</th>
    <th>教练
   </tr>
   <tr>
    <td>小黄</td>
    <td>黑带一段</td>
    <td rowspan=2>大佬</td>
   </tr>
   <tr>
    <td>小红</td>
    <td>白带X段</td>
   </tr>
  </table>
 </div>
</body>
</html>

    这样子表格就可以写了     2. designMode属性     相当于全局的contentEditable属性。所有东西都可以编辑。  (有点危险,可以拿网页来当写字板啦。)     3. hidden属性      可以把标签隐藏。很好理解吧。   栗子

  1. <html>  
  2. <head>  
  3.  <title>hidden</title>  
  4. </head>  
  5. <body>  
  6.  <div id="baidu" hidden="true">www.baidu.com</div>  
  7.  <button  onclick="var baidu=document.getElementById('baidu');  
  8.   baidu.hidden=!baidu.hidden;">安安按钮</button>  
  9. </body>  
  10. </html>  
<html>
<head>
 <title>hidden</title>
</head>
<body>
 <div id="baidu" hidden="true">www.baidu.com</div>
 <button  onclick="var baidu=document.getElementById('baidu');
  baidu.hidden=!baidu.hidden;">安安按钮</button>
</body>
</html>

 哎。ie9这个属性不能用。好吧。不截图了。     4. spellcheck属性     对输入文本做拼写检测。

  1. <html>  
  2. <head>  
  3.  <title>spellcheck</title>  
  4. </head>  
  5. <body>  
  6.  <textarea spellcheck="true" row="10" cols="40" >  
  7.  </textarea>  
  8. </body>  
  9. </html>  

推荐阅读