HTML5学习笔记简明版(8):新增的全局属性

contenteditable属性

不论什么元素使用contenteditable属性的话,代表该元素是一个可编辑的区域。

用户能够改变元素的内容以及操作标记。比如:

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

该属于有3种值可选:true, false和空字符,空字符代表true。

而对<iframe id="editor"></iframe>框架页面能够通过JS程序代码来实现:editor.document.designMode="on" 。

contextmenu属性

contextmenu属性用来指向一个作者提供的上下文文件夹,比如:

<form name="npc" action="">
 <label>Character name: <input type=text contextmenu=namemenu  required></label>
 <menu type=context id=namemenu>
  <command label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()">
  <command label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)">
 </menu>
</form>

data-*属性

开发者能够在不论什么元素上定义他们想要的不论什么属性,仅仅要他们在其之前加上 data- 的前缀,以此避免与未来的HTML版本号的冲突。asp.net MVC下的jQuery验证就是採用这样的方式。比如:data-val=”true”。

draggable和dropzone属性

draggable 和 dropzone 属性能够与新的拖放API一起使用。draggable为是否同意拖放,dropzone代表能够拖放到哪个区域。

<p draggable="true" dropzone="div1">test</p>

hidden属性

不显示定义了hidden属性的元素。但与表现层的比方tab切换隐藏图层不同。hidden后的元素针对全部的显示,比方屏幕阅读器。与form里的hidden域相似。

role和aria-*属性

HTML5把WAI-ARIA当作是合法的语言添加,用来做辅助作用。

spellcheck属性

spellcheck 属性规定是否对元素内容进行拼写检查。

比如:

<p contenteditable="true" spellcheck="true">这是可编辑的段落。请试着编辑文本。</p>
时间: 2024-11-08 01:39:09

HTML5学习笔记简明版(8):新增的全局属性的相关文章

[html5] 学习笔记-表单新增元素与属性

本节讲的是表单元素的form,formaction属性,frommethod,formenctype属性,formtarget,autofocus属性,required,labels属性. 1.form属性 在html4中,表单内的从属元素必须书写在表单内部,而在html5中,可以把他们书写在页面上任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以指定该元素从属于指定表单了. 以往的写法: 1 <body> 2 <form id="testform&q

HTML5学习笔记简明版(7):新增属性(2)

dirname属性 input 和 textarea 元素有了一个新元素 dirname,用于用户所设置的提交的方向性的控制(译注,即书写的方向性,ltr或rtl). <form action="addcomment.cgi" method=post> <p><label>Comment: <input type=text name="comment" dirname="comment.dir" requ

[html5] 学习笔记-表单新增的元素与属性(续)

本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indeterminate属性.Image提交按钮的宽高属性. 1.controls属性 在html5中,可以在标签内部放置一个表单元素,并且通过该标签的controls属性来访问该表单元素. 1 <body> 2 <script> 3 function setValue(){ 4 var label

HTML5学习笔记简明版(11):新增的API

HTMLDocument上的扩展 HTML5在DOM Level 2 HTML上扩展了一些HTMLDocument的接口.这些接口在全部实现了Document接口的元素对象上进行了实现. HTML5在里面也新添加了几个成员: getElementsByClassName():用class类获取元素.用这种方法能够查询不论什么带有class属性且带有符合该class參数值的元素和Document对象(比如:SVG和MathML). innerHTML:一种解析和序列化HTML/XML文档的方式,该

HTML5学习笔记简明版(6):新增属性(1)

a和area下的media属性 为了和link元素保存一致性,a元素和area元素也都增加了media属性,只有在href存在时菜有效.media属性的意思是目标 URL 是为何种媒介/设备优化的,默认值是all,详细语法规范请访问:http://dev.w3.org/csswg/css3-mediaqueries/#media0 代码示例: <a href="att_a_media.asp?output=print" media="print and (resolut

HTML5学习笔记一:新增主体结构元素

Dreamweaver快捷键: 属性面板:Ctrl+F3 新建文档:Ctrl+N 选择用网页查看:F12 新增的主体结构元素: section元素(例子如下): <!DOCTYPE HTML> <html> <body> <section> <h2>section元素使用方法</h2> <p> section元素用于对网站或应用程序中页面上的内容进行分块.</p> </section> </b

HTML5学习笔记简明版(5):input的type超级类型

HTML5为input的type类型添加了多种枚举值,用来表达不同的意思.同事具有验证功能,假设格式不正确,浏览器将原始提供错误提示,堪称超级牛X啊,详细例如以下: Keyword Data type hidden 随意字符 text 单行文本 search 单行文本 tel 单行文本 url 绝对地址 email 一个或多个email地址 password 单行文本 datetime 带有时区的时间 date 无时区的年月日时间 month 无时区的年月 week 无时区的周数 time 无时

HTML5学习笔记简明版(9):变化的元素和属性

改变的元素(Element) 下面元素在HTML5里的使用方法稍作改动以便能在web里更好的使用或者起到更大作用: 没有href属性的a元素将显示成一个占位符,并且a元素内部如今支持flow content类型的元素了(比如:article, input, span等). address能够被article, aside, nav, section限定范围了,曾经只能作用于全局范围. b元素如今描写叙述为在普通文章中仅从文体上突出的不包括不论什么额外的重要性的一段文本. 比如:文档概要中的key

HTML5学习笔记简明版(2):新元素之section,article,aside

section section元素描绘的是一个文档或者程序里的普通的section节,一般来说一个section包含一个head和一个content内容块.section可以表示成一个小节,或者tab页面里的一个tab下的box块.一个页面里可以拆分成多个section,分别代表introduction, news items和contact information. 如果元素的内容集中到一起显示可以表达相应的意思的话,那就可以定义成article元素,而没必要使用section元素. sect