HTML5 属性

HTML5 属性学习笔记一、HTML5 新增的全局属性1.contenteditable作用指定元素内容是否可编辑值true/false/plaintext-onlydivcontenteditabletrue这段文字可以被编辑/div2.draggable作用指定元素是否可拖动值true/false/autoimgsrcimage.jpgdraggabletrue3.spellcheck作用指定是否进行拼写检查值true/falsetextareaspellchecktrue/textarea4.hidden作用隐藏元素类似 CSS 的display: nonedivhidden这段内容默认隐藏/div5.tabindex作用指定元素的 Tab 键导航顺序值数字正数表示顺序负数表示不可 Tab 聚焦buttontabindex1第一个/buttonbuttontabindex2第二个/button6.translate作用指定元素内容是否可翻译值yes/noptranslateno这段文字不翻译/p7.itemprop,itemscope,itemtype作用用于微数据Microdata提供结构化数据divitemscopeitemtypehttps://schema.org/Personspanitempropname张三/spanspanitempropjobTitle工程师/span/div8.data-*自定义属性作用存储自定义数据divdata-user-id123data-roleadmin用户信息/divJavaScript 访问constelementdocument.querySelector(div);console.log(element.dataset.userId);// 123console.log(element.dataset.role);// admin二、HTML5 新增表单相关属性1. 输入类型相关属性placeholder作用输入框的提示文本inputtypetextplaceholder请输入用户名autofocus作用页面加载时自动聚焦inputtypetextautofocusautocomplete作用启用或禁用自动完成功能值on/offformautocompleteoffinputtypetextnameusername/formrequired作用必填字段inputtypeemailrequiredpattern作用正则表达式验证inputtypetextpattern[A-Za-z]{3}title请输入3个字母min,max,step作用数值范围限制inputtypenumbermin1max100step5multiple作用允许选择多个值用于 email、fileinputtypeemailmultipleinputtypefilemultipleaccept作用指定可接受的文件类型inputtypefileacceptimage/*,.pdflist和datalist作用提供输入建议列表inputlistbrowsersnamebrowserdatalistidbrowsersoptionvalueChromeoptionvalueFirefoxoptionvalueSafari/datalistform作用将表单元素与特定表单关联即使不在form标签内formidmyForminputtypetextnameusername/forminputtypesubmitformmyFormvalue提交formaction,formmethod,formnovalidate,formtarget作用覆盖表单的提交行为仅用于 submit 和 image 类型inputtypesubmitformaction/submit2formmethodpost三、HTML5 新增语义化标签的属性1.article,section,nav,aside,header,footer这些标签本身没有特殊属性但支持所有全局属性用于增强文档结构和 SEO2.figure和figcaptionfigureimgsrcimage.jpgalt示例图片figcaption图片说明/figcaption/figure3.time作用表示时间或日期属性datetimetimedatetime2026-04-092026年4月9日/time4.progress和meterprogress进度条value当前值max最大值progressvalue70max10070%/progressmeter度量值value,min,max,low,high,optimummetervalue0.6min0max1low0.3high0.7optimum0.560%/meter5.details和summary作用可折叠/展开的详细信息detailssummary点击查看详情/summaryp这里是详细内容/p/details6.dialog作用对话框元素属性opendialogopenp这是一个对话框/pbutton关闭/button/dialog四、多媒体相关属性1.audio和videosrc媒体源controls显示控制条autoplay自动播放loop循环播放muted静音preload预加载auto/metadata/noneposter视频封面图width,height尺寸videosrcmovie.mp4controlswidth640height480postercover.jpg您的浏览器不支持 video 标签/video2.source作用为媒体元素提供多个源属性src,typevideocontrolssourcesrcmovie.mp4typevideo/mp4sourcesrcmovie.webmtypevideo/webm/video3.track作用为媒体添加字幕、章节等属性src,kindsubtitles,captions,descriptions,chapters,metadata,srclang,label,defaultvideocontrolssourcesrcmovie.mp4tracksrcsubtitles_en.vttkindsubtitlessrclangenlabelEnglish/video五、其他重要属性1.sandboxiframe作用限制 iframe 的行为值allow-scripts,allow-same-origin,allow-forms,allow-popups等iframesrcpage.htmlsandboxallow-scripts allow-same-origin/iframe2.srcdociframe作用直接嵌入 HTML 内容iframesrcdoch1内嵌内容/h1/iframe3.manifest已废弃但曾用于 PWA作用指定应用清单文件4.downloada和area作用指定下载链接值可选文件名ahreffile.pdfdownload报告.pdf下载文件/a5.pinga和area作用点击时向指定 URL 发送请求用于追踪ahrefhttps://example.comping/track链接/a6.referrerPolicy作用控制 Referer 头发送策略值no-referrer,origin,strict-origin, 等ahrefhttps://example.comreferrerPolicyno-referrer链接/a六、使用建议与注意事项渐进增强HTML5 属性应配合 JavaScript 检测支持情况无障碍性使用aria-*属性增强可访问性SEO 优化合理使用语义化标签和微数据浏览器兼容性旧浏览器可能需要 polyfill性能考虑避免过度使用contenteditable和复杂表单验证七、总结HTML5 引入了大量新属性主要围绕以下方向表单增强更强大的输入验证和用户交互语义化更清晰的文档结构多媒体原生支持音频视频可访问性更好的无障碍支持自定义数据data-*属性提供灵活的数据存储微数据结构化数据支持 SEO 和机器读取掌握这些属性有助于编写更现代、更语义化、更用户友好的网页。