<!DOCTYPE>
声明于HTML文档的第一行
使浏览器获知用哪个版本的HTML规范来渲染文档
必须向html文档中添加doctype声明，否则页面会以混杂模式呈现
现在常用的<!doctype html>是h5标准
混杂模式&标准模式
标准模式：
以浏览器支持的最高标准运行
混杂模式：
页面以一种比较宽松的向后兼容的方式显示。
混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。
console.log(document.compatMode)
//可观测浏览器处于那种模式
meta标签的作用
提供关于HTML文档的元数据
元数据不会显示在页面上 只对机器是可读
meta被用于规定页面的描述、关键词、文档作者、修改时间等元数据，可用于SEO
link和@import的区别
用法：
//link:
<link rel="stylesheet" type="text/css" href="newstyles.css">
//@import:
@import "newstyles.css";
作用：
都用于外部引用css
区别：
link / @import
1.不是同类:
xhtml标签 / 属于css范畴
2.兼容性不同
无兼容问题 / 不兼容低版本浏览器
3.支持JavaScript改变样式
支持 / 不支持
4.引入样式权重不同
link > $import
5.引入CSS加载时间不同
即刻加载 / 在页面完全加载完成后加载
link优势较大，@import局限大且容易导致FOUC(Flash of unstyle content)无样式内容闪烁
src和href的区别
src用于替代这个元素
href用于建立这个标签与外部资源的关系
href:
超文本引用。指定web资源的位置，从而定义当前元素/文档与目标资源的联系
src:
source(源)。将资源嵌入到当前文档中元素所在的位置
浏览器内核
浏览器内核 = 渲染引擎 + JS引擎
渲染引擎：
取得网页内容（html、xml、图像）、整理信息（导入css）、计算网页的显示方式、输出到显示器。
JS引擎：
解析、执行javascript来实现网页的动态效果
最初渲染引擎和JS引擎没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
块级、行内、行内块级元素
块级元素：
1.每个块级元素独占一行
2.可设置元素宽高
3.宽度默认为父容器100%
4.可做容器
行内元素：
1.与其他元素在同一行
2.元素宽高不可设置
3.元素宽高由内容决定
行内元素的padding, margin只有左右生效，上下无效
其中：padding-top&padding-bottom从显示效果上是增加的，但其实是无效的，并不会对周围元素产生任何影响
行内块级元素：
1.与其他元素在同一行
2.可设置元素宽高
cookies、sessionStorage、localStorage的区别
共同点：都是保存在客户端端，且同源。
区别：
cookies / sessionStorage / localStorage
1.与服务器交互方式不同
在浏览器和服务器间来回传递 / 不会自动把数据发给服务器，仅在本地保存
2.存储大小限制不同
保存数据较小，不超过4k / 保存数据较大，可达5M
3.数据有效期不同
在设置的过期时间之前一直有效 / 数据在当前浏览器窗口关闭后自动删除 / 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
cookie和session的区别
都用于存储用户信息
session如同用户档案库， cookie如同通行证
二者并不是并列关系， session的生成依赖于cookie，而cookie中又存有令牌一样的session_id，二者相互联系
区别：
session / cookie
1.存放位置
保存于服务端 / 保存于客户端
2.存储格式
散列表 / 本地文本文件
3.大小限制
不限量 / 4k
session保存于服务端， cookie保存于客户端
session由于保存于服务端，更加安全，同时
服务端通过客户端发来的cookie生成session_id建立散列表,即session，使浏览器能够识别用户的身份，克服了http无状态性带来的弊端
HTML5新特性
1.语义化标签：
title, header, nav, article, section, aside, footer等
2.增强型表单：
<input type="xx" name="user_xx" />
email, url, number, range, tel等
3.功能型标签
Canvas：
用于绘图，可扩展性很强
可用于绘制图标等
SVG:
可缩放矢量图形， 功能强大
如<circle></circle>可直接画圆，还有许多动画效果
audio video:
音频/视频播放器
Geolocation：
请求用户共享地理位置
4.跨域解决方案
` //发送消息
window.postMessage('hello I'm leemo!', 'http://www.example.com')
//接收消息
window.addEventListener('message', messageHeader, true);
function messageHeader(e) {
//receive messages
}`5.Web Storage API
sessionStorage， localStorage
6.移除部分元素
纯表现的元素： big, center, font
对可用性产生负面影响的元素: frame, frameset, noframes
只有部分浏览器支持的元素: blink
7.更多未了解
HTML语义化的理解
用正确的标签做正确的事情
页面内容结构化
在无CSS的情况下也易阅读，便于维护
便于浏览器、搜索引擎解析。利于爬虫、SEO
常用的语义化标签：
header：页眉
<header>
<hgroup>
<h1>标题<h1>
<h2>副标题</h2>
</hgroup>
<header>footer：页脚
<footer>
COPYRGHT@leemo
</footer>nav：导航
<nav>
<ul>
<li>HTML语义化</li>
<li>CSS 语义化</li>
</ul>
</nav>hgroup：标题，多个层级可将标题集合于内
<hgroup>
<h1>这是一个主标题</h1>
<h2>这是一个副标题</h2>
</hgroup>article：自成一体的内容，内部可以嵌套article，表示与父级article有关联的内容
<article>
<h1>标题</h1>
<p>内容</p>
<footer>
<p>copyright</p>
</footer>
</article>aside：article内表附属信息，article外可做侧边栏
section：节、段 ，一个页面可用section划分为简介、文章条目、联系信息等，个人倾向于用div
a标签的作用
1.跳转到指定url
<a href="https://www.w3schools.com">Visit W3Schools</a>
2.锚点、跳转到指定id
<a href="#top">Go to top</a>
3.链接到指定主题的电子邮件
<a href="mailto:someone@example.com?Subject=Hello%20again">Send mail!</a>
4.链接到JavaScript
<a href="javascript:alert('Hello World!');">Execute JavaScript</a>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。