html基础知识

HTML、XML、XHTML 有什么区别？

因为相同之处从字面可以看出，他们都是ML，都是标记语言（Markup Language），所以不同就是前面的部分了。

HTML，超文本标记语言，是语法较为松散的、不严格的Web语言，它是用来描述和定义网页内容的标记语言，是构成网页的最基本的东西。所谓超文本，就是说它除了能标记文本，还能标记其他的内容，比如：图片，链接，音频，视频等。
　　它的作用就是一个规范，告诉所有浏览器都统一标准，比如我给这段文字加个<p> 标签，那就是告诉浏览器：这是一个段落。我加个 <img> 标签：这是一张图片，别弄错了。浏览器看到后，就会正确解析，产生相应的行为。

XML，可扩展标记语言，主要用于存储数据和结构，可扩展；它的表现形式就是给一个文档加一堆标签，说明每段文字是干什么的，有什么意义。这样做的目的是方便存储、传输、分享数据，人和机器都可以很方便的阅读。XML 和 HTML 有一个明显的区别就是：HTML 的标签都是预定义的，你不可以自己随便增加，比如你不能自造一个标签叫 <nihao>, 但是 XML 可以，你可以自己“发明”标签————这也是“可扩展的”一个含义。

XHTML，可扩展超文本标记语言，基于XML，作用与HTML类似，但语法更严格。XHTML 就是以 XML 的语法形式来写 HTML.
XHTML 出现的原因是：HTML 是一种语法形式比较松散的标记语言，语法要求也不严格。比如大小可以混用，属性值随便你加不加引号，单引号还是双引号也随便你，标签也可以不闭合。HTML 标准的制定者 W3C 一看这样下去不行，所谓无规矩不成方圆，所以就把 XML 的语法形式往 HTML 上一套，出现了 XHTML，所以你也可以把 XHTML 理解为 HTML 的严格语法形式，除此之外，其它方面基本一样。比如 XHTML 有一些强制的要求，如下：

1.　必须包含一个文件头声明 <!DOCTYPE>
2.　所有元素名必须小写
3.　所有空元素必须关闭
4.　所有属性名必须小写
5.　所有属性值必须加引号
6.　所有布尔值属性必须加上属性值

怎样理解 HTML 语义化？

语义化的含义就是用正确的标签做正确的事情，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

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

1. HTML负责网页内容（结构）部分，样式则负责页面的效果

2. 内容与样式分离使得内容和样式各自只负责自己的部分，消除两者的耦合

3. 更重要的是分离增强了机器的可读性，使得机器、网络爬虫能更好地理解页面内容

有哪些常见的meta标签？

那meta标签有什么用呢？W3School是这样定义的：
标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他web 服务。
　　以下是常用的标签以及作用：

<meta name="keywords" content="your tags" />
释义：页面关键词，每个网页应具有描述该网页内容的一组唯一的关键字。使用人们可能会搜索，并准确描述网页上所提供信息的描述性和代表性关键字及短语。标记内容太短，则搜索引擎可能不会认为这些内容相关。另外标记不应超过 874 个字符
<meta name="description" content="150 words" />
释义：页面描述，每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签
<meta name="robots" content="index,follow" />
释义：搜索引擎索引方式，robotterms是一组使用逗号(,)分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。确保正确使用nofollow和noindex属性值。
<meta http-equiv="refresh" content="0;url=" />
释义：页面重定向和刷新： content内的数字代表时间（秒），即是多少时间后刷新。如果加url,则会重定向到指定网页（搜索引擎能够自动检测，也很容易被引擎视作误导而受到惩罚）。
<meta name="author" content="author name" />
释义：定义网页作者

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
 <!-- width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 -->

释义：viewport：能优化移动浏览器的显示。如果不是响应式网站，不要使用initial-scale或者禁用缩放。大部分4.7-5寸设备的viewport宽设为360px；5.5寸设备设为400px；iphone6设为375px；ipone6
plus设为414px
　　注意：很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。

