html5网页源码

浏览器地址栏里敲下一串字符，网页回车，源码页面弹出来。网页你看到的源码不是魔法，是网页源码。HTML5的源码源码，说穿了就是网页一堆带尖括号的标签，但就是源码这堆标签，决定了你屏幕上的网页一切——从字体颜色到按钮位置，从视频播放到表单提交。源码

我去年帮朋友改过一个老网站，网页打开源码那一刻差点没背过气。源码满屏的网页table布局，嵌套了七八层，源码像俄罗斯套娃一样。网页改一个页脚颜色，得翻三屏代码。后来重构，用HTML5的语义化标签重写，header、nav、main、footer一铺开，结构清爽得像刚收拾过的衣柜。代码不是给人看的吗？那为什么不让它更像人话一点。

HTML5最让我上头的不是那些花哨的canvas动画，是<video>标签。早些年想在网页里放个视频，得先装Flash插件，还得祈祷用户没禁用。现在一个<video src="clip.mp4" controls>完事。我见过一个做独立纪录片的朋友，把预告片直接嵌在个人主页里，没写一行JavaScript。那种质朴的直给，反而比某些特效满天飞的网站更打动人。

当然源码也有坑。移动端适配就是个大泥潭。你用<meta name="viewport">设了宽度，但安卓老机型偶尔还是会抽风。还有那些自动播放的音频，每次打开某个营销页面，音箱里突然炸出背景音乐，吓得我差点把茶杯摔了。写代码的人大概忘了，用户手里有静音键，心里也有。

表单这块，HTML5给了一个特别实在的礼物：<input type="email">。以前得写正则表达式去校验邮箱格式，现在浏览器原生帮你拦。不过也别太迷信它——我测试过，type="number"在Chrome里能输入字母e，因为e在科学计数法里合法。你看，连浏览器都学会钻空子了。

源码里还藏着些小彩蛋。比如<details>标签，点击就能展开收起内容，不用写一行JS。我给自己博客的FAQ页面用了这个，访客反馈说像在玩手风琴。还有<mark>标签，高亮搜索结果里的关键词，比手动改样式省事多了。这些不起眼的标签，用好了比什么框架都顺手。

说到底，HTML5源码没那么高深。它就是一套给浏览器看的说明书，告诉它：这儿放个标题，那儿搁张图，底下垫个按钮。你写得规整，浏览器解析就快，用户打开就顺。你要是写得乱糟糟，浏览器也能忍，但加载慢半拍，用户就划走了。这年头，谁还有耐心等一个慢吞吞的网页。

最后说个真事。前阵子我帮社区修了个公益网站，源码里全是注释掉的旧代码，一行行灰字像墓碑。我删掉那些冗余，整个文件从80KB瘦身到22KB。网站打开速度从三秒变成了一秒内。管理员阿姨问我施了什么魔法，我说没魔法，就是把垃圾倒了。她笑了，我也笑了。源码这东西，干净了，就快了。