跳到主要内容

HTML属性

HTML 属性​

全局属性​

  • id：唯一标识元素

  • class：元素分类（CSS/JS 用）

  • style：行内样式

  • title：鼠标悬停提示

  • hidden：隐藏元素

链接属性 <a>​

  • href：链接目标地址

  • target：打开方式（如 _blank）

  • rel：关系（如 noopener、nofollow）

图片属性 <img>​

  • src：图片路径

  • alt：替代文字（加载失败或无障碍）

  • width：宽度

  • height：高度

表单属性​

  • type：输入框类型（text、password、email 等）

  • value：默认值

  • placeholder：占位提示文字

  • required：必填项

  • checked：默认选中（radio/checkbox）

  • disabled：禁用输入

  • readonly：只读

表格属性 <table> <td>​

  • border：表格边框

  • cellpadding：单元格内边距

  • cellspacing：单元格间距

  • colspan：单元格跨列

  • rowspan：单元格跨行

事件属性​

  • onclick：点击事件

  • onmouseover：鼠标移入

  • onchange：值改变时触发

  • oninput：输入时触发

HTML 属性表格​

分类属性名说明示例
全局属性id唯一标识元素<p id="intro">段落</p>
全局属性class元素分类（CSS/JS 用）<div class="box"></div>
全局属性style行内样式<span style="color:red;">红字</span>
全局属性title鼠标悬停提示<abbr title="超文本标记语言">HTML</abbr>
链接href链接目标地址<a href="https://example.com">跳转</a>
链接target打开方式（如 _blank）<a href="a.html" target="_blank">新窗口</a>
图片src图片路径<img src="logo.png">
图片alt替代文字（加载失败或无障碍）<img src="logo.png" alt="网站logo">
表单type输入框类型<input type="password">
表单placeholder占位提示文字<input type="text" placeholder="请输入">
表单required必填项<input type="email" required>
表单checked默认选中（radio/checkbox）<input type="checkbox" checked>
表格colspan单元格跨列<td colspan="2">合并</td>
表格rowspan单元格跨行<td rowspan="2">跨行</td>

示例代码​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>HTML 属性示例</title>
</head>
<body>
  <!-- 全局属性 -->
  <p id="intro" class="highlight" style="color:blue;" title="提示文字">
    带有多种属性的段落
  </p>

  <!-- 链接 -->
  <a href="https://example.com" target="_blank">访问 Example</a>

  <!-- 图片 -->
  <img src="logo.png" alt="网站logo" width="120">

  <!-- 表单 -->
  <form>
    <input type="text" placeholder="用户名" required>
    <input type="checkbox" checked> 记住我
    <button type="submit">提交</button>
  </form>

  <!-- 表格 -->
  <table border="1">
    <tr>
      <td colspan="2">跨两列</td>
    </tr>
    <tr>
      <td rowspan="2">跨两行</td>
      <td>单元格1</td>
    </tr>
    <tr>
      <td>单元格2</td>
    </tr>
  </table>
</body>
</html>