HTML5基础知识及兼容处理

作者: 日期:2019-01-11 点击: 243

HTML5基础概述HTML:超文本标记语言(页面中不仅只有文字,而且可以浮现出图片¶••⊿音视频等媒体资源)XHTML:它是HTML比较规范严谨的一代版本XML:可扩大的标记语言(HTML中应用的标签都是W3C标准中规定的,XML容许我们自己扩大标签的),它的作用不是用来写页面结构的,而是用来存储一些数据的(以自己扩大的标签作为标识,清楚明了的展现出数据的结构

聊聊移动端的REM适配问题

作者: 日期:2017-08-22 点击: 449

详聊移动端rem的适配问题现在移动端对于前端行业来说特别风行,废话不多说,那我们就来聊聊移动端的哪些事?写移动端必须在html页面head标签内加一个meta标签—viewport视口 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1••。0, maximum-scale=1••。0, minimum-scale=1

如何编写一个轻量级的CSS框架

作者: 日期:2017-08-19 点击: 308

如何编写轻量级 CSS 框架目前市场轻量级框架如雨后春笋,层出不穷••。我想每个人都应当归纳总结工作中的常见需求,编写一套合适自己的 CSS 框架••。现在仍然有很多人对于前端框架的认识还停留在表面,认为 Bootstrap 是后端人员专用,前端没必要等等••。我不知道这种说法从何而来,我最开端也不爱好应用框架,或许和很多人的想法一样,畏惧新知

canvas 图片动画绘制

作者: 日期:2017-08-13 点击: 270

canvas 图片动画绘制绘制简略图像 语法: CanvasRenderingContext2D.drawImage( img, dx, dy ) 描写: 应用三个参数, 容许在画布上的 任意地位 绘制图片. 参数 img 是指图片对象. 可以是 img 标签, 或者是 video 标签, 已经另一个 canvas 等. 需要注意的是如果直接添加 img 对象是不可以的,

CSS背景与边框(二)

作者: 日期:2017-07-02 点击: 269

6.复杂的背景图案背景知识:css渐变, “条纹背景”6.1 网格把多个渐变图案组合起来,让它们透过彼此的透明区域浮现时,就会得到意想不到的图案••。background: white;background-image: linear-gradient(90deg, rgba(200,0,0,.5), 50%, transparent 0), linear-gradient(rgba(200,0,0,.5) 50%, tra

CSS背景与边框(一)

作者: 日期:2017-06-27 点击: 249

背景与边框1••。半透明边框背景知识:rgba/hsla,在rgb/hsl的基础上增长了Alpha通道,用于设置色彩的不透明度(就是能透过多少背景) rgba吸收四个数值,即rgba(red, green, blue,a),rgb可认为数值(0 ~ 255),也可认为百分比(0 ~ 100%),a表现不透明度(0~1),1为完整不透明,0表现完整透明••。 rgba(0,255,0,1) 表现纯绿色,完整不透

HTML5实现图片上传与预览

作者: 日期:2017-06-16 点击: 547

File API File - 独立文件;供给只读信息,例如名称¶••⊿文件大小¶••⊿mimetype 和对文件句柄的引用••。 FileList - File 对象的类数组序列(考虑多文件上传或者从桌面拖动目录或文件)••。 Blob - 可将文件分割为字节领域••。 FileReader - 读取File或Blob URL scheme检测浏览器是否支撑// 检测是否支撑File APIif (window.Fil

深入懂得CSS3 Flexbox

作者: 日期:2017-06-01 点击: 404

一¶••⊿前言Flexbox 是一个 CSS3 的盒子模型 ( box model ),顾名思义它就是一个机动的盒子 ( Flexible Box ),为什麽最近这个属性才红起来呢?最重要也是因为 CSS3 的规范终于普及 ( 或 IE 终于败亡 ),加上举动装置的发展促成了响应式布局兴起,自适应长宽弹性相当大的 Flexbox 就趁势而起了••。第一步要来看 Flexbox 的盒子模型,根据 W3C

Css: background-position属性

作者: 日期:2017-05-18 点击: 848

在 CSS 中供给的 background-position 用来设置背景图片的最初的地位••。既然需要设置地位,确定需要根据页面中的坐标断定,而这个坐标原点的断定是有background-origin 来设置的••。background-origin 有:padding-box¶••⊿border-box¶••⊿content-box,三个取值,为了比较清楚的说明确,来看下面的一个图就知道了:background-position在没有指定

利用CSS实现无js的tab切换

作者: 日期:2017-04-27 点击: 285

tab页面的切换原理是利用display属性来操作的,利用这一点,我们就可以利用input中的单选按钮来实现这个功效••。我们让与input对应的label来作为tab的导航••。<input type="radio" id="tab1" name="parent-type"><label for="tab1" class="labe">tab1</la

浅谈CSS优先级

作者: 日期:2017-04-14 点击: 217

懂得一下CSS优先级浏览器通过优先级来断定哪一些属性值与一个元素最为相干,从而在该元素上利用这些属性值••。优先级是基于不同种类选择器组成的匹配规矩••。最近在写一些小demo,过程中遇见由于不太熟悉CSS优先级问题而造成的麻烦,所以特地懂得和学习了相干的知识,为了避免遗忘,也有助于将来复习,所以记在博客里••。什么是CSS权重优先级

前端性能优化小总结

作者: 日期:2017-04-11 点击: 229

1.想深层次探究前端优化,就不仅仅停留到表面,要知道文件如何下载?浏览器如何渲染?想优化页面,就要知道一个页面,产生的全部过程 浏览器产生一个页面的流程如下:1.1下载:最有优化点的一部下载,这个方向是优化必要点,贴一张chrome下载文件的时间截图://来个表格,过细分析下下载过程中每个阶段的耗时 1.持续时间 = 时间 *个数 2.时

常用的几种HTML5体验改良方法

作者: 日期:2017-03-21 点击: 248

常用HTML5体验改良方法1••。 fake 页 - 首屏加速因为 71% 的用户期望移动页面跟 pc 页面一样快 (3s) ,74% 的用户能容忍的响应时间为 5 秒,所以我们必须保证移动端页面有足够的速度••。方案: 避免页面长时间白页,页面渲染只需要完整的 HTML 以及 CSS 加载结束后页面第一屏便渲染结束,然后再异步加载js 静态资源不应用 cookie

HTML5新增标签概括

作者: 日期:2017-03-19 点击: 287

HTML5新增标签 标签名 标签属性 article 定义文章 aside 定义页面内容之外的内容 audio 定义声音内容

CSS3实现居中的各种方法

作者: 日期:2017-03-03 点击: 372

本篇收拾了CSS3实现居中(程度居中¶••⊿垂直居中¶••⊿程度垂直居中)的几种解决方案程度居中:行内元素解决方案思路: 把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可:text-align: center实用元素:文字,链接,及其它inline或者inline-*类型元素(inline-block,inline-table,inline-flex)//父元素display:b

初学CSS3应当控制哪些基础知识

作者: 日期:2017-02-25 点击: 266

初学CSS3应当控制哪些基础知识 初学CSS3应当控制哪些基础知识 CSS3简介 CSS现状 怎样利用 引用前的筹备 同一环境 如何应用手册 具体学习那些知识点 CSS3选择器

CSS常见问题及解决方案

作者: 日期:2017-02-18 点击: 469

calc()css 数学运算弹性盒模型display: flex 新display: box 旧元素高低居中 css3: 弹性盒模型 css3: translate .element{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}模仿 table.elementParentParent { display: table

css3 3D转换 transform

作者: 日期:2017-02-12 点击: 222

CSS3 容许您应用 3D 转换来对元素进行格式化那么下面我们一起看一下2D和3D有什么不同: [请用鼠标放到下面两个盒子上,查看效果] /* .dd{ width:200px; height:200px; display:inline-block; border:1px solid yellow; background:red; } div-2d:hover{ transform: rotate(360deg); } div-3d:hover{ transform: rot

css3 2D转换transform

作者: 日期:2017-02-11 点击: 215

css32D转换transform通过 CSS3 转换,我们能够对元素进行移动¶••⊿缩放¶••⊿转动¶••⊿拉长或拉伸••。 转换是使元素转变形状¶••⊿尺寸和地位的一种效果••。浏览器支撑 Internet Explorer 10¶••⊿Firefox 以及 Opera 支撑 transform 属性••。 Chrome 和 Safari 需要前缀 -webkit-••。 注释:Internet Explorer 9 需要前缀 -ms-••。2D转换方法有以下几种:属

网页各种布局的解决方案

作者: 日期:2017-02-05 点击: 379

两列布局(左边定宽,右边自适应)HTML代码如下:<div class="parent"> <div class="left">侧栏</div> <div class="right">主栏</div></div>思路1:采用float实现.对parent父节点设置padding-left: 210px; ,对left侧栏节点设置fl

利用css3绘制三角形

作者: 日期:2017-01-25 点击: 848

方法/步骤新建一个html5网页,名称为index.html,在代码中写上四个div,分辨是向上¶••⊿向下¶••⊿向左,向右四个三角形,代码如下: <div class="triangle-up"> <!--向上的三角--> </div> <div class="triangle-down"> <!--向下的三角--> </div> <div c

HTML5 Web存储(localStorage与sessionStorage)

作者: 日期:2017-01-24 点击: 291

HTML5 Web存储(localStorage与sessionStorage)localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的;sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才干访问并且当会话结束后数据也随之烧毁••。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储••。

CSS好看常用的中文字体

作者: 日期:2017-01-24 点击: 1058

如下: 例1(小米米官网):font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif; 例2(淘宝技巧研发中心):font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif; 例3(加网 ):font: 14px/1.5 'Microsoft Y

常用HTML5体验改良方法

作者: 日期:2017-01-22 点击: 164

常用HTML5体验改良方法1. fake 页 - 首屏加速因为 71% 的用户期望移动页面跟 pc 页面一样快 (3s) ,74% 的用户能容忍的响应时间为 5 秒,所以我们必须保证移动端页面有足够的速度••。方案: 避免页面长时间白页,页面渲染只需要完整的 HTML 以及 CSS 加载结束后页面第一屏便渲染结束,然后再异步加载js 静态资源不应用 cookie

CSS3 字体和CSS3 新增把持字体属性

作者: 日期:2017-01-22 点击: 184

CSS3 字体和CSS3 新增把持字体属性CSS3 字体在网页编辑应用字体时,在CSS3涌现之前设计师只能应用盘算机已安装的字体,而现在CSS3中,当你创造您要应用的字体文件时,只需简略的将字体文件包含在网站中,它会主动下载给需要的用户••。 那么如何应用CSS3字体呢,我们下面一起学习一下••。 第一步:调用需要的字体<style>@font-face{ fon

CSS选择器详解

作者: 日期:2017-01-21 点击: 215

CSS3选择器CSS选择器用于选择你想要把持样式的元素,正确的找HTML元素,是它存在的意义••。CSS1和CSS2的选择器我们经常应用,在这里就不在赘述了,我们直接看看CSS3中给我们供给了哪些更加便捷的选择器••。所有主流浏览器都支撑 CSS3 选择器••。ie8以下浏览器要想应用此选择器,HTML文档声明需要是HTML5的文档声明<!DOCTYPE>••。element1~elem

响应式布局之rem

作者: 日期:2017-01-14 点击: 1254

rem这是个低调的css单位,近一两年开端崭露头角,许多应用者对rem的评价不一,有的在尝试应用,有的在应用过程中遇到坑就弃用了••。但是在进行app开发或者叫做响应式布局的时候,它还是一个强力的候选手段之一••。

响应式布局之媒体查询

作者: 日期:2017-01-13 点击: 549 html,css3

一个结构能够兼容多个终端,而不是为每个终端做一个特定的版本••。这个概念是为解决移动互联网浏览而出身的••。响应式布局可认为不同终端的用户供给更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用”大势所趋”来形容也不为过••。随着越来越多的设计师采用这个技巧,我们不仅看到很多的创新,还看到了一些成形的模式••。

HTML5获取地理地位信息

作者: 日期:2017-01-06 点击: 186

HTML5供给了地理地位定位功效(Geolocation API),能断定用户地位,我们可以借助HTML5的该特征开发基于地理地位信息的利用••。本文联合实例给大家分享如何应用HTML5,借助百度¶••⊿谷歌地图接口来获取用户正确的地理地位信息••。

HTML5新增标签

作者: 日期:2016-11-20 点击: 1290

在之前的HTML页面中,大家基础上都是用了Div+CSS的布局方法••。而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介绍的容器等等••。也就是说全部HTML文档结构定义不清楚,HTML5中为懂得决这个问题,专门添加了:页眉¶••⊿页脚¶••⊿导航¶••⊿文章内容等跟结构相干的结构元素标签

HTML5培训-head头标签详解

作者: 日期:2016-11-15 点击: 422

HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息••。而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差别性••。移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功效,特别是meta,link等标签的功效属性显得非常重要••。这里收拾了一份 部分的清单,让大家懂得每个标签及相应属性的意义,写出满足自己需求的 头部标签,可以很有效的加强页面的可用性••。

html5开发培训系列之Flexbox深入懂得

作者: 日期:2016-07-31 点击: 945 flexbox

Flex 布局深入懂得flexbox的优势随着移动设备的普及,各种响应式用户界面的风行,Web 利用一般都请求适配不同的设备尺寸和浏览器分辨率,这无疑使布局的逻辑变得更加复杂. .........

鸿途彩票手机app 九亿九彩票平台 金沙彩票开户平台 飞速赛车走势图 澳洲幸运10注册网址 澳洲幸运10官方网站 九亿九彩票开奖网 玖玖网彩票开奖网 九亿九彩票平台 SG飞艇开奖平台