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

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>
  );
}

这里涉及几个关键点：

className：设置 CSS 类名。
htmlFor：让 label 与 input 关联。
value={taskName}：使用 React 状态控制输入值。
onChange：监听输入变化。
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 之间的区别。

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