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. 基于FileZilla上传、下载服务器数据的方法

      本文介绍FileZilla软件的下载.配置与使用方法.   在之前的博客中,我们提到了下载高分遥感影像数据需要用到FTP(文件传输协议,File Transfer Protocol)软件FileZ ...

  2. Java开发环境配置(IDEA系列)

    一.IDEA安装和破解,JDK1.8 以上或JDK 16 下一步下一步,安装jdk配置环境变量: 二.Maven安装 和IDEA集成Maven IDEA 配置 Maven 环境 1.选择 IDEA中 ...

  3. 开启GitLab的邮件通知功能以及一些外观配置

    前言 维护GitLab的同事离职了 刚好又有新实习生需要申请账号 只能我来出手了 其实之前安装了 GitLab 之后一直还是用得比较粗糙的 属于是勉强能用的水平,有些配置都还没改好 这次把邮件功能.域 ...

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

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

  5. nginx灰度发布、网站限速和防盗链

    一.灰度发布(金丝雀发布) 灰度发布时使用比较平稳的过渡方式升级或者替换产品项目的方法统称 主要作用 及时发现项目问题 尽早获取用户反馈的信息,以改进产品 如果项目产生问题,可以将问题影响控制到最小范 ...

  6. 打开电脑属性 设置 windows

    组合键:win+R,输入sysdm.cpl,然后运行. 右键"此电脑",选择属性,然后点击高级系统设置. 组合键:win+Pause/Break. 在命令提示符中输入SystemP ...

  7. hive测试数据洗刷

    hive测试--HIVE数据分析 测试使用虚拟机中的hive 环境:虚拟机+jdk+hadoop+hive+mysql 题目: 1.数据导入:    要求将样表文件中的(sales_sample_20 ...

  8. 【Vue】NPM构建的一些问题解决

    9418端口已经不再支持未授权的GIT协议 C:\Users\Administrator\Desktop\wss-taskcore-web>npm install npm ERR! Error ...

  9. 【官网链接】 REPRODUCIBILITY —— pytorch的可复现性

    官网链接地址: https://pytorch.org/docs/stable/notes/randomness.html ====================================== ...

  10. Linux系统——删除用户命令

      背景: 负责管理实验室的服务器,近期有保研的大三同学放弃保送到实验室而选择其他实验室,因此需要把之前给他开的账号取消掉. ===================================== ...