语法
* 缩进统一(tab键或4个空格)
* 每一个块级元素都另起一行,每一行都使用统一的缩进对齐(head和body的子元素不需要缩进)。
* 在属性上,使用双引号,不要使用单引号;
* 标签属性全小写,用中划线做分隔符,标签必须合并
* 不要在自动闭合标签结尾处使用斜线(HTML5 规范 指出他们是可选的);
* 不要忽略可选的关闭标签
* 减少标签数量,在保证弹性的基础上尽量减少嵌套层数,尽量不要javascript生成标签
* 模块之间添加注释
* 页面中尽量避免使用style属性,如style=“...”。
* 给图片加上alt标签
HTML5 doctype
* 在每个 HTML 页面开头使用这个简单地 doctype 来启用标准模式,使其每个浏览器中尽可能一致的展现。虽然doctype不区分大小写,但是按照惯例,doctype大写
* <!DOCTYPE html>
Language 属性
* <html lang="zh-cmn-Hans"> //单一的 zh 和 zh-CN 均属于废弃用法。中文使用这个
字符编码
* <meta charset="UTF-8"> 一般使用这个
兼容模式
* IE8兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
* 360浏览器采用急速内核
<meta name="renderer" content="webkit">
移动设备优先(禁止缩放,看情况而定)
* 移动设备优先
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
* 以一个固定宽度进行缩放
<meta name="viewport" content="width=640px,user-scalable=no">
引入CSS, JS
* CSS 和 JavaScript均使用外联的方式 ,css外联到<head></head>之间 ,根据 HTML5 规范, 通常在引入 CSS 和 JavaScript 时不需要指明 type,因为 text/css 和text/javascript 分别是他们的默认值。
* <link rel="stylesheet" href="code-guide.css">
* <style> ... </style>
* <script src="code-guide.js"></script>
* <script> ... </script>
属性顺序
* class
* id
* name
* data-*
* src, for, type, href, value , max-length, max, min, pattern
* placeholder, title, alt
* aria-*, role
* required, readonly, disabled
boolean属性
* boolean属性指不需要声明取值的属性,XHTML需要每个属性声明取值,但是HTML5并不需要;boolean属性的存在表示取值为true,不存在则表示取值为false
* <input type="text" disabled>
移动端
* iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;
<meta content="yes" name="apple-mobile-web-app-capable">
* 告诉设备忽略将页面中的数字识别为电话号码。
<meta content="telephone=no" name="format-detection">