HTML基础：HTML 标签属性

HTML 标签属性详解：从基础到 React 实战

HTML 标签属性（Attribute）是 HTML 开发中非常重要的基础知识。

一句话理解：HTML 标签决定元素是什么，HTML 属性决定元素有哪些配置和行为。

例如：

<input
  type="text"
  id="username"
  class="input-box"
  placeholder="请输入用户名"
  disabled
/>

这里：

• input：HTML 标签，表示输入框。
• type：输入框的类型。
• id：元素的唯一标识。
• class：CSS 类名。
• placeholder：输入提示。
• disabled：禁用输入框。

一、HTML 属性的基本语法

通常写法：

<标签名 属性名="属性值">内容</标签名>

例如：

<a href="https://example.com" target="_blank">
  访问网站
</a>

其中 href 和 target 都是属性。

部分属性是布尔属性，只要写上就表示启用：

<input disabled />
<input required />
<input checked type="checkbox" />

注意：原生 HTML 中写 disabled="false" 仍然表示禁用，因为 disabled 是布尔属性。

二、开发中最重要的 HTML 属性

属性	作用	重要程度
id	元素唯一标识	P0
class	指定 CSS 类名	P0
style	设置内联 CSS 样式	P0
type	输入框或按钮的类型	P0
value	表单控件的值	P0
name	表单字段名称	P0
placeholder	输入提示文字	P0
disabled	禁用控件	P0
href	超链接地址	P0
src	图片、脚本等资源地址	P0
data-*	存放自定义数据	P1
required	表单必填	P1
readonly	输入框只读	P1
target	链接打开方式	P1
title	补充提示信息	P2

三、重点一：id、class、style

这是开发中最常见的三个属性。

1. id：元素唯一标识

<div id="app">Hello</div>

JavaScript 可以通过 id 找到它：

const element = document.getElementById("app");

console.log(element.textContent); // Hello

同一个 HTML 文档中的 id 应当保持唯一。

2. class：为元素分组并设置样式

<div class="card">卡片一</div>
<div class="card">卡片二</div>

.card {
  padding: 20px;
  background: lightblue;
}

多个元素可以使用相同的 class。

一个元素也可以有多个类名：

<div class="card active">卡片</div>

3. style：内联样式

<div style="color: red; font-size: 20px;">
  Hello
</div>

style 可以直接设置 CSS 样式，但日常开发中更推荐使用 class 组织可复用样式。

四、重点二：表单相关属性

在 React 中后台项目里，表单属性尤其重要。

例如：

<input
  type="text"
  name="taskName"
  value="回查任务"
  placeholder="请输入任务名称"
  required
/>

常见属性：

属性	含义
type="text"	文本输入框
type="number"	数字输入框
type="password"	密码输入框
type="checkbox"	复选框
value	当前或初始表单值，取决于使用场景
name	表单提交时的字段名称
placeholder	输入提示
required	必填校验
disabled	禁止交互和提交
readonly	只读，不允许编辑

五、重点三：data-* 自定义属性

data-* 允许开发者向 HTML 元素添加自定义数据。

例如：

<div
  id="task"
  data-task-id="12345"
  data-status="running"
>
  回查任务
</div>

JavaScript 读取：

const task = document.getElementById("task");

console.log(task.dataset.taskId); // "12345"
console.log(task.dataset.status); // "running"

注意：

• data-task-id 对应 dataset.taskId。
• dataset 返回的属性值通常是字符串。
• 在 React 中，业务数据一般优先通过 Props 和 State 管理，而不是全部存入 DOM 属性。

六、HTML 属性与 DOM 属性的区别

这是学习 React 前非常值得理解的内容。

HTML Attribute 和 DOM Property 不是完全相同的概念。

例如：

<input id="username" value="hello" />

JavaScript：

const input = document.getElementById("username");

// 获取 HTML 属性
console.log(input.getAttribute("value"));

// 获取 DOM 属性
console.log(input.value);

通常：

• getAttribute("value") 获取 HTML 属性值。
• input.value 获取输入框当前的值。

当用户修改输入框内容时，两者可能不一样。

可以理解为：

Attribute 是 HTML 标记上的属性，Property 是 DOM 对象上的属性。

七、HTML 属性与 React JSX 属性的区别

React 使用 JSX，语法与 HTML 类似，但有些属性名称和写法不同。

原生 HTML	React JSX
class	className
for	htmlFor
style="color: red"	style={{ color: "red" }}
onclick="..."	onClick={handleClick}
value="hello"	value={value}
disabled	disabled={true}

例如：

import { useState } from "react";

function TaskForm() {
  const [taskName, setTaskName] = useState("");

  return (
    <div className="task-form">
      <label htmlFor="taskName">任务名称</label>

      <input
        id="taskName"
        type="text"
        value={taskName}
        placeholder="请输入任务名称"
        onChange={(e) => setTaskName(e.target.value)}
      />

      <button
        disabled={!taskName.trim()}
        onClick={() => console.log(taskName)}
      >
        创建任务
      </button>
    </div>
  );
}

这里涉及几个关键点：

1. className：设置 CSS 类名。
2. htmlFor：让 label 与 input 关联。
3. value={taskName}：使用 React 状态控制输入值。
4. onChange：监听输入变化。
5. disabled={!taskName.trim()}：根据状态动态决定是否禁用按钮。

八、总结：快速上手应该掌握哪些？

重点掌握下面三组即可：

第一组：通用属性

id、class、style、data-*

第二组：表单属性

type、value、name、placeholder、disabled、required

第三组：React JSX 属性

className、htmlFor、onClick、onChange、value={...}

对于 React 开发，尤其需要理解 HTML Attribute、DOM Property、React Props/State 之间的区别。

这会直接影响你理解表单受控组件、事件处理和动态数据渲染。