html5是更宽松实用的html写法,只需开头,必加lang和meta charset,语义标签需规范使用,表单校验仅提交时触发,file://协议禁用fetch等api,开发应启用本地服务器。

HTML5 不是“要学的新语言”,它就是你已经在写的 HTML,只是换了个更宽松、更实用的写法。
怎么写一个合法的 HTML5 页面
浏览器只认 这一行开头,别的都可省。以前那种带 DTD 的长串声明(比如 XHTML 1.0 Strict)现在纯属多余,写了反而容易出错。
- 必须放在第一行,前面不能有空格、注释或 BOM 字节
-
建议加上lang属性,对 SEO 和屏幕阅读器很关键 -
<meta charset="UTF-8">必须写,且要放在<title></title>前面,否则中文可能乱码 -
<script></script>标签不用再写type="text/javascript",HTML5 默认就是 JS
HTML5 新标签怎么用才不翻车
像 <header></header>、<nav></nav>、<main></main>、<article></article> 这些语义化标签,不是“装饰品”,它们直接影响浏览器解析结构和辅助工具行为。
- 别为了语义硬套:一个页面只有一个
<main></main>,多个<article></article>可以,但别把广告位也包进<article></article> -
<section></section>不等于<div>:它必须有标题(<code><h1>–<h6></h6> </h1>),否则语义失效 - 老版本 IE(IE8 及以下)不识别这些新标签,要用
document.createElement或html5shiv补丁,但今天基本可忽略 -
required对<textarea></textarea>和<select></select>同样有效,但对<input type="hidden">无效 -
pattern是正则,但不带/g或/i标志,且默认锚定(开头结尾自动加 ^$) - 移动端键盘类型由
type决定:type="tel"弹数字键盘,type="search"带清空按钮 —— 但 iOS Safari 对type="number"会强制显示上下箭头,有时反而是干扰 - 开发阶段别双击打开,用
python3 -m http.server或 VS Code 的 Live Server 插件起个本地服务 -
file://下连相对路径的 CSS/JS 都可能加载失败,尤其含空格或中文路径时 - 这个限制和 HTML5 无关,但新手常误以为是代码写错了
form 表单里那些“自动功能”为什么没反应
HTML5 给 <input> 加了 type="email"、type="url"、required、pattern 等属性,但它们只在提交时触发校验,不阻止用户输入。
立即学习“前端免费学习笔记(深入)”;
为什么本地双击打开 HTML 文件,fetch 或 localStorage 报错
这不是 HTML5 的问题,是浏览器安全策略:当页面通过 file:// 协议加载时,多数现代 API(包括 fetch、localStorage、indexedDB)会被禁用,报 SecurityError 或直接静默失败。
真正卡住人的,往往不是“怎么写新标签”,而是没意识到 HTML5 的改动大多在「默认行为」和「容错边界」上——比如自动闭合 <p></p>、允许省略引号、忽略大小写。这些细节不显眼,但一旦混用旧习惯(比如手动写 <br>),反而更容易引发兼容性问题。











