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">