《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
相关文章
|
6月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
transition过渡属性 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。 但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化, 让效果显得更加细腻。简单点说,就是通过鼠标经过、获得焦点,被点击或对元素任何改变中触发, 并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 在默认样式中声明元素的初始状态样式; 声明过渡元素最终状态样式,比如悬浮状态; 在默认样式中通过添加
346 1
|
6月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
transform变形 css3在原来的基础上新增了变形和动画相关属性,通过这些属性可以实现以前需要大段JavaScript才能实现的 功能。 CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换,这样的变换可以控制HTML组件 呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换,CSS3提供了transition动画。 transition动画比较简单,只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化,并指定动画时间,就可保证动画播放。 比transitio
333 0
|
6月前
|
前端开发 算法 Java
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
221 1
|
6月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
position定位(核心) 我们讲盒模型的时候,提到了3个属性可以用来控制页面排版。 三大属性:position属性,display属性,float属性。 position 属性控制页面上元素间的位置关系。 display 属性控制页面元素是否显示或者是堆叠还是并排显示。 float 属性提供控制方法。 通过float这种控制方法,可以实现多栏布局,导航菜单等等。 position属性是干嘛用的?怎么用?有哪些属性值? position属性控制页面上元素间的位置关系,也就是排版。 怎么用?要知道怎么用
619 1
|
6月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
继承 我们的CSS中很多的属性也是可以继承的,其中相当一部分是跟文字的相关的,比如说颜色、字体、字号。 当然还有一部分是不能继承的。 例如边框、内外边距。 层叠 层叠是CSS的核心机制。 层叠的工作机制: 当元素的同一个样式属性有多种样式值的时候,CSS就是靠层叠机制来决定最终应用哪种样式。 层叠规则: 层叠规则一:找到应用给每个元素和属性的声明。 说明:浏览器在加载每个页面时,都会据此查找到每条CSS规则, 并标识出所有受到影响的HTML元素。
233 1
|
移动开发 JavaScript 前端开发
HTML5 表单属性7
`pattern` 属性使用正则表达式验证 `<input>` 元素的值,适用于 `text`, `search`, `url`, `tel`, `email`, 和 `password` 类型。
|
移动开发 UED HTML5
HTML5 表单属性6
`min`、`max` 和 `step` 属性用于限制 `<input>` 标签中的数值或日期范围。例如,可以设置日期选择器的最早和最晚日期,或限制数字输入框的值范围。`multiple` 属性允许在 `<input>` 中选择多个值,适用于邮箱和文件类型。这些属性增强了表单控件的功能性和用户体验。
|
移动开发 HTML5
HTML5 表单属性4
`formnovalidate` 属性是一个布尔属性,用于 `<input>` 元素,指示该输入在表单提交时不需验证,可覆盖 `<form>` 元素的 `novalidate` 属性,常与 `type="submit"` 一起使用。示例中展示了如何通过两个提交按钮(一个使用验证,另一个不使用)实现不同的表单提交方式。
|
移动开发 HTML5
HTML5 表单属性5
`height` 和 `width` 属性用于 `<input>` 标签中的 `image` 类型,定义图像的高度和宽度。
|
移动开发 数据安全/隐私保护 HTML5
HTML5 表单属性8
`required`属性确保表单提交前输入框不能为空,适用于多种类型的 `<input>` 标签,如文本、邮箱、密码等。`step`属性则用于指定输入域中合法数值的间隔,常与`max`和`min`属性配合使用,适用于数字、日期等类型。例如,设置`<input type="number" step="3">`可使输入值以3为单位递增或递减。

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    444
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    346
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    333
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    221
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    443
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    619
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    908
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    233
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    743
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    409
  • 下一篇
    开通oss服务