IE 一直以来都因为不兼容标准而遭人诟病,因为早期的 IE 占有率太高,IE
不支持的 html/js 特性网站就无法使用。

一、HTML、XML、XHTML 有什么区别

而现在 Safari 的状态和当时的 IE 非常相似,几乎也成了 HTML5 标准的公敌。

1. HTML是什么?

  • 描述网页的一种语言
  • 超文本标记语言 (Hyper Text Markup Language)
  • HTML 被设计用来显示数据。
  • 不是一种编程语言,而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

以 HTML5 的 Flexbox 为例,作为网页弹性布局重要的特性,开发者却因为
webkit 里存在大量 bug 而不能使用。

2. XML是什么?

  • 指可扩展标记语言(EXtensible Markup Language)
  • XML 被设计用来传输和存储数据,而非显示数据。
  • 是一种标记语言,很类似 HTML
  • XML 标签没有被预定义,需要自行定义标签。
  • XML 被设计为具有自我描述性。
  • XML 是 W3C 的推荐标准

澳门新葡萄京官网首页 1

澳门新葡萄京官网首页 ,3. XHTML 是什么?

  • XHTML 指可扩展超文本标记语言(EXtensible HyperText Markup
    Language)
  • XHTML 是 HTML 与 XML(扩展标记语言)的结合物
  • XHTML 与 HTML 4.01 几乎是相同的。
  • XHTML 的目标是取代 HTML。
  • XHTML 是作为一种 XML 应用被重新定义的 HTML。
  • XHTML 是一个 W3C 标准。

谷歌的 blink 引擎也从 webkit 继承了这些 bug,在两年时间里 blink
收到了数十个 bug 报告,bug 被修好后开发人员甚至提醒用户 safari 仍有
bug,建议不要使用。而谷歌之所以花一年多才修复也是因为 safari
不支持的特性没人会用,bug 优先级不高。

4. XML 与 HTML 的主要差异

  • XML 被设计为传输和存储数据,其焦点是数据的内容。
  • HTML 被设计用来显示数据,其焦点是数据的外观。
  • HTML 旨在显示信息,而 XML 旨在传输信息。

反观 safari,bug 出现一年后才有人提交报告,至今甚至都没有任何开发人员对
bug 进行 review 或评论,bug 状态仍是
new。经常有设计师在其他浏览器里做好的效果发现在 safari
布局完全错乱而不得不重新设计。和当年的 IE
一样,兼容标准对苹果并没有什么好处。迫使开发人员针对 iPhone
优化手机网页反而能增加用户粘性。比如网页在隐私模式下的行为,或者屏幕触摸事件的属性,等等功能,苹果都选择不遵照标准而采用自己的定义。

5. HTML 与 XHTML 的主要差异

  • XHTML 对比 HTML, XHTML 文档具有良好完整的排版,体现在两方面:
    a、元素必须要有结束标签;
    b、元素必须嵌套;

<!-- 正确-嵌套元素 -->
<p>梦之都<em>XHTML教程</em></p>
<!-- 不正确-层叠元素 -->
<p>梦之都<em>XHTML教程</p></em>
  • 对于HTML的元素和属性,XHTML 必须小写
    因为XML是严格区分大小写的,如<li>和<LI>是不同的标签

  • XHTML 的属性值必须在引号之中

  • XHTML 不支持最小化属性

 <!-- 正确:非最小化属性(unminimized attributes) --> 
  <input checked="checked">
 <!-- 不正确:最小化属性(minimized attributes) --> 
  <input checked>
  • 在XHTML 中,name属性是不赞成使用的,在以后的版本中将被删除。

关于HTML 和XHTML 和XML 的区别可以参考以下网页:
http://www.cnblogs.com/fredshare/archive/2011/11/10/2244308.html
http://www.dreamdu.com/xhtml/html_xhtml/

苹果发明了非标准的 viewport
标签用来定义网页在手机上的缩放,如今苹果自家对 viewport
的定义竟成了其他浏览器必须遵照特性。

