简单来说，HTML语义化就是“用对的标签做对的事”。咱们别再把所有东西都塞进<div>和<span>里了，而是用上那些名字就代表其含义的标签。<header>就是页头，<nav>就是导...

单行文本省略用text-overflow: ellipsis就行，但多行文本省略稍微麻烦点。现在最常用、也相对简单的方法是使用-webkit-line-clamp属性。这个方案在HTML5的移动端项目和现代浏览器中已经得到广泛...

这三个家伙都是浏览器端的存储工具，但脾气和用途可大不一样。干了这么多年全栈，我见过不少混淆使用导致的坑，咱们今天就来理清楚。 打个比方，cookie就像你每次去银行办事都要带的身份证副本...

这个问题在移动端高清屏开发里特别典型。明明写了 border: 1px solid #ccc;，在Retina屏幕上看起来却有点“发虚”或者过粗。这是因为CSS的1px对应的是逻辑像素，而屏幕的物理像素密度更高。要解...

简单来说，它就是让网页在没网的时候也能“跑”起来，或者至少能记住点东西。这对提升用户体验帮助太大了。以前浏览器一关，数据全丢，现在可不一样了。 HTML5里常用的离线存储方式主要有两种：...

Flex布局，也就是我们常说的弹性盒子，它彻底改变了CSS的布局方式。以前那些用浮动和定位实现的复杂效果，现在用几行属性就能轻松搞定。作为前端工程师，它绝对是必须熟练掌握的核心工具。 Flex...

这个技巧在前端圈里算是个经典的小把戏了，本质是利用了CSS边框的拼接原理。我们都知道，给一个盒子设置边框时，每条边框的连接处是斜切的。当你把这个盒子的宽和高都设为0，只保留边框，神奇的...

用CSS3做动画，算是前端开发里一件既高效又有趣的事儿。它主要靠两个家伙：transition（过渡）和animation（动画）。transition更简单直接，适合处理元素从一个状态到另一个状态的平滑转变，比...

这俩都是CSS里强大的布局工具，但设计哲学和擅长领域完全不同。你可以这么理解：Flexbox是“一维”布局，它只关心一个方向上的排列，要么一行，要么一列。而Grid是“二维”布局，它同时处理行和...

聊到这个，估计不少老前端都会会心一笑。你还记得XHTML 1.0 Transitional那段长得要命、根本背不下来的DOCTYPE吗？谢天谢地，那种日子一去不复返了。 进入HTML5时代后，万事的开头变得无比简单...