HTML | DOM 名称 属性

HTML（超文本标记语言）是用于创建网页的标准语言。HTML 指的是超文本标记语言（Hyper Text Markup Language）。HTML 描述了网页的结构。DOM（文档对象模型）则是一种 API，可以访问和操作 HTML 页面中的元素。

在 HTML 中，属性是指为 HTML 元素提供的额外信息。属性总是以名称/值对的形式出现，比如 name="value"。属性的名称和值都是区分大小写的。

常见 HTML 属性

class

class 属性指定元素的类名，用于将相同或具有相似特征的元素分类到一起。多个元素可以使用相同的类名。在 CSS 样式表中，可以使用 . 加类名来选择元素。

例如：

<div class="container">
  <p class="textContent">这是一个段落</p>
</div>

在 CSS 中，可以使用以下样式来选择 .textContent 类：

.textContent {
  color: red;
}

id

id 属性指定元素的唯一标识符。每个页面上的元素都必须拥有不同的 id 值。

例如：

<div id="mainContent">
  <p>这是主要内容</p>
</div>

在 CSS 中，可以使用 # 加 id 值来选择元素：

#mainContent {
  background-color: #f1f1f1;
}

style

style 属性用于为元素指定样式。该属性值是一个字符串，可以包含多个 CSS 属性。

例如：

<p style="color: red; font-size: 24px;">这是一个段落</p>

title

title 属性用于为元素指定一个关于元素的一个附加信息。鼠标悬停在元素上时，将显示 title 属性的值。

例如：

<button title="这是一个按钮">点击</button>

常见 DOM 属性

innerHTML

innerHTML 属性用于在元素内部插入 HTML。通过设置该属性，可以替换元素内的所有内容。

例如：

<div id="container"></div>

document.getElementById("container").innerHTML = "<p>这是一个段落</p>";

value

value 属性用于获取或设置表单元素（如 input、textarea）的值。

例如：

<input type="text" id="name" value="张三">

使用 JavaScript 可以获取、修改该元素的值：

var nameInput = document.getElementById("name");
var name = nameInput.value; // 获取值
nameInput.value = "李四"; // 设置值

src

src 属性用于指定一张图片或一个 iframe 的 URL 地址。

例如：

<img src="image.png" alt="图片">
<iframe src="https://www.baidu.com"></iframe>

href

href 属性用于指定链接的目标 URL 地址。

例如：

<a href="https://www.baidu.com">百度</a>

style

style 属性用于访问、修改元素的 CSS 样式。

例如：

<p id="text" style="color: red;">这是一个段落</p>

使用 JavaScript 修改元素的样式：

document.getElementById("text").style.color = "green";