打开一个网页，按下F12，看到满屏花花绿绿的代码，很多人第一反应是关掉，第二反应是“这玩意儿得学十年吧”。其实真不是。我见过太多人把H5想得太玄乎了，觉得那是程序员才能碰的东西。实际上，H5就是HTML的第五个版本，它跟Word文档一样，只是个工具。你用Word写日记和用Word写小说，难度差距不在工具，在你想写什么。H5也一样，你想做个个人介绍页，和你想做个电商平台，那是两码事。这篇文章不跟你扯什么“前端工程师必备技能”，就聊一个普通小白，怎么从零开始，一步步把H5玩明白。

先搞明白一件事：做H5网站，你不需要先学会编程。市面上有大量可视化工具，比如上线了、凡科建站，甚至Wix，它们都提供了拖拽式编辑器。你就像搭积木一样，把图片、文字、按钮拖到页面上，调整一下位置和颜色，一个能看的页面就出来了。这条路适合谁？适合那些“我只想快速有个网站展示自己”的人。比如你是个摄影师，想做个作品集；你是开小店的，想放个菜单和地址。用这类工具，你花一个下午就能搞定，而且效果不差，手机电脑都能看。但代价是，你被锁死在这个平台里，想改点特殊效果，得看平台给不给你权限。

但如果你想要的不是“能用”，而是“我想自己掌控一切”，那就得碰点真代码了。别怕，写代码这事儿，跟学开车一样，一开始是笨拙的，但练多了就变成肌肉记忆。第一步，你得装个编辑器。别用记事本，也别一上来就装什么重型IDE，VS Code就够了，免费，插件多，界面还干净。装好之后，新建一个文件夹，在里面建个文件，名字叫index.html。然后，用编辑器打开它，敲下这行字：。恭喜你，你已经迈出了第一步。这行字的意思是告诉浏览器：“我是HTML5文档”，就像你进门前先敲门打招呼。

接下来，你会看到和这对标签，它们像两个括号，把你整个网页的内容包起来。里面分两半：和。head是给浏览器和搜索引擎看的，里面放编码方式、标题、CSS样式引用这些“后台信息”。body才是给访客看的，你网页上所有文字、图片、按钮都躺在body里。你可以把head理解成餐厅的后厨，body是就餐区，客人只看得见就餐区，但后厨决定了这顿饭能不能做出来。很多新手一上来就在body里堆内容，忘了head，结果页面显示乱码或者样式全丢，就是这个原因。

写内容的时候，你会碰到一堆标签：

是标题，

是段落，是图片，是链接。它们就像乐高积木的几种基础形状，翻来覆去就那几样。你不需要全背下来，遇到不会的，打开浏览器搜“HTML标签大全”，照着抄就行。我当年学的时候，一天记不住五个标签，但没关系，我每天写一个页面，今天写自我介绍，明天写菜谱，后天写宠物介绍，写来写去，常用的那二十几个标签就刻在脑子里了。记住，不要为了学标签而学标签，你是为了做页面才学标签的，用不到的就先不学，用到时再查，效率高十倍。

等你把静态页面搭出来了，文字图片都能显示了，这时候你会发现，页面怎么这么丑？别急，这就是你要学CSS的时候了。CSS是负责打扮的，它控制颜色、字体大小、间距、布局。你可以在HTML文件里直接写