每个页面都要从 doctype 开始，它为浏览器指定这个页面的文档类型，以便浏览器更正确的显示 HTML。只要按照<!DOCTYPE html> 这样的格式和位置写，那么浏览器就会认为你在使用标准 HTML。
怎么写：
1. doctype 之前只能有注释和空白；
2. doctype 拼写大小写无所谓，但推荐一致：
<!DOCTYPE html>
<!doctype html>
如果是标题，就用 <h1> ~ <h6>；
如果是一段话，就用 <p>；
如果不知道他是什么，如果这个东西能占一行，就用<div>；
如果没有一行，就一个小小的位置，就用<span>；
如果是可点击的就用一个<a>链接；
如果像那种并列一排排的，甚至还有一点一点，就用“列表”；
如果看到一个表格，就用<table>；
如果看到了一个输入框，就用<input>。
当我们保存一个写好的 HTML 文件，编码方式会保存为 UTF-8；
一个文件就是一堆的数据，即我们写的内容变成了一堆的数据。那这个数据到底是变成了 123，还是 456 呢？
这里我们就用到了“编码”，用的编码方式不一样，那么数据呈现的状态就不一样；
然后，当我们把这个以适当编码方式保存好的数据再次展示在浏览器页面上时（或用其他编辑器打开时），这个数据还要再恢复出来；
这时候，浏览器（或编辑器）需要使用相同的、与文件相对应的编码方式去解码（但浏览器不是万能的，你不告诉他，他就不知道用什么方式去解码，他会随意选择）；
这时，当编码是一种方式，而解码又是另一种方式时，页面就会出现“乱码”；而解决乱码的方式就是：只需要知道我在编辑器保存这个 HTML 文件时，保存的什么编码格式，然后在头部 <meta charset="?">中告诉浏览器用什么方式来解码。
title 属性有一个很好的用途：即为链接添加描述性文字，特别是当链接本身并不是十分清楚的表达了链接的目的。
这样就使得访问者知道那些链接将会带他们到什么地方，他们就不会加载一个可能完全不感兴趣的页面。
另外一个潜在的应用就是为图像提供额外的说明信息，比如日期或者其他非本质的信息。
alt 这个属性主要是为了规避例如：因网速差、硬件设备限制等外部因素，我们的浏览器不能很好的显示出图像，那 alt 后边的文本将会取代图像告诉用户这里会是什么东西。
标签闭合、标签小写、不乱嵌套、使用外链 css 和 js、结构行为表现的分离。
<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器， 用什么文档类型 规范来解析这个文档。
严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
在混杂模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。
class：为元素设置类标识；
data-*：为元素增加自定义属性；
draggable：设置元素是否可拖拽；
id：元素 id，文档内唯一；
lang：元素内容的的语言；
style：行内 css 样式；
title：元素相关的建议信息。
参考资料：https://mp.weixin.qq.com/s/3lMAyzn_QmY4SK0deVmW1Q
原文：https://www.cnblogs.com/songsongblue/p/10922830.html