二、怎样理解 HTML 语义化

HTML 语义化优点:

  1. 语义化的含义就是用正确的标签做正确的事情,HTML语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;在没有CSS样式情况下也能呈现出很好的内容结构、代码结构。
  2. 搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重,所以HTML语义化有利于
    SEO。
  3. 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备),以有意义的方式来渲染网页。
  4. 便于团队开发和维护。语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

若想要做到HTML
语义化,则网页的开发者应该要做到熟悉所有规范的HTML标签的使用场景,在合适的地方使用合适的标签。
如:

  1. 尽量少用<div>和<span>这两个标签,因为代码中使用的标签<div>和<span>是在所有的HTML标签中最没有语义的,在使用这两个标签时尽量能找到更有语义的标签代替;
  2. 和标签语义化的重要性一样,某些属性的设置也是HTML语义化重要的环节。例如,在img标签中,alt是必须要设置的属性,因为img是自闭合标签,并没有包含可以解释说明图片的额外信息。alt属性的文字说明是当图片在浏览器中未加载时的显示的代替。

回想当年乔布斯还反复强调 flash 要死,html5 是未来,简直滑稽可笑。

三、怎样理解内容与样式分离的原则

总的来说就是,结构、表现、行为三者分离。

转自:    

1. 网页分离

一个网页分为三个部分:HTML——结构,CSS——表现,JavaScrip——行为。内容也就是HTML,样式也就是CSS。所以内容和样式的分离,就是指在网页编码的过程中,要将
HTML 和 CSS两大部分分开。

2. 如何实现

内容与样式分离的原则的实现,一个是要依靠意识,另一个是依靠经验。
举例而言,面对一个分块明显的网页设计图时:
初级的开发人员思路及制作方法:div 层层嵌套;
中级的开发人员思路及制造方法:去掉多余的 div ,进行简化;
高级的开发人员思路及制造方法:最大化的简化 HTML 的结构,然后用 CSS
进行设置,减少 HTML 与 CSS 的契合度。
正确做法是写HTML的时候先不管样式,重点放在HTML的结构和语义化上,让HTML能提现页面结构或者内容,然后进行
CSS 样式设置,减少 HTML 与 CSS 契合度(即内容与样式分离),写 JavaScript
的时候,尽量不要用JS去直接操作样式,而是通过给元素添加/删除 class
属性来控制样式变化(即行为分离)。

3. 分离原则的优点

浏览器加载网页页面速度变快。分离原则下,大部分页面代码写在了CSS
当中,页面体积容量变得更小。
网页修改设计时,效率、省时。根据 HTML 标签内的 id 或 class
的标记,到CSS 里找到相应的 id
或class,可以快速替换指定位置的样式,不会破坏页面架构和其他部分的样式。
典型的应用就是网页换肤,使用相同的 HTML 结构,不同的 CSS 样式。
更好地被搜索引擎收录。基于内容与样式分离的原则,HTML
的语义化就是首要考虑的,网页中语义化的标签代码就会更加适合搜索引擎。
CSS
样式的分离,它可以根据不同的浏览器,达到显示效果的统一。
保证网页架构不变形的前提下,放心在不同浏览器渲染显示样式。

关于 HTML 语义化 及 内容与样式分离的原则参考:
http://www.jianshu.com/p/55a7e598957f

四、有哪些常见的meta标签

meta常用属性 – 提供HTML文档的元数据,
常用于告知浏览器如何显示内容和搜索引擎优化

1. 网页相关

  • 申明编码

<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标签的网站可以控制浏览器选择何种内核渲染。
    国内双核浏览器默认内核模式如下:
    搜狗高速浏览器、QQ浏览器:IE内核(兼容模式)
    360极速浏览器、遨游浏览器:Webkit内核(极速模式)

<meta name="renderer" content="webkit|ie-comp|ie-stand">
  • 禁止浏览器从本地计算机的缓存中访问页面内容
    这样设定,访问者将无法脱机浏览。

<meta http-equiv="Pragma" content="no-cache">
  • Windows 8