<meta name="apple-mobile-web-app-capable" content="yes" />
释义：WebApp全屏模式：伪装app，离线应用
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
释义：隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent
<meta name="apple-mobile-web-app-title" content="标题"
释义：添加到主屏后的标题
<meta name="apple-mobile-web-app-title" content="标题">
释义：忽略数字自动识别为电话号码
<meta content="telephone=no" name="format-detection" />
释义：忽略识别邮箱
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
释义：添加智能 App 广告条 Smart App Banner：告诉浏览器这个网站对应的app，并在页面上显示下载banner

其他：

<meta name="HandheldFriendly" content="true">

<meta name="MobileOptimized" content="320">

<meta name="screen-orientation" content="portrait">

<meta name="x5-orientation" content="portrait">

<meta name="full-screen" content="yes">

<meta name="x5-fullscreen" content="true">

<meta name="browsermode" content="application">

<meta name="x5-page-mode" content="app">

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

这个链接介绍的很详细，值得一看

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

1. <!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种方式渲染浏览器，可能是HTML也可能是XHTML。
　　2. 所谓的标准模式是指，浏览器按 W3C 标准解析执行代码；混杂模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为混杂模式。
　　3. <!doctype html> 的作用就是让浏览器进入标准模式，使用最新的 HTML5标准来解析渲染页面；如果不写，浏览器就会进入混杂模式，而这是我们要避免的。

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

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

我们使用编辑器编写 HTML 文件
保存编写的 HTML 文件
使用浏览器打开 HTML 文件
HTML文件在浏览器展示

我们编写 HTML 文件时，如果在<html>中指定了<meta charset="gbk">，设定字符集为gbk．
　　然后保存 HTML 文件时，编辑器用 utf-8 字符集保存，接着浏览器打开 HTML 文件时，它看到<meta charset="gbk">，这时候它就会用gbk字符集来解码你的 HTML 文档，由于utf-8和gbk对中文的编码方式不一样，那么HTML文件在浏览器中显示示出来肯定是乱码。
所以这里关于编码涉及到3个方面：
　　1. HTML 文档中的<meta charset=""> 指定的字符集
　　2. 编辑器保存文档使用的字符集
　　3. 浏览器解析 HTML 文档使用的字符集
　　这里的关键在于2和3步，如果这两步的字符集不一样，那么英文以外的文字就会出现乱码。英文不会出现乱码是因为一般主流的字符集对英文使用的编码方式都是一样的，可以互相兼容。
　　而第3步浏览器解析 HTML 文档使用的字符集依赖于第1步 HTML 文档中的<meta charset=""> 指定的字符，那如果 HTML 文档没指定呢？那浏览器就会用自己的方式去猜要用哪个字符集来解析 HTML 文档，这里就可能会发生错误。

所以总结下如何解决浏览器乱码：
　　HTML 文档一定要指定字符集为utf-8，因为这个字符集包括了世界上几乎所有的文字，没有理由不用它。<meta charset="utf-8">
编辑器保存文档使用的字符集一定要跟 HTML 文档指定的字符集匹配，也就是 utf-8。

常见的浏览器有哪些，什么内核？

1、Trident(IE内核)

（1）、该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到IE11，也被普遍称作”IE内核”。Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器(壳浏览器)涌现。此外，为了方便也有很多人直接简称其为IE内核

（2）、IE从版本11开始，初步支持WebGL技术。

（3）、IE8的JavaScript引擎是Jscript，IE9开始用Chakra，这两个版本区别很大。

Trident内核的常见浏览器有：
（1）、IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；
（2）、猎豹安全浏览器：1.0-4.2版本为Trident+Webkit，4.3版本为Trident+Blink；
（3）、360安全浏览器：1.0-5.0为Trident，6.0为Trident+Webkit，7.0为Trident+Blink；
（4）、360极速浏览器：7.5之前为Trident+Webkit,7.5为Trident+Blink；
（5）、傲游浏览器：傲游1.x、2.x为IE内核，3.x为IE与Webkit双核；
（6）、搜狗高速浏览器：1.x为Trident，2.0及以后版本为Trident+Webkit；

