[译] HTML 能作什么？

原文连接：HTML can do that?， by Ananya Neogi

见证了 CSS 能作什么 以后，再来看看 HTML 能为咱们作什么了！

看完以后，你会发现，原来只使用 HTML，就能实现这么多的效果。

1、带有搜索功能的下拉框

<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…

2、对话框

<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…

3、进度条

<progress value="56" max="100"></progress>
<meter min="0" max="100" value="56" low="25" high="75" optimum="50"></meter>
复制代码

效果：

demo 地址：codepen.io/ananyaneogi…

4、展开/收缩详情信息

<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…

5、基于 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…

6、颜色拾取器

<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…

7、文本高亮

<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…

8、拨号连接

拨号连接与邮箱发送（ mailto）连接书写相似，不过使用的是 tel。

<a href="tel:+917272727272">+91-7272727272</a>
复制代码

效果：

demo 地址：codepen.io/zhangbao/pe…

9、显示删除和插入文本

删除文本使用 <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…

10、编辑页面内容

为标签添加 contenteditable 属性，即能让元素内容变得可编辑。

<div class="edit" contenteditable>
You can edit me...and add as much ye wish!
</div>
复制代码

效果：

demo 地址：codepen.io/ananyaneogi…

感受还不够吗？查看这篇文章，你还能将你的 整个网页变成可编辑的编辑器！

注意：并不是全部浏览器都实现了这些元素和属性，可是咱们今天仍然能够做为渐进特性使用它们！

HTML 网页的基础，所以咱们也要对它认真学习和关注。语义标记不只有助于 SEO，并且还有助于 可访问性。

若是你还知道其余 HTML 能作的、又少为人知的有趣特性，欢迎在下面留言。

（正文完）

---

广告时间（长期有效）

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

（完）