Html 5
关注
分享
扫一扫
启之灵
不积跬步无以至千里，不积小流无以成江海
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Html5开发工具和emmet插件的安装
Html5开发工具和emmet插件的安装看清楚哦~~这是Sublime text 3不是2的版本，两者的安装还是有区别的，下面的方法是我感觉比较简单的，其他的要命令什么的感觉太复杂了，经测试是OK的。ONE：建议到官方下载Sublime 其他地方下载的可能会有冲突导致以下无法进行，出问题的同学一般是这个问题，不一一回复了~ TWO：Packa原创 2017-05-22 10:03:50 · 769 阅读 · 0 评论 -
HTML5开发 之 CSS精灵技术 和 字体图标技术
1.精灵技术为了避免一写小的图片背景图片很多，然后多次请求服务器的情况下，采用了一张底色为透明的有很多小图标的大图，网页只要请求一次就可以了获取到大图，然后通过背景设置position控制坐标显示不同位置的小图可以实现； 2.文字图标其实是将图标当成一种文字显示的，需要设置字体；可以在网上找一些现成的图标常用的网站：https://icomoon.io阿里的字体库：ht...原创 2018-09-22 22:20:17 · 774 阅读 · 0 评论 -
HTML5 开发系列 之 伪元素的真谛
伪元素伪元素其实是一个元素，但是没有真正的定义出来而已，但是消失效果其实就是一个行内元素的效果::before 其实就是在一个元素的内部，最前面添加了一个行内元素；可以改变显示模式，设置宽高，背景就可以看到这个元素的真是面貌；例如：<!DOCTYPE html><html> <head> <meta charset="UTF-...原创 2018-09-23 00:29:26 · 361 阅读 · 0 评论 -
webApp 之 基本概念
基本概念1.屏幕尺寸屏幕对角线的长度；2.分辨率横纵方向上的物理像素的个数乘积；3.像素密度对角线的像素/尺寸=像素密度；4.css像素css像素是和浏览器相关的，是一个抽象概念；最终转换成一个物理像素，显示到屏幕上；浏览器的最小单位；一个css像素占据多少个物理像素，取决于屏幕的特性（高清屏，用户缩放等）；5.位图像素一张图片的尺寸，一个位图像素占据一个物理...原创 2019-01-06 21:45:36 · 862 阅读 · 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 · 1286 阅读 · 0 评论 -
webApp 之 轮播图案例
下面这个方式是改变ul的left值进行改变图片的平移的，这个中方式不建议使用，比较好性能，费电；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=&原创 2019-01-11 17:28:34 · 367 阅读 · 0 评论 -
webApp 之 轮播图案例(优化版)
轮播图案例特点：1.这个案例利用了transform属性改变 translateX 属性切换图片（这种方式性能高）；2.这里封装了一个处理translate的js文件，用于设置translateX数据和获取数据；3.实现了最后的滑动速度和每次的滑动距离判断是否切换页面； <!DOCTYPE html><html lang="en"><h...原创 2019-01-14 10:37:34 · 387 阅读 · 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 · 342 阅读 · 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 · 285 阅读 · 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 · 1193 阅读 · 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 · 1096 阅读 · 0 评论 -
Android开发 之 网页启动APP
实现原理首先我们来看一下网页跳转到应用的实现原理在Android平台而言，URI主要分三个部分：scheme, authority, path, queryString。其中authority又分为host和port。格式如下： scheme://...原创 2019-03-20 17:44:06 · 681 阅读 · 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 · 463 阅读 · 0 评论 -
HTML5开发系列 之 Animation
Animationhtml5中的动画通常是和transform搭配使用的；transform设定执行的数据；animation实现过渡动画效果；<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <原创 2018-09-23 20:05:44 · 722 阅读 · 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 · 1149 阅读 · 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 · 2294 阅读 · 0 评论 -
HTML开发 之 块元素和内联元素
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>demo</title> <!-- <style type="text/css"> h1{原创 2018-08-21 21:47:25 · 223 阅读 · 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 · 265 阅读 · 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 · 244 阅读 · 0 评论 -
HTML5开发系列（4） 之 样式表的三种类型
1.内部样式表<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <!--这种属于内部样式表： 在html5中 type="text/css" 是可以省略的--&原创 2018-09-04 22:22:09 · 3335 阅读 · 0 评论 -
HTML5开发系列（5）之 标签的类型 以及 类型转换
html标签一般分为块标签和行内标签和行内块元素三种1.块元素：常见的标签有：<h1>~<h6>、<p> ,<div> ,<ul> ,<ol>, <li> 等；特点：1.块元素通常会都占一行或者多行， 2.可以对其设置宽高，对齐等属性，常用于网页的布局和结构的搭建；原创 2018-09-04 23:13:33 · 779 阅读 · 0 评论 -
HTML5开发系列（1） 之 标签
1.标签的分类1.双标签 例如：<body> </body>2.单标签 例如: <br/> 2.标签之间的关系2.1 是嵌套关系即父子关系2.2 兄弟姐妹关系； 3.各种标签3.0 注释标签 <!-- 标题标签一共有6个，重要性依次减少，字体依次变小，变细； ...原创 2018-09-02 21:49:19 · 338 阅读 · 0 评论 -
HTML5开发系列（6） 之 CSS三大特性
1.层叠性当同一个标签定义了多个样式的时候，就存在样式属性冲突，样式属性相同则被覆盖；当css样式冲突的时候会执行后定义的样式，如果样式属性不冲突则分开执行；<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>原创 2018-09-08 12:10:27 · 297 阅读 · 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 · 355 阅读 · 0 评论 -
HMTL开发系列（8） 之 浮动模块（标准流 浮动 定位）
浮动模块布局模式分为三种：普通流（标准流）、浮动和定位；1.普通流（标准流）在此之前讲的布局都是普通流，块级元素竖行排列，行内元素水平排列； 2.浮动目的：浮动的主要目的是将多个块级元素通行显示；特点：1.可以通过显示样式转换，转换成行内块元素显示，但是行内块有个缺点是在各个块元素之间会有缝隙存在；（img标签就是行内块，所以多个图片相邻的话会有缝隙，所以要转成块元...原创 2018-09-18 23:33:32 · 488 阅读 · 0 评论 -
HTML5开发系列 之 过渡动画
过渡动画transition 属性 可以在属性之间参数多个帧数进行显示，这样就会看起来和动画效果一样的；可以实现类似小米官网上的鼠标移动上去产生阴影效果，动态的添加阴影，盒子的位置；过渡动画是css3出现的新特性；<!DOCTYPE html><html> <head> <meta charset="UTF-8"> &l...原创 2018-09-23 13:08:36 · 2248 阅读 · 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 · 599 阅读 · 0 评论