HTML5+CSS3+JS(第二課).HTML5保留的常用元素(三)和新通用屬性

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
 
 時間到了。睡覺。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章