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

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

  1. HTML5新增的属性

    关于html5新增的属性: HTML5现在已经不是SGML的子集,主要是增加了关于图像,位置,存储,多任务等功能. 绘画CANVAS; 用于播放媒体的video和audio元素: 本地离线存储loca ...

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

    HTML5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 新增的属性 1.表单相关的属性 对input(type=text).select.textarea与button指定autofoc ...

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

    HTML5 添加�了几个文档字符集属性. document.charset : 表示文档的实际使用的字符集. document.defaultCharset: 表示默认的字符集,跟浏览器以及操作系统设 ...

  4. HTML5新增常用属性

    一. 代码名称语义化的好处 1.能让搜索引擎更好的收录 2.对于特殊设备如盲人设备好解析 二.article和section的区别 article(文章):独立且能被外部引用 section(章节.段 ...

  5. HTML5新增标签属性

    ----- 新类型表单 - email 自动校验输入的是不否是email 邮箱:<input type="email" name="user_email" ...

  6. html5新增全局属性

    data-* 如:data-type,data-role等 hidden  <div hidden></div> 隐藏该div spellcheck <textarea ...

  7. HTML5 学习总结（二）——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  8. HTML5 学习笔记（二）——HTML5新增属性与表单元素

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  9. HTML5新增标签与属性

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

随机推荐

  1. 以前用Delphi写的CSDN免积分下载器

    用了AlphaControl皮肤组件,原理很简单,就是CSDN的一个漏洞.我主要是使用WinInet来获取相关信息,然后从里面分析出真实的下载URL,同时我也是用了AES加密.function Get ...

  2. CC++初学者编程教程(13) 基于Oracle linux 的Oracle12c环境搭建

    1设置虚拟机选项 2 设置文件夹共享 3启动文件夹共享向导 4 设置共享文件夹 5 启用共享 6 关闭虚拟机设置 7 开启虚拟机 8 登陆帐户 9 看见虚拟机桌面 10 安装vmwaretools 1 ...

  3. 如何在Root的手机上开启ViewServer，使得HierachyViewer能够连接

    前期准备: 关于什么是Hierarchy Viewer,请查看官方文档:http://developer.android.com/tools/debugging/debugging-ui.html.个 ...

  4. poj1504--求两个数的反转数的和的反转数

    题意:给定4321 5678,结果再反转(1234+8756) 一开始以为是poj1503一样,就稀里糊涂的敲代码,实际上有不同 如题:先求1234 + 8765 ------------------ ...

  5. LINQ查询操作符 LINQ学习第二篇[转]

    一.投影操作符 1. Select Select操作符对单个序列或集合中的值进行投影.下面的示例中使用select从序列中返回Employee表的所有列: using (NorthwindDataCo ...

  6. 如风一样，飞翔------Day37

    我一直都觉得自己是个反应没有那么敏锐的人,而不幸的是其实也是,所以,在菜鸟的头衔上,我不得不再背负上一个笨鸟的"光芒".我不苛求一飞冲天的传奇,却也有着不甘寂寞的激昂,我选择先飞, ...

  7. asp.net中.ashx文件接参

    如果是在解决方案中的Web项目中创建.ashx文件,没有文件头,不能直接读取到html页面传来的参数值. 用context.Request["参数名"]来获取参数值. 用conte ...

  8. iCloud同步测试

    步骤一 在iPad上拍照A后,相机胶卷与照片流都出现照片A --> Mac上iCloud我的照片流内出现照片A --> iphone上我的照片流出现照片A 同理,在iphone拍摄照片B后 ...

  9. [LeetCode]题解（python）：150-Evaluate Reverse Polish Notation

    题目来源: https://leetcode.com/problems/evaluate-reverse-polish-notation/ 题意分析: 给定一个数组,用这个数组来表示加减乘除,例如 [ ...

  10. QT进度条QProgressBar的练习

    progressbar.h #ifndef PROGRESSBAR_H #define PROGRESSBAR_H #include <QProgressBar> class QStrin ...