html5网页制作

用记事本写一个HTML文件，网页双击打开，制作浏览器就能渲染出页面——这是网页HTML5最朴素也最核心的玩法。不需要装任何软件，制作不用配置环境，网页门槛低到离谱。制作但很多人卡在第一步：标签到底怎么写，网页结构怎么搭，制作写完为什么一片空白。网页

我刚开始接触网页时，制作对着教程敲了半小时，网页保存成`.txt`，制作浏览器打开全是网页代码。后来才知道后缀得是制作`.html`。这个坑，网页估计不少人都踩过。

骨架先立起来

一个HTML5页面的基础结构长这样：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的第一个网页</title> </head> <body> <h1>你好，世界</h1> </body> </html>

`<!DOCTYPE html>`这行必须放最前面，告诉浏览器“我是HTML5”。少了它，浏览器可能进入怪异模式，布局分分钟崩给你看。`<meta charset="UTF-8">`管编码，不写的话中文大概率变乱码。`viewport`那行是移动端适配的关键，没有它，手机上打开页面字小得要用放大镜。

把这些复制进记事本，存成`index.html`，双击。看到“你好，世界”四个字，恭喜，门已经推开了。

标签是积木，不是装饰

HTML5的标签有明确语义。`<header>`放页头，`<nav>`放导航，`<main>`放主体内容，`<article>`放独立文章，`<footer>`放页脚。以前大家全用`<div>`加class硬撑，现在浏览器能直接读懂结构。搜索引擎爬虫也吃这一套，语义清晰的页面排名往往更靠前。

拿导航举例。老写法是`<div class="nav">`，新写法直接`<nav>`。少敲几个字符是小事，关键是屏幕阅读器能识别出来，视障用户用起来方便得多。

再比如`<figure>`和`<figcaption>`，配图加说明文字，天生一对。`<details>`和`<summary>`更省事，点一下展开收起，不用写一行JavaScript。我做过一个FAQ页面，纯HTML搞定折叠效果，同事看了直呼“这也行？”

表单和多媒体，HTML5补了不少短板

`<input type="email">`在手机上弹出来的键盘带@符号。`type="date"`直接调系统日期选择器。`type="range"`给你一个滑块。以前这些全靠JavaScript库，现在一个属性解决。`required`加在标签上，空着不让提交，浏览器原生校验，连提示文案都不用自己写。

视频和音频以前得靠Flash，现在`<video>`和`<audio>`直接上。`controls`属性一加，播放条自动出现。`<source>`可以挂多个格式，浏览器自己挑能播的那个。不过实际用的时候，编解码器兼容性还是得测，Safari和Chrome的脾气不太一样。

写完之后

代码写完只是开始。按F12打开开发者工具，切到Elements面板，鼠标划过标签，页面上对应的区域会高亮。调布局的时候，这个功能能省一半时间。Console面板看报错，Network面板看资源加载，都是基本功。

HTML5不难，难的是把语义用对、把结构理清。别急着上框架，先把原生标签写熟。一个干净的HTML文件，配上CSS，能撑起一个完整的静态站点。我到现在还保留着手写HTML的习惯，改起来快，调起来直观，比在层层组件里找问题舒服多了。

打开编辑器，敲下`<!DOCTYPE html>`，剩下的自然会发生。