Web前端入门第 12 问:HTML 常用属性一览

news/2025/3/6 9:41:49/文章来源:https://www.cnblogs.com/linx/p/18754282

HELLO,这里是大熊学习前端开发的入门笔记。

本系列笔记基于 windows 系统。

HTML 常用属性大约 70 个,是否又头大了?脸上笑嘻嘻,心里嘛...嘿嘿...

温馨提示:属性不用死记硬背,多练多写慢慢就记住了。

全局常用属性

全局属性为 HTML 元素的通用属性,可以在任何元素上使用。

autofocus:页面加载时自动聚焦到该元素,如:页面加载成功后输入框自动聚焦。

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

contenteditable:使元素内容可编辑,如:富文本编辑框。

data-*:用于存储页面或应用程序的私有自定义数据。

draggable:指定元素是否可拖动。

id:定义一个标识符 (ID),该标识符在整个文档中必须是唯一的。

lang:指定元素内容的语言。

style:为元素指定内联CSS样式。

tabindex:控制元素的键盘导航顺序,如键盘 Tab 切换顺序。

title:提供元素的额外信息,通常显示为工具提示,如:鼠标悬浮提示文本。

标签常用属性

  • meta 标签属性:

charset:定义文档的字符编码。
name/content:定义文档的元数据,如描述、关键词等。

  • link 标签属性:

href:链接到的URL。
rel:定义当前文档与被链接文档的关系。
type:被链接文档的MIME类型。

  • style 标签属性:

type:样式表的MIME类型,通常为text/css。
media:指定样式表应用于哪些媒体类型。

  • script 标签属性:

src:外部脚本文件的URL。
type:脚本的MIME类型,通常为text/javascript。
async/defer:控制脚本的加载和执行方式。

  • blockquote 标签属性:

cite:引用来源的URL。

  • a 标签属性:

href:链接到的URL。
target:指定链接打开的位置(如_blank为新窗口)。
rel:定义当前文档与被链接文档的关系。

  • img 标签属性:

src:图像的URL。
alt:图像的替代文本。
width/height:图像的宽度和高度。

  • video、audio 标签属性:

src:媒体文件的URL。
controls:显示播放控件。
autoplay:自动播放。
loop:循环播放。
muted:静音播放。
poster(仅video):视频加载前的封面图像。

  • source 标签属性:

src:媒体文件的URL。
type:媒体文件的MIME类型。
media:指定媒体文件适用的媒体查询。

  • ol 标签属性:

type:列表项的标记类型(如1、A、i)。

  • form 标签属性:

action:表单提交到的URL。
method:表单数据的提交方式(如GET、POST)。
enctype:表单数据的编码类型。
target:表单提交后结果显示的位置。

  • input 标签属性:

type:输入字段的类型(如text、password、submit)。
name:输入字段的名称。
value:输入字段的初始值。
placeholder:输入字段的占位符文本。
required:指定输入字段为必填。
readonly/disabled:使输入字段只读或禁用。

  • textarea 标签属性:

name:文本区域的名称。
rows/cols:文本区域的行数和列数。
placeholder:文本区域的占位符文本。
required:指定文本区域为必填。
readonly/disabled:使文本区域只读或禁用。

  • select 标签属性:

name:下拉列表的名称。
multiple:允许选择多个选项。
size:显示的下拉列表项数。
required:指定下拉列表为必填。
disabled:禁用下拉列表。

  • option 标签属性:

value:选项的值。
selected:预选中该选项。
disabled:禁用该选项。

  • label 标签属性:

for:与标签关联的输入字段的ID。

  • button 标签属性:

type:按钮的类型(如button、submit、reset)。
disabled:禁用按钮。

  • td、th 标签属性:

colspan:跨越多列。
rowspan:跨越多行。
headers:与表头单元格关联的ID列表。
scope(仅th):定义表头单元格与数据单元格的关系。

  • canvas 标签属性:

width/height:画布的宽度和高度。

  • iframe 标签属性:

src:嵌入内容的URL。
width/height:iframe的宽度和高度。
name:iframe的名称,用于目标定位。
sandbox:启用额外的安全限制。
allow:指定允许的功能(如全屏、摄像头访问)。

参考资料:https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey

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

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

