引入
一个页面需要更精细化的操作,我们添加了标签属性控制标签的特征。
HTML 标签决定页面中有什么内容,属性则进一步说明这个内容应该怎么表现、从哪里加载、有什么行为。
正文
定义
属性是放置在 HTML 元素开头标签中的值。属性为元素提供额外的信息或指定元素的行为方式。
语法
常见的属性语法:
<element attribute="value"></element>例如:
<a href="https://example.com">博客</a>这里的 href 就是属性,https://example.com 是属性值。
例子
超链接
href 属性用于 <a href="">text</a> 中,用于将文本附上链接
<a href="https://example.com">个人博客</a>图片属性
src 属性和 alt 属性,分别用于指定图像的来源和提供图像的替代描述文本
<img src="image.jpg" alt="示例图片">width 和 height 可以控制图片显示的宽度和高度。
<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 元素都能使用,例如
id、class、title、style - 有些属性是特定标签专用的,例如
<a>的href、<img>的src
注意事项
alt不只是图片备注,也和 SEO、无障碍有关disabled只能阻止普通用户在页面上操作,不能当成真正的安全限制id在同一个页面中应保持唯一- 不要为了方便把所有样式都写在
style里,复杂样式更适合放到 CSS 中 - 属性写错时,浏览器可能不会报错,但效果会失效
理解
可以把 HTML 标签理解为“网页中的对象”,属性就是这个对象身上的“配置”。
例如 <img> 表示这里有一张图片,而 src 决定图片从哪里来,alt 决定图片无法显示时怎么描述它。
标签负责说明这是什么,属性负责补充它有什么特征。