Html教程

Appearance

HTML 属性 ​

什么是 HTML 属性 ​

HTML 属性为 HTML 元素提供额外的信息，它们总是在开始标签中指定，通常以名称/值的形式出现。

属性的基本语法 ​

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

示例：

html
<h1 id="title">标题</h1>
<p class="intro">介绍段落</p>
<a href="https://www.example.com">链接文本</a>
<img src="image.jpg" alt="图片描述">

属性的语法规则 ​

1. 属性名和属性值 ​

  • 属性名不区分大小写（推荐小写）
  • 属性值必须用引号包围
  • 可以使用单引号或双引号（推荐双引号）
html
<p class="highlight">双引号</p>
<p class='highlight'>单引号</p>

2. 多个属性 ​

多个属性之间用空格分隔：

html
<img src="photo.jpg" alt="我的照片" width="200" height="150">
<a href="page.html" class="link" target="_blank">链接</a>

3. 布尔属性 ​

某些属性不需要值，称为布尔属性：

html
<input type="checkbox" checked>
<input type="text" disabled>
<script src="script.js" defer></script>

全局属性 ​

全局属性是所有 HTML 元素都可以使用的属性。

1. id 属性 ​

为元素指定唯一标识符：

html
<h1 id="main-title">主标题</h1>
<p id="intro-text">介绍文本</p>

特点：

  • 在整个页面中必须唯一
  • 用于CSS样式和JavaScript选择
  • 可作为锚点链接的目标

2. class 属性 ​

为元素指定一个或多个类名：

html
<p class="highlight">高亮段落</p>
<div class="container main-content">主要内容区</div>

特点：

  • 可以重复使用
  • 多个类名用空格分隔
  • 主要用于CSS样式

3. style 属性 ​

直接在元素上定义CSS样式：

html
<p style="color: red; font-size: 16px;">红色文本</p>
<div style="background-color: yellow; padding: 10px;">黄色背景</div>

4. title 属性 ​

提供元素的额外信息，鼠标悬停时显示：

html
<p title="这是提示信息">鼠标悬停查看提示</p>
<a href="#" title="点击访问首页">首页</a>

5. lang 属性 ​

指定元素内容的语言：

html
<p lang="en">This is English text.</p>
<p lang="zh-CN">这是中文文本</p>

6. data-* 属性 ​

存储自定义数据：

html
<div data-user-id="123" data-role="admin">用户信息</div>
<button data-action="submit" data-form="login">提交</button>

常用元素的专用属性 ​

链接属性 (<a>) ​

html
<!-- href: 链接地址 -->
<a href="https://www.example.com">外部链接</a>
<a href="page.html">内部链接</a>
<a href="#section1">页面内锚点</a>

<!-- target: 打开方式 -->
<a href="page.html" target="_self">当前窗口打开（默认）</a>
<a href="page.html" target="_blank">新窗口打开</a>

<!-- download: 下载文件 -->
<a href="document.pdf" download="文档.pdf">下载文档</a>

图像属性 (<img>) ​

html
<img src="photo.jpg"           <!-- 图片路径 -->
     alt="照片描述"             <!-- 替代文本 -->
     width="300"              <!-- 宽度 -->
     height="200"             <!-- 高度 -->
     title="鼠标悬停提示">

表单属性 ​

输入框 (<input>) ​

html
<!-- 文本输入 -->
<input type="text" name="username" placeholder="请输入用户名">

<!-- 密码输入 -->
<input type="password" name="password" required>

<!-- 邮箱输入 -->
<input type="email" name="email" value="user@example.com">

<!-- 数字输入 -->
<input type="number" min="1" max="100" step="1">

<!-- 复选框 -->
<input type="checkbox" checked>

<!-- 单选按钮 -->
<input type="radio" name="gender" value="male">

表单控制属性 ​

html
<input type="text" 
       name="username"          <!-- 字段名称 -->
       value="默认值"           <!-- 默认值 -->
       placeholder="输入提示"   <!-- 占位符 -->
       required                <!-- 必填 -->
       disabled                <!-- 禁用 -->
       readonly                <!-- 只读 -->
       maxlength="20">         <!-- 最大长度 -->

表格属性 ​

html
<table border="1" cellpadding="5" cellspacing="0">
    <tr>
        <td rowspan="2">跨行单元格</td>
        <td colspan="2">跨列单元格</td>
    </tr>