<!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 磁贴图标 -->
<meta name="msapplication-TileImage" content="icon.png"/>
  • 站点适配
    主要用于PC-手机页的对应关系。

<meta name="mobile-agent" content="format=[wml|xhtml|html5];url=url">
<!-- [wml|xhtml|html5]——根据手机页的协议语言,选择中的一种 -->
<!-- url=url ——后者代表当前PC页所对应的手机页url,
两者必须是一一对应关系(而不是统一对应至手机站首页) -->
<meta name="mobile-agent" content="format=html5;url=http://3g.sina.com.cn/">
  • 避免百度转码申明
    用百度打开网页可能会对其进行转码(比如贴广告),避免转码可添加如下meta

<meta http-equiv="Cache-Control" content="no-siteapp" />

2. 用于SEO优化

  • 页面关键词
    每个网页应具有描述该网页内容的一组唯一的关键字, 不要太短也不要太长

<meta name="keywords" content="your tags" />
  • 页面描述
    每个网页都应该有一个不超过150个字符的页面描述

<meta name="description" content="150 words" />
  • 设置搜索引擎索引方式

<meta name="robots" content="index,follow" />
<!--
    all:文件将被检索,且页面上的链接可以被查询;
    none:文件将不被检索,且页面上的链接不可以被查询;
    index:文件将被检索;
    follow:页面上的链接可以被查询;
    noindex:文件将不被检索;
    nofollow:页面上的链接不可以被查询。
 -->

3. 移动设备

3.1 viewport

viewport能优化移动浏览器的显示。
如果不是响应式网站,不要使用initial-scale或者禁用缩放。
大部分4.7-5寸设备的viewport宽设为360px;
5.5寸设备设为400px;
iphone6设为375px;ipone6 plus设为414px。

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 用户是否可以手动缩, 参数 no,yes

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>

注意,很多人使用initial-scale=1到非响应式网站上,这会让网站以100%宽度渲染,用户需要手动移动页面或者缩放。
如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1,则用户将不能放大/缩小网页来看到全部的内容。

3.2 WebApp全屏模式
  • 启用全屏模式, 伪装app,离线应用。

<meta name="apple-mobile-web-app-capable" content="yes" />
  • 隐藏状态栏/设置状态栏颜色
    只有在开启WebApp全屏模式时才生效。 content的值为default | black |
    black-translucent 。

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  • 添加到主屏后的标题

<meta name="apple-mobile-web-app-title" content="标题">
3.3 其他
  • 忽略数字自动识别为电话号码

<meta content="telephone=no" name="format-detection" />
  • 忽略识别邮箱

<meta content="email=no" name="format-detection" />
  • 添加智能 App 广告条 Smart App Banner
    告诉浏览器这个网站对应的app,并在页面上显示下载banner

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
  • 针对不识别Viewport的手持设备进行优化
    主要是针对一些老的不识别viewport的浏览器,比如黑莓

<meta name="HandheldFriendly" content="true">
  • 适配微软的老式浏览器

<meta name="MobileOptimized" content="320">
  • 强制竖屏

<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
  • 强制全屏

<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
  • windows phone 点击无高光

<meta name="msapplication-tap-highlight" content="no">

关于meta常用属性可以参考:
https://tink.gitbooks.io/fe-collections/content/ch02-html/s03-meta.html

五、文档声明的作用?严格模式和混杂模式指什么?<!DOCTYPE html> 的作用?

1. 文档声明的作用

