[译] HTML 能做什么?

2,087 阅读3分钟

原文链接: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>

效果:

GIF.gif

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>

效果:

GIF.gif

demo 地址:codepen.io/ananyaneogi…

三、进度条

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

效果:

image.png

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>

效果:

GIF.gif

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

效果:

ezgif-3-c2dfe8a2995d.gif

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>

效果:

ezgif-3-18bcff0f8938.gif

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>

效果:

image.png

demo 地址:codepen.io/ananyaneogi…

八、拨号链接

拨号链接与邮箱发送( mailto)链接书写类似,不过使用的是 tel

<a href="tel:+917272727272">+91-7272727272</a>

效果:

ezgif-3-18bcff0f8938.gif

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>

效果:

image.png

demo 地址:codepen.io/ananyaneogi…

十、编辑页面内容

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

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

效果:

GIF.gif

demo 地址:codepen.io/ananyaneogi…

感觉还不够吗?查看这篇文章,你还能将你的 整个网页变成可编辑的编辑器

注意:并非所有浏览器都实现了这些元素和属性,但是我们今天仍然可以作为渐进特性使用它们!

HTML 网页的基础,因此我们也要对它认真学习和关注。语义标记不仅有助于 SEO,而且还有助于 可访问性

如果你还知道其他 HTML 能做的、又少为人知的有趣特性,欢迎在下面留言。

(正文完)


广告时间(长期有效)

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

(完)