HTML5
ruanhongbiao
最想要去的地方,怎能半途返航。
展开
-
这可能是最全的HTML(5)知识体系总结
1.文档声明(Doctype)和<!Doctype html>有何作用? 严格模式与混杂模式如何区分?它们有何意义?文档声明的作用文档声明是为了告诉浏览器,我们写的HTML文档当前使用什么版本的HTML来写的,这样浏览器才能按照我们声明的版本来正确的解析。<!Doctype html>的作用<!doctype html> 的作用就是让浏览器进入标准模式,使用最新的 HTML5标准来解析渲染页面;如果不写,浏览器就会进入混杂模式,我们需要避免此类情况发生。严原创 2020-07-08 15:57:27 · 1439 阅读 · 0 评论 -
解决移动端video标签视频在Android系统中的层级问题
H5页面视频播放的问题相信曾经让很多同学崩溃,video标签的层级问题始终无法得到完美的解决方案。这次的需求是这样的:在浏览器中扫码打开一个H5页面,要将一个视频当成背景图片来播放(gif太大,所以不用)通过给video标签设置postion z-index等属性,明显是不可行的。方案1:<video id="video-ios" src="./ceshi.mp4" w...原创 2019-10-24 09:08:01 · 5249 阅读 · 0 评论 -
移动端H5页面监听页面离开返回并且刷新页面
项目中的需求:点击浏览器中的返回按钮,要让页面重新加载资源。因为这部分的资源每次去加载的内容都不一样,如果返回的时候,还是看到原先的内容,那做这个内容块的意义就很小了;而如果用户看完了这部分内容,再返回来的时候,这个地方换成了新的内容,这样就能体现这部分的价值了。而对于浏览器来说,大部分浏览器的返回是直接使用缓存的,不会执行任何的javascript代码。原因:部分浏览器在后退时不会触发onl...原创 2019-07-30 14:31:36 · 18359 阅读 · 3 评论 -
video标签视频编码和在iOS上默认全屏问题
一:video标签无法播放MP4格式视频问题关于<video>标签所支持的视频格式和编码:MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器通过上面的信息我们会发现只有h2...原创 2018-07-17 15:11:04 · 2112 阅读 · 0 评论 -
移动端点击(click)事件延迟问题的解决方法
大多数基于触摸的浏览器设备,在点击时都会有个 300ms 的事件触发等待时间,做过 web app 开发的同学应该都遇到过这个情况,通过下面的5步可以轻松搞定这个延迟。1、不要太纠结于此是否能接受这 300ms 的时间延迟,往往取决于你的应用和目标受众,比如:如果是个内容为主,并且菜单较少的应用,那么用户在阅读上花费的事件远远大于在菜单上消耗的事件,这种 情况下 300ms 是完全可以接受的,并且...原创 2018-05-23 14:17:31 · 12073 阅读 · 0 评论 -
css实现右侧固定宽度,左侧宽度自适应
反过来也可以:左侧宽度固定,右侧自适应。不管是左是右,反正就是一边宽度固定,一边宽度自适应。这种布局比较常见,博客园很多默认主题就是这种。一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧?要实现这种布局,也算比较简单。我们先给出html结构:12345<div id="wrap"> <div id="sidebar" ...原创 2018-05-08 18:09:58 · 501 阅读 · 0 评论 -
解决移动端Retina屏幕1px边框问题方法汇总
造成边框变粗的原因其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性,他可以反应css中的像素与设备的像素比。devicePixelRatio的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素。关于devicePixe...原创 2018-05-18 15:32:53 · 1519 阅读 · 0 评论 -
【移动端bug】iOS下setTimeout无法触发focus事件的解决方案
项目需求是打开页面的时候,input元素自动弹起键盘。由于各种方面的考虑,我们希望通过setTimeout延时200毫秒让input元素focus,demo代码如下:<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>IOS下s原创 2018-05-11 17:03:49 · 2398 阅读 · 0 评论 -
session,cookie,sessionStorage,localStorage的区别及应用场景
浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟服务端进行数据交互。一、cookie和sessioncookie和session都是用来跟踪浏览器用户身份的会话方式。区别:1、保持状态:cookie保存在浏览器端,session保存在服务器端2、使用方式:(1)cookie机制:如果不在浏览器中设置过期时间,cookie被保...原创 2018-05-09 12:23:46 · 205 阅读 · 0 评论 -
H5页面在iPhoneX适配
1. iPhoneX的介绍屏幕尺寸我们熟知的iPhone系列开发尺寸概要如下:△ iPhone各机型的开发尺寸转化成我们熟知的像素尺寸:△ 每个机型的多维度尺寸倍图其实就是像素尺寸和开发尺寸的倍率关系,但这只是外在的表现。倍图核心的影响因素在于PPI(DPI),了解屏幕密度与各尺寸的关系有助于我们深度理解倍率的概念:《基础知识学起来!为设计师量身打造的DPI指南》iPhone8在本次升级中,屏幕...转载 2018-04-19 18:41:21 · 1736 阅读 · 0 评论 -
web前端技术栈图
转载 2018-04-02 18:36:22 · 5221 阅读 · 0 评论 -
移动端样式小技巧
平时在移动端开发拼页面的过程中总会遇到一些问题,主要是各手机webview样式显示效果不一致造成的。以下总结了一些常见坑和一些小技巧,希望对看官有所帮助!本文只针对两大手机阵营 Android和IOS 中的魅蓝metal 和 iPhone6进行样式对比。一、line-heightline-height经常用于文字居中,当然也有小伙伴会用上下padding去写.but!不转载 2016-08-18 11:19:41 · 456 阅读 · 0 评论