HTML入门:属性

你好,我是云桃桃。今天来聊一聊 HTML 属性写法和特点。

HTML 属性是用于向 HTML 标签(也叫 HTML 元素)提供附加信息或配置的特性。

如果说,把HTML 标签比作一个房子,HTML 标签定义了房子的结构和用途,比如客厅、卧室、厨房等。而 HTML 属性则为这些房间提供了更多的小细节和功能,比如家具的颜色、大小、位置等。

每个 HTML 元素可以包含一个或多个属性,这些属性用于定义元素的特定特征或行为。下面我们来看下它的写法叭。

HTML 属性特点

HTML 属性都是出现在开始标签处,以一个键一个值对的形式出现。

<!-- 使用 src 属性加载图像资源 -->
<img src="jay.jpg" alt="jayImage" /><!-- 使用 href 属性创建超链接 -->
<a href="https://www.baid.com">访问网站</a><!-- 使用 id 属性为元素定义唯一标识符 -->
<div id="container">This is a container.</div><!-- 使用 class 属性定义元素的样式类 -->
<p class="important">This is an important paragraph.</p><!-- 使用 placeholder 属性定义输入框的占位符文本 -->
<input type="text" placeholder="Enter your name" />

以上代码演示了如何在 HTML 中使用 src、href、id、class、type 和 placeholder 属性,并将它们应用到相应的 HTML 元素中。下面我们一起来整体看看它的特点吧。

1、键值对结构: 属性通常由属性名和属性值组成,通常以成对的形式出现,中间用等号连接,例如:<img src="jay.jpg"> 中的 src 是属性名,"jay.jpg" 是属性值。

但并非所有属性都需要属性值,有些属性可以单独存在,其存在本身就表示一种状态或特性,例如一些表单标签(像<input>)的属性,如 checkeddisabled

<!-- 禁用的复选框 -->
<input type="checkbox"  disabled>

2、元素特性和行为: 属性可以定义元素的特性或行为,如 src 属性定义了图像的来源,href 属性定义了链接的目标地址,class 属性定义了元素的 CSS 样式类等。

3、可选和必填属性: 某些属性是元素的必填属性,如果缺少这些属性,则元素可能无法正常工作,而其他属性则是可选的,可以根据需要添加或省略,后续我们用的多了就知道了。

4、全局和局部属性: 有些属性可以用于所有 HTML 元素,称为全局属性,如 idclass,方便后续对元素增加 css 效果或者增加页面交互动作。比如,

属性描述
id定义元素的唯一标识符
class定义元素的一个或多个样式类
style定义元素的行内样式
title提供有关元素的附加信息(通常显示为工具提示)
lang指定元素内容的语言
dir指定元素内容的文本方向(从左向右或从右向左)
accesskey定义激活元素的键盘快捷键
tabindex定义元素在 tab 键遍历时的顺序
draggable指定元素是否可拖动
contenteditable指定元素内容是否可编辑

而其他属性只能用于特定类型的元素,称为局部属性,如 src 属性只能用于图像元素。

5、属性值的类型: 属性值可以是文本、数字、URL、颜色值等不同类型的数据,具体取决于属性的定义和使用场景。

HTML 属性是 HTML 元素的重要组成部分,通过为元素添加属性,可以实现更丰富和灵活的页面展示和交互效果。

好了,以上,本节完。

排版:云桃桃 | 图片设计:云桃桃   

图片

作者介绍:

云桃桃,在写作的程序媛。终身学习者,陪你一起编程,一起写作❤️

图片

云桃桃

一枚 web 前端程序媛,一边记录,一边成长❤️

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

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

相关文章

FPGA高端项目:FPGA基于GS2971的SDI视频接收+HLS图像缩放+多路视频拼接,提供4套工程源码和技术支持

目录 1、前言免责声明 2、相关方案推荐本博已有的 SDI 编解码方案本方案的SDI接收转HDMI输出应用本方案的SDI接收图像缩放应用本方案的SDI接收纯verilog图像缩放纯verilog多路视频拼接应用本方案的SDI接收OSD多路视频融合叠加应用本方案的SDI接收HLS多路视频融合叠加应用本方案…

