专栏首页葡萄城控件技术团队不用JS,教你只用纯HTML做出几个实用网页效果

不用JS,教你只用纯HTML做出几个实用网页效果

转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。

在我们以往看到的页面效果中,很多效果是需要JS搭配使用的,而今天在本文中,我将介绍如何使用纯HTML打造属于自己的实用效果。

1. 折叠手风琴

使用Details和Summary标签可以创建没有JavaScript代码的可折叠手风琴。

效果:

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. 进度条

MeterProgress 的元素标签的基础上,你可以调整属性呈现在屏幕上的进度条。进步有两个属性:maxvalue校准进度条,而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. 视频和音频

videoaudio元素虽然现在已经成为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 下载视频时要显示封面的URL
  • preload 是否在页面加载时预加载整个视频
  • autoplay 视频是否应该在页面加载后自动播放

浏览器支持:

5. 校对文本

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

示例:

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控件,您也不妨可以试试WimoJS

想信她们都能为您的应用增色不少。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 重磅嘉宾揭秘!亚马逊CTO将做客CSS 2019,与腾讯汤道生尖峰对话

    数字化转型的产业浪潮下,企业的核心关注应该是什么?效率?转变?还是收益? 亚马逊CTO Werner Vogels告诉你: “ 最需要关注的是云上安全!这位全...

    腾讯安全
  • selenium 之百度搜索,结果列表翻页查询

    driver.find_element_by_id('kw1').send_keys('selenium')

    授客
  • 前端工程化实践总结 |

    | 导语 本文主要介绍在前端工程化的一些探索和实践,结合移动端的基础库重构和UI组件库开发这两个项目详细介绍工程化方案 。

    前端迷
  • 炫酷CSS3垂直时间轴特效开源库【合集】

    这是一款炫酷css3垂直时间轴特效。该css3垂直时间轴特效通过伪元素来制作炫酷的半圆形,所有半圆形连接为一条曲线路径,组成时间轴的线路。兼容PC端和移动端。

    用户5997198
  • 定了!CSS 2019将于7月30日在京举办,聚焦产业互联网时代的安全之道

    产业互联网时代,企业如何应对全新的安全挑战?安全如何助力企业真正地实现降本增效?——来CSS 2019,解码产业互联网时代的安全之道。 2019年7月30日-...

    腾讯安全
  • 汤道生:产业互联网时代,安全成为CEO的一把手工程

    ? “产业互联网时代的安全不再只是CTO、CIO们的工作范畴,也需要CEO的战略关注,成为CEO的一把手工程。”在7月30日召开的第五届互联网安全领袖峰会(C...

    腾讯安全
  • 六个行业小故事,带你看见安全的力量

    ? 始于一行代码,却不止于停留虚拟世界 网络安全除了抵御攻击和查“漏”补缺之外 还可以做的更多—— 一起来看看下面这五个行业的小故事 带你感受安全的力量 零...

    腾讯安全
  • 哪些拿住我面试题

    MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;...

    李才哥
  • 从零开始配置webpack(基于webpack 4 和 babel 7版本)

    webpack启动后会从 Entry 里配置的 Module 开始递归解析 Entry 依赖的所有Module.每找到一个Module,就会根据配置的Loade...

    胡哥有话说
  • 【代码艺术】带视觉特效的js密码强度检测开源库

    这是一款带视觉特效的js密码强度检测特效。该特效在用户输入密码的时候,随着密码强度的增强,旁边的图像会越来越清晰或越来越模糊,通过图像的变化来提示用户密码的强度...

    用户5997198

扫码关注云+社区

领取腾讯云代金券