</table>

属性值的类型 ​

1. 文本值 ​

html
<p title="这是标题">文本</p>
<input type="text" placeholder="请输入">

2. 数字值 ​

html
<img width="300" height="200">
<input type="number" min="0" max="100">

3. URL 值 ​

html
<a href="https://www.example.com">链接</a>
<img src="images/photo.jpg">
<link rel="stylesheet" href="styles.css">

4. 枚举值（预定义选项） ​

html
<input type="text">        <!-- text, password, email 等 -->
<a target="_blank">        <!-- _blank, _self, _parent 等 -->

5. 布尔值 ​

html
<input checked>            <!-- 存在即为真 -->
<input disabled>
<script defer>

自定义属性 ​

data-* 属性 ​

用于存储自定义数据，可被JavaScript访问：

html
<div data-product-id="12345" 
     data-category="electronics" 
     data-price="299.99">
    产品信息
</div>

JavaScript访问：

javascript
var element = document.querySelector('div');
var productId = element.dataset.productId;  // "12345"
var price = element.dataset.price;          // "299.99"

属性的最佳实践 ​

1. 使用语义化属性 ​

html
<!-- 好 -->
<img src="photo.jpg" alt="公司团队合照">

<!-- 不好 -->
<img src="photo.jpg" alt="图片">

2. 保持属性值的一致性 ​

html
<!-- 好 -->
<input type="text" name="user_name" id="user_name">

<!-- 不好 -->
<input type="text" name="userName" id="user-name">

3. 避免内联样式 ​

html
<!-- 不推荐 -->
<p style="color: red; font-size: 20px;">文本</p>

<!-- 推荐 -->
<p class="highlight">文本</p>

4. 使用有意义的类名和ID ​

html
<!-- 好 -->
<div class="navigation-menu">
<button id="submit-button">

<!-- 不好 -->
<div class="red-box">
<button id="btn1">

实践练习 ​

创建一个包含以下内容的HTML页面：

  1. 带有唯一ID的标题
  2. 包含多个类名的段落
  3. 带有提示信息的文本
  4. 外部链接（新窗口打开）
  5. 内部链接（锚点）
  6. 带有完整属性的图片
  7. 包含各种输入类型的表单

示例代码：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML 属性练习</title>
</head>
<body>
    <h1 id="page-title" class="main-heading">我的网页</h1>
    
    <p class="intro highlight" title="这是介绍段落">
        欢迎来到我的网站，这里有很多有趣的内容。
    </p>
    
    <a href="https://www.example.com" target="_blank" title="访问外部网站">
        外部链接
    </a>
    
    <a href="#contact" title="跳转到联系信息">联系我们</a>
    
    <img src="photo.jpg" 
         alt="网站横幅图片" 
         width="600" 
         height="200"
         title="美丽的风景照片">
    
    <form>
        <input type="text" name="username" placeholder="请输入用户名" required>
        <input type="email" name="email" placeholder="请输入邮箱">
        <input type="password" name="password" required>
        <button type="submit">提交</button>
    </form>
    
    <div id="contact" data-section="contact">
        <h2>联系信息</h2>
        <p>邮箱：contact@example.com</p>
    </div>
</body>
</html>

常见错误 ​

1. 忘记引号 ​

html
<!-- 错误 -->
<p class=highlight>文本</p>

<!-- 正确 -->
<p class="highlight">文本</p>

2. ID重复 ​

html
<!-- 错误 -->
<h1 id="title">标题1</h1>
<h2 id="title">标题2</h2>

<!-- 正确 -->
<h1 id="title1">标题1</h1>
<h2 id="title2">标题2</h2>

3. 属性值包含特殊字符 ​

html
<!-- 错误 -->
<a href="page.html?name=张三&age=25">链接</a>

<!-- 正确 -->
<a href="page.html?name=%E5%BC%A0%E4%B8%89&age=25">链接</a>

小结 ​

  • 属性为HTML元素提供额外信息
  • 全局属性可用于所有元素
  • 不同元素有特定的专用属性
  • 使用语义化和有意义的属性值
  • 遵循属性的语法规则和最佳实践

下一章我们将学习HTML标题的使用和最佳实践。

Copyright © 2025-2026 京公网安备 11010102000001号 京ICP备2024078128号-1