html5网页制作代码

凌晨两点，网页我还在调一个canvas动画的制作粒子效果。浏览器控制台报错第37行，代码我盯着那段代码看了十分钟，网页终于发现是制作少了个分号——不是英文分号，是代码中文输入法偷偷切过来的全角分号。这种破事，网页写html5的制作人每个月都得碰上几回。

html5跟老版本最大的代码区别，说白了就三个词：语义、网页音视频、制作画布。代码以前做个导航栏得写一堆div，网页现在一个<nav>标签搞定。制作搜索引擎爬虫进来一看，代码哪儿是标题、哪儿是正文、哪儿是页脚，清清楚楚。就像你进一家餐厅，菜单上直接写着"招牌菜"和"今日例汤"，不用挨个菜猜。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的第一个html5页面</title> </head> <body> <header>网站头部</header> <nav>导航菜单</nav> <main> <article>这里放正文内容</article> <aside>侧边栏，放广告或者相关推荐</aside> </main> <footer>版权信息</footer> </body> </html>

这段代码看着简单，但它把整个页面的骨架搭出来了。你打开浏览器，按F12看元素面板，结构一目了然。以前用table布局那会儿，改个列宽能让你怀疑人生。现在用flex或者grid，三行代码解决对齐问题。

音视频标签是另一个让我觉得"早该这么干了"的东西。以前放个视频得嵌套object标签，还得处理各种播放器兼容性。现在直接<video src="movie.mp4" controls></video>，完事。controls属性让浏览器自己生成播放按钮和进度条，省了多少事。我去年给朋友做个个人作品集网站，视频背景就三行代码，他当时那表情，跟看魔术似的。

canvas画布才是html5真正的重头戏。第一次用canvas画出一个会动的圆形时，我盯着屏幕看了半天——这玩意儿全凭代码驱动，没有dom节点，没有css样式，纯粹是像素级的操作。做数据可视化、小游戏、图片处理，全指着它。但别高兴太早，canvas的坐标系跟你初中数学学的有点不一样，y轴是朝下的。第一次画柱状图，我把所有柱子画反了，数据全倒立着。

写html5代码有个坑，移动端适配。桌面浏览器好好的，一换手机就乱套。得在head里加个viewport标签，不然手机浏览器会按980像素宽度渲染页面，然后缩小给你看。加了<meta name="viewport" content="width=device-width, initial-scale=1">，页面才会自适应屏幕宽度。这个标签我每次写页面都会加上，已经成肌肉记忆了。

还有localStorage，浏览器本地存储。以前用cookie存用户偏好，大小限制4KB，还得每次请求都带着跑。现在localStorage给5MB，存完就在浏览器里躺着，不用跟服务器来回传。我做过一个笔记应用，用户输入的草稿实时存localStorage，关浏览器再打开，内容还在。这体验，老网页根本做不到。

最后说个实在的。别被框架迷了眼，vue、react再火，底层还是html5那套东西。我见过面试的应届生，简历写着精通vue，但让他手写一个表单验证，连<input type="email">自带验证功能都不知道。原生html5的input类型有十几种，email、number、date、color，浏览器自带基本验证，写代码前先翻翻文档，能省一半功夫。

html5不是魔法，它就是一套更顺手的工具。工具好不好使，得用了才知道。别光看教程，打开编辑器，新建个html文件，写个带视频、画布、本地存储的页面，折腾一晚上，比你看一百篇教程都管用。