1.HTML、XML、XHTML 有什么区别

HTML

HTML含义：(HyperText Markup Language)超文本标记语言。

“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素，“标记”是指用特定的标记符号来标记要显示的内容的各个部分。超文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它被设计用来显示数据。HTML文本就是我们通常所说的网页，扩展名可以是html或htm。

HTML 是用来描述网页的一种语言

• HTML 不是一种编程语言，而是一种标记语言 (markup language)
• 标记语言是一套标记标签 (markup tag)
• HTML 使用标记标签来描述网页

XML

• XML含义：(Extensible Markup Language)，可扩展标记语言。

XML是标准通用标记语言的子集，是一种用于标记电子文件使其具有结构性的标记语言，它被设计用来传输和存储数据，是对超文本标记语言的补充。可扩展标记语言是一种元标记语言，即定义了用于定义其他特定领域有关语义的、结构化的标记语言，这些标记语言将文档分成许多部件并对这些部件加以标识。它能够更精确地声明内容，方便跨越多种平台的更有意义的搜索结果。它提供了一种描述结构数据的格式，简化了网络中数据交换和表示，使得代码、数据和表示分离，并作为数据交换的标准格式，因此它常被称为智能数据文档，文件扩展名为xml。

• XML 是一种标记语言，很类似 HTML
• XML 的设计宗旨是传输数据，而非显示数据
• XML 标签没有被预定义。您需要自行定义标签。
• XML 被设计为具有自我描述性。
• XML 是 W3C 的推荐标准

XML与HTML之间的差异

它不是超文本标记语言的替代。

它是对超文本标记语言的补充。

它和超文本标记语言为不同的目的而设计：

• 它被设计用来传输和存储数据，其焦点是数据的内容。

• 超文本标记语言被设计用来显示数据，其焦点是数据的外观。

超文本标记语言旨在显示信息，而它旨在传输信息。

对它最好的描述是：它是独立于软件和硬件的信息传输工具。

XML的用途

• XML 把数据从 HTML 分离

如果你需要在 HTML 文档中显示动态数据，那么每当数据改变时将花费大量的时间来编辑 HTML。

通过 XML，数据能够存储在独立的 XML 文件中。这样你就可以专注于使用 HTML 进行布局和显示，并确保修改底层数据不再需要对 HTML 进行任何的改变。

通过使用几行 JavaScript，你就可以读取一个外部 XML 文件，然后更新 HTML 中的数据内容。

• XML 简化数据共享

在真实的世界中，计算机系统和数据使用不兼容的格式来存储数据。

XML 数据以纯文本格式进行存储，因此提供了一种独立于软件和硬件的数据存储方法。

这让创建不同应用程序可以共享的数据变得更加容易。

• XML 简化数据传输

通过 XML，可以在不兼容的系统之间轻松地交换数据。

对开发人员来说，其中一项最费时的挑战一直是在因特网上的不兼容系统之间交换数据。

由于可以通过各种不兼容的应用程序来读取数据，以 XML 交换数据降低了这种复杂性。

• XML 简化平台的变更

升级到新的系统（硬件或软件平台），总是非常费时的。必须转换大量的数据，不兼容的数据经常会丢失。

XML 数据以文本格式存储。这使得 XML 在不损失数据的情况下，更容易扩展或升级到新的操作系统、新应用程序或新的浏览器。

• XML 使您的数据更有用

由于 XML 独立于硬件、软件以及应用程序，XML 使您的数据更可用，也更有用。

不同的应用程序都能够访问您的数据，不仅仅在 HTML 页中，也可以从 XML 数据源中进行访问。

通过 XML，您的数据可供各种阅读设备使用（手持的计算机、语音设备、新闻阅读器等），还可以供盲人或其他残障人士使用。

• XML 用于创建新的 Internet 语言
  很多新的 Internet 语言是通过 XML 创建的：
  其中的例子包括：

• XHTML - 最新的 HTML 版本

• WSDL - 用于描述可用的 web service

• WAP 和 WML - 用于手持设备的标记语言

• RSS - 用于 RSS feed 的语言

• RDF 和 OWL - 用于描述资源和本体

• SMIL - 用于描述针针对 web 的多媒体

XHTML

• XHTML含义：可扩展标记语言（Extensible HyperText Markup Language，简称：XHTML）

