前端 [译]你应该知道的多个HTML属性

本文翻译自 13 HTML Attributes You Should Know About，作者：Shefali，略有删改。

在HTML中，属性用于提供有关HTML元素的附加信息。在这篇文章中你将学习多个HTML属性，它们可以增强网站的视觉吸引力。

接下来开始吧！

Accept 属性

您可以将accept属性与元素（仅用于文件类型）一起使用，以指定服务器可以接受的文件类型。

ALT 属性

您可以将alt属性与元素一起使用，以指定图像无法在网页上显示时的替代文本。

前端 [译]你应该知道的多个HTML属性第1张

Autocomplete属性

您可以将autocomplete属性与

、和

元素一起使用，以控制浏览器的自动完成功能。</p><p><input type="text" name="name" autocomplete="on" /></p><p>Contenteditable属性</p><p>您可以使用contenteditable属性指定元素的内容是否可编辑。它允许用户修改元素中的内容。</p><p>这是一个全局属性，这意味着您可以将此属性用于所有HTML元素。</p><p><div contenteditable="true">You can edit this content.</div></p><p>Download属性</p><p>您可以将download属性与<a>元素一起使用，以指定当用户单击链接时，链接的资源应该被下载而不是导航到。</p><p><a href="document.pdf" download="document.pdf">Download PDF</a></p><p>Hidden属性</p><p>您可以使用hidden属性来隐藏网页上的元素。这对于通过JavaScript或CSS控制可见性非常有用。</p><p>这是一个全局属性，这意味着您可以将此属性用于所有HTML元素。</p><p><div hidden>This is hidden content.</div></p><p>Loading属性</p><p>您可以将loading属性与<img>元素一起使用，以控制浏览器加载图像的方式。它有三个值：“eager”、“lazy”和“auto”。</p><p><img onclick="xtip.photoApp('jzpic',{index:'2'})" data-xphoto="jzpic"  src="image.png" title="前端 [译]你应该知道的多个HTML属性  第2张" alt="前端 [译]你应该知道的多个HTML属性  第2张" loading="lazy"></p><p>Multiple属性</p><p>您可以将multiple属性与<input>和<select>元素一起使用，可以允许用户一次选择/输入多个值。</p><p><input type="file" multiple /></p><p><select multiple></p><p><option value="java">Java</option></p><p><option value="javascript">JavaScript</option></p><p><option value="typescript">TypeScript</option></p><p><option value="rust">Rust</option></p><p></select></p><p>Poster属性</p><p>您可以将poster属性与<video>元素一起使用，可以用来显示视频封面，直到用户播放视频。</p><p><video controls poster="image.png" width="500"></p><p><source src="video.mp4" type="video/mp4" /></p><p></video></p><p>Readonly属性</p><p>您可以将readonly属性与<input>元素一起使用，以指定该元素为只读，不可编辑。</p><p><input type="text" value="This is readonly." readonly /></p><p>Srcset属性</p><p>您可以将srcset属性与<img>和<source>（在<picture>中）元素一起使用，以提供图像源列表。这有助于浏览器为不同的屏幕尺寸选择不同的图像。</p><p><img onclick="xtip.photoApp('jzpic',{index:'3'})" data-xphoto="jzpic"  src="image.jpg" title="前端 [译]你应该知道的多个HTML属性  第3张" alt="前端 [译]你应该知道的多个HTML属性  第3张" srcset="image.jpg, image-2x.jpg, image-3x.jpg"></p><p>Spellcheck属性</p><p>您可以将spellcheck属性与<input>元素（非密码类型）、内容可编辑元素和<textarea>元素一起使用，以启用或禁用浏览器的拼写检查。</p><p><input type="text" spellcheck="false" /></p><p>Title属性</p><p>您可以使用title属性来提供有关元素的其他信息。当用户将鼠标悬停在元素上时，通常会显示此信息。</p><p>这是一个全局属性，这意味着您可以将此属性用于所有HTML元素。</p><p><a href="document.pdf" title="Click to download">Download File</a></p><p>Start属性</p><p>Start属性允许您指定列表项的起始编号。</p><p><ol start="20"></p><p><li>Pineapple</li></p><p><li>Apple</li></p><p><li>Greenapple </li></p><p></ol></p><p>Reversed属性</p><p>使用reversed属性可以反转列表编号的顺序。</p><p><ol reversed></p><p><li>Pineapple</li></p><p><li>Apple</li></p><p><li>Greenapple </li></p><p></ol></p><p>Dir属性</p><p>您可以使用dir属性设置您的文本方向从右到左还是从左到右，从右到左设置为rtl即可。</p><p><p dir="rtl">Awesome!</p></p><p>今天的内容就到这里，谢谢你的阅读。这么多个html属性是否有你没有发现的呢，希望对你有帮助。</p><p>看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～</p><p>专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）</p><p>好文推荐</p><div class="ly_isview_code_1"><div class="ly_isview_codea" data-id="18515449"><span><a href="https://www.51969.com/zb_system/login.php" target="_blank">评论可见</a>，请评论后查看内容，谢谢！！！</span></div></div><div id="tingliu" style="background-color:#FFFFFF;border:1px dashed #FF0000;text-align:center;display:block;"><span class="tingliu2 hint--top hint--bounce"><a href="##read_time"><img src="https://www.51969.com/zb_users/plugin/zharry_Reading_time/images/tishi.gif" class="tingliu5" ></a></span>  <span class="tingliu2">您阅读本篇文章共花了：</span> <span class="tingliu3" id="stime"></span> </div></br><script language="JavaScript">var ss=0,mm=0,hh=0;function TimeGo(){ss++;if(ss>=60){mm+=1;ss=0}if(mm>=60){hh+=1;mm=0}ss_str=(ss<10?"0"+ss:ss);mm_str=(mm<10?"0"+mm:mm);tMsg=""+hh+"小时"+mm_str+"分"+ss_str+"秒";document.getElementById("stime").innerHTML=tMsg;setTimeout("TimeGo()",1000)}TimeGo();</script> </div> <div class="tags"> <a href="https://www.51969.com/tags/html/" target="_blank">html</a><a href="https://www.51969.com/tags/%E5%89%8D%E7%AB%AF/" target="_blank">前端</a> </div> <div class="copyright"><blockquote>本文由 用户 于 2024-02-09 发布在 金钥匙，如有疑问，请联系我们。<br>本文链接：<a href="https://www.51969.com/post/18515449.html">https://www.51969.com/post/18515449.html</a></blockquote></div> <div class="single-share"> <div class="post-share"> <a title="分享"><i class="jzicon-jzfenxiang"></i></a> <div class="share-icons share-sns" data-title="前端 [译]你应该知道的多个HTML属性" data-url="https://www.51969.com/post/18515449.html"> <span class="share-icon share-wechat cl" data-type="wechat" title="分享到微信"><i class="jzicon-weixin"></i><span id="wechat-qrcode"></span></span> <span class="share-icon share-sina-weibo cl" data-type="weibo" title="分享到微博"><i class="jzicon-weibo"></i></span><span class="share-icon share-qq cl" data-type="qq" title="分享到QQ好友"><i class="jzicon-qq"></i></span> </div> </div> <div class="post-like"> <a href="javascript:;" onclick="Jz52_tsqa_prise('18515449')" class="Jz52_tsqa_prise_id-18515449 dotGood Jz52_tsqa_prise badge" title="好文！一定要点赞！" data-badge="0"><i class="jzicon-jzzan-h"></i><em class="emz">0</em><em>赞</em></a><a href="javascript:;" class="comiis_poster_a single_icon bill_icon" title="文章海报"><i class="jzicon-jzimg"></i></a> </div></div> </div> <div class="nextpro www_51969_com"> <div class="prev"> <article class="post-overlay"> <div class="background-img" style="background-image:url(images/石榴.jpeg)"> </div> <div class="post_text"> <span><i class="jzicon-angle-left"></i>上一篇</span> <h3 class="post__title typescale-1 nav-prev">前端 HTML学生个人网页设计 课程设计 javascript html网页制作----使用HTML CSS制作静态网站【中秋节】</h3> </div> <a href="https://www.51969.com/post/18515442.html" class="link-overlay"></a> </article> </div> <div class="next"> <article class="post-overlay"> <div class="background-img" style="background-image:url(https://www.51969.com/zb_users/theme/Jz52_tsqa/style/images/nextnoimg.jpg)"> </div> <div class="post_text"> <span>下一篇<i class="jzicon-angle-right"></i></span> <h3 class="post__title typescale-1 nav-next">6-MATLAB APP Design-表格组件（uitable）</h3> </div> <a href="https://www.51969.com/post/18515456.html" class="link-overlay"></a> </article> </div> </div> <div class="related-list www_51969_com"> <h3><i class="jzicon-jztuwen"></i> 相关文章</h3> <ul> <li><a href="https://www.51969.com/post/18877692.html" title="前端 javascript 富文本编辑器（wangEdit）+（jquery.wordexport）实现web版在线编辑导出"><p>前端 javascript 富文本编辑器（wangEdit）+（jquery.wordexport）实现web版在线编辑导出</p></a> </li> <li><a href="https://www.51969.com/post/18877664.html" title="javascript 前端 jquery操作DOM对象"><p>javascript 前端 jquery操作DOM对象</p></a> </li> <li><a href="https://www.51969.com/post/18877671.html" title="前端 javascript jQuery select获取选中的值资料记录，自我突破"><p>前端 javascript jQuery select获取选中的值资料记录，自我突破</p></a> </li> <li><a href="https://www.51969.com/post/18877650.html" title="柚子快报激活码778899分享："><p>柚子快报激活码778899分享：</p></a> </li> <li><a href="https://www.51969.com/post/18877370.html" title="前端 javascript vue.js git的基础操作篇"><p>前端 javascript vue.js git的基础操作篇</p></a> </li> <li><a href="https://www.51969.com/post/18877195.html" title="前端 node.js pnpm : 无法加载文件 C:\Program Files\nodejs\pnpm.ps1，因为在此系统上禁止运行脚本。"><p>前端 node.js pnpm : 无法加载文件 C:\Program Files\nodejs\pnpm.ps1，因为在此系统上禁止运行脚本。</p></a> </li> <li><a href="https://www.51969.com/post/18877699.html" title="前端 jQuery入门到精通学习教程，收藏我这篇就够了"><p>前端 jQuery入门到精通学习教程，收藏我这篇就够了</p></a> </li> <li><a href="https://www.51969.com/post/18877678.html" title="前端 html5 Web网页设计：html+css+javascript+jquery制作北京景点介绍7页 WEB静态旅游景点区主题网页设计与制作"><p>前端 html5 Web网页设计：html+css+javascript+jquery制作北京景点介绍7页 WEB静态旅游景点区主题网页设计与制作</p></a> </li> </ul> </div> <div class="comments www_51969_com"> <div id="comments" class="comments-area clearfix"> <div class="comment-list"><div class="jz-comment" id="divCommentPost"><h4 class="comments-title"> <span><i class="jzicon-jzqipaoc"></i>发表评论</span><a rel="nofollow" id="cancel-reply" href="#divCommentPost" style="display:none;float:right;"><small>取消回复</small></a></h4> <form id="frmSumbit" target="_self" method="post" action="https://www.51969.com/zb_system/cmd.php?act=cmt&postid=18515449&key=d29ab378fc57a208288b1f75e7d286b4" ><input type="hidden" name="inpId" id="inpId" value="18515449"><input type="hidden" name="inpRevID" id="inpRevID" value="0"><div class="jz-comment-box jz-comment-ul3"> <input type="text" name="inpName" id="inpName" class="text" value="" size="28" tabindex="1" placeholder="名称(*)"> </div> <div class="jz-comment-box jz-comment-ul3 jz-comment-ul3-2"> <input type="text" name="inpEmail" id="inpEmail" class="text" value="" size="28" tabindex="2" placeholder="邮箱"> </div> <div class="jz-comment-box jz-comment-ul3"> <input type="text" name="inpHomePage" id="inpHomePage" class="text" value="" size="28" tabindex="3" placeholder="网站"> </div><div class="jz-comment-box jz-comment-textarea"> <textarea name="txaArticle" id="txaArticle" class="text" cols="50" rows="4" tabindex="5" placeholder="欢迎在这里交流评论，但是垃圾评论不受欢迎！">