postMessagePortal.html 页面代码代码如下:标题 var targetOrigin = "http://22527.vhost20.boxcdn.cn"; var defaultTitle = "Portal";var notificationTimer = null; function messageHandler(e) { if (e.origin == targetOrigin) { notify(e.data); } else { // ignore messages from other origins }} function sendString(s) { document.getElementById("widget").contentWindow.postMessage(s, tar...
本文详细总结了html5各种页面切换效果和模态对话框用法。分享给大家供大家参考。具体分析如下： 页面动画： data-transition 属性可以定义页面切换是的动画效果。例如：Ill popdata-transition 参数表： 参数说明 slide 从右侧向左滑入页面slideup 从底部向上滑入slidedown 从上向下滑入pop 从中心渐显展开fade 渐显flip 翻转 备注：如果想要在目标页面中显示后退按钮，可以在链接中加入 data-direction="reverse"属性，这个属性和...
最近在做手机页面时，遇到数字输入的键盘的问题，之前的做法只是一刀切的使用 type="tel"，不过一直觉得九宫格的电话号码键盘上的英文字母太碍事了。于是想要尝试其它的实现方案，最终的结论却令人沮丧。不过也趁机详细了解了下pattern这个属性。type="tel" 和 type="number" 的区别 这里还是先那么先交代一下最初遇到的问题。其实无论是tel还是number都不是完美的：type="tel"优点是iOS和Android的键盘表现都差不多 缺点是那些...
线条属性概述线条的属性共有以下四个：1、lineCap属性lineCap 定义上下文中线的端点，可以有以下 3 个值。 butt：默认值，端点是垂直于线段边缘的平直边缘。round：端点是在线段边缘处以线宽为直径的半圆。square：端点是在选段边缘处以线宽为长、以一半线宽为宽的矩形。 2、 lineJoin属性lineJoin 定义两条线相交产生的拐角，可将其称为连接。在连接处创建一个填充三角形，可以使用 lineJoin 设置它的基本属性。 miter：默认值，在...
本篇文章主要给大家介绍一下什么是HTML5，总结一下html5新特性。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。首先大家应该都知识HTML是什么吧？HTML是Hyper Text Markup Language的缩写，“超文本标记语言”，它是制作网页的标准语言。由于网页中不仅包含普通文本，还包含超文本，故被称作超文本描述语言。那么HTML5又是什么呢？万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次...
html与html5之间有什么区别呢？相信很多的朋友都有这种疑问，那么，下面的这篇文章Gxl网就来给大家来详细的介绍一下关于html5和html之间区别，让你可以一目了然。一、首先让我们来看一下什么是html？什么是html5？1、什么是html？根据W3C的定义我们可以知道html指的是超文本标记语言，它不是一种编程语言，而是使用标记标签来描述网页的一种语言。这里只是简单的介绍了一下html的定义，要是想要了解更多html的内容大家可以看一看这...
说到H5+C3会不会觉得东西好多啊，今天就整理了一份总结性的内容。CSS3选择器有哪些？ 属性选择器、伪类选择器、伪元素选择器。 CSS3新特性有哪些？ 1.颜色：新增RGBA，HSLA模式 2. 文字阴影（text-shadow、） 3.边框： 圆角（border-radius）边框阴影： box-shadow 4. 盒子模型：box-sizing 5.背景：background-size 设置背景图片的尺寸background-origin 设置背景图片的原点 background-clip 设置背景图片的裁切区域，以”，”分...
本篇文章是关于HTML5中的viewport的一个讲述，对于HTML5中viewport不太熟悉的同学，我们可以一起看看本篇文章！来详细的了解一下html5中的viewport总结下来无非围绕三个问题: 1、为什么要设置虚拟窗口 起初是为了使得虚拟窗口的分辨率和pc端接近，这样虚拟窗口依然能够完整显示 页面内容，只是页面内容比较小，需要通过手动缩放的方式来看清楚页面。 2、添加viewport有什么用 添加viewport是为了方便移动端的优化。设置虚拟窗口宽度...
因为期末考试、调整心态等等的种种原因，距离上一次的项目练习已经过了很久了，今天终于有时间继续练习HTML5+CSS3的页面架构和设计稿还原。设计图很长，整个页面分为了好几个区域，所以就不放完整的设计图了，具体的设计文件可以在文末的Github地址中下载。第一次的总结是以我对页面架构的理解，按照代码实现顺序讲解的，那这一次就按照遇到的问题总结性地记录吧。欢迎大家看完我的作品和总结以后，提出宝贵的建议！谢谢大家！ ...
HTML5中新增了progress标签，用来表示进度条。<progress value="100" max="100" class="hot"> 显示效果如下：其中CSS样式代码如下：progress{width: 168px;height: 5px;}progress::-webkit-progress-bar{background-color:#d7d7d7; }progress::-webkit-progress-value{background-color:orange; }解释下，在Chrome浏览器中progress是以如下结构渲染的progress↓::-webkit-progress-bar 全部进度↓::-webkit-progress-value 已完成...
学习前端有一段时间了，一直在看书上的理论知识，而实战项目却很少。师兄常说，想要知道自己的实力有多少，知识掌握了多少，最好的方法就是去实践了，实践出真知嘛。于是决定在这个假期里，主要是通过项目的实践以及理论知识的辅助来提高代码水平。首先是做几个HTML5+CSS3静态页面布局的练习，查缺补漏知识点并且总结在实践过程中遇到的一些错误。页面的设计稿主要是网络上找来了的，也尝试自己切图、测量位置、获得内容的属性等等...
1、标签:<!DOCTYPE>作用:声明是文档中的第一成分，位于<html>标签之前。2、标签:<html>作用:此元素可告知浏览器其自身是一个HTML文档。属性:manifest:值(url)为脱机使用定义缓存信息。3、标签:<head>作用:标签用于定义文档的头部，它是所有头部元素的容器。属性:profile:值(URL)一个有空格分隔的URL列表，这些URL包含着有关页面的元数据信息。4、标签:<title>作用:元素可定义文档的标题。属性:dir:值(rtl,ltr)规定元素中内容的文本...
1.首先我们要知道什么是块级元素和行级（内联）元素?块级（block）元素的特点： ①总是在新行上开始； ②高度，行高以及外边距和内边距都可控制； ③宽度缺省是它的容器的100%，除非设定一个宽度； ④它可以容纳内联元素和其他块元素。内联（inline）元素的特点：①和其他元素都在一行上；②高，行高及外边距和内边距不可改变；③宽度就是它的文字或图片的宽度，不可改变；④内联元素只能容纳文本或者其他内联元素。2.好的，我们来...
iWeb峰会的消息是在开场前两天才从朋友圈看到，稍微有点匆忙，只花了不到两个小时的时间了解下相关主题。发现涉及的知识还是蛮多的，甚至一些平时也没有接触过。所以一些关注点，理解的层次都很有限，甚至可能有误区，仅供参考及知识面的拓展。 工具应用类 峰会的主题是HTML5，又分为三个大的模块：游戏、工具及营销。我主要关注的工具专场，把这个放前面总结。 web前端的实时化 由野狗联合创始人肖光宇演讲的...
在web系统或应用中，经常需要在本地存储一些数据，最早的在客户端存储数据用的是cookie(当然cookie主要还是用来保存用户的状态，业余可以干点保存本地数据的活)，事实它并不适合用于保存客户端的本地数据，有以下几个原因：1，每次请求服务器的时候都会增加不必要的流量消耗，因为每次请求服务器是都会讲cookie发送至服务器。2，cookie的数据存储数据的规则，并不那么好用，结构也不够清晰。3，最重要的一点是cookie的存储容量极小...