HTML 基础知识点总结

一、HTML、XML、XHTML 有什么区别？

首先，我们来看看每一项在维基百科中第一句话介绍：

1. HTML: 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML
2. XML: 可扩展标记语言（英语：Extensible Markup Language，简称：XML），是一种标记语言。XML
3. XHTML: 可扩展超文本标记语言（英语：eXtensible HyperText Markup Language，XHTML），是一种标记语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。XHTML

so？我们能得出的第一个结论就是：都是一种标记语言。
简单来说：

• HTML： 网页，你乱来（不写闭合标签、单引号双引号随意用等），浏览器依旧给你一张能看的网页。
• XHTML： 网页，你乱来，不好意思，你挂了。
• XML： 传数据的网页，长得像 HTML ，但用到的标签要先定义。

想要告诉浏览器你是啥，只需要在每个文件前面加个声明即可。

二、怎样理解 HTML 语义化

这个话题得严肃点，首先，维基百科只用了一句话总结：
语义化是前端开发里面的一个专用术语，其优点在于标签语义化有助于构架良好的html结构，有利于搜索引擎的建立索引、抓取；另外，亦有利于页面在不同的设备上显示尽可能相同；此外，亦有利于构建清晰的机构，有利于团队的开发、维护。语义化

那么，我们怎么理解呢？

语义化的含义就是用正确的标签做正确的事情。 HTML5 开始，W3C 推出了更加语义化的新标签，如

等，它们代表的意思就如同标签名一样，其实这些都能被

替代，效果也完全一样，但为什么还要推行语义化呢？我认为：

• 语义化让 HTML 文档结构更加清晰，明白每个块区域代表什么意思。
• 语义化的标签和信息，利于人类为对应的标签做对应的事情，比如只要告诉机器，
  是导航，电脑就能快速的抓取网页的所有导航，知道网页的大概类型，每一个标准的语义化标签，我认为都可以做出对应的程序，获取同一类的信息。
• 服务有阅读障碍的人群，网页只给普通人看？不，要让所有人都能看到、了解。语义化了，机器翻译就更加准确，有阅读障碍的人就能看得就更清楚。
• 信仰。我认为，一个优秀的前端，对待自己的网页应该如同孩子，它是作品，更是心血，我希望它更漂亮、更强壮，谁都能看，不管人还是机器。

一张图说明：

HTML 语义化

参考：HTML 5 的革新 —— 语义化

三、怎样理解内容与样式分离的原则

既然前端分为 HTML、CSS、JS 三部分，你为什么还要在 HTML 里面写 CSS、写 JS？在 JS 里面写 CSS、写 HTML？···
我们知道他们可以搀和着写，但这样不管从美观上，还是维护性上，都非常不好，还是让他们回归本份，做好自己的事。当然，如果能做到又美观，有好维护，搀和着写又如何？

四、有哪些常见的meta标签

提供HTML文档的元数据, 常用于告知浏览器如何显示内容和搜索引擎优化，常用的有：

常用的就这些，但还有很多其他的标签，参考这里：常用meta标签 | 前端知识手册

五、文档声明的作用?严格模式和混杂模式指什么? 的作用?

文档声明

由于历史原因， HTML 有着多个版本，加入文档声明，可以让浏览器正确渲染你所用的版本的 HTML。

严格模式和混杂模式

严格模式代表着 HTML 和 CSS 标准，可以说是使用最新标准的。
混杂模式（怪异模式）是由于早期浏览器不同，渲染标准不同，再加上 HTML 本身的标准也十分混乱，是浏览器为了让用户在不同环境都能看到正确的页面的一种妥协。这样是为了兼容早期的网页。

就是告诉浏览器用最新的 HTML 标准渲染页面。

六、浏览器乱码的原因是什么？如何解决

为什么会出现乱码？因为别人不认识你写的是啥，所以就随便选个显示，猜中了就正常，但猜错了，乱码就来了。对于网页来说，开发者写好后，就交给浏览器渲染了，如果你写的网页用了不常用的编码，又不去告诉浏览器该用哪种编码解析，那就有可能出现乱码。举个例子：

1. window 自带的笔记本编写了一段 HTML ，保存（默认为 ASCII 编码）
2. 用浏览器打开（假设里面没有写）
3. 浏览器按照老规矩用 utf-8 编码格式解析，发现非英文的都乱码了（浏览器： 可不怪我！）

以上，就是产生的过程，而英文一般都没有问题，因为英文是通用语言，所以几乎所有编码格式的英文字母都是相互兼容的，其他语言就 GG 了。知道怎么产生的了，怎么解决就知道了吧？
参考： 聊一聊编码与乱码

七、常见的浏览器有哪些，什么内核

常见的浏览器：Chrome（谷歌）、火狐、UC、搜狗、猎豹、QQ、360等等。而浏览器内核，大都由 Webkit 发展而来，比如谷歌目前用的自主开发引擎 Blink、IE 的 EdgeHTML、还有一直都在用的 WebKit。
参考： 排版引擎（浏览器内核）

八、常见的标签

1. div

这毫无疑问是用得最多的标签，除了必要的标签，我想

能代替大部分标签还能显示出同样的效果，不过这样并没有什么意思。。。

2. h1~h6, p, span, strong, em...

这部分标签都是与文本相关的，网页的主要内容都是文字和图片，所以这写标签必不可少。

3. ul, li, ol, dl, dt, dd

常用于列表展示。

4. form

表单，常用于收集，提交信息。

5. tabel

表格

6. img

图片标签，没有图片的网页，难道是看书吗？

7. a

用于跳转其他连接。

参考： HTML 常用标签 | 前端工程师手册