《HTML 5与CSS 3 权威指南(第3版·上册)》——2.3 新增的属性和废除的属性

简介:

本节书摘来自华章出版社《HTML 5与CSS 3 权威指南(第3版·上册)》一 书中的第2章,第2.3节,作者:陆凌牛,更多章节内容可以访问云栖社区“华章计算机”公众号查看。

2.3 新增的属性和废除的属性

在HTML 5中,在增加和废除很多元素的同时,也增加和废除了很多属性,本节对于这些增加和废除的属性进行简单介绍。

2.3.1 新增的属性

1.?表单相关的属性
新增的与表单相关的元素如下:
可以对input(type=text)、select、textarea与button元素指定autofocus属性。它以指定属性的方式让元素在画面打开时自动获得焦点。
可以对input元素(type=text)与textarea元素指定placeholder属性,它会对用户的输入进行提示,提示用户可以输入的内容。
可以对input、output、select、textarea、button与f?ieldset指定form属性,声明它属于哪个表单,然后将其放置在页面上任何位置,而不是表单之内。
可以对input元素(type=text)与textarea元素指定required属性。该属性表示在用户提交的时候进行检查,检查该元素内一定要有输入内容。
为input元素增加了几个新的属性:autocomplete、min、max、multiple、pattern与step。同时还有一个新的list元素与datalist元素配合使用。datalist元素与autocomlete属性配合使用。multiple属性允许在上传文件时一次上传多个文件。
为input元素与button元素增加了新属性formaction、formenctype、formmethod、formnovalidate与formtarget,它们可以重载form元素的action、enctype、method、novalidate与target属性。为f?ieldset元素增加了disabled属性,用于把它的子元素设为disabled(无效)状态。
为input元素、button元素、form元素增加了novalidate属性,该属性可以取消提交时进行的有关检查,表单可以被无条件提交。
为所有可使用标签(label元素)的表单元素(包括非隐藏的input元素(type属性值不等于hidden)、button元素、select元素、textarea元素、meter元素、output元素、progress元素以及keygen元素)定义一个labels属性,属性值为一个NodeList对象,代表该元素所绑定的标签元素所构成的集合。
可以在标签(label元素)内部放置一个表单元素,并且通过该标签的control属性访问该表单元素。
针对input元素与textarea元素,在HTML 5中增加SelectionDirection属性。当用户在这两个元素中用鼠标选取部分文字时,可以使用该属性来获取选取方向。当用户正向选取文字时,该属性值为“forward”,当用户反向选取文字时,该属性值为“backward”。当用户没有选取任何文字时,该属性值为“forward”。
对复选框(checkbox元素)添加indeterminate属性,以说明复选框处于“尚未明确是否选取”状态。
对类型为image的input元素添加用于指定图片按钮中图片高度的height属性与图片宽度的width属性。
对textarea元素新增用于限定可输入文字个数的maxlength属性与用于指定表单提交时是否在文字换行处添加换行符的wrap属性。
2.?链接相关的属性
新增的与链接相关的属性如下:
为a与area元素增加了media属性、download属性以及ping属性,其中media属性规定目标URL是为什么类型的媒介/设备进行优化的,download属性用于让用户下载目标链接所指向的资源,而不是直接打开该目标链接,这些属性均只能在href属性存在时使用。
为area元素增加了href?lang属性与rel属性,以保持与a元素、link元素的一致。
为link元素增加了新属性sizes。该属性可以与icon元素结合使用(通过rel属性),该属性指定关联图标(icon元素)的大小。
为base元素增加了target属性,主要目的是保持与a元素的一致性。
3.?其他属性
除了上面介绍的与表单和链接相关的属性外,HTML 5还增加了下面的属性:
为ol元素增加start属性与reversed属性,其中start属性定义列表的开始编号,reversed属性指定列表倒序显示。
为meta元素增加charset属性,因为这个属性已经得到广泛支持,而且为文档的字符编码的指定提供了一种比较良好的方式。
为menu元素增加了两个新的属性——type与label。label属性为菜单定义一个可见的标注,type属性让菜单可以以上下文菜单、工具条、与列表菜单三种形式出现。
为style元素增加scoped属性,用来规定样式的作用范围,譬如只对页面上某个树起作用。
为script元素增加async属性,它定义脚本是否异步执行。
为html元素增加属性manifest,开发离线Web应用程序时它与API结合使用,定义一个URL,在这个URL上描述文档的缓存信息。
为iframe元素增加三个属性——sandbox、seamless与srcdoc,用来提高页面安全性,防止不信任的Web页面执行某些操作。

2.3.2 废除的属性

HTML 4中的一些属性在HTML 5中不再使用,而是采用其他属性或其他方案进行替代,具体如表2-1所示。

309f309748c2377fa802b5f8d9209635dd2fa401

a0c365fe78eff8b708ec2befdce5011224632baa
相关文章
|
22小时前
|
Web App开发 存储 前端开发
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
|
1天前
|
前端开发 数据安全/隐私保护
从建站到拿站 -- HTML和CSS基础
从建站到拿站 -- HTML和CSS基础
6 0
|
2天前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
17 1
|
4天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
[HTML、CSS]知识点
34 0
[HTML、CSS]知识点
|
4天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节、经验
[HTML、CSS]细节、经验
28 0
[HTML、CSS]细节、经验
|
16天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML2、table表格标签
H5+CSS3+JS逆向前置——HTML2、table表格标签
14 0
|
16天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML1、H5文本元素
H5+CSS3+JS逆向前置——HTML1、H5文本元素
16 0
|
16天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML1、H5基础
H5+CSS3+JS逆向前置——HTML1、H5基础
21 0
|
18天前
|
前端开发 JavaScript UED
动态伸缩搜索框:HTML, CSS, JavaScript的完美结合
动态伸缩搜索框:HTML, CSS, JavaScript的完美结合
24 1
|
19天前
|
前端开发 开发者
「提高你的CSS技能」:15个重要的CSS属性详解
这篇文章介绍了15个重要的CSS属性,旨在提高读者的CSS知识和技能。文章以清晰的方式解释了每个属性的作用和用法,并提供了相应的示例代码。通过这篇文章,读者可以了解到一些有趣且实用的CSS属性。

相关实验场景

更多