【HTML 基础教程】HTML 属性

news2025/3/31 19:34:32

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

Remark

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

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>指定输入控件的类型(如 textpasswordcheckbox 等)。
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 标准属性参考手册.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2323610.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

爬虫问题整理(2025.3.27)

此时此刻&#xff0c;困扰我一天的两个问题终于得到了解决&#xff0c;在此分享给大家。 问题1&#xff1a;使用anaconda prompt无法进行pip安装&#xff0c;这里只是一个示例&#xff0c;实际安装任何模块都会出现类似报错。 解决办法&#xff1a;关掉梯子......没错&#xf…

短信验证码安全需求设计

背景&#xff1a; 近期发现部分系统再短信充值频繁&#xff0c;发现存在恶意消耗短信额度现象&#xff0c;数据库表排查&#xff0c;发现大量非合法用户非法调用短信接口API导致额度耗尽。由于系统当初设计存在安全缺陷&#xff0c;故被不法分子进行利用&#xff0c;造成损失。…

若依专题——基础应用篇

若依搭建 搭建后端项目 ① Git 克隆并初始化项目 ② MySQL 导入与配置 ③ 启动 Redis 搭建后端项目注意事项&#xff1f; ① 项目初始化慢&#xff0c;执行clean、package ② MySQL导入后&#xff0c;修改application-druid.yml ③ Redis有密码&#xff0c;修改ap…

AI for CFD入门指南(传承版)

AI for CFD入门指南 前言适用对象核心目标基础准备传承机制 AI for CFDLibtorch的介绍与使用方法PytorchAutogluon MakefileVscodeOpenFOAMParaviewGambit 前言 适用对象 新加入课题组的硕士/博士研究生对AICFD交叉领域感兴趣的本科生实习生需要快速上手组内研究工具的合作研…

DeepSeek+RAG局域网部署

已经有很多平台集成RAG模式&#xff0c;dify&#xff0c;cherrystudio等&#xff0c;这里通过AI辅助&#xff0c;用DS的API实现一个简单的RAG部署。框架主要技术栈是Chroma,langchain,streamlit&#xff0c;答案流式输出&#xff0c;并且对答案加上索引。支持doc,docx,pdf,txt。…

个人学习编程(3-24) 数据结构

括号的匹配&#xff1a; if((s[i]) && now() || (s[i]] && now[)){ #include <bits/stdc.h>using namespace std;int main() {char s[300];scanf("%s",&s);int i;int len strlen(s);stack <char> st;for (i 0; i < len; i){if(…

面试八股文--框架篇(SSM)

一、Spring框架 1、什么是spring Spring框架是一个开源的Java平台应用程序框架&#xff0c;由Rod Johnson于2003年首次发布。它提供了一种全面的编程和配置模型&#xff0c;用于构建现代化的基于Java的企业应用程序。Spring框架的核心特性包括依赖注入&#xff08;DI&#xf…

跨语言语言模型预训练

摘要 最近的研究表明&#xff0c;生成式预训练在英语自然语言理解任务中表现出较高的效率。在本研究中&#xff0c;我们将这一方法扩展到多种语言&#xff0c;并展示跨语言预训练的有效性。我们提出了两种学习跨语言语言模型&#xff08;XLM&#xff09;的方法&#xff1a;一种…

Nodejs上传文件的问题

操作系统&#xff1a;window和linux都会遇到 软件环境&#xff1a;v20.10.0的Nodejs 1、前端代码如下&#xff1a; 2、后端Nodejs 2.1、注册接口 2.2、上传接口 其中memoryUpload方法代码如下&#xff1a; 3、用页面上传文件 查看具体报错原因&#xff1a; TypeError: sourc…

无人机螺旋桨平衡标准

螺旋桨平衡是确保无人机(UAV)平稳运行、可靠性和使用寿命的关键过程。螺旋桨的不平衡会导致振动、噪音&#xff0c;并加速关键部件的磨损&#xff0c;从而对飞行性能产生负面影响。 ISO 21940-11:2016标准为旋翼平衡提供了一个广泛引用的框架&#xff0c;定义了可接受的不平衡…