XHTML基于可扩展标记语言（XML）。XHTML就是一个扮演着类似HTML的角色的可扩展标记语言（XML），所以，本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言，目的是基于XML应用。XHTML是一种增强了的HTML,XHTML 是更严谨更纯净的 HTML 版本。它的可扩展性和灵活性将适应未来网络应用更多的需求。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的基于HTML语言设计的网站，直接采用XML还为时过早。因此，在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。所以，建立XHTML的目的就是实现HTML向XML的过渡。XHTML 于2000年的1月26日成为 W3C （World Wide Web Consortium ，万维网联盟），文件扩展名为xhtml.。

XHTML 是更严格更纯净的 HTML 代码

• XHTML 的目标是取代 HTML。
• XHTML 与 HTML 4.01 几乎是相同的。
• XHTML 是更严格更纯净的 HTML 版本。
• XHTML 是作为一种 XML 应用被重新定义的 HTML。
• XHTML 是一个 W3C 标准。

为什么要使用XHTML？

XHTML是当前HTML版的继承者。HTML语法要求比较松散，这样对网页编写者来说，比较方便，但对于机器来说，语言的语法越松散，处理起来就越困难，对于传统的计算机来说，还有能力兼容松散语法，但对于许多其他设备，比如手机，难度就比较大。因此产生了由DTD定义规则，语法要求更加严格XHTML。大部分常见的浏览器都可以正确地解析XHTML，即使早期的浏览器，XHTML作为HTML的一个子集，许多也可以解析。也就是说，几乎所有的网页浏览器在正确解析HTML的同时，也可兼容XHTML。当然，从HTML完全转移到XHTML，还需要一个过程。

HTML与XHTML的区别

• XHTML 元素必须被正确地嵌套。
• XHTML 元素必须被关闭。
• 标签名必须用小写字母。
• XHTML 文档必须拥有根元素。

总结

• HTML、XML、XHTML都是标记语言
• HTML关注网页内容的展现
• XML关注数据的准确，语法严格，用于数据传输
• XHTML将XML的严谨性和HTML的简便性结合，适应更加灵活多变的网页需求

2.怎么理解HTML语义化？

语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解。

也就是说，用html中的标签，让整个网页有一定的格式，机器在理解是，遇到某个标签，知道这部分是做什么的。

语义化的优点
1.为了在没有css代码时，也能呈现很好的内容结构，代码结构，以至于达到没有编程基础的非技术人员，也能看懂一二。（其实，就是为了不穿CSS外衣，裸奔依然好看）。
2.提高用户体验，比如：title，alt用于解释名词和图片信息。
3.利于SEO，语义化能和搜索引擎建立良好的联系，有利于爬虫抓取更多的有效信息。爬虫依赖于标签来确定上下文和各个关键字的权重。
4.方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
5.便于团队开发和维护，语义化更具可读性，如果遵循W3C标准的团队都遵循这个标准，可以减少差异化，利于规范化。

3.怎样理解内容与样式分离原则？

• 写HTML的时候先不管样式，重点放在HTML的结构和语义化上，让HTML能体现页面结构或者内容。样式交给CSS完成，交互交给JS完成
• 写JS的时候，尽量不要用JS去直接操作样式，而是通过给元素添加删除class来控制样式变化
• HTML内不允许出现属性样式，尽量不要出现行内样式。

4.有哪些常见的meta标签？

<meta>标签

• <meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

• <meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

  
  image.png

<meta charset='xxx'>：告诉浏览器器，当前页面采用的编码方式。

name属性

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

格式：<meta name="参数"content="具体的参数值">。

1.Keywords(关键字):告诉搜索引擎你网页的关键字是什么。
<meta name="keywords"content="meta总结,html meta,meta属性,meta跳转">

2.description(网站内容描述):用来告诉搜索引擎你的网站主要内容。
<meta name="description"content="xxx博客,html的meta总结，meta是html语言head区的一个辅助性标签。">

3.robots(机器人向导):告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
<meta name="robots"content="none">
可选择参数

• 信息参数为all：文件将被检索，且页面上的链接可以被查询

• 信息参数为none：文件将不被检索，且页面上的链接不可以被查询

• 信息参数为index：文件将被检索

• 信息参数为follow：页面上的链接可以被查询

