[译] HTML 能做什么？

原文链接：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 能做的、又少为人知的有趣特性，欢迎在下面留言。

（正文完）

---

广告时间（长期有效）

我有一位好朋友开了一间猫舍，在此帮她宣传一下。现在猫舍里养的都是布偶猫。如果你也是个爱猫人士并且有需要的话，不妨扫一扫她的【闲鱼】二维码。不买也不要紧，看看也行。