html
XMl、HTML与XHTML的区别
一、XMl、HTML与XHTML的区别
xml：被设计来传输和存储数据、一种数据格式
html：超文本标记语言、被设计来展示数据
xhtml：可扩展超文本标记语言、与html蕾丝，但相对于html，要求更为严格。
html是超文本标记语言，xhtml是可扩展超文本标记语言。
二、常用的HTML标签
块级
div、table、from、h1、h2、h3、hr、ul、
行内
span、img、input、br、a、em
三、HTML5概念
html5是html的一个新标准。在2014年，html5.0版本发布
#####一、如何区别html和html5
HTML4中需要指明是HTML的哪个版本，HTML5不需要，只使用<!DOCTYPE html>即可
#####二、html5的新特性
2014年，html5.0版本终于发布，距离上一个版本1999年制定的html4已经有十几年的时间，html5为我们带来了很多前所未有的新特性。比如语义化标签、本地存储、多媒体、
1、语义化
H5增加了新标签，header、footer、nav、audio、vedio、article、aside、section、
新增了input 类型
<input type="email" name="email" />
<input type="url" name="user_url" />
<input type="number" name="points" min="1" max="10" />
<input type="range" name="points" min="1" max="10" />
<input type="date" name="user_date" />
<input type="search" name="search" />
移除了一些标签
纯表现的元素：basefont，big，center，font, s，strike，tt，u;
对可用性产生负面影响的元素：frame，frameset，noframes
优点：写出的HTML代码，符合内容的结构化（内容语义化），给网页更好的结构和意义，对搜索引擎更友好。特别是新闻类，博客类网站受益很大。
缺点：使用新特性，如何兼容不支持的浏览器。（IE11支持，其他浏览器大部分支持）
2、本地存储特性
本地存储历史
cookie（最早、4kb）->然后是H5的 localStorage、sessionStorage
getItem()、setItem()、removeItem()
***注意：H5本地存储只存储字符串，所以需要自己进行类型转换。
3、设备访问特性
地理位置API、媒体访问API
4、连接特性
5、网页多媒体特性
audio 和 video标签
6、三维、图形及特效特性
二、标准模式与怪异模式
浏览器对html和css的解析有两种模式，标准模式和怪异模式。
浏览器会根据html的文档类型声明来决定使用哪一种模式。(文档类型声明说明html的版本)
Html5
<!DOCTYPE html>
Html4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
两种模式的常见区别
盒模型的处理差异
标准模式会使用标准盒模型来渲染，怪异模式会使用怪异盒模型（ie盒模型）来渲染。
行内元素的垂直对齐
标准模式的会对齐基线，怪异模式会对齐底部。
四、data-的好处
Html5的新特性之一。用户可以使用data-来定义一些数据存储到标签里。避免用户自定义属性来存储和操作数据。
<div data-myname="xiaowang" id="testDiv" >xiao</div>
console.log("data-myname:",document.getElementById("testDiv").dataset.myname);
console.log("data-myname:",document.getElementById("testDiv").getAttribute("data-myname"));
五、meta标签
标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
一般的meta标签
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,shrink-to-fit=no,minimum-scale=1,maximum-scale=1,minimal-ui">
<meta name="theme-color" content="#000000">
<meta name="full-screen" content="yes">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width,initial-scale=0.25">
常用的比如1、设置编码格式，那么浏览器在请求html的时候，服务器会在http头上带有
Content-Type: text/html; charset=UTF-8
2、设置http-equiv，它把content属性关联到http 头
那么设置
则http头上带有X-Ua-Compatible: IE=Edge,chrome=1 （参考百度的网站）
X-UA-Compatible字段是用来定义浏览器的渲染方式，比如：使用IE内核浏览器来访问，会渲染至该浏览器的最高版本，比如你使用IE9浏览器，那么就算在兼容模式切换至IE7，但仍会渲染成IE9的样子。
3、设置name，把content属性关联到一个名词
比如设置：
设置renderer：webkit，由于国内部分浏览器是双核浏览器，一个是快速渲染的webkit内核，一个是ie内核。
####七、css js放置位置和原因
网站加载的整个完整过程。
1.首先浏览器从服务器接收到html代码，然后开始解析html
2.构建DOM树（根据html代码自顶向下进行构建），并且在同时构建渲染树
3.遇到js文件加载执行，将阻塞DOM树的构建；遇到css文件，将阻塞渲染树的构建
script标签中的defer属性：构建DOM树的过程和js文件的加载异步（并行）进行，但是js文件执行需要在DOM树构建完成之后
script标签中的async属性：构建DOM树、渲染树的过程和js文件的加载和执行异步（并行）进行）
综上所述，script标签最好放在</body>标签的前面，因为放在所有body中的标签后面就不会出现网页加载时出现空白的情况，可以持续的给用户提供视觉反馈，同时在有些情况下，会降低错误的发生。
而css标签应该放在<head></head>标签之间，因为如果放在</body>标签的前面，那么当DOM树构建完成了，渲染树才构建，那么当渲染树构建完成，浏览器不得不再重新渲染整个页面，这样造成了资源的浪费。效率也不高。如果放在<head></head>之间，浏览器边构建边渲染，效率要高的多。
css渲染不会阻塞dom树渲染，但会阻塞render树渲染。