深度学习应该如何入门?

深度学习是一门令人着迷的领域&#xff0c;但初学者可能会感到有些困惑。让我们从头开始&#xff0c;用通俗易懂的语言来探讨深度学习的基础知识。 1. 基础知识 深度学习需要一些数学和编程基础。首先&#xff0c;我们要掌握一些数学知识&#xff0c;如线性代数、微积分和概率…

Unity中PICO实现移动交互

文章目录 前言一、在允许行走的地面加上对应的组件1、Teleportation Anchor 移动锚点2、Teleportation Area 移动区域 二、在 玩家&#xff08;需要移动的对象&#xff09;上挂载对应组件1、Teleportation Provider 被移动对象2、在 Teleportation Anchor 或 Teleportation Are…

【go语言开发】yaml文件配置和解析

本文主要介绍使用第三方库来对yaml文件配置和解析。首先安装yaml依赖库&#xff1b;然后yaml文件中配置各项值&#xff0c;并给出demo参考&#xff1b;最后解析yaml文件&#xff0c;由于yaml文件的配置在全局中可能需要&#xff0c;可定义全局变量Config&#xff0c;便于调用 文…

CCProxy代理服务器地址的设置步骤

目录 前言 一、下载和安装CCProxy 二、启动CCProxy并设置代理服务器地址 三、验证代理服务器设置是否生效 四、使用CCProxy进行代理设置的代码示例 总结 前言 CCProxy是一款常用的代理服务器软件&#xff0c;可以帮助用户实现网络共享和上网代理。本文将详细介绍CCProxy…

【yolov中的训练批次batch】详细介绍

文章目录 1.概要2. 主要参与的操作3. 提高计算效率和模型的稳定性4.对小目标检测的影响 1.概要 在 YOLO&#xff08;You Only Look Once&#xff09;算法中&#xff0c;训练批次&#xff08;batch&#xff09;指的是一次优化模型参数的数据批次。在目标检测任务中&#xff0c;每…

【鸿蒙 HarmonyOS 4.0】应用状态:LocalStorage/AppStorage/PersistentStorage

一、介绍 如果要实现应用级的&#xff0c;或者多个页面的状态数据共享&#xff0c;就需要用到应用级别的状态管理的概念。 LocalStorage&#xff1a;页面级UI状态存储&#xff0c;通常用于UIAbility内、页面间的状态共享。AppStorage&#xff1a;特殊的单例LocalStorage对象&…

数据库系统概念(第一周)

⚽前言 &#x1f3d0;四个基本概念 一、数据 定义 种类 特点 二、数据库 三、数据库管理系统&#xff08;DBMS&#xff09; 四、 数据库系统&#xff08;DBS&#xff09; &#x1f3c0;数据库系统和文件系统对比 文件系统的弊端 &#x1f94e;数据视图 数据抽象 …

java 环境配置(保姆级最新版)

&#x1f600;前言 ps 因为网络上教程太多太杂所以干脆直接自己出个教程方便自己复习也希望帮助到大家 文章目录 第一查看自己电脑的系统类型第二 jdk下载历史jdk下载 第三 jdk安装第四 环境搭配Java_Home 配置Path 配置CLASSPATH 配置 检测是否配置成功 第一查看自己电脑的系统…

机器学习流程—数据预处理 清洗

机器学习流程—数据预处理 清洗 数据清洗因为它涉及识别和删除任何丢失、重复或不相关的数据。数据清理的目标是确保数据准确、一致且无错误,因为不正确或不一致的数据会对 ML 模型的性能产生负面影响。专业数据科学家通常会在这一步投入大量时间,因为他们相信Better data b…

Dynamo3.0.3——六年来最大的更新

