效果：
HTML
<details><summary>Languages Used</summary><p>This page was written in HTML and CSS. The CSS was compiled from SASS. Regardless, this could all be done in plain HTML and CSS</p></details><details><summary>How it Works</summary><p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. </p></details>
CSS
{ font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, \公众Segoe UI\"大众, Roboto, Helvetica, Arial, sans-serif;}details { border: 1px solid #aaa; border-radius: 4px; padding: .5em .5em 0;}summary { font-weight: bold; margin: -.5em -.5em 0; padding: .5em;}details[open] { padding: .5em;}details[open] summary { border-bottom: 1px solid #aaa; margin-bottom: .5em;}
浏览器支持：
2. 进度条
该Meter和Progress 的元素标签的根本上，你可以调度属性呈现在屏幕上的进度条。进步有两个属性：max和value校准进度条，而Meter标签供应了更多的定制属性。
效果：
HTML:
<label for=\公众upload\"大众>Upload progress:</label><meter id=\"大众upload\"大众 name=\"大众upload\"大众 min=\"大众0\"大众 max=\"大众100\"大众 low=\"大众33\"大众 high=\"大众66\公众 optimum=\公众80\"大众 value=\"大众50\公众> at 50/100</meter><hr/><label for=\"大众file\"大众>File progress:</label><progress id=\公众file\公众 max=\公众100\"大众 value=\公众70\"大众> 70% </progress>
CSS:
body { margin: 50px;}label { padding-right: 10px; font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, \公众Segoe UI\公众, Roboto, Helvetica, Arial, sans-serif;}
浏览器支持：
3. 更多输入类型
在定义输入元素时，您要知道当代浏览器已经许可您指定足够多的输入类型了。除了你该当已经知道text，email，password，number这些类型外，还有下面的这些。
date 将显示本机日期选择器datetime-local 更丰富的日期和韶光选择器month 友好的月份选择器tel会让你输入一个电话号码。在移动浏览器上打开它，弹出的键盘将发生变革，同样的email也是如此。search 将输入文本框设置为友好的搜索样式。效果：
HTML:
<label for=\"大众date\公众>Enter date:</label><input type=\"大众date\"大众 id=\"大众date\公众/><label for=\公众datetime\"大众>Enter date & time:</label><input type=\"大众datetime-local\"大众 id=\"大众datetime\"大众/><label for=\公众month\"大众>Enter month:</label><input type=\"大众month\"大众 id=\"大众month\公众/><label for=\公众search\"大众>Search for:</label><input type=\公众search\"大众 id=\公众search\"大众/><label for=\"大众tel\公众>Enter Phone:</label><input type=\"大众tel\公众 id=\"大众tel\"大众>
CSS:
input, label {display:block; margin: 5px;}input {margin-bottom:18px;}
各种新输入类型的MDN文档非常广泛且信息量很大。此外，检讨移动输入类型以理解用户在移动浏览器上时这些输入元素的键盘行为。
4. 视频和音频video和audio元素虽然现在已经成为HTML规范的一部分，但是你一样会惊异于你可以利用video标签在屏幕上渲染出一个体面的视频播放器。
<video controls> <source src=\"大众https://addpipe.com/sample_vid/short.mp4\公众 poster=\"大众https://addpipe.com/sample_vid/poster.png\"大众> Sorry, your browser doesn't support embedded videos.</video
视频标记中值得把稳的一些属性包括：
poster 下载视频时要显示封面的URLpreload 是否在页面加载时预加载全体视频autoplay 视频是否该当在页面加载后自动播放浏览器支持：
5. 校正文本
当你想显示历史编辑及校正的情形时，blockquote，del和ins元素标签可以派上用场了。
示例：
HTML：
<blockquote> There is <del>nothing</del> <ins>no code</ins> either good or bad, but <del>thinking</del> <ins>running it</ins> makes it so.</blockquote>
CSS：
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: 3px solid #d7d7db; font-size: 1rem; background: #eee; width: 200px;}6.更统一的引号
由于中英文引号的不同，利用<q>标记可以让您很好的办理这个问题，它可使你的内容在大多数浏览器上更同等地呈现引号。
HTML：
Don Corleone said <q cite=\"大众https://www.imdb.com/title/tt0068646/quotes/qt0361877\"大众>I'm gonna make him an offer he can't refuse. Okay? I want you to leave it all to me. Go on, go back to the party.</q></p><hr/>Don Corleone said <i>\"大众I'm gonna make him an offer he can't refuse. Okay? I want you to leave it all to me. Go on, go back to the party.\公众</i>
CSS：
body { margin: 50px;}q { font-style: italic; color: #000000bf;} 7. 键盘标签
<kbd>标签该当是一个少为人知的冷门标签，但这个能利用更好的办法来解释组合键的样式。
HTML：
<p>I know that <kbd>CTRL</kbd>+<kbd>C</kbd> and <kbd>CTRL</kbd>+<kbd>V</kbd> a are like the most used key combinations</p>
CSS：
body { margin: 50px;}kbd { display: inline-block; margin: 0 .1em; padding: .1em .6em; font-size: 11px; line-height: 1.4; color: #242729; text-shadow: 0 1px 0 #FFF; background-color: #e1e3e5; border: 1px solid #adb3b9; border-radius: 3px; box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset; white-space: nowrap;}8.利用HTML共享代码
利用figcaption pre code标签，您可以利用纯HTML和CSS呈现出不错的代码片段。
HTML：
<figure> <figcaption> Defining a css <code>color</code> property for a class called 'golden' </figcaption> <pre> <code> .golden { color: golden; } </code> </pre></figure>
CSS：
pre { background-color: #ffbdbd;}
这篇文章也只是抛砖引玉，大概您也有更多私藏的利用技巧，不妨也贴出来分享给大家。
其余，如果您不仅仅限于以上的效率，希望有更完全的动态功能。
例如：您希望在您的页面中加入Excel功能，可以考试测验葡萄城的 纯前端表格控件SpreadJS，再或者您希望为用户供应更完备、更高效的前端UI控件，您也不妨可以试试 WijmoJS，相信它们都能为您的运用增色不少。
关于葡萄城
赋能开拓者！
葡萄城公司成立于 1980 年，是环球领先的集开拓工具、商业智能办理方案、管理系统设计工具于一身的软件和做事供应商。西安葡萄城是其在中国的分支机构，面向环球市场供应软件研发做事，并为中国企业的信息化供应国际前辈的开拓工具、软件和研发咨询做事。葡萄城的控件和软件产品在国内外屡获殊荣，在环球被数十万家企业、学校和政府机构广泛运用。
