HTML 标准属性和自定义属性

HTML标准属性

HTML 标签可拥有属性。

这里列出的属性是通用于每个标签的核心属性和语言属性（有个别例外）。

核心属性 (Core Attributes)

以下标签不提供下面的属性：base、head、html、meta、param、script、style 以及 title 元素。

属性	值	描述
class	classname	规定元素的类名（classname）
id	id	规定元素的唯一 id
style	style_definition	规定元素的行内样式（inline style）
title	text	规定元素的额外信息（可在工具提示中显示）

语言属性 (Language Attributes)

以下标签不提供下面的属性：base、br、frame、frameset、hr、iframe、param 以及 script 元素。

属性	值	描述
dir	ltr \| rtl	设置元素中内容的文本方向。
lang	language_code	设置元素中内容的语言代码。
xml:lang	language_code	设置 XHTML 文档中元素内容的语言代码。

键盘属性 (Keyboard Attributes)

属性	值	描述
accesskey	character	设置访问元素的键盘快捷键。
tabindex	number	设置元素的 Tab 键控制次序。

HTML自定义属性

HTML自定义属性：HTML规范也允许我们自定义一些属性。（最新规范中，推荐以data-开头）

通过打点设置自定义属性

① 可以设置属性成功，但是没有设置到标签内，不会显示在标签里（想要显示在标签里请使用setAttribute方法）

② 打点调用可以获取属性值，getAttribute方法不能获取属性值

通过setAttribute方法设置属性

① 可以设置属性成功，并且设置到标签内

② 必须通过getAttribute方法才能获取属性值，打点调用获取不到

HTML 标准属性和自定义属性的区别联系

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="box" style="width: 200px;height: 200px;background-color:red;" nameId="123">eqweqwe</div>
	<script type="text/javascript">
		var box = document.getElementById("box");
		// console.log(box.style.width);
		// console.log(box.nameId);
		// console.log(box.getAttribute("nameId"));
		// box.setAttribute("sexId","321");
		// console.log(box.getAttribute("sexId"));
		// box.ageId="345";
		// console.log(box.ageId);
		// console.log(box.getAttribute("ageId"));
		// box.setAttribute("ageId","456");
		// console.log(box.ageId);
		// console.log(box.getAttribute("ageId"));
	</script>
</body>
</html>

HTML标准属性：HTML规范中给每一个标签都定义了一系列的属性，这些属性可以直接写在html标签身上，起到一定的作用。

HTML自定义属性：HTML规范也允许我们自定义一些属性。（最新规范中，推荐以data-开头）

HTML标签在JS环境下叫对象（元素）

所有的HTML标准属性都会从该元素身上获取到

如果设置元素自定义属性不会显示在标签里想要显示在标签里请使用setAttribute方法

元素.setAttribute(key, value); 这是在设置标签内容

元素.自定义属性是将元素当做JS的对象在处理

所谓的HTML标准属性就是指的HTML规定的一些标签属性。

比如id、style、class都是HTML标准属性中的通用属性

还有一些HTML标准属性不是通用的而是某一些标签特有的

比如: a标签的href属性 img标签的src属性 form表单的action属性 method属性等

HTML标准属性有一个特点就是可以直接在JS中获取元素之后，打点读取、打点设置