HTML5/CSS3
文章平均质量分 90
沈成才
这个作者很懒,什么都没留下…
展开
-
HTML5 获取用户经纬度及距离计算公式
在做项目时需要做定位获取经纬度并计算距离,这里使用 html5 获取经纬度。<!DOCTYPE html><html><head><meta charset="utf-8" /><title>利用html5获取经纬度</title></head><body><span id="support">将下面的经纬度输入谷歌地图:</span><div id="show">纬度:<span原创 2016-04-22 07:21:18 · 4426 阅读 · 0 评论 -
CSS - 实现图片垂直居中,文字垂直居中
在html页面设计时,经常需要让容器内部的图片或文字上下垂直居中,通过CSS可以很方便的进行设置。1,图片垂直居中 给图片添加 vertical-align:middle; 样式即可<div style="height:100px"> <img style="vertical-align:middle" src="images/star.png" ></div>2,文字垂直居中 要把原创 2016-03-17 15:43:28 · 624 阅读 · 0 评论 -
HTML5新控件 - 滑动条
滑动条range控件同number控件类似,它可以表示整数或者小数值。同时也支持min和max属性,用于设置允许的范围。不同的是,number控件是一个文本框形式,而range控件使用滑动条的形式。和音量调节器很像,通过拖动滑块来选择值。适用于那些对输入数据不要特别精确地方使用。<input type="range" min="0" max="100" value="70"/>(注意:range控件原创 2016-03-17 15:41:45 · 14307 阅读 · 0 评论 -
HTML5新控件 - 数值输入框
如果需要输入常规数值,使用number类型的控件很方便,浏览器会自动忽略非数值字符。就是说只能输入数字进去。1,默认只能输入整数<input type="number"/>2,使用step属性表示可以接受的数值间隔(比如下面就允许输入11.5)<input type="number" step="0.1"/>3,使用min和max属性可以限制数值的范围<input type="number" min原创 2016-03-17 15:33:46 · 2499 阅读 · 0 评论 -
HTML5新控件 - 电话号码输入框
如果需要一个用来填写电话号码的输入框,可以使用tel类型。 这个在移动浏览器中使用很方便,会自动使用只包含数字和符号,没有字母的虚拟键盘。<input type="tel"/>原创 2016-03-17 15:30:54 · 14886 阅读 · 3 评论 -
HTML5新控件 - 搜索框
搜索框即为search类型的输入框,当在其中输入内容时,右侧会出现一个X图标。单击即可清除搜索框。 其它就与文本框无异。<input type="search"/>原创 2016-03-17 15:29:38 · 7177 阅读 · 0 评论 -
HTML5新控件 - url类型输入框(网址)
如果需要一个用来填写url地址的输入框,可以使用url类型。这样浏览器可以帮我们验证格式是否正确,而不需要自己写验证规则。 网址验证规则: 首先要有一个URL前缀(http://,ftp://等)。后面可以是空格和大多数特殊字符(冒号除外) <input type="url"/>原创 2016-03-17 15:26:58 · 2570 阅读 · 0 评论 -
HTML5 - 新增的元素,删除的元素
1,HTML5新增的元素(1)用于构建页面的语义元素:<article>,<aside>,<figcaption>,<figure>,<footer>,<header>,<nav>,<section>,<details>,<sumary>(2)用于标示文本的语义元素:<mark>,<time>,<wbr>(以前就支持,现在正式列入规范)(3)Web表单及交互:<input>(不是新元素,但加了许原创 2016-03-17 15:25:17 · 1308 阅读 · 0 评论 -
HTML5 - 笔试题汇总
1 . HTML5 之前的 HTML 版本是?HTML 4.01HTML 4HTML 4.1HTML 4.92 . HTML5 的正确 doctype 是?<!DOCTYPE html><!DOCTYPE HTML5><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0//EN" "http://www.w3.org/TR/html5/strict.dtd转载 2016-03-17 15:23:18 · 3144 阅读 · 0 评论 -
HTML5新控件 - 日期和时间选择输入
HTML5定义了几个与日期有关的新控件。支持日期控件的浏览器会提供一个方便的下拉式日历,供用户选择。 注意:目前只有Chrome和Opera提供下拉式日历支持,其它浏览器仍是一个普通文本框。1,日期控件 - date<input type="date" value="2015-09-24"/>2,时间控件 - time<input type="time" value="13:59"/><inpu原创 2016-03-17 15:51:30 · 239264 阅读 · 11 评论 -
HTML5新控件 - 颜色选择器
color控件可以让用户方便地通过色盘来选择颜色。但目前只有Chrome支持。<input type="color" value="#2D9900"/>原创 2016-03-17 15:53:22 · 15120 阅读 · 0 评论 -
HTML5新控件 - 输入框输入提示<datalist>
新的<datalist>元素让你可以在普通文本框中添加一个下拉提示列表。你可以选择输入,也可以自由输入(输入的同时,下方会自动显示出匹配的建议项)。支持的浏览器:Chrome,Firefox,Opera,新版IE(从IE10开始) 不支持的浏览器:Safari,旧版本IE(包括IE9)使用方式:<datalist>需要和<input>配合使用。<datalist>是完全不可见的,将其放在页面任意位原创 2016-03-17 16:00:19 · 1505 阅读 · 0 评论 -
跨终端Web之Hybrid App开发对比
Native App(以下简称Native)和Mobile Web(以下简称Web)二者混合开发的产物被称为Hybrid App(以下简称Hybrid)。Hybrid并不是什么新概念,最早可以追溯到Symbian时代,直到iOS和Android出现之后才充分展现出价值。一、Hybrid简史 Hybrid既利用了Native App丰富的设备API(Device API),又能拥有Mobile We原创 2016-05-13 18:05:27 · 6582 阅读 · 0 评论 -
默认播放器的"done"修改成“完成”
iPhone上的默认播放器左上角显示的是“done”,怎么修改成“完成”呢? 在虚拟机。iPhone得设置APP里面把语言改成简体中文后,Done自动变成“完成”。。。 info.plist Localization native development region China原创 2016-05-10 14:08:33 · 411 阅读 · 0 评论 -
上传App到Store(三)提交新应用
1 提交新应用前的准备工作 iTunesConnect管理平台大概有半小时的失效,填写到一半超时的话就得重新提交。主要准备工作如下: 1. 1张1024x1024大小的PNG软件图标,通常是自己应用icon的放大版。 2. 至少两张640x960、640x1136两个尺寸的iPhone版本PNG截图(用iPhone4及以上手机或iPod Touch4,同时按上方电源键和底部HOME键可原创 2016-03-17 17:27:00 · 546 阅读 · 0 评论 -
HTML5 - 使用<video>播放视频
1,下面是一个播放视频的最简单样例 (controls属性告诉浏览器要有基本播放控件)<video src="hangge.mp4" controls></video>2,通过width和height设置视频窗口大小<video src="hangge.mp4" controls width="400" height="300"></video>3,预加载媒体文件 设置preload不同的属性值原创 2016-03-17 16:24:00 · 30566 阅读 · 1 评论 -
HTML5 - 使用<audio>播放音频
1,下面是一个播放音乐的最简单样例 (controls属性告诉浏览器要有基本播放控件)<audio src="hangge.mp3" controls></audio>2,预加载媒体文件 设置preload不同的属性值,可以告诉浏览器应该怎样加载一个媒体文件: (1)值为auto:让浏览器自动下载整个文件 (2)值为none:让浏览器不必预先下载文件 (3)值为metadata:让浏览器先原创 2016-03-17 16:16:19 · 2643 阅读 · 0 评论 -
HTML5 - 使某个页面元素或整个页面可编辑
1,把任何元素的contenteditable属性设置成true,点击即可以编辑该元素的内容 <div id="editableDiv" style="width:240px;height:100px;background-color:#FEFFCE" contenteditable="true"> 你可以编辑这段文本</div>2,也可以使用js来动态的开启和关闭编辑功能<sc原创 2016-03-17 16:12:44 · 8519 阅读 · 1 评论 -
HTML5新控件 - 计量条<meter>
计量条<meter>外观和进度条<progress>有点类似,但作用不同。它表示的是某种计量,因此也被称作计量器。<meter>元素的值通常会对应现实中的某个值(比如天数,数量,金钱等)1,计量器需要设置最大和最小值(通过max和min属性)<meter value="50" min="10" max="70" />2,使用low和high属性表示“过低”或“过高”值 可以看到当值过高或过低的时原创 2016-03-17 16:07:49 · 843 阅读 · 0 评论 -
HTML5新控件 - 进度条<progress>
<progress>表示任务的进度,背景为灰色,完成的部分填充为脉动式绿色条(但不同的浏览器下,样式还是不同的)。1,可以通过value属性来设置百分比(0~1的小数) 通常我们还可以在元素内部再放置进度值,这样当浏览器不支持的时候就可以显示出文字作为后备方案。<progress value="0.25">25%</progress>2,可以利用max属性设置最大值,这时value的范围便是0~最原创 2016-03-17 16:04:13 · 2822 阅读 · 1 评论 -
HTML5新控件 - email类型输入框(电子邮件地址)
如果需要一个用来填写电子邮件地址的输入框,可以使用email类型。这样浏览器可以帮我们验证格式是否正确,而不需要自己写验证规则。1,只允许输入单个邮件地址<input type="email"/>2,允许输入多个邮件地址(用逗号分隔)<input type="email" multiple/>(注:如果不允许未空的话,记得加上required属性)原文出自:www.hangge.com 转载请保留转载 2016-03-17 15:04:47 · 10701 阅读 · 0 评论 -
HTML5 - 使用HTML5Forms让旧浏览器支持表单新特性,表单验证
对于不支持HTML5表单验证的浏览器,虽然我们可以先用Modernizr判断后使用自定义的验证代码。但如果表单很多,或者需要验证地方很多,那这样就略嫌麻烦。 我们还可以使用HTML5Forms.js库,它可以自动使老旧的浏览器兼容HTML5表单新特性。地址是:https://github.com/zoltan-dulac/html5Forms.js1,加载所有的webforms功能(以表单验证为例转载 2016-03-17 15:01:19 · 1135 阅读 · 0 评论 -
文章标题
1,附注介绍和使用场景 新的元素<aside>表示它与周围的文本没有密切关系的内容。 (1)可以通过附注介绍另一个相关的话题。 (2)或对主文档中提出的某个观点进行解释。 (3)也可用来盛放广告、相关内容链接、醒目引文(pull quote)等。 当然,如果使用<div>元素也可以实现同样的功能,但使用<aside>可以让标记更富有意义。2,使用样例(实现一个醒目引文)<!DOCTYPE转载 2016-03-17 13:50:06 · 257 阅读 · 0 评论 -
HTML5 - 使用Geolocation(地理定位)获取用户的位置
通过HTML5 Geolocation API 可以获得用户的地理位置。下面通过一个样例演示如何获取用户经度,纬度gps信息。 (注意:鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。)效果图如下: 代码如下:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>GPS</title></h转载 2016-03-17 13:47:28 · 3141 阅读 · 0 评论 -
HTML5 - 用<figure/>添加插图和图题
1,什么是插图(figure) 插图与图片概念不太一样,HTML5规范建议我们把插图想象成一本书的附图。即插图虽然独立于文本,但文本中会提到它。2,插图使用 (1)使用<figure>标签添加插图,并设置浮动,相关的文本可以在其附近围绕。 (2)<figure>标签内部还可以添加<figcaption>图题,其包含了对图片的完整说明。(添加图题后,alt文本就显得多余,可以去除)。3,使用样例转载 2016-03-17 13:45:24 · 4819 阅读 · 0 评论 -
HTML5 - 简单的上下布局页面样例
1,下面是一个简单的上下布局样例: 2,代码如下 可以看到页面里使用了HTML5的语义元素:< header >、< footer >、< article >— index.html —<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>上中下结构</title> <link rel转载 2016-03-17 13:13:54 · 10644 阅读 · 0 评论 -
HTML5 - 用CSS3动画制作场景切换效果(移动,旋转,淡入淡出等)
两个场景(即两个div视图)切换的时候,如果想添加个过渡动画,除了可以使用js来实现,还可以通过CSS3的animation属性来实现。 (注意:Internet Explorer 9 以及更早的版本不支持 animation 属性。)下面做了个过渡动画汇总,包含常见的动画效果,效果图如下: 点击此处查看运行效果。 代码如下:<!DOCTYPE html><html><head> <m转载 2016-03-17 13:08:57 · 44764 阅读 · 2 评论 -
HTML5 - 使用polyfill(腻子脚本)填补旧浏览器对html5的支持缺陷
由于浏览器种类繁多,版本各异。所以对html5的支持情况各不相同。通常我们使用polyfill来填平旧浏览器对HTML5支持上的缺陷,即通过其他方式间接的实现html5相应的功能。在GitHub上提供了完整的各种polyfill集合:https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills(注意:这些腻子脚本在转载 2016-03-17 13:06:06 · 1956 阅读 · 0 评论 -
HTML5 - 判断浏览器是否支持html5某个功能(使用modernizr.js)
1,modernizr.js介绍 http://modernizr.com/download/提供了个js小工具,将这个js引入到网页就可以测试浏览器对HTML5,CSS3相关功能的支持情况。 (1)如果开发测试的话,下载 Development version 。这个包含所有的检测,比较大。 (2)如果发布版本,则选择需要检测的功能,创建定制的modernizr使用。2,使用样例 下面代码转载 2016-03-17 13:04:35 · 871 阅读 · 0 评论 -
HTML5 - 各大浏览器对html5的支持情况
1,主流浏览器对html5的支持情况 (1)Chrome,Firefox:支持html5很多年,而且有自动升级,支持最好。 (2)Safari,Opera:同样支持html5很多年,支持也很好。 (3)IE:IE10起比较好了,之前很差。2,查看具体的支持情况 在http://caniuse.com上,我们可以查询HTML5里具体功能在各个浏览器下的支持情况。3,查看各浏览器装机情况统计转载 2016-03-17 13:02:05 · 1332 阅读 · 0 评论 -
HTML5 - 在线检测网页在各种浏览器下的效果
由于标准不同,各个浏览器在对页面的渲染上就存在差异,甚至同一浏览器在不同版本中,对页面的渲染也不同。所以设计师常常需要在各个浏览器下分别调试。而且自HTML5,CSS3以来,这种情况越来越普遍,特别是市面上还有不少使用老版本的IE。通常我们可以使用IETester来模拟网页在不同版本IE下的相容性。但由于需要安装,所以有些麻烦。下面介绍两个可以在线模拟浏览器的网站。1,http://netrende转载 2016-03-17 13:54:13 · 5228 阅读 · 0 评论 -
HTML5 - 让老浏览器支持新语义元素的几种方法
基本上所有现代浏览器都已经很好的支持HTML5新增的语义元素,但市面上还有许多机器认使用IE9之前的版本(比如IE8)。所以为了兼容这些浏览器,当我们使用新语义元素时,也要确保它们在这些古老的浏览器上能正常显示。 下面总结了三种让旧浏览器支持新语义的办法。方法1:为语义元素添加样式 浏览器在遇到不认识的元素时,会把它们当成内联(inline)元素。而大多数HTML5语义元素都是块级元素,需要单独转载 2016-03-17 13:58:05 · 617 阅读 · 0 评论 -
HTML5 - 经典的上中下三段式布局(并使用<nav>实现侧边导航链接)
这个是一个典型的三段式部局,上下两块分别是网页头部与尾部。中间区域又分为左边的侧边栏区域和右边的内容主体区域。1,效果图如下: 2,页面元素说明: (1)在最外层我们添加了一个wrapper,把所有的页面元素都包在里面。好处是便于调整整个页面的最大最小宽度,以及是否让页面居中等。 (2)中间区域,侧边栏是固定宽度,右侧内容区域是自适应宽度。 (3)过去我们会把整个侧边栏都放在一个<div>中转载 2016-03-17 14:04:49 · 16570 阅读 · 0 评论 -
HTML5 - 用Modernizr检测浏览器对表单和表单验证的支持情况
不同浏览器对HTML5表单的支持不一样。比如:IE9就不支持HTML5表单验证。这样就需要我们对不支持的浏览器提供备用方案。利用Modernizr可以检测浏览器对各种HTML5表单验证功能的支持情况。比如:Modernizr.input.required属性可以检测出浏览器是否支持required属性。其它属性还有:pattern,placeholder,autofocus,max,min和step转载 2016-03-17 14:55:17 · 483 阅读 · 0 评论 -
HTML5 - 表单客户端验证
过去对于客户端的表单验证,通常是使用JavaScript验证脚本,要么自己写,要么使用第三方库。而在HTML5中,提供了一套客户端验证方法,只需要在<input>字段里嵌入常用的错误检查规则即可。1,required属性 - 表示字段不能为空 (注意:只有用户单击“提交”按钮提交表单的时候,浏览器才会执行验证。目前HTML5不支持指定验证的时间,而且验证消息的样式和内容各个浏览器不大一样,不能修改转载 2016-03-17 14:39:48 · 3940 阅读 · 0 评论 -
HTML5 - 使用autofocus让控件自动获取焦点
给文本控件添加autofocus属性,在页面加载后会自动获取焦点,便于输入。 注意:只能给一个<input>或<textarea>元素添加这个属性<input type="text" autofocus/>原文出自:www.hangge.com 转载请保留原文链接:http://www.hangge.com/blog/cache/detail_858.html转载 2016-03-17 14:38:06 · 7136 阅读 · 1 评论 -
HTML5 - 使用占位符文本placeholder添加文本框提示
1,使用placeholder可以给文本框,搜索框添加提示性文本 (当文本框中没有内容,就会显示灰色的占位符文本。当用户输入内容时,占位符文本会消失。) <input type="text" name="url" placeholder="输入地址" />2,使用focus伪类,可以让文本框获取焦点时改变样式,使其更加显眼。 input:focus { background: #FFF转载 2016-03-17 14:36:31 · 2782 阅读 · 0 评论 -
HTML5 - 使用<mark>标注高亮突显文本
当需要引用其他人的内容,或者想要重点标注一段文本时可以使用元素。这样浏览器会给中的文本添加黄色背景。效果图如下:欢迎访问:<mark>hangge.com</mark>原文出自:www.hangge.com 转载请保留原文链接:http://www.hangge.com/blog/cache/detail_856.html转载 2016-03-17 14:33:44 · 2758 阅读 · 0 评论 -
HTML5 - 使用<output>标注JavaScript返回值
有时页面上的一些数据信息是通过js计算后填入的。在过去,开发人员常常会将<span>元素作为占位符,并指定一个ID属性,这样JavaScript代码就可以在计算时找到它并填入数据。 HTML5中,建议使用<output>作为占位符使语义更加清晰,用法实际和以前的<span>是一样的。<!DOCTYPE html><html><head> <meta charset="utf-8"> <转载 2016-03-17 14:23:47 · 1435 阅读 · 0 评论 -
HTML5 - 使用<time>标注日期和时间
网页中经常会出现日期和时间信息。比如:文章的发表时间。但过去一直没有标准的方式来标注日期。<time>标签便是为了解决这个问题,其目的是让搜索引擎等其它程序可以更容易的提取这些信息。1,<time>元素可以标注日期,时间或日期与时间的组合(日期格式是YYYY-MM-DD)演唱会日期是<time>2015-11-12</time>2,也可以使用任何格式来显示日期,只要在datetime属性中提供计算机转载 2016-03-17 14:17:53 · 13067 阅读 · 1 评论