Hello大家好&#xff01;我是九哥~ 前几天&#xff0c;Dynamo Core 3.0.0版本发布&#xff0c;迎来了Dynamo六年来最大的一次更新。最大的改变&#xff0c;是更新到了.net8&#xff0c;这回对Dynamo节点包产生不小影响。接下来我们详细看一下都有哪些变化。 首先&#xff0…

进⼊ Redis 的世界-初识 Redis【雨林精品】

本章将带领读者进⼊ Redis 的世界&#xff0c;了解它的前世今⽣、众多特性 初识 Redis Redis 是⼀种基于键值对&#xff08;key-value&#xff09;的 NoSQL 数据库&#xff08;非关系型数据库&#xff09;&#xff0c;与很多键值对数据库不同的是&#xff0c;Redis 中的 valu…

Charles的安装及配置

1 Charles激活 激活网址:https://tools.zzzmode.com/mytools/charles/ 得到的激活码后打开Charles,选择help里的registered 进行登录 2 进行ssl代理设置(用来抓取https的请求) 3 输入ssl代理的host和port 4 安装本机证书(选择完成后点击下一步或确定就行) 手机相关配置(保持手…

Effective C++ 学习笔记 条款19 设计class犹如设计type

C就像在其他OOP&#xff08;面对对象编程&#xff09;语言一样&#xff0c;当你定义一个新class&#xff0c;也就定义了一个新type。身为C程序员&#xff0c;你的许多时间主要用来扩张你的类型系统&#xff08;type system&#xff09;。这意味你不只是class设计者&#xff0c;…

瑞_23种设计模式_模板方法模式

文章目录 1 模板方法模式&#xff08;Template Pattern&#xff09; ★ 钩子函数1.1 介绍1.2 概述1.3 模板方法模式的结构1.4 模板方法模式的优缺点1.5 模板方法模式的使用场景 2 案例一2.1 需求2.2 代码实现 3 案例二3.1 需求3.2 代码实现 4 JDK源码解析&#xff08;InputStre…

[BUUCTF]-PWN:starctf_2019_babyshell解析(汇编\x00开头绕过+shellcode)

查看保护 查看ida 这里就是要输入shellcode&#xff0c;但是函数会有检测。 在shellcode前面构造一个以\x00机器码开头的汇编指令&#xff0c;这样就可以绕过函数检查了。 完整exp&#xff1a; from pwn import* context(log_leveldebug,archamd64) pprocess(./babyshell)she…

经上的人物( 4):没什么特长的摩西凭啥能当上领袖?

说起摩西&#xff0c;你或许听过《摩西五经》或“举杖劈开红海”的故事&#xff0c;摩西是旧约中的一个领袖型的人物&#xff0c;他的主要任务是带领在埃及做奴隶的以色列人&#xff0c;离开埃及前往迦南地。 但你知道吗&#xff1f;摩西在一开始接到任务时&#xff0c;他是极度…

【C++】C语言为什么不能函数重载?

文章目录 1.概念2. C为什么支持函数重载&#xff1f; 1.概念 C允许功能类似的同名函数出现&#xff0c;只要形参列表中的参数个数、类型、类型顺序不同&#xff0c;满足这三个条件中任意一个则构成函数重载&#xff0c;函数重载常用来处理实现功能类似数据类型不同的问题。 /…

【Docker4】使用Harbor搭建私有仓库

Docker私有仓库一、搭建本地私有仓库1、daemon.json 配置文件中常用配置项2、搭建私有仓库3、Docker容器重启策略 二、Docker--harbor私有仓库部署与管理1、Harbor 简介2、Harbor的特性3、Harbor的构成4、Harbor 部署4.1、部署 Docker-Compose 服务4.2、部署 Harbor 服务4.3、启…

微信小程序二维数组示例

二维数组在小程序的开发中经常用到&#xff0c;整理如下 // pages/shuzu/shuzu.js Page({/*** 页面的初始数据*/data: {arry:[{name:凉拌茄子,mix:[茄子,蒜末,小米椒,葱花]},{name:清炒丝瓜,mix:[丝瓜,盐,糖]}],week: [{name:星期一,mix:03-08},{name:星期二,mix:03-08},{name…