前端开发基础知识

HTML、XML、XHTML 有什么区别

HTML，超文本标记语言，是语法较为松散的、不严格的Web语言；
XML，可扩展标记语言，主要用于存储数据和结构，可扩展；
XHTML，可扩展超文本标记语言，基于XML，作用与HTML类似，但语法更严格。

HTML 语义化

什么是语义化:

“语义化”指的是机器在需要更少的人类干预的情况下能够研究和收集信息，让网页能够被机器理解，最终让人类受益。具体而言，借用BI论坛网友通俗的解释，“语义化意思就是不要把你女朋友当做一般的朋友看待”，下面是粗浅的XML形式实例：

图示

然而，通过CSS控制，我们很容易就能将“女朋友”展示地跟“朋友”一样，只关注表现层的话，标签视乎只是一个“钩子（hook）”，提供给CSS和JS做处理，那为什么我们还要强调“语义化”呢，下面会详细谈到。

语义化的意义：

1. 让计算机（如爬虫）读懂网页的内容
2. 更优秀的用户体验
3. 开发效率
4. 行业标准

内容与样式分离原则

一个符合标准的网页，标签中的标签名应该全部都是小写的，属性要加上引号，样式和行为不再夹杂在标签中，而应该分别单独存放在样式文件和脚本文件中。理想状态下，网页源代码由三部分组成：.html文件、.css文件和.js文件。HTML标签只用负责承载内容，而样式交给了CSS，行为交给了JavaScript。

常见的meta标签

严格模式和混杂模式

放在网页顶部的doctype声明是让浏览器进入正确呈现模式的关键。浏览器自动切换到恰当的呈现模式，以便正确显示由doctype声明所指定的文档种类。
理论上，这应该是一个非常直观的切换。假如doctype指出当前网页是一个遵循标准（也就是HTML 4+或XHTML 1+）的文档，浏览器就会切换到Standards模式。假如没有指定doctype，或者指定HTML 3.2以及更老的版本，浏览器就切换到Quirks模式。这样一来，浏览器既能正确显示遵循标准的文档，又不至于完全舍弃老式的、与标准不符的网页。

浏览器乱码的原因

1. 比如网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码。反之网页是编码utf-8，内容是gbk也会出现乱码。
2. html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码。
3. 浏览器不能自动检测网页编码，造成网页乱码。

常见浏览器与内核

1. Trident内核

代表产品Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。

2. Gecko内核

代表作品Mozilla FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。

3. WebKit内核

代表作品Safari、Chromewebkit 是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。

4. Presto内核

代表作品OperaPresto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。

常见的html标签

标签名	作用
html	将所有HTML内容都包含在这个标签内
head	用于定义文档的头部，它是所有头部元素的容器。
title	文档的标题
meta	提供有关页面的元信息
body	文档的内容
h1	一级标题，h1h6分别对应六级标题，从16标题一次减小
p	整段文字
a	定义锚，即在页面插入链接
img	图片
ul	无序列表
ol	有序列表
li	列表项
br	换行
div	定义文档中的节，默认表现为块元素
span	定义定义文档中的节，默认表现为行内元素
em	定义强调文本
i	定义斜体字
strong	定义强调文本
q	定义短引用