html小技巧 [持续更新中]

• web •

如何在html标签内部实现css的hover效果？

众所周知，hover效果的实现需要在css内定义div:hover规则。然而当css规则只有短短几条时，将其包含在html标签内部:<div style="..."></div>可以使代码看上去更简洁，那么有没有可以在html标签内实现hover效果的方法呢？

纯CSS属性是无法实现功能的，但是, JavaScript的onmouseover / onmouseout事件处理器可以相同的效果。

例如：

<div onmouseover="this.style.color='#5b5b5b'" onmouseout="this.style.color='#000000'">example</div>

就等同于

<style>
div{
    color: black;
}

div:hover{
    color: gray;
}
</style>
<div>example</div>

是不是简化了许多？事实上，带有连字符的css定义都有对应的驼峰命名法转换的Javascript元素，例如css中的background-color等同于JavaScript中的backgroundColor.

如何简单实现回到顶部

可以通过在a元素中的href属性中添加JavaScript的特定函数来实现（scroll(),scollTo()等）：

  1. 简单实现（无动画）：

    <a href="javascript:scroll(0,0)">&uarr;top</a>

    或

    <a href="javascript:window.scrollTo(0,0)">&uarr;top</a>

  2. 流畅过渡：
    通过给window.scrollTo()传入含有behavior的json参数实现：

    关于scollTo()的Web API详情请见此处

<a href="javascript:window.scrollTo({top: 0, behavior: 'smooth'})">&uarr;top</a>

同理，通过内联JavaScript可以实现返回的效果：

<a href="javascript:history.back()"></a>

HTML中通过@import字体的安装失效？

众所周知，在HTML中字体的安装主要有三种方式，分别为@font-face ，<link>标签和 @import方法。个人而言，前两者我更多用于本地字体文件的导入，而后者更多用于字体文件网络的URI的导入。
使用方法分别为：

@font-face { 
font-family: arial; 
src: url("fonts/arial.ttf"); 
}

@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap');

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">

为什么如下的程序无法使用Courier Prime字体？

@font-face { font-family: arial; src: url("../fonts/arial.otf"); } 
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap');

*{
font-family:"Courier Prime", monospace;
}

这其中有一点非常的重要：@import语句一定要位于@font-face之前。否则浏览器是获取不到@import内的资源.

<pre>在手机端无法正常显示？

为什么如下的<pre>段落在手机端无法正常显示？

<pre style="line-height: 0.8; font-size: 0.1px; letter-spacing: -1px">
anscii
</pre>

  • <pre>中无法设置行高？
    <pre>中最然有很多属性不支持但是行高是可以正常设置的。

  • font-size: 0.1px超过浏览器能够渲染最小值?
    虽然在绝大多浏览器中，1px确实是浏览器支持的最小单位，但是超过这个值的样式会被统一视为1px。

  • <pre>字间距有问题？
    在<pre>中，设置负的字间距虽然在PC（landspace）端显示正常，但是在portrait端会导致严重的格式问题：换行消失，左间距异常，文字被压缩等等。

HTML中的过渡字体大小

之前的一段时间内，包括现在我一直会使用vw（页面宽度）作为包括我个人网站在内的字体大小单位。大多数时候确实能实现某种程度的缩放效果，似乎符合响应式布局。然而，当使用ctrl +或者ctrl -缩放时，页面不会随之而缩放！有时候也会出现landscape上字体过大，portrait上字体过小的问题。
在这个博客中作者提到了一种更为流畅的字体大小切换效果-clamp()，具体使用方法如下：

div {
  font-size: clamp(1rem, 3vw, 2rem);
}

这允许你将一个值限制在最小值和最大值之间。

禁用页面滚动

如何禁止用户滚动（通过鼠标滚轮）或者在移动设备上滑动？

如果不是整个body的移动，可以通过对目标区域的overflow-y属性切换hidden或scroll来实现。
在PC端，对body使用以上方法是可行的，但是移动端，尤其是webkit内核的浏览器body的overflow-y：hidden会和name="viewport"相冲突。

这种情况可以通过js的preventDefault方法实现，具体代码如下：

function preventDefault(e) {e.preventDefault();}

document.addEventListener('touchmove', preventDefault, { passive: false });
document.addEventListener('wheel', preventDefault, { passive: false });

实现的关键其实在于passive: false，如果不设置会报错：
Unable to preventDefault inside passive event listener invocation。
同理要恢复仅需将上述代码中的addEventListener改成removeEventListener即可。

HTML代码语法高亮

目前实现语法高亮的第三方js已经很多了，个人使用下来感觉code-prettify算是最好用的之一。

使用方法如下：

  1. 在html中引入如下来自cdn的js代码：

     <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script >

  2. 在pre或者code模块中加上如下的class属性：

     <pre class="prettyprint">
 ...
 </pre>

这时js会自动猜测代码语言，如果你想指定代码的语言可以采用以下代码：

<pre class="prettyprint lang-{lang}">
...
</pre>

并将{lang}替换成代码的语言即可，例如：python,java,cpp,html等。

除此之外，你还可以在通过在class中加上linenums加上行数：

<pre class="prettyprint linenums:{startLineNo}">
...
</pre>

其中{startLineNo}为第一行的行数，省略默认为1。

你甚至还可以换皮肤。

下一篇 2024-04-12