HTML元素属性分类

全局属性和局部属性

属性可以分为两类:全局属性和局部属性。 其中全部元素都能使用的通用属性称为全局属性。只能运用在某些特定元素的属性,称为局部属性,例如form的action属性、textarea的rows属性等。

全局属性可简单分为5种,如下:

  • HTML4原有的全局属性accesskey、class、dir、hidden、id、lang、style、tabindex和title
  • HTML5新增的全局属性有contenteditable、contextmenu、draggable、dropzone和spellcheck
  • ARIA属性,即无障碍网页应用属性,也是一种全局属性。
  • 事件属性(event attribute),都是以“on”为前缀,例如onclick、onmousedown等。
  • 自定义属性(custome attribute),通常以“data-” 为前缀。

不常用属性介绍

下面对不常用的属性简单介绍下

1.accesskey(带有指定快捷键的超链接)

accesskey 属性规定激活(使元素获得焦点)元素的快捷键。

accesskey几乎所有浏览器均 accesskey 属性,除了 Opera。

<a href="http://www.w3school.com.cn/html/" accesskey="h">HTML 教程</a>

注释:请使用Alt + accessKey (或者 Shift + Alt + accessKey) 来访问带有指定快捷键的元素。

详细可参考《HTML accesskey 属性》

2.dir属性(规定元素内容的文本方向)

语法:

<element dir="ltr|rtl">
  • ltr:默认。从左向右的文本方向。
  • rtl:从右向左的文本方向。

详细可以参考《HTML dir 属性》

3.tabindex 属性

规定元素的 tab 键控制次序(当 tab 键用于导航时)

语法:

<element tabindex="number">

示例,带有指定 tab 键顺序的链接:

<a href="http://www.w3school.com.cn/" tabindex="2">W3School</a>
<a href="http://www.google.com/" tabindex="1">Google</a>
<a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>

几乎所有浏览器均 tabindex 属性,除了 Safari

详细可参考《HTML tabindex 属性》

4.dropzone 属性

规定在元素上拖动数据时,是否拷贝、移动或链接被拖动数据

语法:

<element dropzone="copy|move|link">

目前所有主流浏览器都不支持 dropzone 属性。

5.spellcheck 属性

规定是否对元素进行拼写和语法检查

可以对以下内容进行拼写检查:

  • input 元素中的文本值(非密码)
  • <textarea> 元素中的文本
  • 可编辑元素中的文本

语法:

<element spellcheck="true|false">

详细可参考:《HTML spellcheck 属性》

布尔属性

有一些属性比较特殊,既可以设置值,也可以不用设置,这种属性叫作布尔属性,常见的用checked,defer,disabled,readonly和selected等。例如在单选框中,有3种方式表示选中状态,如下代码:

<input type="radio" checked/>
<input type="radio" checked="checked"/>
<input type="radio" checked=""/>

当未设值时,只需将属性名写在开始标签中;当设置了值时,这个值不能是true或者false,只能是"checked"或空值。如果要取消选中,那么只能将这个属性从开始标签中移除,而不能设置为false或空值。

相关面试题

什么是Shadow DOM(影子中的DOM)?

Shadow DOM是浏览器的一种功能,能够自动添加子元素,例如audio元素(如下代码所示)在网页中能使用进度条、音量控制等功能,这些相关元素都是由浏览器自动生成。

<audio controls src="a.mp4"></audio>

元素属性src和href有何区别?

两者的功能不同。href能够建立一条通道,将当前文档和定义的资源连接起来。src是将定义的资源嵌入到当前文档中。

img元素中的title和alt属性有何区别?

title是全局属性,提供额外的提示信息,当鼠标滑动到该元素时,显示定义的提示。link和style元素中的title比较特殊,表示样式表的名称;alt是局部属性,仅可用在img、input等元素中,提供在图片未载入或加载失败时的替代文本。注意,只用当input元素的type属性为image时,才能使用alt属性。

