较大家良好啊， 今天咱们聊聊当前这个HTML的东西，虽然看起来很简洁，但是搞不良好真实的会让你抓狂。 掉链子。 我记住刚学的时候，一个较小标签都能让我折腾半天当前回想起来真实是又良好笑又气愤啊。

1. HTML文档最顶部那行神秘代码

先来看说当前这个 吧，这行代码可不是随便放的哦。它要写在最前面哪些都不能有在它前面！ 盘它。 就算是空格或者换行符都不行啊！否则浏览器有可能会出现"怪异模式"。

哈基米！ 我记住有一次我在VS Code里保存文件时选了"UTF-8 with BOM"选项，最终还是结果是发觉我的网页总是出问题。后来才了解那个地方的BOM会在文件开头更多加一些看不见的字节，引起 失效了。所以记住啊！一定要用普通的UTF-8编码！

2. HTML标签和lang属性

接下来就是标签啦。当前这个标签就像房子的基础一样十分沉关键呢！要给它加上lang="zh-CN"属性哦， 梳理梳理。 这样对屏幕阅读器和搜索引擎都很友良好。

别以为不加当前这个没事儿 - 实际情况是WCAG可访问性检测会把没有lang属性当成严沉重缺陷呢！还有翻译工具也会搞错语言识别。 不靠谱。 以前有个项目这是因为没加lang引起SEO权沉重持续下降了30%呢！

3. head一部分那一些杂七杂八的元素

head里面可放不更少东西呢：

a. 元数据之王meta charset

一定要紧跟着 启动标签后面放哦！否则浏览器有可能解码错误。我之前就遇到过中文字符变成乱码的情况，将心比心...。

b. 移动设备必备viewport

到时候….. 必须要放在head里面第一个KB内容内哦！否则iOS Safari有可能会忽略它。

c. 页面标题title

太扎心了。 页面标题虽然简洁但超级十分沉关键！这是浏览器标签页体现的内容呢。

4. 常见错误较大集合

让我们看看崭新手简单犯的错误：

1. 遗忘写 ：这样浏览器就会进入怪异模式啦！
2. meta charset位置不对：必须要紧跟 后面
3. 没有加lang属性：虽然不会报错但作用于很更多功能
4. 在DOCTYPE前面留空格或换行符：直接失效！

5. 一些较高级玩法

如果你想做个繁杂点儿的布局啊，比如左侧栏和右侧主内容这种老式风格网页框架技术手段也能够用上：，反正吧…

不过当前这种框架技术手段已经过时了啦！

6. VS Code迅速捷操作

你了解吗？VS Code有内置代码片段功能哦！输入特定缩写再按Tab键就能自动生成完整，我无法认同...

输入!然后按Tab键：

方便吧？

7. 其他注意事项

1. 不是HTML标签哦！它只是告诉浏览器应当怎么解析当前这个文档。 2.iOS Safari对非常挑剔 - 必须要放在第一个KB内容内。 3.box-sizing、 我怀疑... flex这一些CSS属性在怪异模式下有可能失效。 4.getBoundingClientRect方法返回值也有可能异常。

良好了各位朋友们今天就讲到这里吧！希望这一些经验能帮到你们更少踩点坑啊～