HTML5+CSS3+JS(第二课).HTML5保留的常用元素（三）和新通用属性

本文链接：https://blog.csdn.net/q339659207/article/details/25339651

html5+css3+jacascript

第二章:

一:HTML5保留的常用元素

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

<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>
<head>
 <title>框架栗子</title>
</head>
<body>
 <iframe src="www.baidu.com" width=400 height=300 />
</body>
</html>

二 : HTML5新增的通用属性

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

<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>
<head>
 <title>hidden</title>
</head>
<body>
 <div id="baidu" hidden="true">www.baidu.com</div>
 <button  οnclick="var baidu=document.getElementById('baidu');
  baidu.hidden=!baidu.hidden;">安安按钮</button>
</body>
</html>

哎。ie9这个属性不能用。好吧。不截图了。

4. spellcheck属性
对输入文本做拼写检测。

<html>
<head>
 <title>spellcheck</title>
</head>
<body>
 <textarea spellcheck="true" row="10" cols="40" >
 </textarea>
</body>
</html>

听说IE又不支持。哎。老IE了。
支持：Chrome、Opera、Safari
不支持：IE、Firefox

时间到了。睡觉。