昨天在群里看到有人讨论421网页,我寻思这是啥新玩意?点开一看懵圈了,满屏都是标签符号跟天书似的。不服输劲儿上来了,撸起袖子决定今天就啃下这块硬骨头!
翻箱倒柜找工具
先把十年前买的塑料外壳笔记本翻出来,开机等了五分钟。新建个空白记事本准备开工,结果发现后缀名都改不来。微信群里喊了句老哥救命,被科普要保存成".html"格式,这才跨出第一步。
对着一堆乱码抓狂
照着网上的模板敲了半天,浏览器打开时候我傻了:按钮挤成一坨,图片直接离家出走,标题跟正文都黏在一块儿!气得我猛拍键盘:“这啥破421网页!”
转头发现是少敲了关键三行:
- 开头少了<!DOCTYPE html>
- 忘记加<head>标签框住内容
- 段落没包进<p>标签里
缝缝补补拼成型
重新拆了模板当积木玩:
1. 先用<h1>堆出大标题当门面
2. <div>切豆腐块似的划出三个区域
3. 插图片死活显示不出来,发现是路径搞错成“C盘照片”
塞了个<button>按钮看着像回事儿了,结果点下去屁反应没有!
调试按钮急出汗
蹲厕所时候突然灵光一闪,抄起手机查事件绑定。回来在<script>里塞了段:
*("按钮").onclick = function(){alert("成了!")}
手指头颤巍巍点下去——浏览器真弹出小窗口了!乐得我举着笔记本满屋跑,差点把插头扯飞。
现在看明白了:
所谓421网页就是四个分区、两种样式、一组事件的小练习。最爽的是把网页拖进浏览器那瞬间,看着自己捣鼓的东西能跑起来,比喝冰可乐还痛快!推荐大家都试试,搞砸了也别怕,我电脑里还存着五个失败版本。