html和xhtml和xml的区别
-
html即是超文本标记语言（Hyper Text Markup Language），是最早写网页的语言，但是由于时间早，规范不是很好，大小写混写且编码不规范；
-
xhtml即是升级版的html（Extensible Hyper Text Markup Language），对html进行了规范，编码更加严谨纯洁，也是一种过渡语言，html向xml过渡的语言；
-
xml即时可扩展标记语言（Extensible Markup Language），是一种跨平台语言，编码更自由，可以自由创建标签。
网页编码按照html>>xhtml>>xml这个过程发展。
怎样理解 HTML 语义化
语义化的含义就是用正确的标签做正确的事情，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
怎样理解内容与样式分离的原则
（1）网页分离
一个网页分为三个部分：Html——结构，css——表现，javascrip——行为。内容也就是html，样式也就是css。所以内容和样式的分离，就是指在网页编码的过程中，要将html和css两大部分分开。
（2）如何实现
写HTML的时候先不管样式，重点放在HTML的结构和语义化上，让HTML能提现页面结构或者内容,，然后进行 css 样式设置，减少 HTML 与 CSS 契合度（即内容与样式分离） ，写JS的时候，尽量不要用JS去直接操作样式，而是通过给元素添加删除class来控制样式变化（即行为分离）。
（3）分离原则的优点
- 浏览器加载网页页面速度变快。分离原则下，大部分页面代码写在了CSS当中，页面体积容量变得更小。
- 网页修改设计时，效率、省时。根据html标签内ID或class的标记，到CSS里找到相应的ID或class，可以快速替换指定位置的样式，不会破坏页面架构和其他部分的样式。
典型的应用就是网页换肤，使用相同的 html 结构，不同的 css 样式。 - 更好地被搜索引擎收录。基于内容与样式分离的原则，html的语义化就是首要考虑的,网页中语义化的标签代码就会更加适合搜索引擎。
- css样式的分离，它可以根据不同的浏览器，达到显示效果的统一。保证网页架构不变形的前提下，放心在不同浏览器渲染显示样式。
有哪些常见的meta标签
申明编码
<meta charset='utf-8' />
优先使用 IE 最新版本和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><!-- 关于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 -->
浏览器内核控制
国内浏览器很多都是双内核（webkit和Trident）,webkit内核高速浏览，IE内核兼容网页和旧版网站。 而添加meta标签的网站可以控制浏览器选择何种内核渲染。
<meta name="renderer" content="webkit|ie-comp|ie-stand">
国内双核浏览器默认内核模式如下：
- 搜狗高速浏览器、QQ浏览器：IE内核（兼容模式）
- 360极速浏览器、遨游浏览器：Webkit内核（极速模式）
禁止浏览器从本地计算机的缓存中访问页面内容
这样设定，访问者将无法脱机浏览
<meta http-equiv="Pragma" content="no-cache">
站点适配
主要用于PC-手机页的对应关系
<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">
- [wml|xhtml|html5]
根据手机页的协议语言，选择其中一种 - url="url"
后者代表当前PC页所对应的手机页URL，两者必须是一一对应关系。
用于SEO优化
页面关键词
每个网页应具有描述该网页内容的一组唯一的关键字, 不要太短也不要太长
<meta name="keywords" content="your tags" />
页面描述
每个网页都应该有一个不超过150个字符的页面描述
<meta name="description" content="150 words" />
移动设备
viewport
viewport能优化移动浏览器的显示。 如果不是响应式网站，不要使用initial-scale或者禁用缩放。
- 大部分4.7-5寸设备的viewport宽设为360px
- 5.5寸设备设为400px
- iphone6设为375px；ipone6 plus设为414px
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边
- width 宽度
数值 或 device-width, 范围从200 到 10000，默认为 980 像素 - height 高度
数值 或 device-height, 范围从 223 到 10000 - initial-scale 初始的缩放比例
范围从0 到10 - minimum-scale 允许用户缩放到的最小比例
- maximum-scale 允许用户缩放到的最大比例
- user-scalable 用户是否可以手动缩(user-scalable=no 或者 user-scalable=yes)
注意，很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。 如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。
WebApp全屏模式
启用全屏模式, 伪装app，离线应用。
<meta name="apple-mobile-web-app-capable" content="yes" />
更多用法可以点击参考链接
文档声明的作用?
DOCTYPE声明的作用是指出阅读程序应该用什么规则集来解释文档中的标记。不正确的doctype声明经常导致网页不正确显示，或者导致它们根本不能显示。
严格模式和混杂模式指什么?
- 严格模式（推荐）现在也称为标准模式，在该模式下，浏览器会严格按照 HTML 和 CSS 标准来解析、渲染你的文档。
- 混杂模式（不推荐）的由来是一个历史问题。在互联网早期，网页一般写成两个版本：一个写给网景公司的 Navigator浏览器，一个写给微软公司的IE浏览器。当W3C制定了 Web 标准后，这两个浏览器不能马上开始按标准来解析渲染页面，因为这样会破坏当时大部分页面的显示效果。所以各浏览器就引入了混杂模式，在该模式下，浏览器会模拟Navigator 4和IE5的非标准行为来解析渲染页面，这样做就是为了兼容在W3C标准出现之前就存在的那些“不标准”的页面。
<!doctype html> 的作用?
<!doctype html> 的作用就是让浏览器进入标准模式，使用最新的 HTML5标准来解析渲染页面；如果不写，浏览器就会进入混杂模式，而这是我们要避免的。
浏览器乱码的原因是什么？如何解决
下面这个流程是我们写入文件到展示文件的简单描述：
- 我们使用编辑器编写 HTML 文件
- 保存编写的HTML文件
- 使用浏览器打开HTML文件
- HTML文件在浏览器展示
乱码产生的根源就在与第2步骤和第4步。
比如我们在第二布的时候保存用gbk编码格式保存了，在第4步浏览器打开网页时，它并不知道你的这个文件是使用什么编码方式，于是自作主张使用了默认解码方式。比如在Chrome打开时默认使用 ISO -8859的解码方式，就导致编码和解码不匹配，产生乱码。
那如何规避这个问题呢？即如何通知浏览器用什么方式解码呢？
最有效的方法在html 的 <head>里添加<meta charset="utf-8">，这句话的意思是告诉浏览器在打开这个页面的时侯直接用utf-8去解码。 同理，如果你的文件保存为gbk格式，一定在文件里添加<meta charset="gbk">。
常见的浏览器有哪些，什么内核
IE，Mozilla Firefox，Google Chrome，opera，360，TT，搜狗，遨游，瑞影，hotbrowser，等等
内核
Trident：IE浏览器使用的内核
Gecko：Netscape6开始采用的内核，后来的Mozilla FireFox也采用了该内核
Presto： 目前Opera采用的内核
Webkit：苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。
Blink：Blink是一个由Google和Opera Software开发的浏览器排版引擎，这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用。
常见的标签以及使用场景
所有标签使用时有包含在<>内
| 标签 | 使用场景 |
|---|---|
| html | 是 HTML 页面的根元素 |
| body | 包含页面的主体内容 |
| head | 包含了文档的元（meta）数据 |
| meta | ，提供了元数据.元数据也不显示在页面上，被浏览器解析 |
| link | 定义了文档与外部资源之间的关系。通常用于链接到样式表 |
| style | 定义了HTML文档的样式文件引用地址，在style 元素中可直接添加样式来渲染 HTML 文档 |
| script | 用于加载脚本文件，如： JavaScript |
| title | 描述了文档的标题 |
| h1~h6 | 标签定义了一级标题到六级标题，标题字体大小逐渐减弱 |
| p | 定义一个段落 |
| a | 是网页链接。通过href属性，来指定链接地址。通过target属性，来指定链接页面打开的方式。 |
| image | 定义html图像 |
| div | 可用于组合其他 HTML 元素的容器,没有特定的含义。它属于块级元素，浏览器会在其前后显示折行 |
| span | 没有特定的含义，可用作文本的容器 |
| ol | 有序列表始于 ol 标签。每个列表项始于 li 标签。列表项目会使用数字进行标记 |
| ul | 无序列表，列表项目会使用粗体圆点（典型的小黑圆圈）进行标记 |
| table | 定义表格 |
| tr | 定义表格的行 |
| td | 定义表格每行的列 |
| tbody | 定义表格的主体 |
| tfoot | 定义表格的页脚 |
| iframe | 用于在当前页面嵌入新页面 |
| strong | 定义重要的文本 |
| em | 定义被强调的文本 |
网友评论