前端开发基础知识

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标签

<!-- 关键字，搜所引擎 SEO -->
<meta http-equiv="keywords" content="关键字1,关键字2,..."> 
<!-- 页面描述 -->
<meta http-equiv="description" content="网页描述"> 
<!-- content的取值为webkit,ie-comp,ie-stand之一，区分大小写，分别代表用webkit内核，IE兼容内核，IE标准内核。 -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<!-- 若页面需默认用极速核，增加标签： -->
<meta name="renderer" content="webkit">
<!-- 若页面需默认用ie兼容内核，增加标签： -->
<meta name="renderer" content="ie-comp">
<!-- 若页面需默认用ie标准内核，增加标签： -->
<meta name="renderer" content="ie-stand">
<!-- 如果安装了GCF，则使用GCF来渲染页面，如果没有安装GCF，则使用最高版本的IE内核进行渲染。
 X-UA-Compatible：这是个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式(比如人见人烦的IE6)，以此来解决部分兼容问题。 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<!-- 强制页面在当前窗口以独立页面显示。 -->
<meta http-equiv="Window-target" content="_top">
<!-- 自动刷新，并指向新的页面 -->
<meta http-equiv="Refresh" content="2；URL=http://">
<!-- 禁止浏览器缓存 -->
<!-- 是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出
用法： -->
<meta http-equiv="pragram" content="no-cache"> 
<!-- 清除缓存（再访问这个网站要重新下载！） -->
<meta http-equiv="cache-control" content="no-cache, must-revalidate"> 
<!-- 设定网页的到期时间 -->
<meta http-equiv="expires" content="0"> 
<!-- 手机端 -->
<meta name="format-detection" content="telphone=no, email=no"/>
<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 设置苹果工具栏颜色 -->
<!-- 不让百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 不缓存 -->
<meta http-equiv="cache-control" content="no-cache" />
<!-- 初始化设备 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<!-- 网站开启对iphone私有 web app 程序的支持 -->
<meta content="yes" name="apple-mobile-web-app-capable" />
<!-- 改变顶部状态条的颜色 iphone私有的属性-->
<meta content="black" name="apple-mobile-web-app-status-bar-style" />

严格模式和混杂模式

放在网页顶部的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	定义短引用