HTML5 新增通用属性

一:HTML5保留的常用元素

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

[html] view plaincopyprint?

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

[html] view plaincopyprint?

  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        具有继承性

[html] view plaincopyprint?

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

[html] view plaincopyprint?

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

[html] view plaincopyprint?

  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>
时间： 2024-08-07 14:12:21

HTML5 新增通用属性的相关文章

全栈JavaScript之路（十七）HTML5 新增字符集属性

HTML5 增加了几个文档字符集属性. document.charset : 表示文档的实际使用的字符集. document.defaultCharset: 表示默认的字符集,跟浏览器以及操作系统设置有关. 如果文档没有使用默认字符集,那么 document.charset 与 document.defaultCharset 可能不同. 设置文档字符集: 但可以通过<meta>元素.响应头部或直接设置charset 属性修改这个值.来看三个例子. <meta http-equiv=&qu

HTML5新增的属性与元素

1.form属性 html5为表单控件新增了form属性,用于定义该表单控件所属表单,该属性的值应该是它所属表单的id 2.formaction属性 这是一个十分实用的属性,如果页面中有一个表单,表单中有两个以上的提交按钮,但程序需要不同的按钮提交到不同的action. 3.formxxx属性 formxxx属性是与formaction极为相似的属性包括 formenctype 可以让按钮动态地改变表单的enctype属性 formmethod可以让按钮动态地设置表单以post或get form

HTML5新增的属性与元素（二）

1.功能丰富的input元素 color:让<input.../>元素生成一个颜色选择器 date:让<input.../>元素生成一个时间选择器 time:让<input.../>元素生成一个时间选择器 datetime:让<input.../>元素生成一个UTC日期.时间选择器 datetime-local:让<input.../>元素生成一个本地日期.时间选择器 week:让<input.../>元素生成一个供用户选择第几周的文

HTML5新增的属性和废除的属性

HTML5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 新增的属性 1.表单相关的属性 对input(type=text).select.textarea与button指定autofocus属性.它以指定属性的方式让元素在画面打开时自动获得焦点. 对input(type=text).textarea指定placeholder属性,它会对用户的输入进行提示,提示用户可以输入的内容. 对input.output.select.textarea.button与fieldset指定form

html5新增的属性和废除的属性简要概述

HTML5中,在新增加和废除很多元素的同时,也增加和废除了很多属性.鞍山皮肤病科在哪www.0412pfk.net 新增的属性 1.表单相关的属性 对input(type=text).select.textarea与button指定autofocus属性.它以指定属性的方式让元素在画面打开时自动获得焦点. 对input(type=text).textarea指定placeholder属性,它会对用户的输入进行提示,提示用户可以输入的内容. 对input.output.select.textare

HTML5新增常用属性

一. 代码名称语义化的好处 1.能让搜索引擎更好的收录 2.对于特殊设备如盲人设备好解析 二.article和section的区别 article(文章):独立且能被外部引用 section(章节.段落):不独立,不能被外部引用 三. css3常用的新增属性 可以下拉的输入框 datalist 2.图片加载figure 3.音频audio 不支持播放 autoplay:准备就绪后播放 controls:音频控件 4.css2布局分为盒模型.可视化模型 其中盒模型包括:块级.BFC(块级元素格式化

HTML5新增标签属性

----- 新类型表单 - email 自动校验输入的是不否是email 邮箱:<input type="email" name="user_email" /> - url 自动将提交数据变为Url 我的主页:<input type="url" name="user_url" /> - number 输入数字 金额:<input type="number" name="

Html5新增的属性-querySelector

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>querySelector/querySelectorAll</title> </head> <body> <div> <ul> <li class="item">item1&l

html5新增全局属性

data-* 如:data-type,data-role等 hidden  <div hidden></div> 隐藏该div spellcheck <textarea spellcheck></spellcheck> 可以检测你输入的单词是否正确 tabindex <input tabindex="1" /> 按tab键可以切换光标在哪个输入框 contenteditable  <p contenteditable=&