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; } }