2、Gecko(Firefox内核)

Gecko是套开放源代码的，Netscape6开始采用的内核，后来的Mozilla FireFox(火狐浏览器) 也采用了该内核，Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。因为这是个开源内核，因此受到许多人的青睐，Gecko内核的浏览器也很多，这也是Gecko内核虽然年轻但市场占有率能够迅速提高的重要原因。

不过事实上，Gecko 内核的浏览器仍然还是Firefox (火狐) 用户最多，所以有时也会被称为Firefox内核。此外Gecko也是一个跨平台内核，可以在Windows、 BSD、Linux和Mac OS X中使用。

3、Webkit(Safari内核,Chrome内核原型,开源)
它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。所以Webkit也是自由软件，同时开放源代码。

Google Chrome、360极速浏览器以及搜狗浏览器高速模式也使用webkit作为内核。

WebKit内核常见的浏览器：
Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器、Google Chrome

4、Blink(WebkitWebCore组件分支,Google与Opera Software共同开发)
Blink是一个由Google和Opera Software开发的浏览器排版引擎，这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用。

这篇文章介绍了各浏览器内核的历史，很有趣，值得一看

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

* <a> 用于超链接。<a href="">some text</a>
* <article> 用于一篇文章。<article>a self-contained article</article>
* <aside> 用于页面的侧边栏。<aside>some content</aside>
* <blockquote> 用于大段的引用内容。<blockquote>some big texts</blockquote>
* <body> 页面上显示的所有内容都被包含在<body></body>里
* <br> 用于显示一个换行
* <button> 用于显示一个按钮
* <code> 用于一包裹一段代码内容
* <dd> 用于一个dl列表的某个dt名词的描述
* <del> 用于删除一些不需要的文字
* <div> 用于包裹住一些其他的标签，制造一个容器
* <dl> 用于制作一个名词和对应解释的列表
* <dt> 用于一个dl列表的某个dt名词
* <em> 用于强调一些文本内容
* <figcaption> 用于一张图表的说明文字
* <figure> 用于一张图表
* <footer> 用于包裹页面的底部内容
* <form> 用于制作一个表单
* <h1>-<h6> 用于标记标题，从h1到h6重要性依次递减
* <head> 用于包裹页面的元数据，如<meta>, <link>, <title>等
* <header> 用于包裹页面的头部内容
* <hr> 用于制造出一条分隔线
* <html> 整个 HTML 文档的根元素，包裹住其他所有的元素
* <iframe> 用于嵌入另一个小页面到一个页面中
* <img> 用于显示一张图片
* <input> 用于显示一个表格输入控件
* <label> 用于给一个表格输入控件打上一个标签，说明输入控件的作用
* <li> 用于<ul>和<ol>标签，代表一个列表项
* <link> 用于链接外部CSS文件
* <mark> 用于高亮显示某些文本
* <meta> 用于下达一些元数据指令，或者对页面进行说明
* <nav> 用于包裹住一个导航条的内容
* <ol> 用于制作一个有序列表
* <p> 用于显示一个段落
* <q> 用于一小段引用文字
* <script> 用于一段JavaScript脚本代码，或者引入一个外部JavaScript脚本文件
* <section> 用于包裹一部分有逻辑关系的页面内容
* <select> 用于制作一个下拉列表选框
* <span> 用于包裹住一小段文字，作为一个容器
* <strong> 用于着重强调重要的文本内容
* <style> 用于给页面元素加上样式
* <sub> 用于下标文本
* <sup> 用于上标文本
* <table> 用于制作一个表格
* <tbody> 用于表格里的主体部分
* <td> 用于表格里的某一个单元格
* <textarea> 用于制作一大块文本输入框
* <tfoot> 用于表格里的底部
* <th> 用于表格里的表头的单元格
* <thead> 用于表格里的表头
* <time> 用于页面内容中的时间
* <title> 用于显示整个页面的标题（显示在浏览器的tab上）
* <tr> 用于标记表格里的一行
* <ul> 用于制作一个无序列表