相关文章

Web前端入门第 8 问:HTML !DOCTYPE 申明有何用处?如果没有此申明有什么问题?

HELLO,这里是大熊学习前端开发的入门笔记。 本系列笔记基于 windows 系统。先电脑端浏览器打开任何一个网页,比如百度。 再用 ctrl + u 快捷键即可查看源码,瞅瞅第一行代码,是不是都是 <!DOCTYPE xxx> 开头。 是否好奇这这行代码有嘛用? DOCTYPE 语法规则声明必须是…

Web前端入门第 9 问:HTML 块级元素,内联块元素,内联元素三者有什么区别?

HELLO,这里是大熊学习前端开发的入门笔记。 本系列笔记基于 windows 系统。HTML 中的元素根据其默认的 显示类型 主要分为三类:块级元素、内联元素 和 内联块元素。 它们的核心区别在于布局行为和样式控制的支持程度。 块级元素 块级元素(Block Elements)是指在 HTML 中以块…

Easyexcel(1-注解使用)

EasyExcel 是阿里巴巴开源的一个轻量级 Excel 操作框架,专为 Java 开发者设计,支持读取和写入 Excel 文件。它使用注解来简化数据解析和导出工作,特别适用于复杂的 Excel 文件结构和大数据量处理。版本依赖 <dependency><groupId>com.alibaba</groupId>&l…

MES收料批号接口,列名FID无效

原因:主键字段名默认设置了FID,如下图。 解决:将主键字段名修改为实际的主键字段名称即可。

数据处理神器!一款强大的数据处理命令行工具!

dasel —— 一款用于处理和操作多种数据格式的命令行工具,支持对 JSON、YAML、TOML、XML 和 CSV 格式数据进行查询、修改、添加、删除和转换。大家好,我是 Java陈序员。 我们在日常开发中,经常会操作使用一些 JSON、YAML、XML 等格式的数据,对数据进行增删改查和转换操作。…

WEBAPI搜索不到MES收料批号

原因:MES收料批号没有发布菜单 解决:发布菜单后可以正常搜到。

linux 中sed命令删除指定分割符及其最后的一个域

001、[root@PC1 test2]# ls a.txt [root@PC1 test2]# cat a.txt ## 测试数据 W-URI-20 W-HYB-21 aaa fff-ddd-eee ZOM-1 ZOM-9 AWA-A-1 AWA-A-6 [root@PC1 test2]# sed s/-\S[^-]*$// a.txt ## 命令 W-URI W-HYB aaa fff-ddd ZOM ZOM AWA-A AWA-A。

vue+echarts 循环生成多个图表

借鉴网上开源分享 https://blog.csdn.net/weixin_49668076/article/details/114263986<template><!-- 实时数据图表 --><div class="main-container"><el-row class="totalEchart"><el-col :span="8" :key="ind…

智能合约学习笔记-进阶合约FundMe

收集投资 获取ETH/USD兑换rate 复制该地址页面内初始化 精度从这查找(precision) 表格中的 DEC(十进制)列显示了该数据流的精度,即 8。这意味着我们应该执行以下操作:return ethAmount * uint256(getChainlinkDataFeedLatestAnswer()) / (10 ** 8);coin和token 君不见…

Solidity学习笔记--基础语法

定义约定俗成:变量小写开头,类型或合约大写开头基础数据类型booluint256 无符号整型,代表一个不允许负数的整数。int256 有符号整型,代表一个能取到正数和负数的整数。 bytes32stringaddress合约:也可以作为数据类型去使用https://binschool.org/solidity-basic/soli…

solidity学习笔记-工厂模式

为什么使用(js的公共组件)如果要创建同一合约的多个实例,并且正在寻找一种跟踪它们并简化管理的方法。 提高合约安全性 降低部署成本实现(类似js的引入与调用) 君不见,高堂明镜悲白发,朝如青丝暮成雪

Python和Pycharm安装

Python简介 Python是一种计算机程序设计语言,它结合了解释性、编译性、互动性和面向对象的脚本语言,非常简单易用。Python 的设计具有很强的可读性,相比其他语言经常使用英文关键字,其他语言的一些标点符号,它具有比其他语言更有特色语法结构。很多著名的网站都是用它编写…