[09]HTML基础之全局属性

1. id 属性

当前元素的唯一身份,应避免在多个元素中使用相同id值,多在javascript中用于引用该元素。

<div id="content">绝弹博客</div>
//在css中,用#+id值对该元素进行选择
<style>
    #id { color: red; }
</style>
//在js中,会自动为该元素生成,以该元素id值为名的全局变量
<script>
    content.onclick = function() { this.innerHTML = '欢迎关注绝弹'; }
</script>

2. class 属性

当前元素的类别,可在多个元素中使用相同的值,多用在css中进行样式赋值。

<p class="orange"> 我多想再见你,哪怕匆匆一眼就别离; </p>
<p class="orange">路灯下昏黄的剪影,越走越漫长的林径. </p>
<style> //在css中,用.+class值对该元素引用
    .orange { color: #ff6600; }
</style>

3. style 属性

当前元素的行内样式,里面的样式仅对该元素有效,且优先级更高。

//多个样式属性以分号分隔
<p style="background: #eaeaea; color: #ff6600;">不过游戏一场</p>

4. title 属性

当前元素的标题,鼠标悬浮在其上面会显示该标题。

//多用于解释或提示
<button title="点击按钮即可退出当前账户">退出</button>

5. dir 属性

文本方向,不过也适用于行内元素,效果相当于镜像后排列。

//从左往右(默认)
<p dir="ltr">香山碧云寺云碧山香</p>
//从右往左
<p dir="rtl">黄山落叶松叶落山黄</p>

6. lang 属性

当前元素所用的语言,常用于html元素上,表示整个文档所用的语言。

//英文en,简体中文zh_CN
<html lang="zh_CN">
    <head> ... </head>
    <body> ... </body>
</html>

7. tabindex 属性

当前元素的tab顺序,数值越小,优先级越高。

//按3次TAB键,光标会依次聚焦于第1个输入框,第2个输入框,第3个输入框
<input tabindex="1">
<input tabindex="3">
<input tabindex="2">

8. accesskey属性

当前元素的访问快捷键,按ALT+字母即可快速触发当前元素的点击动作。

//同时按下ALT+J键,会马上跳转到链接页面
<a href="http://www.juetan.cn" accesskey="j">绝弹博客</a>

9. data-***属性

当前元素的私有数据,与设置元素属性不一样的是,数据属性含相关API。

<p id="title" data-title="绝弹博客,记录前端学习的个人不可">绝弹博客</p>
<script>
    console.log(title.dataset.title);
</script>

10. contentEditabled属性

当前元素是否可编辑,默认false,非常有用的一个属性。

//因为contentEditabled属性可继承,所以调试的时候非常有用。
<body contentEditabled>
    ...
</body>

11. draggable属性

当前元素是否可拖动,默认false,部分元素如img标签自带该属性。

//可配合相关API做成可拖动的弹窗
<button draggable>拖动</button>

12. dropzone属性

元素被拖动时的行为(复制,移动或链接),当前尚无浏览器支持。

//可选属性如下所示 
<button draggable dropzone="copy/move/link">拖动</button>

13. hidden属性

是否隐藏当前元素,默认false,与CSS样式“display: none”效果一致。

<p hidden="hidden">观看悲欢离分,摇首笑出红尘</p>

14. contextmenu属性

点击当前元素的右键菜单,目前尚无浏览器支持。

15. translate属性

是否翻译当前元素,目前尚无浏览器支持。

16. spellcheck属性

是否对当前元素的输入进行语法检查,错误则显示下划红色波浪线。

//该属性多用于表单元素
<input type="text" spellcheck>

单词记录

id:身份(identity)
class:类别
style:样式
title:标题
data:数据
content:内容
editable:可编辑
draggable:可拖动
drop:滴
zone:区域
hidden:隐藏
context:上下文
menu:目录
translate:翻译
spell:拼写
check:检查
lang:语言(language)
access:访问
key:键
tab:踏板
index:索引
原文地址:https://www.cnblogs.com/juetan/p/13033275.html