原文链接:HTML can do that?, by Ananya Neogi
见证了 CSS 能做什么 之后,再来看看 HTML 能为我们做什么了!
看完之后,你会发现,原来只使用 HTML,就能实现这么多的效果。
一、带有搜索功能的下拉框
<input list="magicHouses" id="myHouse" name="myHouse" placeholder="type here..." />
<datalist id="magicHouses">
<option value="Gryfindor">
<option value="Hufflepuff">
<option value="Slytherin">
<option value="Ravenclaw">
<option value="Horned Serpent">
<option value="Thunderbird">
<option value="Pukwudgie">
<option value="Wampus">
</datalist>
效果:
demo 地址:codepen.io/ananyaneogi…
二、对话框
<button id="openBtn">Click to know more!</button>
<dialog id="dialog">
<button id="closeBtn">close</button>
<ul>
<li>
<h4>WHERE IN THE WORLD</h4>
<p>Mount Greylock, Massachusetts, North America</p>
</li>
...
</ul>
</dialog>
<script>
openBtn.addEventListener('click', () => { dialog.open = true })
closeBtn.addEventListener('click', () => { dialog.open = false })
</script>
效果:
demo 地址:codepen.io/ananyaneogi…
三、进度条
<progress value="56" max="100"></progress>
<meter min="0" max="100" value="56" low="25" high="75" optimum="50"></meter>
效果:
demo 地址:codepen.io/ananyaneogi…
四、展开/收缩详情信息
<section>
<details open>
<summary>Beauxbatons Academy of Magic</summary>
<p>
If you like your magic served with a dash of savoir faire, this school is for you. Beauxbatons welcomes a multitude of students of different nationalities, mainly French, but also Spanish, Portuguese, Dutch, Luxembourgian and Belgian.
</p>
</details>
<details>
<summary>Durmstrang Institute</summary>
<p>You’ll certainly hear a few interesting stories at Durmstrang, seeing as this is the school that Dark wizard Gellert Grindelwald was expelled from. </p>
</details>
...
</section>
效果:
demo 地址:codepen.io/ananyaneogi…
五、基于 inputmode 在移动端弹出不同键盘类型
<input id="num" inputmode="numeric">
<input id="email" inputmode="email">
<input id="tel" inputmode="tel">
<input id="url" inputmode="url" type="url">
效果:
demo 地址(手机打开):codepen.io/ananyaneogi…
六、颜色拾取器
<input type="color" value="#e0ffee" id="colorPicker">
<b>Current color code: <code id="colorCode"></code></b>
<script>
colorPicker.addEventListener("input", setColor);
function setColor() {
body.style.backgroundColor = input.value;
colorCode.innerHTML = input.value;
}
</script>
效果:
demo 地址:codepen.io/ananyaneogi…
七、文本高亮
<article>
<p>
‘Welcome to Hogwarts,’ ...<mark>The Sorting</mark> is ...
</p>
<p>
‘The four houses are called...<mark>your triumphs will earn your house points</mark>....
</p>
</article>
效果:
demo 地址:codepen.io/ananyaneogi…
八、拨号链接
拨号链接与邮箱发送( mailto
)链接书写类似,不过使用的是 tel
。
<a href="tel:+917272727272">+91-7272727272</a>
效果:
demo 地址:codepen.io/zhangbao/pe…
九、显示删除和插入文本
删除文本使用 <del>...</del>
,插入文本使用 <ins>...</ins>
。
<article>
<p>
‘Welcome to Hogwarts,’ ...will <ins>begin</ins> <del>commence</del> shortly...
</p>
<p>
‘The four houses are called Gryffindor, Hufflepuff, Ravenclaw and <ins>Slytherin</ins> <del>Thunderbird</del>. Each house ...<ins>I hope each of you will be a credit to whichever house becomes yours.</ins>
</p>
</article>
效果:
demo 地址:codepen.io/ananyaneogi…
十、编辑页面内容
为标签添加 contenteditable
属性,即能让元素内容变得可编辑。
<div class="edit" contenteditable>
You can edit me...and add as much ye wish!
</div>
效果:
demo 地址:codepen.io/ananyaneogi…
感觉还不够吗?查看这篇文章,你还能将你的 整个网页变成可编辑的编辑器!
注意:并非所有浏览器都实现了这些元素和属性,但是我们今天仍然可以作为渐进特性使用它们!
HTML 网页的基础,因此我们也要对它认真学习和关注。语义标记不仅有助于 SEO,而且还有助于 可访问性。
如果你还知道其他 HTML 能做的、又少为人知的有趣特性,欢迎在下面留言。
(正文完)
广告时间(长期有效)
我有一位好朋友开了一间猫舍,在此帮她宣传一下。现在猫舍里养的都是布偶猫。如果你也是个爱猫人士并且有需要的话,不妨扫一扫她的【闲鱼】二维码。不买也不要紧,看看也行。
(完)