<!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <img src="images/company_logo.png" alt="Company"> <h1 class="hello-world">Hello, world!</h1> </body> </html>
HTML5 doctype在页面开头利用这个大略地doctype来启用标准模式,使其在每个浏览器中尽可能同等的展现;虽然doctype不区分大小写,但是按照老例,doctype大写 (关于html属性,大写还是小写)。<!DOCTYPE html> <html> ... </html> lang属性根据HTML5规范:应在html标签上加上lang属性。这会给语音工具和翻译工具帮助,见告它们应该怎么去发音和翻译。更多关于 lang 属性的解释在这里;在sitepoint上可以查到措辞列表;但sitepoint只是给出了措辞的大类,例如中文只给出了zh,但是没有区分喷鼻香港,台湾,大陆。而微软给出了一份更加详细的措辞列表.aspx),个中细分了zh-cn, zh-hk, zh-tw。<!DOCTYPE html> <html lang="en-us"> ... </html> 字符编码通过声明一个明确的字符编码,让浏览器轻松、快速的确定适宜网页内容的渲染办法,常日指定为’UTF-8’。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> ... </html> IE兼容模式用 <meta> 标签可以指定页面该当用什么版本的IE来渲染;<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> </head> ... </html> 引入CSS, JS根据HTML5规范, 常日在引入CSS和JS时不须要指明 type,由于 text/css 和 text/javascript 分别是他们的默认值。HTML5 规范链策应用link利用style利用script<!-- External CSS --> <link rel="stylesheet" href="code_guide.css"> <!-- In-document CSS --> <style> ... </style> <!-- External JS --> <script src="code_guide.js"></script> <!-- In-document JS --> <script> ... </script> 属性顺序属性该当按照特定的顺序涌现以担保易读性;
classidnamedata-src, for, type, href, value , max-length, max, min, patternplaceholder, title, altaria-, rolerequired, readonly, disabledclass是为高可复用组件设计的,以是应处在第一位;id更加详细且该当只管即便少利用,以是将它放在第二位。
<a class="..." id="..." data-modal="toggle" href="#">Example link</a><input class="form-control" type="text"><img src="..." alt="...">
boolean属性
boolean属性指不须要声明取值的属性,XHTML须要每个属性声明取值,但是HTML5并不须要;更多内容可以参考 WhatWG section on boolean attributes:boolean属性的存在表示取值为true,不存在则表示取值为false。
<input type="text" disabled><input type="checkbox" value="1" checked><select> <option value="1" selected>1</option></select>
JS天生标签
在JS文件中天生标签让内容变得更难查找,更难编辑,性能更差。该当只管即便避免这种情形的涌现。
减少标签数量在编写HTML代码时,须要只管即便避免多余的父节点;很多时候,须要通过迭代和重构来使HTML变得更少。
<!-- Not well --><span class="avatar"> <img src="..."></span><!-- Better --><img class="avatar" src="...">
实用高于完美
只管即便遵照HTML标准和语义,但是不应该以摧残浪费蹂躏实用性作为代价;任何时候都要用只管即便小的繁芜度和只管即便少的标签来办理问题。