那些年忽略的标签
DOCTYPE
含义：文档类型，位于文档第一行，告诉浏览器以怎么样的模式来解析文档，若存在且格式正确， 文档一般将以标准模式呈现，否则以兼容模式呈现
什么是标准模式和兼容模式？
- 标准模式：该模式下的渲染方式和 JS 引起的解析方式都是以浏览器支持的最高标准运行
- 兼容模式：相反，以向后兼容的方式模拟老式浏览器的行为，保证来的网站的正确访问
HTML5 为什么只写 <!DOCTYPE HTML>，而没有引入 DTD
这里涉及到了 DTD 和 SGML两个概念，那么首先，介绍下这两个：
- DTD：文档类型定义，定义 XML 或 HTML 的特定版本中所有允许元素以及他们的属性和层次关系。
- SGML：标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源
HTML5 不基于于 SGML，因此不需要对 DTD进行引用，只需要 DOCTYPE来指定文档解析模式。
link
含义：link 标签位于 head 部分，本身是空元素，仅包含属性，这些属性定义了文档和外部资源的关系
link 和 @import 的区别
- 兼容性：link 是 html 基本元素，不存在兼容性，而 @import 是 CSS2.1 新增，IE5 以上才能识别;
- 加载顺序：link 引入的 css 与页面同时加载，@import 引入的 css 在页面加载完毕后才加载;
- 作用：link 能加载 css，还可定义 RSS，rel 连接属性，引入网站图标等，@import只能引入 css;
- DOM 可控性：js 可操作 DOM，插入 link 标签，实现动态修改样式，而 @import 不适用.
iframe
含义：会创建另外一个文档的内联框架
缺点
- 会阻塞主页面的 onload 事件
- 搜索引擎的检索升序无法解读这种页面，不利于网页的 SEO
- iframe 和 主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行接在
- 浏览器的后退按钮会失效
- 小型的移动设备无法完全显示框架
meta
含义：也是位于 head 部分，也是空元素，提供有段页面的元信息
常见 meta 标签
<meta charset='utf-8'>声明文档使用的字符编码<meta name=”description” content="不超过150个字符"/>页面描述<meta name=”keywords” content=""/>页面关键词者
元素分类
HTML4 元素分类
块级元素
特点：占据父元素的整个宽度
举例：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p
行内元素
特点：占据自身标签的边框的空间
举例：a b sapn img strong sub botton input label select
行内元素和块级元素的区别
格式：块级元素占满父元素整个宽度，而行内元素仅占自身空间宽度；
嵌套：一般情况下，行内元素仅包含文本及其他行内元素，块级元素不限制；
属性：行内元素宽高无效,上下的内外边距不会对其他元素产生影响
HTML5 元素分类
Metadata Flow Sectioning Heading Phrasing Embedded Interactive
HTML5 新增特性
绘画：canvas
媒体：video，audio
存储：localStorage，sessionStorage
语义化元素：article,footer,header,nav,section
表单控件：calender，time，date，url
技术：webworker，websocket
文档属性：document.visibilityState
位置：getCurrentPosition()
语义化的理解
- 用适合的标签来做适合的事情；
- 让页面的内容结构化，结构更清晰；
- 即使没有样式的情况下依然能够容易阅读；
- 利于搜索引擎解析，利于爬虫，利于SEO；
- 利于代码理解与维护
cookies，localStorage，sessionStorage 区别
- 存储：cookie(4K),localStorage(5M),sessionStorage(5M)；
- 有效期：cookie(设置的Expires或Max_age过期时间),localStorage(主动删除数据),sessionStorage(页面会话结束)；
- 作用域：cookie(同源),localStorage(同源),sessionStorage(同源同窗口)；
摘自 CavsZhouyou
