HTML5 学习

1.details元素

　　details元素标识用户要求得到并且可以得到的细节信息，用于描述文档或文档某个部分的细节。它可以与summary元素配合使用。summary元素提供标题或图例。标题是可见的，用户点击标题时，会显示出细节信息，也就是details里面定义的信息。

<details>
<summary>HTML 5</summary>
This document teaches you how to learn about HTML 5
</details>

2.datalist元素

<datalist> 元素定义选项列表，与 input 元素配合使用，用来定义 input 可能的值，制作出输入值的下拉列表

请使用 input 元素的 list 属性来绑定 datalist。

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

3.menu元素

<menu> 元素定义命令的列表或菜单。

<menu> 元素用于上下文菜单、工具栏以及用于列出表单控件和命令。

<menu type="toolbar">
 <li>
  <menu label="File">
   <button type="button" onclick="file_new()">新建</button>
   <button type="button" onclick="file_open()">打开</button>
   <button type="button" onclick="file_save()">保存</button>
  </menu>
 </li>
</menu>
<menu>
<li><input type="checkbox"/>Blue</li>
<li><input type="checkbox"/>Red</li>
</menu>

4.新增的input元素的类型

　　HTML 5中新增了很多input元素的类型，如下：

　　email：email类型表示必须输入E-mail地址的文本输入框

　　url：url类型标识必须输入URL地址的文本输入框

　　number：number类型表示必须输入数值的文本输入框

　　range：range类型表示必须输入一定范围内数字值的文本输入框

　　HTML5 拥有多个可供选取日期和时间的新输入类型：

• date - 选取日、月、年
• month - 选取月、年
• week - 选取周和年
• time - 选取时间（小时和分钟）
• datetime - 选取时间、日、月、年（UTC 时间）
• datetime-local - 选取时间、日、月、年（本地时间）

 5.全局属性

所谓全局属性是指可以对任何元素都使用的属性。

　　1.contentEditable.

　　该属性的主要功能是允许用户编辑元素中的内容。它是一个布尔值属性，可以指定为true或false。可编辑为true，反之为false。　　

<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>

　　编辑完元素的内容后，如果想要保存其中的内容，只能把该元素的innerHTML发送到服务器端进行保存，因为改变元素内容后该元素的innerHTML内容会随之改变。

　　2.designMode属性

　　designMode属性用来指定整个页面是否可编辑，当页面可编辑时，页面中任何支持上文所述的contentEditable属性的元素都变成了可编辑状态。designMode属性只能在JavaScript脚本里被编辑修改。该属性有两个值—“on”与“off”。属性被指定为“on”时，页面可编辑；被指定为“off”时，页面不可编辑。使用JavaScript脚本来指定designMode属性的方法如下所示：

document.designMode="on"

　　3.hidden属性

　　它的功能是通知浏览器不渲染该元素，使元素不可见。但是，在页面装载后允许使用JavaScript脚本将该属性取消，使元素内容变成可见状态。

　　4.spellcheck属性

　　spellcheck属性是HTML5针对input元素（type=text）与textarea这两个输入框提供的一个新属性，它用true和false来设定是否对用户输入的文章内容进行拼写检查。拼写检查结果的显示方法交给浏览器自己定义。

<textarea spellcheck="true">
<input type="text" spellcheck="true">

HTML5 学习,古老的榕树,5-wow.com