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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。