【HTML 基础教程】HTML 属性

HTML 属性


属性是 HTML 元素提供的附加信息。

属性通常出现在 HTML 标签的开始标签中,用于定义元素的行为、样式、内容或其他特性。

属性总是以 name="value" 的形式写在标签内,name 是属性的名称,value 是属性的值。


HTML 属性

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现,比如:name="value"

属性实例

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定:

实例

<a href="http://www.runoob.com">这是一个链接</a>

尝试一下 >>


HTML 属性常用引用属性值

属性值应该始终被包括在引号内。

双引号是最常用的,不过使用单引号也没有问题。

使用双引号:

复制代码
<a href="https://www.runoob.com">Link</a>

使用单引号:

复制代码
<a href='https://www.runoob.com'>Link</a>

属性值包含引号: Link

提示: 在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:

复制代码
name='John "ShotGun" Nelson'

或者:

复制代码
<a href="https://www.runoob.com?q='search'">Link</a>

HTML 提示:使用小写属性

属性和属性值对大小写不敏感。

不过,万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性。


HTML 属性参考手册

查看完整的HTML属性列表: HTML 标签参考手册

下面列出了适用于大多数 HTML 元素的属性:

属性名 适用元素 说明
id 所有元素 为元素指定唯一的标识符。
class 所有元素 为元素指定一个或多个类名,用于 CSS 或 JavaScript 选择。
style 所有元素 直接在元素上应用 CSS 样式。
title 所有元素 为元素提供额外的提示信息,通常在鼠标悬停时显示。
data-* 所有元素 用于存储自定义数据,通常通过 JavaScript 访问。
href <a>, <link> 指定链接的目标 URL。
src <img>, <script>, <iframe> 指定外部资源(如图片、脚本、框架)的 URL。
alt <img> 为图像提供替代文本,当图像无法显示时显示。
type <input>, <button> 指定输入控件的类型(如 text, password, checkbox 等)。
value <input>, <button>, <option> 指定元素的初始值。
disabled 表单元素 禁用元素,使其不可交互。
checked <input type="checkbox">, <input type="radio"> 指定复选框或单选按钮是否被选中。
placeholder <input>, <textarea> 在输入框中显示提示文本。
target <a>, <form> 指定链接或表单提交的目标窗口或框架(如 _blank 表示新标签页)。
readonly 表单元素 使输入框只读。
required 表单元素 指定输入字段为必填项。
autoplay <audio>, <video> 自动播放媒体。
onclick 所有元素 当用户点击元素时触发 JavaScript 事件。
onmouseover 所有元素 当用户将鼠标悬停在元素上时触发 JavaScript 事件。
onchange 表单元素 当元素的值发生变化时触发 JavaScript 事件。

全局属性

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

id:为元素指定唯一的标识符。

复制代码
<div id="header">This is the header</div>

class:为元素指定一个或多个类名,用于 CSS 或 JavaScript 选择。

复制代码
<p class="text highlight">This is a highlighted text.</p>

style:用于直接在元素上应用 CSS 样式。

复制代码
<p style="color: blue; font-size: 14px;">This is a styled paragraph.</p>

title:为元素提供额外的提示信息,通常在鼠标悬停时显示。

复制代码
<abbr title="HyperText Markup Language">HTML</abbr>

data-*:用于存储自定义数据,通常通过 JavaScript 访问。

复制代码
<div data-user-id="12345">User Info</div>

特定元素的属性

某些属性仅适用于特定的 HTML 元素。

href (用于 <a><link> 元素):指定链接的目标 URL。

复制代码
<a href="https://www.example.com">Visit Example</a>

src (用于 <img>, <script>, <iframe> 等元素):指定外部资源的 URL。

复制代码
<img src="image.jpg" alt="An example image">

alt(用于 <img> 元素):为图像提供替代文本,当图像无法显示时显示。

复制代码
<img src="image.jpg" alt="An example image">

type (用于 <input><button> 元素):指定输入控件的类型。

复制代码
<input type="text" placeholder="Enter your name">

value (用于 <input>, <button>, <option> 等元素):指定元素的初始值。

复制代码
<input type="text" value="Default Value">

disabled(用于表单元素):禁用元素,使其不可交互。

复制代码
<input type="text" disabled>

checked (用于 <input type="checkbox"><input type="radio">):指定复选框或单选按钮是否被选中。

复制代码
<input type="checkbox" checked>

placeholder (用于 <input><textarea> 元素):在输入框中显示提示文本。

复制代码
<input type="text" placeholder="Enter your email">

target (用于 <a><form> 元素):指定链接或表单提交的目标窗口或框架。

复制代码
<a href="https://www.example.com" target="_blank">Open in new tab</a>

布尔属性

布尔属性是指不需要值的属性,它们的存在即表示 true,不存在则表示 false。

disabled:禁用元素。

复制代码
<input type="text" disabled>

readonly:使输入框只读。

复制代码
<input type="text" readonly>

required:指定输入字段为必填项。

复制代码
<input type="text" required>

autoplay (用于 <audio><video> 元素):自动播放媒体。

复制代码
<video src="video.mp4" autoplay></video>

自定义属性

HTML5 引入了 data-* 属性,允许开发者自定义属性来存储额外的数据。

data-*:用于存储自定义数据,通常通过 JavaScript 访问。

复制代码
<div data-user-id="12345" data-role="admin">User Info</div>

事件处理属性

HTML 元素可以通过事件处理属性来响应特定的事件,如点击、鼠标悬停等。

onclick:当用户点击元素时触发。

复制代码
<button οnclick="alert('Button clicked!')">Click Me</button>

onmouseover:当用户将鼠标悬停在元素上时触发。

复制代码
<div οnmοuseοver="this.style.backgroundColor='yellow'">Hover over me</div>

onchange:当元素的值发生变化时触发。

复制代码
<input type="text" οnchange="alert('Value changed!')">

更多标准属性说明: HTML 标准属性参考手册.

相关推荐
st紫月23 分钟前
用vue和go实现登录加密
前端·vue.js·golang
岁岁岁平安34 分钟前
Vue3学习(组合式API——计算属性computed详解)
前端·javascript·vue.js·学习·computed·计算属性
HWL56791 小时前
Express项目解决跨域问题
前端·后端·中间件·node.js·express
刺客-Andy1 小时前
React 第三十九节 React Router 中的 unstable_usePrompt Hook的详细用法及案例
前端·javascript·react.js
Go_going_2 小时前
【js基础笔记] - 包含es6 类的使用
前端·javascript·笔记
浩~~2 小时前
HTML5 浮动(Float)详解
前端·html·html5
AI大模型顾潇3 小时前
[特殊字符] 本地大模型编程实战(29):用大语言模型LLM查询图数据库NEO4J(2)
前端·数据库·人工智能·语言模型·自然语言处理·prompt·neo4j
九月TTS3 小时前
TTS-Web-Vue系列:Vue3实现内嵌iframe文档显示功能
前端·javascript·vue.js
爱编程的小学究3 小时前
【node】如何把包发布到npm上
前端·npm·node.js
weixin_473894774 小时前
前端服务器部署分类总结
前端·网络·性能优化