• Web前端入门第 12 问:HTML 常用属性一览
  • 2025-06-01 14:18:16
  • 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