[譯] 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 能作的、又少爲人知的有趣特性，歡迎在下面留言。

（正文完）

---

廣告時間（長期有效）

我有一位好朋友開了一間貓舍，在此幫她宣傳一下。如今貓舍裏養的都是布偶貓。若是你也是個愛貓人士而且有須要的話，不妨掃一掃她的【閒魚】二維碼。不買也沒關係，看看也行。

（完）