核心内容摘要
穿越次元的魅影：桥本香菜与“91糖心”的奇妙碰撞
上述两篇文章分别阐述了HTML入门基础及进阶这篇文章主要给大家分享一下HTML标签属性的一些知识希望能够帮助大家进一步的了解前端基础知识。
简单来说HTML 属性是附加在标签上的 “配置项”用于为标签提供额外信息或改变标签的默认行为 / 外观。
所有属性都写在标签的开始部分标签名 属性名属性值大部分属性是通用的如class、id也有部分是标签专属的如a的href。
标识与定位类通用用于在 CSS/JS 中精准找到对应的标签是前端开发中最基础也最常用的属性。
id给标签设置唯一标识页面中 id 不能重复用于 JS 精准获取元素或 CSS 单独样式控制。
!-- 示例通过id定位唯一的“提交按钮” -- button idsubmit-btn提交/buttonclass给标签设置类名可重复用于批量控制多个标签的样式或行为核心复用属性。
!-- 示例多个元素共用“text-red”类统一设置红色文字 -- p classtext-red提示1/p span classtext-red提示2/span
功能控制类标签专属决定标签的核心功能不同标签的专属属性是实现页面交互的关键。
a标签的href指定链接跳转的目标地址无此属性则a只是普通文本。
a hrefhttps://www.baidu.com跳转到百度/aimg标签的src/altsrc指定图片的路径核心alt是图片加载失败时的替代文本兼顾无障碍。
img srclogo.png alt网站logoinput标签的type/valuetype决定输入框类型文本、密码、复选框等value是输入框的默认值。
placeholder 属性规定可描述输入字段预期值的简短的提示信息比如一个样本值或者预期格式的短描述。
该提示会在用户输入值之前显示在输入字段中。
input typepassword value placeholder请输入密码
样式与行为类通用 / 专属直接或间接影响标签的外观、交互行为。
style行内设置标签的 CSS 样式优先级最高但不推荐大量使用建议用 class 统一管理。
div stylewidth: 100px; height: 100px; background: red;红色方块/divdisabled禁用表单元素如按钮、输入框使其无法被点击 / 输入。
button disabled不可点击的按钮/buttontitle鼠标悬浮在标签上时显示提示文本提升用户体验。
span title这是提示文字悬浮看提示/span
自定义属性HTML5 正式引入了data-*自定义属性规范它允许你在 HTML 标签上存储与页面 / 元素相关的自定义数据这些数据不会影响元素的默认行为也不会被浏览器解析为原生属性专门用于开发者在 HTML 和 JS 之间传递自定义信息。
命名规则必须以data-开头后面跟自定义名称如data-id、data-user-name名称只能包含字母、数字、连字符-、下划线_、点.且不能包含大写字母取值和普通属性一样值用引号包裹支持字符串、数字、JSON 格式需转义等兼容性所有现代浏览器都支持是前端开发中存储元素关联数据的标准方式。
自定义属性的
使用方法完整示例
在 HTML 中定义自定义属性直接在标签上添加data-*属性示例如下!-- 单个自定义属性 -- div classuser-card>div iduser>/* 匹配所有>!-- 商品列表项点击时通过data-id获取商品ID -- li classproduct-item>div classtab>div classcarousel data-auto-playtrue data-interval3000轮播图/div注意data()vsattr()的区别很多新手会混淆data()和attr()两者都能获取data-*属性但核心差异很大务必注意特性$(elem).data(key)$(elem).attr(data-key)数据类型自动转换数字 / 布尔 / JSON始终返回字符串数据存储位置存储在 jQuery 的内部缓存中直接操作 HTML 标签的属性可见于源码修改后是否同步到 DOM不会同步修改后 HTML 源码不变同步到 DOM修改后 HTML 源码可见
5.