分享 24 个鲜为人知的 HTML 属性,助你提升开发效率
前端达人
共 4412字,需浏览 9分钟
·
2022-02-13 00:57
<input type="file" accept=".jpg, .png">
<input type="text" autofocus>
<input type="text" inputmode="url" />
<input type="text" inputmode="email" />
<input type="text" inputmode="numeric" />
<input name="username" id="username" pattern="[A-Za-z0-9]+">
<form action="/send_form.js">
Username: <input type="text" name="username" required>
<input type="submit">
</form>
<input name="credit-card-number" id="credit-card-number" autocomplete="off">
<input type="file" multiple>
<a href="document.pdf" download>Download PDF</a>
<div contenteditable="true"> This text can be edited by the user.</div>
<input type="text" id="sports" name="sports" value="golf" readonly>
<p hidden>This text is hidden</p>
<p contenteditable="true" spellcheck="true">Myy spellinng is checkd</p>
<footer><p translate="no">Printing Works, Inc</p></footer>
<img src="https://cdn.mysite.com/media/image.jpg" loading="lazy">
<img src="imageafound.png" onerror="this.onerror=null;this.src='imagenotfound.png';"/>
<video src="https://cdn.mysite.com/media/video.mp4"poster="image.png"></video>
<audio controls<source src="track11.mp3" type="audio/mpeg"></audio>
<video autoplaysrc="https://cdn.mysite.com/media/myvideo.mp4"poster="image.png"></video>
<audio loop<source src="track323.mp3" type="audio/mpeg"></audio>
<blockquote cite="https://mysite.com/original-source-url">
<p>Some awesome quote</p>
</blockquote>
<p> My plans for 2021 include visiting Thailand,
<del datetime="2021-01-01T18:21">creating 6 courses,</del>
<ins datetime="2021-02-02T14:07">writing 12 articles.</ins>
</p>
<p>I will evaluate the completion on
<time datetime="2021-12-31">
</time>.</p>
<script src="script.js" async></script>
<script src="script.js" defer></script>
<script>
const allowDrop = (e) => e.preventDefault();
const drag = (e) => e.dataTransfer.setData("text", e.target.id);
const drop = (e) => { var data = e.dataTransfer.getData("text");
e.target.appendChild(document.getElementById(data));}
</script>
<div ondrop="drop(event)" ondragover="allowDrop(event)" style="width:150px; height:50px; padding: 10px; border:1px solid black"></div>
<p id="drag" draggable="true" ondragstart="drag(event)">Drag me into box</p>
学习更多技能
请点击下方公众号
评论