小tips:HTML元素属性分类以及不常用属性介绍的更多相关文章

  1. 微信小程序之商品属性分类

    所提及的购物数量的加减,现在说说商品属性值联动选择. 为了让同学们有个直观的了解,到电商网截了一个图片,就是红圈所示的部分 现在就为大家介绍这个小组件,在小程序中,该如何去写 下图为本项目的图: wx ...

  2. JQ方法实用案例///鼠标移动到div和修改ipt中弹窗、CSS鼠标变小手、JQ获取元素属性、JQ选择器

    今天学习了jQ,jQ对js的帮助很大,菜鸟教程上也有属性.可以查看 js 和 jquery主要的区别 在 dom    想用jquery  必须先引入(顺序问题)        先css 再js:   ...

  3. 微信小程序——获取元素的宽高等属性

    微信小程序里面无法像用jquery一样获取到元素的节点.小程序提供了一个wx.createSelectorQuery()来获取元素的相关信息.官方的文档对于它的用法都已经写的很详细了. 我直接上在项目 ...

  4. 你不知道的JavaScript--Item17 循环与prototype最后的几点小tips

    1.优先使用数组而不是Object类型来表示有顺序的集合 ECMAScript标准并没有规定对JavaScript的Object类型中的属性的存储顺序. 但是在使用for..in循环对Object中的 ...

  5. 最近工作的一点小tips

    最近工作比较忙,但也积累了一些小tips,比较杂,不成系统,也并不很深入,就开一篇笼统的先记录一下,以后再深入挖掘. 1.-webkit-tap-highlight-color -webkit-tap ...

  6. HTML元素以及HTML元素的分类

    HTML元素以及HTML元素的分类 html标签又叫做html元素,它分为块级元素和内联元素(也可以叫做行内元素),都是html规范中的概念 块级元素 含义:块级元素是指本身属性为display:bl ...

  7. 小tips: zoom和transform:scale的区别

    小tips: zoom和transform:scale的区别 转自 张鑫旭 前端大神 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://w ...

  8. 前端防错以及好用小tips指南总结

    @前端防錯以及好用小tips指南總結 1.一般情況下我們接收到的都是對象格式,某些情況下,需要接到後端傳過來的奇怪的字符串格式的JSON,需要解析成對象,但是有時候他們傳過來的格式有問題,會報錯 解決 ...

  9. css属性分类介绍

    css属性分类介绍 CSS分类目录 文本/字体/颜色 文本相关 字体相关 颜色相关 背景相关 大小/布局 大小属性 margin 外边距 padding 内边距 border 边框 position ...

  10. 小tips:JS之浅拷贝与深拷贝

    浅拷贝: function extendCopy(p) { var c = {}; for (var i in p) { c[i] = p[i]; } return c; } 深拷贝: functio ...

随机推荐

  1. .NET 9 预览版 5 发布

    微软在6月发布了.NET 9预览版的第五个版本.这个新版本的框架预计将在今年晚些时候正式发布,它是一个标准支持(STS)版本,将在2024年11月12日至2026年5月12日期间在多个操作系统上获得1 ...

  2. 介绍几款强大实用的 IDEA 插件,助力大家开发【工欲善其事必先利其器】

    俗话说:"工欲善其事必先利其器",本问介绍几款强大实用的 IDEA 插件,助力大家开发. 希望大家做一个聪明又努力的人,而不只是一个努力的人. Alibaba Java Codin ...

  3. [oeasy]python0097_苹果诞生_史蒂夫_乔布斯_沃兹尼亚克_apple_I

    苹果诞生 回忆上次内容 上次时代华纳公司 凭借手中的影视ip和资本 吞并了雅达利公司 此时 雅达利公司 曾经开发过pong的 优秀员工 乔布斯 还在 印度禅修 寻找自我 看到游戏行业 蓬勃发展 乔布斯 ...

  4. C# 泛型SQLHelper<T>类

    示例[1] 1.创建SQLHelper类 using System.Collections.Generic; using System.Configuration; using System.Data ...

  5. CRC 循环冗余效验

    CRC循环冗余效验 利用多项式 x6 + x4 + x3,实际为使用模2除法来做的加密 常用crc多项式有 名称 生成多项式 数值式 简记式 标准引用 CRC-4 x4+x+1 0x1'3 0x3 I ...

  6. 【译】宣布三项新的高级 Visual Studio 订阅者福利

    Visual Studio 订阅(无论是专业版还是企业版)提供的不仅仅是软件使用权:这是一个全面的工具包,旨在显著提高您的开发能力和职业发展.这些订阅每年可以为您节省数千美元,提供各种服务,从每月用于 ...

  7. 浪潮计算平台之AI方向——AI_Station开发环境的使用总结

    概览: 1.   开发环境 使用默认的设置,不改挂载路径: 可以看到在容器内对挂载的目录进行文件操作是可以真实记录到实际的文件目录内的. 对挂载路径的另一种设置: 不使用默认的设置,手动更改挂载路径: ...

  8. 如果一个windows主机上插两个蓝牙适配器会如何???——由于 Windows 无法加载这个设备所需的驱动程序,导致这个设备工作异常。 (代码 31)——windows主机蓝牙适配器驱动错误排查

    事情是这样的,在某鱼上挂了一个蓝牙适配器,是自己多年前买的,给自己的老电脑用的,那一台老电脑主板上没有自带蓝牙,于是就在某东上买了一个蓝牙适配器: 但是这几年新买的电脑都自带蓝牙,于是准备把这个适配器 ...

  9. ubuntu系统grub修复(win+ubuntu双系统环境),修复无法启动问题 boot-repair

    相关: https://help.ubuntu.com/community/Boot-Repair ================================================== ...

  10. python绘图库matplotlib:刻度线的方向调整, in, out, inout

    前文相关: python绘图库matplotlib:画线的标志marker的设置--类型/size/空心/边线颜色及大小/显示marker超出边界部分 由于工作需要经常用matplotlib来绘图,但 ...