引入

一个页面需要更精细化的操作,我们添加了标签属性控制标签的特征。

HTML 标签决定页面中有什么内容,属性则进一步说明这个内容应该怎么表现从哪里加载有什么行为

正文

定义

属性是放置在 HTML 元素开头标签中的值。属性为元素提供额外的信息或指定元素的行为方式。

语法

常见的属性语法:

<element attribute="value"></element>

例如:

<a href="https://example.com">博客</a>

这里的 href 就是属性,https://example.com 是属性值。

Understanding HTML Attributes - What Are Attributes, and How Do They Work? | Learn | freeCodeCamp.org

例子

超链接

href 属性用于 <a href="">text</a> 中,用于将文本附上链接

<a href="https://example.com">个人博客</a>

图片属性

 src 属性和 alt 属性,分别用于指定图像的来源和提供图像的替代描述文本

<img src="image.jpg" alt="示例图片">

widthheight 可以控制图片显示的宽度和高度。

<img src="image.jpg" alt="示例图片" width="300" height="200">

复选框

checked 标记复选框为选中状态,如 <input type="checkbox"><input type="checkbox" checked>

<input type="checkbox" checked>

输入框

disabled 添加后无法输入, <input type="text" disabled>(特殊用途:一些简单的网页只在前端用 disabled 阻止用户输入,可以在控制台删除后输入

<input type="text" disabled>

常见属性

id

id 用于给元素设置唯一标识,一个页面中同一个 id 不建议重复。

<p id="intro">这是介绍文字</p>

class

class 用于给元素添加分类,常用于配合 CSS 设置样式。

<p class="note">这是一条提示</p>

title

title 用于给元素添加额外说明,鼠标悬停时通常会显示提示文字。

<abbr title="HyperText Markup Language">HTML</abbr>

style

style 可以直接给元素添加行内样式。

<p style="color: red;">红色文字</p>

一般不建议大量使用 style,因为样式最好交给 CSS 文件统一管理。

type

type 常用于 <input>button 等标签,用来指定元素类型。

<input type="password">
<button type="submit">提交</button>

name

name 常用于表单元素,提交表单时会作为数据名称。

<input type="text" name="username">

value

value 用于设置表单元素的默认值或提交值。

<input type="text" value="默认文字">

布尔属性

有些属性不需要写属性值,只要出现就表示开启,这类属性叫布尔属性

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

常见布尔属性:

  • checked 表示默认选中
  • disabled 表示禁用,用户无法操作
  • required 表示必填
  • readonly 表示只读,可以看但不能修改
  • hidden 表示隐藏元素

属性值写法

属性值一般建议使用英文双引号包起来。

<a href="https://example.com">链接</a>

虽然有些情况下不写引号也能运行,但统一写引号更清晰,也更不容易出错。

特点

  • 属性通常写在开始标签
  • 一个元素可以有多个属性
  • 属性名建议使用小写
  • 属性值建议使用英文双引号包裹
  • 不同标签能使用的属性不完全一样
  • 有些属性是全局属性,大多数 HTML 元素都能使用,例如 idclasstitlestyle
  • 有些属性是特定标签专用的,例如 <a>href<img>src

注意事项

  • alt 不只是图片备注,也和 SEO、无障碍有关
  • disabled 只能阻止普通用户在页面上操作,不能当成真正的安全限制
  • id 在同一个页面中应保持唯一
  • 不要为了方便把所有样式都写在 style 里,复杂样式更适合放到 CSS 中
  • 属性写错时,浏览器可能不会报错,但效果会失效

理解

可以把 HTML 标签理解为“网页中的对象”,属性就是这个对象身上的“配置”。

例如 <img> 表示这里有一张图片,而 src 决定图片从哪里来,alt 决定图片无法显示时怎么描述它。

标签负责说明这是什么,属性负责补充它有什么特征

引出

理解属性之后,可以继续学习 HTML 表单HTML 图片等内容。