DTD(document type definition,文档类型定义)是一系列的语法规则,
用来定义XML或(X)HTML的文件类型。浏览器会使用它来判断文档类型,
决定使用何种协议来解析,以及切换浏览器模式。
DOCTYPE是document
type(文档类型)的简写,用来声明文档类型和DTD规范的,一个主要的用途便是文件的合法性验证。它说明了你用的XHTML或者HTML是什么版本。如果文件代码不合法,那么浏览器解析时便会出一些差错。
<!DOCTYPE>
声明指出阅读程序应该用什么规则集来解释文档中的标记。在Web文档的情况下,“阅读程序”通常是浏览器或者校验器这样的一个程序,“规则”则是W3C所发布的一个文档类型定义(DTD)中包含的规则。
要建立符合标准的网页,<!DOCTYPE>
声明是必不可少的关键组成部分。除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效。
如果没有DOCTYPE,浏览器会进入一种被称为Quirks模式的怪异状态,在该模式下,浏览器的盒模型、样式解析、布局等都与标准规定的存在差异。
<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html>
标签之前。
<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个
HTML 版本进行编写的指令。
在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于
SGML。HTML5
不基于 SGML,所以不需要引用 DTD。
请始终向 HTML 文档添加 <!DOCTYPE>
声明,这样浏览器才能获知文档类型。

2. 浏览器模式:严格模式和混杂模式

为了能够很好地显示满足标准的页面,又能最大程度兼容不合法的HTML。
浏览器厂商一般会提供两种浏览器模式:

严格模式(standards mode):浏览器根据标准规约来渲染页面。
混杂模式(quirks mode):浏览器采用更加宽松的、向后兼容的方式来渲染页面。

严格模式(推荐)现在也称为标准模式,在该模式下,浏览器会严格按照 HTML 和
CSS 标准来解析、渲染你的文档。
混杂模式下,浏览器会模仿旧浏览器的行为,比如IE6,在此基础上兼容新的标准特性。
混杂模式又称兼容模式、怪异模式等。混杂模式(不推荐)的由来是一个历史问题。在互联网早期,网页一般写成两个版本:一个写给网景公司的
Navigator浏览器,一个写给微软公司的IE浏览器。当W3C制定了 Web
标准后,这两个浏览器不能马上开始按标准来解析渲染页面,因为这样会破坏当时大部分页面的显示效果。所以各浏览器就引入了混杂模式,在该模式下,浏览器会模拟Navigator
4和IE5的非标准行为来解析渲染页面,这样做就是为了兼容在W3C标准出现之前就存在的那些“不标准”的页面。

3. 关于<!DOCTYPE html>

HTML5将DOCTYPE的声明简化了,只需要<!DOCTYPE
html>即可。<!DOCTYPE html>
的作用就是让浏览器进入标准模式,使用最新的
HTML5标准来解析渲染页面;如果不写,浏览器就会进入混杂模式,而这是我们要避免的。

关于 DOCTYPE 可以参考:
http://harttle.land/2016/01/22/doctype.html
http://blog.csdn.net/jom_ch/article/details/1772165
http://www.w3school.com.cn/tags/tag_doctype.asp
http://www.divcss5.com/html/h22.shtml#no2
http://www.cnblogs.com/GrayZhang/archive/2011/03/31/learning-html5-doctype.html

六、浏览器乱码的原因是什么?如何解决?

下面这个流程是我们写入文件到展示文件的简单描述:

  1. 我们使用编辑器编写 HTML 文件
  2. 保存编写的 HTML 文件
  3. 使用浏览器打开 HTML 文件
  4. HTML文件在浏览器展示
  • 我们编写 HTML 文件时,如果在<html>中指定了<meta
    charset=”gbk”>,设定字符集为gbk。
  • 然后在第2步保持文件时会把我们写入的文字使用编辑器默认的编码方式进行保存,而默认的编码方式是utf-8。
  • 接着浏览器打开 HTML 文件时,它看到<meta
    charset=”gbk”>,这时候它就会用gbk字符集来解码你的 HTML 文档
  • 由于utf-8和gbk对中文的编码方式不一样,那么HTML文件在浏览器中显示示出来肯定是乱码。

浏览器乱码的原因

  1. 乱码产生的根本原因是你保存的编码格式和浏览器解析时的解码格式不匹配导致的。
  2. 乱码一般是英文以外的字符才会出现。

