![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Html 5
启之灵
不积跬步无以至千里,不积小流无以成江海
展开
-
Html5开发工具和emmet插件的安装
Html5开发工具和emmet插件的安装看清楚哦~~这是Sublime text 3不是2的版本,两者的安装还是有区别的,下面的方法是我感觉比较简单的,其他的要命令什么的感觉太复杂了,经测试是OK的。ONE:建议到官方下载Sublime 其他地方下载的可能会有冲突导致以下无法进行,出问题的同学一般是这个问题,不一一回复了~ TWO:Packa原创 2017-05-22 10:03:50 · 721 阅读 · 0 评论 -
HTML5开发 之 CSS精灵技术 和 字体图标技术
1.精灵技术为了避免一写小的图片背景图片很多,然后多次请求服务器的情况下,采用了一张底色为透明的有很多小图标的大图,网页只要请求一次就可以了获取到大图,然后通过背景设置position控制坐标显示不同位置的小图可以实现; 2.文字图标其实是将图标当成一种文字显示的,需要设置字体;可以在网上找一些现成的图标常用的网站:https://icomoon.io阿里的字体库:ht...原创 2018-09-22 22:20:17 · 699 阅读 · 0 评论 -
HTML5 开发系列 之 伪元素的真谛
伪元素伪元素其实是一个元素,但是没有真正的定义出来而已,但是消失效果其实就是一个行内元素的效果::before 其实就是在一个元素的内部,最前面添加了一个行内元素;可以改变显示模式,设置宽高,背景就可以看到这个元素的真是面貌;例如:<!DOCTYPE html><html> <head> <meta charset="UTF-...原创 2018-09-23 00:29:26 · 328 阅读 · 0 评论 -
webApp 之 基本概念
基本概念1.屏幕尺寸屏幕对角线的长度;2.分辨率横纵方向上的物理像素的个数乘积;3.像素密度对角线的像素/尺寸=像素密度;4.css像素css像素是和浏览器相关的,是一个抽象概念;最终转换成一个物理像素,显示到屏幕上;浏览器的最小单位;一个css像素占据多少个物理像素,取决于屏幕的特性(高清屏,用户缩放等);5.位图像素一张图片的尺寸,一个位图像素占据一个物理...原创 2019-01-06 21:45:36 · 784 阅读 · 2 评论 -
webApp 之 屏幕适配
1.em单位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css">原创 2019-01-06 21:50:15 · 1235 阅读 · 0 评论 -
webApp 之 轮播图案例
下面这个方式是改变ul的left值进行改变图片的平移的,这个中方式不建议使用,比较好性能,费电;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=&原创 2019-01-11 17:28:34 · 318 阅读 · 0 评论 -
webApp 之 轮播图案例(优化版)
轮播图案例特点:1.这个案例利用了transform属性改变 translateX 属性切换图片(这种方式性能高);2.这里封装了一个处理translate的js文件,用于设置translateX数据和获取数据;3.实现了最后的滑动速度和每次的滑动距离判断是否切换页面; <!DOCTYPE html><html lang="en"><h...原创 2019-01-14 10:37:34 · 336 阅读 · 0 评论 -
webApp 之 事件点透
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-原创 2019-01-09 19:07:56 · 295 阅读 · 0 评论 -
webApp 之 多点触摸
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" /> &l原创 2019-01-09 19:27:14 · 241 阅读 · 0 评论 -
webApp 之 常见问题
1.禁止电话和邮箱<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <!--禁止电话和email--> <meta name="format-detection" content="telephone=no,email=no&quo原创 2019-01-09 19:41:16 · 1101 阅读 · 0 评论 -
webApp 之 跳转方案
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,原创 2019-01-09 17:26:58 · 999 阅读 · 0 评论 -
Android开发 之 网页启动APP
实现原理首先我们来看一下网页跳转到应用的实现原理在Android平台而言,URI主要分三个部分:scheme, authority, path, queryString。其中authority又分为host和port。格式如下: scheme://...原创 2019-03-20 17:44:06 · 583 阅读 · 0 评论 -
HTML5开发系列(9) 之 CSS高级技巧
1.鼠标样式属性:1.1 cursor:default 默认的鼠标样式1.2 cursor:pointer 小手的样子1.3 cursor:text 勾选文本的样式;1.4 cursor:move 拖动的样式; <head> <meta charset="UTF-8"> <title><...原创 2018-09-22 11:49:53 · 380 阅读 · 0 评论 -
HTML5开发系列 之 Animation
Animationhtml5中的动画通常是和transform搭配使用的;transform设定执行的数据;animation实现过渡动画效果;<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <原创 2018-09-23 20:05:44 · 680 阅读 · 0 评论 -
HTML5开发系列 之 Transform
Transform (2D变形)1.translate 平移控制属性为x和y控制xy属性的时候使用百分比的话,是相对自己的尺寸的;移动的距离是相对当前盒子的显示位置的;<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title..原创 2018-09-23 17:45:22 · 1044 阅读 · 0 评论 -
HTML 开发 之 选择器的优先级顺序
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p{ background-color: red; }原创 2018-08-26 22:17:24 · 2208 阅读 · 0 评论 -
HTML开发 之 块元素和内联元素
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>demo</title> <!-- <style type="text/css"> h1{原创 2018-08-21 21:47:25 · 200 阅读 · 0 评论 -
HTML5开发系列(3) 之 CSS常用的选择器
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>常用的选择器</title> <style type="text/css"> /* * 元素选择器:为所有的p设置一个样式,字原创 2018-08-21 22:25:12 · 221 阅读 · 0 评论 -
HTML5开发系列(2) 之 CSS文本样式
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> p{ color: green; font-si原创 2018-09-10 09:39:01 · 210 阅读 · 0 评论 -
HTML5开发系列(4) 之 样式表的三种类型
1.内部样式表<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <!--这种属于内部样式表: 在html5中 type="text/css" 是可以省略的--&原创 2018-09-04 22:22:09 · 3224 阅读 · 0 评论 -
HTML5开发系列(5)之 标签的类型 以及 类型转换
html标签一般分为块标签和行内标签和行内块元素三种1.块元素:常见的标签有:<h1>~<h6>、<p> ,<div> ,<ul> ,<ol>, <li> 等;特点:1.块元素通常会都占一行或者多行, 2.可以对其设置宽高,对齐等属性,常用于网页的布局和结构的搭建;原创 2018-09-04 23:13:33 · 719 阅读 · 0 评论 -
HTML5开发系列(1) 之 标签
1.标签的分类1.双标签 例如:<body> </body>2.单标签 例如: <br/> 2.标签之间的关系2.1 是嵌套关系即父子关系2.2 兄弟姐妹关系; 3.各种标签3.0 注释标签 <!-- 标题标签一共有6个,重要性依次减少,字体依次变小,变细; ...原创 2018-09-02 21:49:19 · 289 阅读 · 0 评论 -
HTML5开发系列(6) 之 CSS三大特性
1.层叠性当同一个标签定义了多个样式的时候,就存在样式属性冲突,样式属性相同则被覆盖;当css样式冲突的时候会执行后定义的样式,如果样式属性不冲突则分开执行;<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>原创 2018-09-08 12:10:27 · 261 阅读 · 0 评论 -
HMTL开发系列(7) 之 CSS三大模块之盒子模型
在页面布局的时候会经常使用到的:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> input{ borde原创 2018-09-09 00:09:01 · 311 阅读 · 0 评论 -
HMTL开发系列(8) 之 浮动模块(标准流 浮动 定位)
浮动模块布局模式分为三种:普通流(标准流)、浮动和定位;1.普通流(标准流)在此之前讲的布局都是普通流,块级元素竖行排列,行内元素水平排列; 2.浮动目的:浮动的主要目的是将多个块级元素通行显示;特点:1.可以通过显示样式转换,转换成行内块元素显示,但是行内块有个缺点是在各个块元素之间会有缝隙存在;(img标签就是行内块,所以多个图片相邻的话会有缝隙,所以要转成块元...原创 2018-09-18 23:33:32 · 408 阅读 · 0 评论 -
HTML5开发系列 之 过渡动画
过渡动画transition 属性 可以在属性之间参数多个帧数进行显示,这样就会看起来和动画效果一样的;可以实现类似小米官网上的鼠标移动上去产生阴影效果,动态的添加阴影,盒子的位置;过渡动画是css3出现的新特性;<!DOCTYPE html><html> <head> <meta charset="UTF-8"> &l...原创 2018-09-23 13:08:36 · 2179 阅读 · 0 评论 -
Html5开发 之 文件上传
Html:<div> <form enctype="multipart/form-data" action="upload/" method="POST" target="hidden_frame_apk"> <input type="file" name="file"/> ...原创 2019-04-01 18:22:54 · 531 阅读 · 0 评论