HTML、XML和XHTML有什么区别？
- HTML: Hypertext Markup Language，超文本标记语言，简称HTML，是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、Javascript一起被众多网站用于设计令人伤心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。
<html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
- XML: Extensible Markup Language，指可扩展标记语言，是一种标记语言，很类似 HTML，其设计宗旨是传输数据，而非显示数据，其标签没有被预定义，需要自行定义标签，被设计为具有自我描述性。它仅仅是纯文本，不会做任何事情，不是对HTML的替代，而是独立于软件和硬件的信息传输工具。
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>
- XHTML：Extensible Hypertext Markup Language，指可扩展超文本标签语言，其目标是取代 HTML。XHTML 与 HTML 4.01 几乎是相同的，是更严格更纯净的 HTML 版本，XHTML 是作为一种 XML 应用被重新定义的 HTML。
| HTML | XML |
|---|---|
| 不是 HTML 的替代 | |
| 显示数据，其焦点是数据的外观，旨在显示信息 | 传输和存储数据，其焦点是数据的内容，旨在传输信息 |
| HTML | XHTML |
|---|---|
| 元素可以彼此不正确的嵌套 | 元素必须被正确地嵌套 |
| 可以不被关闭 | 元素必须被关闭 |
| 大小写混用也可以 | 标签名必须用小写字母 |
| 不一定 | XHTML 文档必须拥有根元素 |
怎样理解 HTML 语义化
- 语义化HTML是一种编写HTML的方式，选择合理的标签，使用合理的代码结构，便于开发者阅读，同时让浏览器的爬虫和机器很好的解析
- 网络爬虫：又称网络蜘蛛、网络机器人，是一种搜索引擎用于自动抓取网页资源的程序或者说叫机器人。从某一个网址为起点，去访问，然后把网页存回到数据库中，如此不断循环，一般认为搜索引擎爬虫都是靠链接爬行的，所以管他叫爬虫。这个只有开发搜索引擎才会用到。对于网站而言，只要有链接指向我们的网页，爬虫就会自动提取我们的网页
怎样理解内容与样式分离的原则
- HTML结构层是网页最重要的基础。HTML标签给予内容含义。CSS表现层则是定义您的HTML该如何显示。JavaScript行为层为页面增加交互。
- 写HTML的时候先不管样式，重点放在HTML的结构和语义化上，让HTML能体现页面结构或者内容，之后再去写样式。HTML内不允许出出现属性样式，尽量不要出现行内样式
- 写JS的时候，尽量不要用JS去直接操作样式，而是通过给元素添加删除class来控制样式变化
- 最好单独管理好每一层
Bad
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<div style="width:200px;">
<font color="red">好好学习</font>
</div>
</body>
</html>
Good
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div
{
width:200px;
color:red;
}
</style>
</head>
<body>
<div>好好学习</div>
</body>
</html>
有哪些常见的meta标签？
| 标签 | 用途 |
|---|---|
| <meta name="keywords" content=""> | 向搜索引擎说明你的网页的关键词 |
| <meta name="description" content=""> | 告诉搜索引擎你的站点的主要内容 |
| <meta name="author" content="你的姓名"> | 告诉搜索引擎你的站点的制作的作者 |
| <meta name="google" content=""> | 告诉引擎搜索方式* |
| <meta http-equiv="Content-Type" content="text/html";charset=utf-8"> | 指定字符集 |
| <meta http-equiv="refresh" content="n;url="> | 定时让网页在指定的时间n内跳转 |
| <meta http-equiv="expires" content="Mon,12 May 2001 00:20:00 GMT"> | 可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式 |
| <meta http-equiv="pragma" content="no-cache"> | 禁用缓存 |
| <meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00 GMT"> | cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式 |
| 关于移动端 | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/> | 'width=device-width' 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | 启用 WebApp 全屏模式 |
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> | 隐藏状态栏/设置状态栏颜色 |
| <meta name="apple-mobile-web-app-title" content="标题"> | 添加到主屏后的标题 |
| <meta content="telephone=no" name="format-detection" /> | 忽略数字自动识别为电话号码 |
| <meta content="email=no" name="format-detection" /> | 忽略识别邮箱 |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | 优先使用 IE 最新版本和 Chrome |
| 关于X-UA-Compatible** | |
| <meta http-equiv="X-UA-Compatible" content="IE=6" > | 使用IE6 |
| <meta http-equiv="X-UA-Compatible" content="IE=7" > | 使用IE7 |
| <meta http-equiv="X-UA-Compatible" content="IE=8" > | 使用IE8 |
| <meta http-equiv="Pragma" content="no-cache"> | 禁止浏览器从本地计算机的缓存中访问页面内容 |
| <meta name="MobileOptimized" content="240"/> | 浏览器不会自动调整文件的大小,也就是说是固定大小,不会随着浏览器拉伸缩放 |
*all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索；
follow：页面上的链接可以被查询；
noindex：文件将不被检索；
nofollow：页面上的链接不可以被查询。
**X-UA-Compatible是IE8的一个专有<meta>属性，它告诉IE8采用何种IE版本去渲染网页，在html的<head>标签中使用。
文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?
- <!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。它不是 HTML 标签，是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
- 严格模式又称标准模式，是指浏览器按照 W3C 标准解析代码；混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。
- 浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。
- 如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式）
- 有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式
- DTD不存在或者格式不正确——混杂模式
- HTML5 没有严格和混杂之分
- 浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。
- 在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- HTML5 不基于 SGML，所以不需要引用 DTD。
HTML5
<!DOCTYPE html>
- 始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。
- DTD：文档类型定义(Document Type Definition)是一套为了进行程序间的数据交换而建立的关于标记符的语法规则。它是标准通用标记语言和可扩展标记语言1.0版规格的一部分，文档可根据某种DTD语法规则验证格式是否符合此规则。文档类型定义也可用做保证标准通用标记语言、可扩展标记语言文档格式的合法性，可通过比较文档和文档类型定义文件来检查文档是否符合规范，元素和标签使用是否正确。
- SGML：是国际上定义电子文档和内容描述的标准。它源于1969年IBM公司开发的文档描述语言GML，GML主要用来解决不同系统中文档格式不同的问题。后经过多年发展，1986年经ISO批准为国际标准ISO8897，并被称为SGML。制定SGML的基本思想是把文档的内容与样式分开。在SGML中，标记分两种：一种用来描述文档显示的样式，称为程序标记；另一种用来描述文档中语句的用途，称为描述标记。一个SGML文件通常分三个层次：结构、内容和样式。结构为组织文档的元素提供框架，内容是信息本身，样式控制内容的显示。
浏览器乱码的原因是什么？如何解决？
- 造成html网页乱码原因主要是html源代码内中文字内容与html编码不同造成。但无论是哪种情况造成乱码在网页开始时候都需要设置网页编码。
- 比如网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码。反之网页是编码utf-8，内容是gbk也会出现乱码。
- 如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单。
常见的浏览器有哪些，什么内核？
| 内核 | 浏览器 |
|---|---|
| Trident内核 | IE,MaxThon,TT,The World,360,搜狗浏览器等 |
| Gecko内核 | Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等 |
| Presto内核 | Opera7及以上。 [Opera内核原为：Presto，现为：Blink;] |
| Webkit内核 | Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）] |
列出常见的标签，并简单介绍这些标签用在什么场景
| 标签 | 含义 |
|---|---|
| <h1>～<h6> | 标题，h1代表页面最大的标题，h2代表二级标题。。。 |
| <p> | 段落，表示大段文字 |
| <a> | 链接，链接到一个地址 |
| href=“#”某点，”#about”跳到页面上这一点，”/getCourse”相对路径 | |
| target=“_blank”在新窗口打开，默认在当前页面刷新；“mypage”在页面嵌入的小框里面打开新页面 | |
| title=”“在不去点击的的情况下展示的文字 | |
| <img> | 展示一张图片 |
| src=‘地址’ | |
| alt=‘’万一地址有问题展示一点东西，或者也可以备注 | |
| 只闭合标签，前面不需要加“／” | |
| <div> | 语义为“一大块”，用于划分区块，使页面更加清晰 |
| id=“header””content””footer”;id:给一个元素起个名字，唯一的，相当于身份证号，每个id就是不一样的，根据当前的整个功能去写 | |
| class：代表一类的东西，不同元素都可以叫一个class | |
| <ul>, <li> | 无序列表，用于表示并列的内容；ul的直接元素是li，可以嵌套；常常一起使用；ul的直接子元素就是li |
| <ol>, <li> | 有序列表，用于表示带有步骤或者编号的并列内容 |
| <dl>, <dt>, <dd> | 用于展示一系列“标题：内容”的场景 |
| <button> | 按键 |
| <strong> | 非常重要 |
| <em> | 需要强调一下 |
| <span> | 对于块级元素，相对里面的一些东西进行一些控制，只是在上面加一些标记 |
| <iframe> | 用于嵌入一个页面，注意跨域操作问题（假如说当前的地址是同一个域名，后期可以用JS获取；但是如果不一样，只能获取） |
| <table> | 展示表格，不要用来做布局，<thaed>，<tbody>，<tfoot>，<tr>（一行），<td>（一列），<th>（表头的一列） |
| <br /> | 换行 |
| <hr /> | 创建一条水平线 |
