HTML入门:属性

news2024/9/23 13:16:15

你好,我是云桃桃。今天来聊一聊 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.coloradmin.cn/o/1502781.html

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

相关文章

蓝桥杯之【01背包模版】牛客例题展示

牛客链接 #include <bits/stdc.h> using namespace std; int n,V; const int N1010; int v[N],w[N]; int dp[N][N]; int main() {cin>>n>>V;for(int i1;i<n;i){cin>>v[i]>>w[i];}for(int i1;i<n;i){for(int j1;j<V;j){dp[i][j]dp[i-1][…

idea远程服务器debug

前提 本地代码和服务器代码一致 idea中创建远程服务 一般只需要修改ip&#xff0c;注意这边的端口是监听Socket的端口&#xff0c;不是服务的端口 然后把运行参数复制一下 -agentlib:jdwptransportdt_socket,servery,suspendn,address5005 tomcat启动 在tomcat的lib下的c…

OJ_二叉排序树

题干 C实现 循环双指针法(一个指向父亲&#xff0c;一个指向待插入结点) #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <queue> using namespace std;struct TreeNode {char data;TreeNode* left;TreeNode* right; };void InsertBST(TreeNode* …

扩展黄永刚原始晶体塑性程序加入AF背应力模拟金属疲劳问题

参考文献&#xff1a;《Low-cycle fatigue life prediction of a polycrystalline nickel-base superalloy using crystal plasticity modelling approach》 在原始程序中修改流动方程&#xff0c;加入背应力项&#xff0c;引入运动硬化项&#xff0c;从而可以描述多晶金属循环…

智慧公厕系统的运作过程

智慧公厕是一种新型的未来城市公共厕所&#xff0c;通过物联网、互联网、大数据、云计算、自动化控制等技术&#xff0c;实现公共厕所使用、运营、管理、养护的全过程全方位信息化。 那么&#xff0c;智慧公厕是如何运作的&#xff1f;智慧公厕的运作过程包括什么技术&#xf…

悬浮工具球(仿 iphone 辅助触控)

悬浮工具球&#xff08;仿 iphone 辅助触控&#xff09; 兼容移动端 touch 事件点击元素以外位置收起解决鼠标抬起触发元素的点击事件问题 Demo Github <template><divref"FloatingBal"class"floating_ball":class"[dragging, isClick]&q…

【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、启…

OJ_判断两序列是否为同一二叉搜索树序列

题干 C实现 求出两棵树的中序和先序序列对比中序和先序序列是否相同 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <string> #include <queue> using namespace std;struct TreeNode {char data;TreeNode* left;TreeNode* right; };void …

day17_订单(结算,提交订单,支付页,立即购买,我的订单)

文章目录 订单模块1 结算1.1 需求说明1.2 获取用户地址1.2.1 UserAddress1.2.2 UserAddressController1.2.3 UserAddressService1.2.4 UserAddressMapper1.2.5 UserAddressMapper.xml 1.3 获取购物项数据1.3.1 CartController1.3.2 CartService1.3.3 openFeign接口定义 1.4 环境…

VUE_nuxt启动只能通过localhost访问,ip访问不到:问题解决

修改项目根目录下的 package.json "config": {"nuxt": {"host": "0.0.0.0","port": "3000"} } 这样项目启动后就可以通过ip进行访问了

ViewModel

1.ViewModel的诞生与作用 Activity package com.tiger.viewmodel;import androidx.appcompat.app.AppCompatActivity; import androidx.lifecycle.ViewModelProvider;import android.os.Bundle; import android.util.Log; import android.view.View; import android.widget.Te…

Codeforces Round 929 (Div. 3)- ABCDEFG

A:Turtle Puzzle: Rearrange and Negate 思路&#xff1a; 将负的元素全部排到一起&#xff0c;然后对它们符号取反&#xff0c;然后求所有元素的和&#xff0c;此时就是最大值了。 代码&#xff1a; #include<iostream> using namespace std;void solve() {int n;cin&…

电脑资料管理软件(5个高效批量管理电脑资料的方法)

企业电脑资料管理是企业一大难题&#xff0c;为什么这样说&#xff1f; 首先&#xff0c;企业电脑资料的数量庞大且种类繁多。 其次&#xff0c;电脑资料的安全性和保密性要求高。 再者&#xff0c;电脑资料的管理涉及到多个部门和员工的协作。 ...... 针对此类情况很多企业…

Vue中的组件:构建现代Web应用的基石

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

基于redis实现互斥锁

利用setnx命令实现类似获取锁和释放锁。 获取锁&#xff0c;setnx lock 1&#xff0c;返回值为1视为获取成功&#xff0c;为0视为获取失败 释放锁&#xff0c;del lock 特殊情况&#xff1a; 如果获取锁之后&#xff0c;锁来还来不及释放&#xff0c;redis宕机了&#xff0c;这…

MIT6.5840(6.824)Lab2总结(Raft)

MIT6.5840&#xff08;原MIT6.824&#xff09;Lab2总结&#xff08;Raft&#xff09; 资源分享&#xff1a; 官网地址&#xff1a;http://nil.csail.mit.edu/6.5840/2023/ Raft论文地址&#xff1a;http://nil.csail.mit.edu/6.5840/2023/papers/raft-extended.pdf 官方学生…

gumbel-softmax如何实现离散分布可微+torch代码+原理+证明

文章目录 背景方法通俗理解什么是重参数化gumbel-softmax为什么是gumbeltorch实现思考 背景 这里举一个简单的情况&#xff0c;当前我们有p1, p2, p3三个概率&#xff0c;我们需要得到最优的一个即max(p1, p2, p3)&#xff0c;例如当前p3 max(p1, p2, p3)&#xff0c;那么理想…

SSRF漏洞基础原理(浅层面解释 + 靶场演示)

一、SSRF漏洞的基本概念&#xff1a; SSRF--全名&#xff1a;Server-Side Request Forgery&#xff0c;汉译&#xff1a;服务端请求伪造&#xff0c;漏洞别名“借刀杀人”。 想象以下&#xff0c;现存在一个 Web应用&#xff0c;这个Web应用可以帮助我们能爬取互联网上的其他…

js 添加、删除DOM元素

1. js添加、删除DOM元素 1.1. 添加DOM元素 1.1.1. appendChild()方法 该方法添加的元素位于父元素的末尾&#xff0c;使用方法&#xff1a; parentNode.appenChild(NewNode) // parentNode是需要添加元素的容器&#xff0c;NewNode是新添加的元素   创建一个li元素并添加到…

数据结构与算法-哈希表

引言 在计算机科学中&#xff0c;数据结构与算法是构建高效软件系统的关键基石。其中&#xff0c;哈希表作为一种非常实用的数据结构&#xff0c;以其快速查找、插入和删除等特性&#xff0c;在诸多领域发挥着无可替代的作用。本文将深入探讨哈希表的工作原理、实现细节以及其在…