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