SpringBoot+策略模式+枚举类,使用配置文件改进,优雅消除if-else,完全符合OOP原则

需求分析 公司做物联网系统的&#xff0c;使用nettry进行设备连接&#xff0c;对设备进行数据采集&#xff0c;根据设备的协议对数据进行解析&#xff0c;解析完成之后存放数据库&#xff0c;但是不同厂家的设备协议不同。公司系统使用了使用了函数式编程的去写了一个解析类&am…

每日免费分享之精品wordpress主题系列~DAY16

主题介绍&#xff1a; 今日在网上寻找wordpress主题的时候逛到了大叔的网站&#xff0c;赶脚这个主题蛮不错的&#xff0c;于是百度一下&#xff0c;果然&#xff0c;这个主题很受欢迎。作为主题下载站追梦者也不甘落后&#xff0c;马上就发布出来了&#xff0c;希望对你们有用…

OpenCV图像拼接(9)实现图像拼接功能的一个高级接口cv::Stitcher

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 cv::Stitcher 类是OpenCV中用于实现图像拼接功能的一个高级接口。它简化了从一组部分重叠的图像创建全景图的过程&#xff0c;隐藏了许多底层细节…

dify + deepseek /qwen + win +xinference 等完成知识库建设

Dify.AI The Innovation Engine for Generative AI Applications 简介&#xff1a;Dify是一个用于构建人工智能应用程序的开源平台。我们将后端即服务和LLMOps相结合&#xff0c;简化了生成式人工智能解决方案的开发&#xff0c;使开发人员和非技术创新者都可以使用。CPU>…

模数转换电路(A/D转换器)

A/D转换&#xff0c;是将输入的模拟电压量转换成相应的数字量。 A/D转换器的类型很多&#xff0c;按工作原理可分为直接转换型和间接转换型两大类。前者直接将模拟电压量转换成数字量&#xff0c;后者是先将模拟电压量转换成一个中间量&#xff0c;再将中间量转换成数字量。 …

算法 | 麻雀搜索算法原理,公式,改进算法综述,应用场景及matlab完整代码

一、麻雀搜索算法(SSA)原理 1. 算法基础 麻雀搜索算法(Sparrow Search Algorithm, SSA)是2020年提出的一种群体智能优化算法,灵感来源于麻雀群体的觅食与反捕食行为。算法将麻雀分为三类角色:发现者(Producer):适应度最高,负责探索全局最优区域;加入者(Follower)…

《大语言模型赋能证券业开发安全:海云安技术方案在上交所专刊发表》

近日&#xff0c;海云安《大语言模型在证券业开发安全领域的探索与实践》技术方案经过上海证券交易所&#xff08;以下简称”上交所“&#xff09;行业专家评审后正式收录于《交易技术前沿——网络安全专刊&#xff08;2025年第1期 总第61期&#xff09;》。 证券信息技术研究…

【蓝桥杯】单片机设计与开发,中断系统,外部中断(下)

一、例程一&#xff1a;外部中断执行函数 #include<stc15.h>void main(void) {P20XA0;P00X00;P20X80;P00XFF;IT00;//设置外部中断0&#xff1b;上升沿下降沿均可//IT01;//设置外部中断0&#xff1b;仅下降沿EX01;//允许中断0申请中断EA 1;//打开CPU总中断while(1); }voi…

MySQL、创建数据库、表、SQL 函数:数学函数、字符串函数、日期函数、聚合函数

DAY18.1 Java核心基础 MySQL 创建数据库 数据库是一个服务&#xff0c;实际开发需要根据具体的项目创建对应的数据库实例 create database mytest1 default character set utf8 collate utf8_general_ci; create database mytest2 default character set utf8 collate utf8…

关于我对接了deepseek之后部署到本地将数据存储到mysql的过程

写在前面 今天写一下使用nodejs作为服务端&#xff0c;vue作为客户端&#xff0c;mysql的数据库&#xff0c;对接deepseek的全过程&#xff0c;要实现一个很简单的效果就是&#xff0c;可以自由的询问&#xff0c;然后可以将询问的过程存储到mysql的数据库中。 文档对接 deeps…