关于编码涉及到3个方面:

  1. HTML 文档中的<meta charset=””> 指定的字符集
  2. 编辑器保存文档使用的字符集
  3. 浏览器解析 HTML 文档使用的字符集
  4. 这里的关键在于2和3步,如果这两步的字符集不一样,那么英文以外的文字就会出现乱码。英文不会出现乱码是因为一般主流的字符集对英文使用的编码方式都是一样的,可以互相兼容。
  5. 而第3步浏览器解析 HTML 文档使用的字符集依赖于第1步 HTML
    文档中的<meta charset=””> 指定的字符。
  6. 那如果 HTML
    文档没指定呢?那浏览器就会用自己的方式去猜要用哪个字符集来解析 HTML
    文档,这里就可能会发生错误。

所以总结下如何解决浏览器乱码:

  1. HTML
    文档一定要指定字符集为utf-8,因为这个字符集包括了世界上几乎所有的文字,没有理由不用它。<meta
    charset=”utf-8″>
  2. 编辑器保存文档使用的字符集一定要跟 HTML 文档指定的字符集匹配,也就是
    utf-8

关于浏览器乱码,可以参考

http://blog.csdn.net/sxhlovehmm/article/details/41347715
http://ruoyu.jirengu.com/post/%E5%85%B3%E4%BA%8E%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B9%B1%E7%A0%81

七、常见的浏览器有哪些,什么内核?

浏览器内核主要指的是浏览器的渲染引擎,2013 年以前,代表有
Trident(IE),Gecko(firefox),Webkit(Safari chrome 等)以及
Presto(opera)
。2013 年,谷歌开始研发 blink 引擎,chrome 28
以后开始使用,而 opera 则放弃了自主研发的 Presto
引擎,投入谷歌怀抱,和谷歌一起研发 blink 引擎,国内各种
chrome系的浏览器(360、UC、QQ、2345 等等)也纷纷放弃 webkit,投入 blink
的怀抱。
Safari是苹果公司开发的浏览器,使用了KDE(Linux桌面系统)的KHTML作为浏览器的运算核心,Safari所用浏览器内核的名称是大名鼎鼎的WebKit
Safari在2003年1月7日首度发行测试版,并成为Mac OS X
v10.3与之后版本的默认浏览器,也成为苹果其它系列产品的指定浏览器(也已支持Windows平台)。
目前移动设备浏览器上常用的内核有 Webkit,Blink,Trident,Gecko 等,其中
iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit,Android 4.4 之前的 Android
系统浏览器内核是 WebKit,Android4.4 系统浏览器切换到了Chromium,内核是
Webkit 的分支 Blink,Windows Phone 8 系统浏览器内核是 Trident。

Read More:
各主流浏览器内核介绍
浏览器内核
移动浏览器的内核WebKit介绍
主流浏览器内核介绍(前端开发值得了解的浏览器内核历史)

八、列出常见的标签,并简单介绍这些标签用在什么场景

标签 运用场景
<html> HTML 页面的根元素
<body> 文档的内容
<head> 用于定义文档的头部
<meta> 提供了元数据.元数据也不显示在页面上,被浏览器解析
<title> 文档的标题
<h1>~<h6> 定义了一级标题到六级标题,标题字体大小逐渐减弱
<p> 定义一个段落
<a> 网页链接
<div> 块级元素,它可用于组合其他 HTML 元素的容器,没有特定的含义
<span> 内联元素,也没有特定的含义,可用作文本的容器
<u> 下划线
<em> 强调文本
<strong> 加重文本
<ol> 有序列表
<ul> 无序列表
<li> 定义列表项目
<img> 图片
<br > 换行
<input> 定义输入控件
<i> 斜体字
<table> 定义表
<tr> 定义表格中的行
<td> 定义表中的单元格
<th> 定义表格的表头
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
<hr> 创建一条水平线
<iframe> 定义内联框架
<cite> 定义作品的标题
<button> 按钮
<b> 定义粗体文本
<form> 定义用于用户输入的HTML表单
<caption> 定义表标题
<footer> 定义文档或节的页脚

Read More:
基本的 HTML
标签
HTML常见标签用法