HTML学习笔记(2) – 全局属性(Global Attributes)

今天我要学习HTML中的一类属性,叫做“Global Attributes”,全局属性。这类属性不属于特定的某些类型的元素,所有元素都可以有这些属性。

  • accesskey
  • class
  • contenteditable
  • data-*
  • dir
  • draggable
  • dropzone
  • hidden
  • id
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate

accesskey

这个属性,是给某个元素提供了一个快捷键来激活某个元素。

比方说某个页面含有已下超链接元素:

<a href = “https://www.cpboke.com” acesskey = “c”>陈攀个人网站</a>

那么在Chrome中,按alt + c就会打开这个超链接了。注:不同浏览器使用快捷键的方式是不一样的。

我个人认为这个属性的用处不是特别地大。

class

这个属性就很常见了。给具有相同表现的元素归成一个类。也可以使用这个属性让某个元素属于好几个类。

这个属性用处很大,我能想到的好处是,便于CSS以及方便具有相同表现的元素的重用。

contenteditable

这个也是我在自学HTML之前没有见过的一种属性。这个属性是告诉浏览器元素的可见部分(也就是开始标签和结束标签之间的那部分)是否可以被编辑(content-edit-able)。这个属性的值可以是true或者false。我感觉如果没有写这个属性,应该默认元素的内容是不可以被编辑的吧。

data-*

这个属性让用户能够为某个元素加上自定义的属性。贴上一个w3schools的代码作为例子:

data-*属性示例

这个时候如果我们点击Owl、Salmon或者是Tarantula。根据这里JS的代码,就会跳出一个框,告诉我们,Owl、Salmon或Tarantula是属于哪一个类型的动物。

dir

这个属性告诉我们元素的可见部分的输出方向。值可以是ltr(从左往右,left to right)、rtl(从右往左right to left)或者是auto(由浏览器自行判断)。

dragable

此属性告诉浏览器元素是否可以被拖动(感觉一般也是要和JS结合的,让这个元素被拖到某个地方的时候停住)。值可以是true、false或auto

dropzone

这个属性可以让元素被拖动时产生一个拷贝、移动或者是链接。但是目前主流的浏览器皆不支持此属性(比如说chrome、edge、firefox等等)。

hidden

这个属性的不用赋值。如果给元素赋予了这个属性,那么元素的可见部分将被隐藏。感觉也是要和JS结合在一起使用,在某种情况下释放出这个元素的可见部分。

id

这应该和class属性一样,是最常见的一种属性了。功能和class属性差不多。但是每个元素只能有一个唯一的标签。

lang

lang属性标记了元素可见部分的语言是什么。lang属性的值是各种语言的代码,如zh是中文、en是英文。

spellcheck

检查元素的拼写和语法错误(估计对中文应该是个鸡肋属性吧)。

可以检查的范围有:

  • 元素的输入文本部分
  • textarea的文本部分
  • 可编辑文本的部分(也就是contenteditable = “true”)

style

这个属性是引入内联CSS(inline css)。

tabindex

这个属性是给元素编号,然后按tab键可以依次选中某个元素。

title

给元素标记上标题。

translate

这也是一个不被主流浏览器支持的属性。

这个属性的值是yes和no。告诉浏览器,某个元素的内容是否应该被翻译。

你可能还喜欢

留下评论

电子邮件地址不会被公开。 必填项已用*标注