HTML5 新增通用属性

浏览数：21 / 时间：2015年06月09日

一:HTML5保留的常用元素

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

[html] view plain copy print ?

<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>

<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源栗子

[html] view plain copy print ?

<html>
<head>
<title>框架栗子</title>
</head>
<body>
<iframe src="www.baidu.com" width=400 height=300 />
</body>
</html>

<html>
<head>
 <title>框架栗子</title>
</head>
<body>
 <iframe src="www.baidu.com" width=400 height=300 />
</body>
</html>

二 : HTML5新增的通用属性

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

[html] view plain copy print ?

<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>

<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属性可以把标签隐藏。很好理解吧。栗子

[html] view plain copy print ?

<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>

<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属性对输入文本做拼写检测。

[html] view plain copy print ?