不用JS，教你只用纯HTML做出几个实用网页效果葡萄城技术团队

body{margin:50px;}label{padding-right:10px;font-size:1rem;font-family:-apple-system,BlinkMacSystemFont,"SegoeUI",Roboto,Helvetica,Arial,sans-serif;}浏览器支持：

在定义输入元素时，您要知道现代浏览器已经允许您指定足够多的输入类型了。除了你应该已经知道text，email，password，number这些类型外，还有下面的这些。

Enterdate:Enterdate&time:Entermonth:Searchfor:EnterPhone:CSS:

video和audio元素虽然现在已经成为HTML规范的一部分，但是你一样会惊讶于你可以使用video标签在屏幕上渲染出一个体面的视频播放器。

浏览器支持：

当你想显示历史编辑及校对的情况时，blockquote，del和ins元素标签可以派上用场了。

示例：

HTML：

Thereisnothingnocodeeithergoodorbad,butthinkingrunningitmakesitso.

del{text-decoration:line-through;background-color:#fbb;color:#555;}ins{text-decoration:none;background-color:#d4fcbc;}blockquote{padding-left:15px;line-height:30px;border-left:3pxsolid#d7d7db;font-size:1rem;background:#eee;width:200px;}6.更统一的引号由于中英文引号的不同，使用标记可以让您很好的解决这个问题，它可使你的内容在大多数浏览器上更一致地呈现引号。

body{margin:50px;}q{font-style:italic;color:#000000bf;}

标签应该是一个少为人知的冷门标签，但这个能使用更好的方式来说明组合键的样式。

IknowthatCTRL+CandCTRL+Vaarelikethemostusedkeycombinations

body{margin:50px;}kbd{display:inline-block;margin:0.1em;padding:.1em.6em;font-size:11px;line-height:1.4;color:#242729;text-shadow:01px0#FFF;background-color:#e1e3e5;border:1pxsolid#adb3b9;border-radius:3px;box-shadow:01px0rgba(12,13,14,0.2),0002px#FFFinset;white-space:nowrap;}8.使用HTML共享代码使用figcaptionprecode标签，您可以使用纯HTML和CSS呈现出不错的代码片段。

.golden{color:golden;}

pre{background-color:#ffbdbd;}

另外，如果您不仅仅限于以上的效率，希望有更完整的动态功能。