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 (resolution:300dpi)">HTML5 a media attribute.</a>
area下的hreflang, type, rel属性
为了保存和a元素以及link元素的一致性,area元素增加了hreflang, type, rel等属性。
属性 |
值 |
描述 |
hreflang |
language_code |
规定目标 URL 的语言 |
media |
media query |
规定目标 URL 是为何种媒介/设备优化的 |
rel |
alternate, author, bookmark, external, help, license, next, nofollow, noreferrer, prefetch, prev, search, sidebar, tag |
规定当前文档与目标 URL 之间的关系 |
type |
mime_type |
规定目标 URL 的 MIME 类型 |
base下的target属性
base下的target属性和a的target属性是一样的,目的很多老版本浏览器早就一起支持了。
注1:target必须在所有连接元素之前声明。
注2:如果声明多个,以第一个为准。
<!DOCTYPE html><html><head><title>This is an example for the <base> element</title><base href="http://www.example.com/news/index.html"></head><body><p>Visit the <a href="archives.html">archives</a>.</p></body></html>
点击上面的连接,将跳转到http://www.example.com/news/archives.html。
meta下的charset属性
charset是用来定义文档的encoding方式的,如果在XML里定义了该属性,则charset的值必须是不区分大小写的ASCII以便match UTF-8,因为XML文档强制使用UTF-8作为encoding方式的。
注:meta属性上的charset属性在XML文档里是不起作用的,仅仅是为了方便与XHTML直接互相迁移。
不能声明多个带有charset属性的meta元素。
在HTML4里,我们不得不这样定义:
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
在HTML5里,我们这样定义就行了:
<meta charset="ISO-8859-1">
autofocus属性
HTML5为input, select, textarea和button元素增加了一个autofocus属性(hidden的input不能使用),它提供了一种声明式的方式来定义当页面load以后,焦点自动作用于当前元素上。使用autofocus可以提高用户体验,比如我们在登录页面设置,页面load以后自动将焦点设置到用户名的textbox上。
<input maxlength="256" name="loginName" value="" autofocus><input type="submit" value="Login">
注1:一个页面声明一次autofocus属性。
注2:一个页面里不是必须要设置autofocus的。
placeholder属性
input和textarea元素新增加了placeholder属性,该属性是提升用户输入内容。当用户点击的时候,该内容文本自动消失,离开焦点并且值为空的话,再次显示。以前我们都是使用JavaScript代码来实现,其实蛮复杂的,有了placeholder属性就爽了,直接写成下面下这样的代码:
<input type="username" placeholder="请输入你的用户名">
form属性
form属性(不是<form>元素),是一个划时代的属性,它允许你将<form>表单里的表单控件声明在表单外门,只需要在相应的控件上设置form属性为指定的<form>表单的id就行了,不需要非得把元素声明在<form>元素里了,解放啦。
代码如下:
<label>Email:<input type="email" form="foo" name="email"></label><form id="foo"></form>
支持该属性的元素有:input, output, select, textarea, button, label, object和fieldset。
required属性
required属性是一个验证属性,表明该控件是必填项,在submit表单之前必须填写。可用的元素是:input, select和textarea(例外: type类型为hidden, image或类似submit的input元素)。
如果在select上使用required属性,那就得设置一个带有空值的占位符option。代码如下:
<label>Color: <select name=color required><option value="">Choose one<option>Red<option>Green<option>Blue</select></label>
fieldset下的disabled属性
当fieldset的设置disabled属性时,其所有的子控件都被禁用掉了,但不包括legend里的元素。name属性是用来脚本访问的。
代码1:
<form><fieldset name="clubfields" disabled><legend> <label><input type=checkbox name=club onchange="form.clubfields.disabled = !checked"> Use Club Card</label> </legend><p><label>Name on card: <input name=clubname required></label></p><p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p><p><label>Expiry date: <input name=clubexp type=month></label></p></fieldset></form>
当点击legend里的checkbox的时候,会自动切换fieldset子元素的disabled状态。
代码2:
<form><fieldset name="clubfields"><legend><label><input type="checkbox" name="club" onchange="form.clubfields.disabled = !checked"> Use Club Card</label></legend><p><label> Name on card:<input name="clubname" required></label></p><fieldset name="numfields"><legend><label><input type="radio" checked name="clubtype" onchange="form.numfields.disabled = !checked"> My card has numbers on it</label></legend><p><label> Card number:<input name="clubnum" required pattern="[-0-9]+"></label></p></fieldset><fieldset name="letfields" disabled><legend><label><input type="radio" name="clubtype" onchange="form.letfields.disabled = !checked"> My card has letters on it</label></legend><p><label> Card code:<input name="clublet" required pattern="[A-Za-z]+"></label></p></fieldset></fieldset></form>
在这个例子,当你外面的 "Use Club Card" checkbox没有选中的时候,里面的子控件都是被禁用的,如果选中了,两个radiobutton都可用了,然后可以选择哪一个子fieldset你想让它可用。
input下的新属性(autocomplete, min, max, multiple, pattern, step)
input下增加了几个用于约束输入内容的属性(autocomplete, min, max, multiple, pattern和step),目前只有部分浏览器支持required和autocomplete属性,其它属性尚未支持。
autocomplete 属性规定输入字段是否应该启用自动完成功能, 自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。
<form action="demo_form.asp" method="get" autocomplete="on"> First name:<input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> E-mail: <input type="email" name="email" autocomplete="off" /><br /><input type="submit" /></form>
注释:autocomplete 属性适用于 <form>,以及下面的 <input> 类型:text, search, url, telephone, email, password, datepickers, range 以及 color。
另外也可以声明一个list属性,用来和存放数据的datalist元素关联:
<form><label>Homepage: <input name=hp type=url list=hpurls></label><datalist id=hpurls><option value="http://www.google.com/" label="Google"><option value="http://www.reddit.com/" label="Reddit"></datalist></form>
当input为空的时候,双击它,就会弹出提示选项(选项内容就是定义的label(Google/Reddit))。选择一个label就会将对应的value地址更新到input里(目前FF支持)。
datalist的声明形式可以有多种:
<datalist id="breeds"><option value="Abyssinian"><option value="Alpaca"><!-- ... --></datalist>或者<datalist id="breeds"><label> or select one from the list:<select name="breed"><option value=""> (none selected)<option>Abyssinian<option>Alpaca<!-- ... --></select></label></datalist>
另外,当input的type为image的时候,input还支持width和height属性用来指定图片的大小。
转载于:https://www.cnblogs.com/TomXu/archive/2011/12/12/2269105.html
HTML5学习笔记简明版(6):新增属性(1)相关推荐
- Html5学习笔记1 元素 标签 属性
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- HTML5学习笔记简明版(10):过时的元素和属性
被遗弃的元素(Element) 这个小节里列出的元素在HTML5里将不再使用,现有文档升级到 HTML5的话能够使用一些替代方案.比如parser section 能够处理isindex 元素的功能. ...
- HTML5学习笔记简明版(10):废弃的元素和属性
废弃的元素(Element) 这个小节里列出的元素在HTML5里将不再使用.现有文档升级到 HTML5的话能够使用一些替代方案.比如parser section 能够处理isindex 元素的功能. ...
- HTML5学习笔记简明版(8):新增的全局属性
contenteditable属性 不论什么元素使用contenteditable属性的话,代表该元素是一个可编辑的区域. 用户能够改变元素的内容以及操作标记.比如: <pcontentedit ...
- HTML5学习笔记简明版(9):变化的元素和属性
改变的元素(Element) 下面元素在HTML5里的使用方法稍作改动以便能在web里更好的使用或者起到更大作用: 没有href属性的a元素将显示成一个占位符,并且a元素内部如今支持flow cont ...
- HTML5学习笔记简明版(4):新元素之video,audio,meter,datalist,keygen,output
video 通过<video>标签,我们可以抛弃最近不怎么讨好的Flash,直接在页面中播放视频文件.视频文件自然是最符合语义化的文件格式,但该元素标签同样支持音频与图片. 过去(及目前) ...
- HTML5学习笔记简明版(11):新API
HTMLDocument上的扩展 HTML5在DOM Level 2 HTML上扩展了一些HTMLDocument的接口. 这些接口在全部实现了Document接口的元素对象上进行了实现.HTML5在 ...
- HTML5学习笔记简明版(5):input的type超级类型
HTML5为input的type类型添加了多种枚举值,用来表达不同的意思.同事具有验证功能,假设格式不正确,浏览器将原始提供错误提示,堪称超级牛X啊,详细例如以下: Keyword Data type ...
- HTML5学习笔记简明版(3):新元素之hgroup,header,footer,address,nav
hgroup <hgroup> 标签用于对网页或区段(section)的标题进行组合. <hgroup><h1>Welcome to my WWF</h1&g ...
- HTML5学习笔记简明版(2):新元素之section,article,aside
section section元素描绘的是一个文档或者程序里的普通的section节,一般来说一个section包含一个head和一个content内容块.section可以表示成一个小节,或者tab ...
最新文章
- Java处理高并发、高负载类网站的优化方法
- tableau必知必会之运用本福德定律(Benford‘s law)验证数据真实性
- POJ2528的另一种解法(线段切割)
- 京瓷1020怎么打印自检页_[建筑]喷墨打印机如何打印自检页 详细
- Scalaz(1)- 基础篇:隐式转换解析策略-Implicit resolution
- “总有一天你会知道,因工作和别人翻脸有多蠢。”这句话有没有道理?
- 6.6 BERT家族02——sentence-BERT、BioBERT
- 上广电D2527彩电兴暗故障检修
- php 根据ip判断是否中国,PHP判断IP是中国IP还是外国IP
- 万年历 源码 php,万年历 PHP
- mil,mm与inch之间的转换
- windows cmd命令杀进程
- 怎么用电脑操控自己的手机 怎样用电脑控制手机?
- 易泊夏武离线车牌识别,车牌识别SDK
- TPshop商城——windows部署(保姆级)
- 职高计算机专业能考大学吗,为什么千万不要上职高 上职高能考大学吗
- 计算机改成音乐键位,让键盘变成你想要的样子:改键利器 Karabiner-Elements
- 神经网络编译器图层面IR
- 常规放大电路和差分放大电路
- UAP开发步骤详解(很详细哦)---②单据向导开发