Appearance
W3C标准
万维网联盟（外语缩写：W3C）标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）
- 结构标准语言
- 可扩展标记语言XML
- 可扩展超文本标记语言XHTML
- 表现标准语言
- 层叠样式表CSS
- 行为标准语言
- 文档对象模型DOM
- ECMAScript
doctype有什么作用？怎么写
DOCTYPE是document type的简写，它是一种标记语言的文档类型声明，即告诉浏览器当前 HTML 是用什么版本编写的，决定了浏览器最终如何显示你的 Web文档。在遵循标准的任何Web文档中，它都是一项必需的元素。
标准模式和怪异模式
Standards：标准模式，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。Limited Quirks：几乎标准模式，和标准模式之间的唯一差异在于是否对元素给定行高（line-height）和基线Quirks：怪异模式，浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。
标签语义化
所谓“语义”就是为了更易读懂，用正确的标签做正确的事情，这要分两部分：
- 让人（写程序、读程序）更易读懂， 即使在没有样式CSS情况下也以一种文档格式显示，使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
- 让机器（浏览器、搜索引擎，盲人阅读器等）更易读懂，让页面的内容结构化，结构更清晰，爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO
此外HTML 5 提供了一些新的语义化元素标签和属性，如article、nav、header等，参考：
浏览器
浏览器内核
- Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
- Gecko内核：Netscape6及以上版本，firefox, MozillaSuite/SeaMonkey等
- Presto内核：Opera7及以上。[Opera内核原为：Presto，现为：Blink;]
- Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
HTML5
新增功能
- 绘画 canvas;
- 用于媒介回放的 video 和 audio 元素;
- 本地离线存储localStorage和sessionStorage
- 语义化标签
- webworker、websocket、Geolocation
移动开发
参考：
通过HTML可以实现移动开发的一些功能，如移动端开发如通过input pattern控制键盘类型，schema跳转APP等技巧
移动开发中meta知识点
- 页面窗口自动调整到设备宽度，并禁止用户及缩放页面。
- 忽略将页面中的数字识别为电话号码
- 忽略Android平台中对邮箱地址的识别
- 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对iOS的safari
- 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式
webp
WebP具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。 不过在IE和和safari，以及部分移动端浏览器上不兼容，会导致图片加载失败
图片
矢量图和位图
- 矢量图是 通过组成图形的一些基本元素，如点、线、面，边框，填充色等信息通过计算的方式来显示图形的
- 位图又叫像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像
web页面中所使用的JPG、PNG、GIF格式的图像都是位图，
JPG是我们最常见的采用有损压缩对图像信息进行处理的图片格式。JPG在存储图像时会把图像分解成88像素的栅格，这些88栅格中很多细节信息被去除，而通过一些特殊算法用附近的颜色进行填充然后对每个栅格的数据进 行压缩处理
无损压缩则会真实的记录图像上每个像素点的数据信息，但为了压缩图像文件的大小会采取一些特殊的算法。无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的，哪 些是不同的，然后把这些相同的数据信息进行压缩记录
- JPG更适合用来存储摄影或写实图像，但不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片
- PNG能在保证最不失真的情况下尽可能压缩图像文件的大小，但是体积可能会比较大
无头浏览器
参考