小tips:HTML元素属性分类以及不常用属性介绍
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元素属性分类以及不常用属性介绍的更多相关文章
- 微信小程序之商品属性分类
所提及的购物数量的加减,现在说说商品属性值联动选择. 为了让同学们有个直观的了解,到电商网截了一个图片,就是红圈所示的部分 现在就为大家介绍这个小组件,在小程序中,该如何去写 下图为本项目的图: wx ...
- JQ方法实用案例///鼠标移动到div和修改ipt中弹窗、CSS鼠标变小手、JQ获取元素属性、JQ选择器
今天学习了jQ,jQ对js的帮助很大,菜鸟教程上也有属性.可以查看 js 和 jquery主要的区别 在 dom 想用jquery 必须先引入(顺序问题) 先css 再js: ...
- 微信小程序——获取元素的宽高等属性
微信小程序里面无法像用jquery一样获取到元素的节点.小程序提供了一个wx.createSelectorQuery()来获取元素的相关信息.官方的文档对于它的用法都已经写的很详细了. 我直接上在项目 ...
- 你不知道的JavaScript--Item17 循环与prototype最后的几点小tips
1.优先使用数组而不是Object类型来表示有顺序的集合 ECMAScript标准并没有规定对JavaScript的Object类型中的属性的存储顺序. 但是在使用for..in循环对Object中的 ...
- 最近工作的一点小tips
最近工作比较忙,但也积累了一些小tips,比较杂,不成系统,也并不很深入,就开一篇笼统的先记录一下,以后再深入挖掘. 1.-webkit-tap-highlight-color -webkit-tap ...
- HTML元素以及HTML元素的分类
HTML元素以及HTML元素的分类 html标签又叫做html元素,它分为块级元素和内联元素(也可以叫做行内元素),都是html规范中的概念 块级元素 含义:块级元素是指本身属性为display:bl ...
- 小tips: zoom和transform:scale的区别
小tips: zoom和transform:scale的区别 转自 张鑫旭 前端大神 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://w ...
- 前端防错以及好用小tips指南总结
@前端防錯以及好用小tips指南總結 1.一般情況下我們接收到的都是對象格式,某些情況下,需要接到後端傳過來的奇怪的字符串格式的JSON,需要解析成對象,但是有時候他們傳過來的格式有問題,會報錯 解決 ...
- css属性分类介绍
css属性分类介绍 CSS分类目录 文本/字体/颜色 文本相关 字体相关 颜色相关 背景相关 大小/布局 大小属性 margin 外边距 padding 内边距 border 边框 position ...
- 小tips:JS之浅拷贝与深拷贝
浅拷贝: function extendCopy(p) { var c = {}; for (var i in p) { c[i] = p[i]; } return c; } 深拷贝: functio ...
随机推荐
- git 怎么将某个开发分支最近几次的提交合并成一次提交
1. 切换到开发分支: git checkout dev 2. 运行交互式 rebase 命令,并指定要合并的提交数量(在这个例子中是最近的3次提交): git rebase -i HEAD~3 3. ...
- 基于Java+Spring+Vue仓储出入库管理系统设计和实现
\n文末获取源码联系 感兴趣的可以先收藏起来,大家在毕设选题,项目以及论文编写等相关问题都可以给我加好友咨询 系统介绍: 网络的广泛应用给生活带来了十分的便利.所以把仓储出入库管理与现在网络相结合,利 ...
- [oeasy]python0066_控制序列_光标位置设置_ESC_逃逸字符_CSI
光标位置 回忆上次内容 上次讲了 三引号的输出 三引号中 回车和引号 都会 被原样输出 \ 还是需要从 \\转义 黑暗森林 快被摸排清了 还有哪个 转义序列 没 研究过吗? \e是 干什么的? 回忆转 ...
- oeasy教您玩转vim - 46 - # 范围控制
范围控制 回忆上节课内容 这次我们主要就是看命令行 首先是选择一个 [range] 这个范围 然后进行相应的操作 :11,30d :2,7y 还可以指定寄存器 :"a3,40y :&qu ...
- 一步一步分析HTTPS加密机制
一步一步分析HTTPS加密机制 HTTPS(SSL/TLS)的加密机制虽然是大家都应了解的基本知识, 但是更多的时候我们只是在背诵一些概念, 比如: "对称加密", "非 ...
- 句子成分&分类 被动
句子成分&分类 简单句的两个主要句子成分,分别是主语 + 谓语 谓语的核心是谓语动词 谓语 不等于 谓语动词 主语 谓语 [The rabbit] [ate a carrot] ate 为谓语 ...
- 12、SpringMVC之拦截器
12.1.环境搭建 创建名为spring_mvc_interceptor的新module,过程参考9.1节和9.5节 12.1.1.页面请求示例 <a th:href="@{/test ...
- 【Uni-App】page.json 配置项一栏笔记
官方文档 https://uniapp.dcloud.io/collocation/pages 一些配置项是全局的,也可以在页面对象中设置 { "pages": [ //pages ...
- python3解析wav文件获取dtmf值
操作系统 :Windows 10_x64 Python版本:3.9.2 从事FreeSwitch相关工作,大概率会遇得到DTMF,DTMF的传递方式有三种: In-band RFC2833 SIP-I ...
- window系统使用经验:新买的window11初始化时最好要选择用Microsoft账户激活,而不要用local账户激活
Windows系统初始化时有两种类型的账户可以选择,一种时Microsoft账户,一种时local账户,Microsoft账户需要联网初始化,而local账户则和传统的初始化方式一致,即账号信息保存在 ...