HTML
-
浏览器
a. 渲染引擎 b. js执行引擎 -
主流的浏览器内核
a. chrome (blink) b. ie (trident) c. safari (webkit) 苹果浏览器 d. firfox (gecko) 火狐 内置工具较多 e. opera (presto)欧朋浏览器 -
标签
a. 块级元素（display:block）div h1-6 footer header ul ol li... 默认是沿Y轴排列 可以调节高度和宽度 可以调节上下左右的布局 b. 行内元素 （display:inline）a span label 默认是沿X轴排列 不能调节高度 不能控制上下，但是能调节左右 （display:inline-block）行内块状 都可以修改 默认是沿X轴排列 不能调节高度 不能控制上下左右 置换元素（默认拥有行内元素的特点，默认不受style控制） img、video、audio、button
4.HTML的页面结构
lang="en" 浏览器的解析格式 en代表英文
a. DOCTYPT html 告诉浏览器当前使用的是h5的解析规则
如果使用的一些标签有斜杠，那就意味着以后的最新版本有可能移除此标签，不再推荐使用，
有可能影响当前页面的布局，如果一定要使用一些不再建议使用的标签，可以修改解析规则，
快捷键 html:4t(过度版本) html:4s(正式版本)
b. HTML的根节点
head
书写的内容是针对于浏览器的
meta标签 配置一些针对于浏览器或设备的操作
charset 告诉浏览器编码格式
viewport 针对于移动端的配置
link 引入css文件 或者 设置网站logo
rel=”ICON” href中写logo路径
title
当前标签页的名称，浏览器收藏时的默认名称
body
主内容（用户看的视图区域）
-
常用标签
a. a标签 href中可以书写js代码 javascript:comfirm("确认"?1:1); 本地路径 第三方路径 id 锚点 target 值为_blank时，点击会打开一个新的窗口 默认_self不打开新窗口 b. table列表，管理系统应用比较多，官方的PC应用比较少，因为其渲染效率比较低 border 书写在style外，和style中不一样 bordercolor border框的颜色，书写在style外 table-layout 计算td的宽度，书写在style中 suto 默认 根据当前框中的内容决定宽度，效率低 fixed 将所有的td写死，不用动态的计算，效率比较高 td中的style属性 vertical-align 垂直位置的调节 middle 当前的内容垂直居中 top 当前的内容 上当 botton 当前的内容 放置于下方 text-align 文本居中 c. img width 、 height 宽和高 src 图片地址 也可以放置 图片转成的字符串 字符串的优点：没有实体文件的图片，不用维护图片 缺点：体积会变大 增大33%的体积 base64会将文件3字节分成24个，24个又分为4组，一组6个位置不够一个字节的8位， 所以最高位补0，所以会增大33% alt 当图片不显示的时候提示信息 title 鼠标放在上面的提醒 d. textarea cols 中文+英文的平均文本宽度 rows 文本列 代表文本的高度 resize 控制拖拽 none -- 禁止横向纵向拖拽 vertical -- 只能垂直方向拉伸 horizontal -- 只能水平拖拽拉伸 -
H5表单验证相关属性（PC端应用较少）
can i user XXX 网站可以查看浏览器的兼容性 a. email required -- 必须填写的字段 maxlength -- 最大的输入长度 minlength -- 最小的输入长度 在手机使用此type时，输入法会自动进入邮箱填写模式 b. number required -- 必须填写的字段 max -- 只能适用于number,最大的值 min -- 只能适用于number，最小值 在手机上使用此type时，输入法自动进入数字界面 c. tel （PC端不支持，移动端可以使用，并且会自动切换小键盘） maxlength -- 最大输入长度 minlength -- 最小输入长度 用于输入电话号码 d. search（适用于移动端） maxlength -- 最大输入长度 minlength -- 最小输入长度 在手机上使用此type时，输入法的右下角会有搜索按钮 e. color 可以进行管理系统用户选择自己喜欢的颜色 f. range max 代表当前拖拽的最大值 为数字 g. label（H5新标签，适用于移动端，可以增加用户体验） for -- 书写的是绑定的input的id 可以用于上传功能，绑定上传的input后隐藏当前原生的input h. datalist（H5新标签） input中的list属性绑定datalist的id 下拉过滤效果，一般datalist中的数据都是动态获取的 i. progressl（H5新标签）加载条 max -- 最大值 value -- 当前值 占比 j. video（H5新标签） src -- 本地视频的路径 controls -- 添加控制台（播放等操作按钮） poster -- 视频封面、值为图片的路径 can i use 查询支持率最高的前几个视频格式，video中使用source标签来兼容不同格式的视频（加在video标签中） js操作属性 currectTime -- 获取当前视频的播放时间（可用于投放广告） playbackRate -- 获取当前视频的播放速度，默认为1，可以进行自定义速度 duration -- 获取当前视频的总长度 单位：秒 paused -- 获取当前视频是否处于暂停状态（可用于投放广告） js操作方法 pause() -- 方法调用可以暂停视频 play() -- 方法调用可以播放视频 k. audio（H5新标签） src -- 本地的音频路径 controls -- 添加控制台（视频的播放按钮以及进度条等） can i use 查询支持率最高的前几个音频格式，video中使用source标签来兼容不同格式的音频（加在audio标签中） js操作属性 currentTime -- 返回当前的播放的时间 duration -- 音频的总时长 单位：秒 js的操作方法 pause() 暂停 play() 播放 -
H5离线缓存（H5的新特性）
a. 前端缓存 缓存的文件 通常用于缓存CSS文件、JS文件、图片 b. manifest配置离线缓存属性，需要书写配置文件来制定缓存的文件 优点：减少服务器的压力，充分利用了浏览器本身的特性 存在的缺点 缓存的页面或者文件一旦修改，浏览器默认检测不到，它会一直使用本地的缓存，忽略后端的数据 chrome://appcache-internals --- 手动删除缓存 自动监听缓存的修改，然后在重新生成缓存 当修改了缓存的页面后者文件时再修改配置文件，用户访问时会自动生成新的缓存，但是有一个缺点，第一次刷新 会优先访问本地的缓存，第二次才会获取新的数据 解决：监听缓存变更的事件，然后自动刷新一次 配置文件： CACHE MANIFEST #version 1.6(每次更新数据要更改一下配置文件，否则不刷新) CACHE: 需要缓存的资源 例：demo.html js刷新页面： window.applicationCache.addEventListener("updateready",function(){ console.log("页面的数据改动，需要重新生成缓存"); window.location.reload(); } -
H5本地存储（5M左右）
a. 将需要持久化的信息 保存在浏览器上 b. localStorage.key = value 如果要存的是对象，在存储的时候JSON.stringify进行转换，获取的时候JSON.parse转换 c. localStorage.clear() 删除所有localStorage中保存的对象 d. localStorage完成购物车，可以进行不登录也可以添加购物车 优点：不走服务器，可以减轻服务器的压力，在购物车结账时才会伴随请求反送到后台生成订单 缺点： 不走服务器，没有办法同步到多个终端设备 换个浏览器购物车就没了 e. sessionStorage 只能存储字符串 sessionStorage.key = value 指的是页面关闭时自动清除 -
localStorage 与 cookie 和 session 的区别？
1. 区别： localStorage不注定伴随请求发送到后台 localStorage默认大小为5M localStorage默认可以存储中文，但是只能存储字符串类型的数据 localStorage保存在浏览器，永久生效 cookie 和 session是由后端生成，localStorage直接在浏览器中生成 2. 相同点 都是key-value的形式保存 -
FileReader
转换图片成base64 代码： //选中图片后 自动将图片转换成base64显示在页面指定的区域 var element = document.querySelector("#header"); element.onchange = function(){ //从file中将图片提取 var head = element.files[0]; //将图片交给FileReader转换成base64 var reader = new FileRader(); //调用readAsDaraURL将图片转换成base64 reader.readAsDataURL(head); //readAsDataURL是异步操作 所有需要监听来获取异步的处理结果 //reader监听onload 在转换完毕后 通过回调返回给当前的使用者 reader.onload = function(a){ //回调会携带异步的执行结果 document.querySelector("#img_head").src=this.result; } }