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" required></label></p>
 <p><button name="mode" type=submit value="add">Post Comment</button></p>
</form>

用户提交的时候,浏览器会接收到3个参数,分别是:comment, comment.dir和mode,类似下面这样:comment=Hello&comment.dir=ltr&mode=add

如果是阿拉伯文的浏览器,输入的是阿拉伯文??????的话,那传回的参数就应该是这样的:

comment=%D9%85%D8%B1%D8%AD%D8%A8%D9%8B%D8%A7&comment.dir=rtl&mode=add

textarea下的maxlength和wrap属性

textarea新增的maxlength和input的maxlength是一样的,都是限制最大长度的。

新增的wrap属性为枚举值(soft/hard),意思分别是:

  • hard:自动硬回车换行,换行标记一同被传送到服务器中去,必须与cols同时使用才能判断多少字符换行;
  • soft:自动软回车换行,换行标记不会传送到服务器中去

form下的novalidate属性

新增属性novalidate的意思是允许form表单不验证即可提交(不用管form里的元素是否有验证条件,例如required, min, max等)。

例子代码:

<form action="demo_form.asp" novalidate="novalidate">
  E-mail: <input type="email" name="user_email" />
  <input type="submit" />
</form>

还有一种用法是,同一个form里有多个submit按钮,可以针对某个按钮设置formnovalidate属性来忽略验证,例如:

<form action="editor.cgi" method="post">
 <p><label>Name: <input required name=fn></label></p>
 <p><label>Essay: <textarea required name=essay></textarea></label></p>
 <p><input type=submit name=submit value="Submit essay"></p>
 <p><input type=submit formnovalidate name=save value="Save essay"></p>
 <p><input type=submit formnovalidate name=cancel value="Cancel"></p>
</form>

该form只有在点击Submit essay按钮的时候才验证表单,另外2个按钮不验证。

input与button下的新属性

input和button元素新增加了几个新属性(formaction, formenctype, formmethod, formnovalidate和formtarget),如果这些设置这些属性的话,那所对应的form属性值将被覆盖,即input或button所属的form元素的action, enctype, method, novalidate和target属性的值将被覆盖。

例子代码:

<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
<input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit" />
</form>

<form action="demo_form.asp" method="get">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  <input type="submit" value="Submit" /><br />
  <input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
</form>

<form action="demo_form.asp" method="get">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
<input type="submit" formtarget="_blank" value="Submit" />
</form>

menu下的type和label属性

menu 元素有了两个新属性:type 和 label。它们允许元素转化成典型用户界面里的菜单,并结合全局 contextmenu 属性提供上下文菜单。

style下的scoped属性

style 元素有了一个新的 scoped 属性,用来启用限定作用范围的样式表。在一个这样的 style 元素里的样式规则只应用到当前style元素的父元素根下的子树,即兄弟树。

<!-- 这个article正常使用head里声明的style -->
 <article>
    <h1>Blah Title Blah</h1>
    <p>Blah blah article blah blah.</p>
</article>

<article>
    <!-- 这里声明的style只能让该article以及子元素使用 -->
    <style scoped>
        h1 { color: hotpink; }
        article { border: solid 1px hotpink; }
    </style>
    <h1>Blah Title Blah</h1>
    <p>Blah blah article blah blah.</p>
</article>

script下的async属性

async属性可以让script加载的脚步异步执行(即必须是src引用文件的形式才可以用),例如:

<script type="text/javascript" src="demo_async.js" async="async"></script>

有多种执行外部脚本的方法:

  1. 如果 async="async":脚本相对于页面的其余部分异步执行(当页面继续进行解析时,脚本将被执行)
  2. 如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行
  3. 如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本

html下的manifest属性

html 元素有了一个新属性 manifest,指向一个用于结合离线Web应用API的应用程序缓存清单。

首先,需要先创建manifest文件

CACHE MANIFEST
#This is a comment

CACHE #需要缓存的文件
index.html
style.css

NETWORK: #不需要缓存的文件
search.php
login.php

FALLBACK: #资源不可用的情况下,重定向的地址
/api offline.html

然后加该文的地址加到html属性里:

<html manifest="/offline.manifest">

例子:http://www.mangguo.org/create-offline-html5-web-apps-in-5-easy-steps/

link下的sizes属性

link 元素有了一个新的属性 sizes。可以结合 icon 的关系(通过设置 rel 属性,可被用于如网站图示)一起使用来表明被引用图标的大小。因此允许了不同的尺寸的图标。

例子代码:

<link rel="icon" href="demo_icon.gif" type="image/gif" sizes="16x16" />

ol下的reversed属性

ol 元素有了一个新属性 reversed。当其存在时,代表列表中的顺序为降序。

iframe下的sanddbox, seamless和srcdoc属性

iframe 元素有了三个新属性分别是 sandbox, seamless, 和 srcdoc,用以允许沙箱内容,例如,博客评论。

例子代码:

<iframe sandbox src="http://usercontent.example.net/getusercontent.cgi?id=12193"></iframe>
<iframe sandbox="allow-same-origin allow-forms allow-scripts"
        src="http://maps.example.com/embedded.html"></iframe>

Seamless:

<nav><iframe seamless src="nav.include.html"></iframe></nav>

video和audio的play属性

HTML5也使得所有来自HTML4的事件处理属性(那些形如 onevent-name 的属性)变成全局属性,并为其定义的新的事件添加了几个新的事件处理属性。比如,媒体元素(video 和 audio)API所使用的 play 事件。

版权声明:本文为博主http://www.zuiniusn.com 原创文章,未经博主允许不得转载。

时间: 2024-10-18 07:20:42

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

Html5学习笔记1 元素 标签 属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5学习笔记</title> </head> <body bgcolor="#90ee90"> 1.Html5的元素<br/><br/> 元素指的是从開始标签到结束标签的全部代码<

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

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

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

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

HTML5学习笔记简明版(10):过时的元素和属性

被遗弃的元素(Element) 这个小节里列出的元素在HTML5里将不再使用,现有文档升级到 HTML5的话能够使用一些替代方案.比如parser section 能够处理isindex 元素的功能. 以下的元素被废弃的原因是用CSS处理能够更好地替代他们: basefont big center font strike tt 以下的元素被废弃的原因是他们的使用破坏了可使用性和可訪问性: frame frameset noframes 以下的元素被废弃的原因是不常常使用他们,也会引起混乱,并且其

HTML5学习笔记简明版(10):废弃的元素和属性

废弃的元素(Element) 这个小节里列出的元素在HTML5里将不再使用.现有文档升级到 HTML5的话能够使用一些替代方案.比如parser section 能够处理isindex 元素的功能. 以下的元素被废弃的原因是用CSS处理能够更好地替代他们: basefont big center font strike tt 以下的元素被废弃的原因是他们的使用破坏了可使用性和可訪问性: frame frameset noframes 以下的元素被废弃的原因是不常常使用他们,也会引起混乱.并且其他

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

contenteditable属性 不论什么元素使用contenteditable属性的话,代表该元素是一个可编辑的区域. 用户能够改变元素的内容以及操作标记.比如: <p contenteditable="true">这是一段可编辑的段落.请试着编辑该文本.</p> 该属于有3种值可选:true, false和空字符,空字符代表true. 而对<iframe id="editor"></iframe>框架页面能够通过

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学习笔记简明版(9):变化的元素和属性

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

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

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