• 信息参数为noindex：文件将不被检索，但页面上的链接可以被查询

• 信息参数为nofollow：文件将被检索，但页面上的链接不可以被查询

4.author(作者)：标注网页的作者
<meta name="author"content="root,root@xxxx.com">

5.generator:明网站的采用的什么软件制作。
<meta name="generator"content="信息参数"/>

6.COPYRIGHT:代表说明网站版权信息。
<META NAME="COPYRIGHT"CONTENT="信息参数">

7.revisit-after:代表网站重访,7days代表7天，依此类推。
<META name="revisit-after"CONTENT="7days">

http-equiv属性

相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

格式：<meta http-equiv="参数"content="参数变量值">

1.Expires(期限):可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT">
PS:必须使用GMT的时间格式。

2.Pragma(cache模式):禁止浏览器从本地计算机的缓存中访问页面内容。访问者无法脱机浏览
<meta http-equiv="Pragma"content="no-cache">

3.Refresh(刷新):自动刷新并指向新页面。
<meta http-equiv="Refresh"content="2;URL=http://www.xxx.com">
PS:注意后面的引号，分别在秒数的前面和网址的后面,例子中为2秒后刷新到url的网址

4.Set-Cookie(cookie设定)：如果网页过期，那么存盘的cookie将被删除。
<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">
PS:必须使用GMT的时间格式。

5.Window-target(显示窗口的设定):强制页面在当前窗口以独立页面显示。
<meta http-equiv="Window-target"content="_top">
PS:用来防止别人在框架里调用自己的页面。

6.content-Type(显示字符集的设定):设定页面使用的字符集。
<meta http-equiv="content-Type"content="text/html;charset=gb2312">
不同参数
meta标签的charset的信息参数如GB2312时，代表说明网站是采用的编码是简体中文

meta标签的charset的信息参数如BIG5时，代表说明网站是采用的编码是繁体中文

meta标签的charset的信息参数如iso-2022-jp时，代表说明网站是采用的编码是日文

meta标签的charset的信息参数如ks_c_5601时，代表说明网站是采用的编码是韩文

meta标签的charset的信息参数如ISO-8859-1时，代表说明网站是采用的编码是英文

meta标签的charset的信息参数如UTF-8时，代表世界通用的语言编码

7.content-Language（显示语言的设定）
<meta http-equiv="Content-Language"content="zh-cn"/>

8.http-equiv="imagetoolbar":指定是否显示图片工具栏，当为false代表不显示，当为true代表显示。
<meta http-equiv="imagetoolbar"content="false"/>

9.Content-Script-Type:W3C网页规范，指明页面中脚本的类型。
<Meta http-equiv="Content-Script-Type"Content="text/javascript">

**10.Pics-label(网页等级评定) **:在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的。
`<meta http-equiv="Pics-label" content=""> ·

5.文档声明的作用？严格模式和混杂模式指什么?<!doctype html> 的作用?

• 文档声明的作用：告知浏览器的解析器， 用什么 文档类型规范 来解析这个文档。
• 严格模式和混杂模式
  严格模式：标准模式，浏览器使用W3C的标准解析渲染页面。
  混杂模式：浏览器使用自己的怪异模式解析渲染页面。
• <!doctype html> 的作用：

它是html5标准网页声明,全称为Document Type HyperText Mark-up Language，意思为文档种类为超文本标记性语言或超文本链接标示语言，现在是这个简洁形式，支持html5标准的主流浏览器都认识这个声明。表示网页采用html5，<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

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

• 保存的编码格式和浏览器解析时的解码格式不匹配导致的。
• 在保存文件时，charset的属性值与当前页面保持一致

7.常见的浏览器有哪些？使用什么内核？

• 常见内核：Trident、Gecko、Webkit、Blink。
  常见浏览器
• IE: trident内核（IE6~IE11）
• Chrome:Blink(基于webkit，Google与Opera Software共同开发)
• Firefox：gecko内核
• Safari:webkit内核
• Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核
• 360安全浏览器：1.0-5.0为Trident，6.0为Trident+Webkit，7.0为Trident+Blink
• 360极速浏览器：7.5之前为Trident+Webkit,7.5为Trident+Blink
• QQ浏览器：Chromium内核+IE双内核

8.常见html标签及使用场景

常见的html标签