手机WEB页面(HTML5)实现一键拨号及短信发送功能

在做一个微信的微网站中的一个便民服务电话功能的应用,用到移动web页面中列出的电话号码,点击需要实现调用通讯录,网页一键拨号的拨打电话功能

如果需要在移动浏览器中实现拨打电话,发送email,美国服务器,调用sns等功能,移动手机WEB页面(HTML5)Javascript提供的接口是一个好办法。

采用url链接的方式,实现在Safari ios,香港服务器,Android 浏览器,webos 浏览器,塞班浏览器,IE,Operamini等主流浏览器,进行拨打电话功能。

1.最常用WEB页面JS实现一键拨号的电话拨打功能:

<a href=”tel:10086″>拨打10086</a>

在拨号界面,显示号码,并提示拨打。

支持大部分的浏览器,但是在QQ浏览器上支持不好。

微信现在出现屏蔽常规拨号功能,如果出现,可以在需要拨号页面要做下处理,在网址后面增加一个锚节点mp.weixin.qq.com。

2.最常用WEB页面JS实现一键发送短信功能:

<a href=”sms:10086″>发送短信到10086</a>

在信息录入界面,显示发送号码,并提示录入信息。

支持大部分的浏览器,但是在QQ浏览器上支持不好。

 

3、移动web页面自动探测电话号码

<meta name=”format-detection” content=”telephone=no”>

<meta http-equiv=”x-rim-auto-match” content=”none”>

 

4.使用wtai协议进行拨打电话。

代码如下所示:

实例:

<a href=”wtai://wp//mc;10086″>拨打10086 </a>
<a href=”wtai://wp/ap;10086;”>将10086存储至电话簿 </a>

 

备注:在做响应式网站时,手机端也可实现拔号功能,经测试第一种方式兼容性最好。

思维导图:HTML5和CSS3新特性

HTML5和CSS3一直作为被讨论的热门话题,虽然自己平时经常接触这些新的规范和标准,但是这些新规范具体是什么,有哪些,一时半会却说不上来。最近,在看一些前端大牛们写的文章,摘抄出来一些分享给大家,共勉。


这里写图片描述

作者: 寒泉(winter),是阿里的一位前端大神。他对知识学习的目标理解是,一曰全面,二曰准确


用我自己的看法来讲,全面意味着要架构出一个整体的知识体系,该体系必须涵盖常用的核心功能。(可以采用建立思维导图的方式进行绘制,推荐Mindmanager破解版)

这里写图片描述


结语

整体架构已经建立完成之后,那么我们就可以进行细究具体的知识点(例如某些控件的用法,特性,以及缺陷等)。最终,我们可以信誓旦旦的说,我对这一整块知识有了基本了解,这样只要一想这些知识点大概属于哪一模块,便可以快速地在脑海中进行索引。我们在面试或平时工作中,都将会大大受益!

jquery常用方法总结

以下是jquery中比较常用的一些操作实现方式:
$(“标签名”) //取html元素 document.getElementsByTagName(“”)

$(“#ID”) //取单个控件document.getElementById(“”)
$(“div #ID”) //取某个控件中 控件

$(“#ID #ID”) // 通过控件ID取其中的控件
$(“标签.class样式名”) //通过class来取控件

$(“#ID”).val(); //取value值
$(“#ID”).val(“”); //赋值

$(“#ID”).hide(); //隐藏
$(“#ID”).show(); //显示

$(“#ID”).text(); //相当于取innerHTML
$(“#ID”).text(“”); //相当于innerHTML=””

$(“#ID”).css(“属性”,”值”) //添加CSS样式
$(“form#表单id”).find(“#所找控件id”).end() //遍历表单

$(“#ID”).load(“*.html”) //载入一个文件
例如:

$(“form#frmMain”).find(“#ne”).css(“border”, “1px solid #0f0”).end() // end()返回表单
.find(“#chenes”).css(“border-top”,”3px dotted #00f”).end()

$.ajax({ url: “Result.aspx”, //数据请求页面的url
type:”get”, //数据传递方式(get或post)

dataType:”html”, //期待数据返回的数据格式(例如 “xml”, “html”, “script”,或 “json”)
data: “chen=h”, //传递数据的参数字符串,只适合get方式

timeout:3000, //设置时间延迟请求的时间
success:function(msg)//当请求成功时触发函数

{
$(“#stats”).text(msg);

},
error:function(msg) //当请求失败时触发的函数

{
$(“#stats”).text(msg);

}
});

$(document).ready(function(){
$(“#description”).mouseover(function(){

//ajax方法
$.get( “Result.aspx”, //数据请求页面的url

{ chen: “测试”,age:”25″}, //传递数据的参数字符串
function(data){ alert(“Data Loaded: ” + data); } //触发后的函数

);
});

});
//取得下拉选单的选取值

$(#testSelect option:selected’).text(); //取文本值
或$(“#testSelect”).find(‘option:selected’).text();

或$(“#testSelect”).val();

HTML5_nav标签使用教程

首先nav也是在html5中新增的元素标签。同时和其它新增标签一样,nav在传统html5以前版本Html布局中作为导航条相关常用命名来使用。

比如:    <div class=”nav”>网站导航内容</div>
或    <div id=”nav”>网站导航内容</div>

在html5中特地将以前常用命名nav作为一个新标签元素。此标签常用于导航处布局。
一、html nav标签语法与结构   –   TOP

1、基本语法

<nav>内容</nav>

2、nav加id

<nav id=”abc”>内容</nav>

3、nav加class

<nav class=”abc”>内容</nav>

4、nav标签快速理解掌握
Nav是与导航相关的,所以一般用于网站导航布局。同时完全就像使用div标签、span标签一样来使用<nav>标签可添加id或class,而与div标签又有不同处是,此标签一般只用于导航相关地方使用,所以在一个html网页布局中可能就使用在导航条处,或与导航条相关的地方布局使用。

5、nav配合什么标签使用
DIVCSS5在以前文章教程中介绍过一般导航条使用ul li标签布局,使用一般布局中nav标签与ul li标签配合使用。

小案例如下:

1)、传统html布局

<div id="nav">
<ul>
<li>首页</li>
<li>栏目名称</li>
<li>联系我们</li>
</ul>
</div>

 

 

2)、nav标签后

<nav>
<ul>
<li>首页</li>
<li>栏目名称</li>
<li>联系我们</li>
</ul>
</nav>

aside元素在网站制作中主要有以下两种使用方法

a)被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、名次解释,等等。

b)在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏,其中的内容可以使友情链接,博客中的其它文章列表、广告单元等。

由以上HTML布局到HTML5转换其实很容易理解html nav标签使用,以及配合ul li布局导航条技巧。

 

二、兼容性提示
因为<nav></nav>标签是html 5新增的标签,而在IE8及以下IE浏览器(IE8、IE7、IE6)不支持,所以根据需求选择布局HTML。

 

三、html nav css布局案例
通过传统div布局与nav布局进行对比学习,从而从html css布局中掌握nav语法与用法。

以下DIVCSS5通过三个布局实践让大家掌握nav布局,分别:
1)、传统div+ul+li布局导航样式;
2)、nav+ul+li布局导航样式;
3)再在nav+ul+li布局的基础上对nav设置class css样式
通过以上案例让大家明白nav一般配合ul li或直接用于布局导航相关的布局,同时nav就像div那样使用可以直接设置css也可以加class或id 。

 

四、divcss总结

Nav是新增的html标签,只要html中使用nav标签,这样的html布局就变成使用html5布局的网页,但html5新增标签局限性,低版本IE浏览器不支持(如果低版本浏览器浏览新增html5标签,对应布局将失效,设置CSS样式也是无效的),所以谨慎选择使用。一般传统网页通常不会使用html5新增布局,所以注意选择使用。智能手机浏览网页、平板电脑浏览的网页可以适当使用html5新增标签或新增CSS3样式布局。

HTML5中aside标签的两种使用方法

aside元素在网站制作中主要有以下两种使用方法

1)被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、名词解释,等等。

<article>
  <h1>…</h1>
  <p>…</p>
  <aside>…</aside>
</article>

2)在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏,其中的内容可以使友情链接,博客中的其它文章列表、广告单元等。

<aside>
  <h2>…</h2>
  <ul>
    <li>…</li>
    <li>…</li>
  </ul>
  <h2>…</h2>
  <ul>
    <li>…</li>
    <li>…</li>
  </ul>
</aside>

HTML5之article元素与section元素之间的区别?

在HTML5中,为了使文档的结构更加清晰明确,追加了几个与页眉、页脚、内容区块等文档结构相关联的结构元素。内容区块是指将HTML页面按逻辑分割后 的单位。例如对于书籍来说,章、节可以称为内容区块;对于博客网站来说,导航菜单、文章正文、文章的评论等每一个部分都可称为内容区块。
在HTML5中新增的主体结构元素中有两个元素分别article元素与section元素,这两个元素是什么意思?通常用于哪些内容区块?何时用article元素?何时用section元素?两者之间的区别是什么?
一、article元素
article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论 或独立的插件,或其他任何独立的内容。除了内容部分,一个article元素通常有它自己的标题(一般放在一个header元素里面),有时还有自己的脚 注。
现在,让我们以博客为例来看一段关于article元素的代码示例,代码如下:
<article>
<header>
<h1>article元素使用方法</h1>
<p>发表日期:<time pubdate=”pubdate”>2010/10/10</time></p>
</header>
<p>article元素是什么?怎样使用article元素?……</p>
<footer>
<p><small>Copyright @ yiiyaa.net All Rights Reserverd</samll></p>
</footer>
</article>
这个示例是一篇讲述article元素使用方法,在header元素中嵌入了文章的标题部分,在标题下部的p元素中,嵌入了一大段该博客文章的正文,在结 尾处的footer元素中,嵌入了文章的著作权,作为脚注。整个示例的内容相对比较独立、完整,因此,对这部分内容使用了article元素。
article元素是可以嵌套使用的,内层的内容在原则上需要与外层的内容相关联。例如,一篇博客文章中,针对该文章的评论就可以使用嵌套article元素的方式;用来呈现评论的article元素被包含在表示整体内容的article元素里面。
接着,让我们来看一个关于article元素嵌套的代码示例,代码如下:
<article>
<header>
<h1>article元素使用方法</h1>
<p>发表日期:<time pubdate=”pubdate”>2010/10/10</time></p>
</header>
<p>article元素是什么?怎样使用article元素?……</p>
<section>
<h2>评论</h2>
<article>
<header>
<h3>发表者:shenmiweiyi</h3>
<p><time pubdate datetime=”2011-12-23T:21-26:00″>1小时前</time></p>
</header>
<p>这篇文章很不错啊,顶一下!</p>
</article>
<article>
<header>
<h3>发表者:神秘唯一</h3>
<p><time pubdate datetime=”2011-12-23T:21-26:00″>1小时前</time></p>
</header>
<p>这篇文章很不错啊,对article解释的很详细</p>
</article>
</section>
</article>
这个示例中的内容比上述代码更加完整了,它添加了文章读者的评论内容,示例内容分为几个部分,文章标题放在了header元素中,文章正文放在了 header元素后面的p元素中,然后section元素把正文与评论进行了区分(是一个分块元素,用来把页面中的内容进行区分),在section元素 中嵌入了评论的内容,评论中每一个人的评论相对来说又是比较独立的、完整的,因此对它们都使用一个article元素,在评论的article元素中,又 可以分为标题与评论内容部分,分别放在header元素与p元素中。
另外,article元素也可以用来表示插件,它的作用是使插件看起来好像内嵌在页面中一样。代码如下:
<article>
<h1>一个插件</h1>
<object>
<param name=”allowFullScreen” vlaue=”true”>
<embed src=”#” width=”600″ height=”395″></embed>
</object>
</article>
二、section元素
section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容 器元素;当一个内容需要被直接定义样式或通过脚本定义行为时,推荐使用div而非section元素。section元素中的内容可以单独存储到数据库中 或输出到word文档中。
<section>
<h1>section元素使用方法</h1>
<p>什么时候用section元素?怎样合理使用section元素?</p>
</section>
通常不推荐为那些没有标题的内容使用section元素,可以使用HTML5轮廓工具来检查页面中是否有标题 的section,如果使用该工具进行检查后,发现某个section的说明中有”untitiled section”(没有标题的section)文章,这个section就有可能使用不当。
section元素的作用是对页面上的内容进行分块,或者说对文章进行分段,请不要与有着自己的完整的、独立的内容”的article元素混淆。
下面,我们来看article元素与section元素结合使用的示例,希望能够帮助你更好地理解article元素与section元素的区别。
<article>
<h1>article元素与section元素的使用方法</h1>
<p>何时使用article元素?何时使用section元素…..</p>
<section>
<h2>article元素使用方法</h2>
<p>article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。</p>
</section>
<section>
<h2>section元素使用方法</h2>
<p> section元素用于对网站或应用程序中页面上的内容进行分块。</p>
</section>
</article>
上述代码中的内容首先是一段独立的、完整的内容,因此使用article元素。该文章分为3段,每一段都有一个独立的标题,因此使用了两个section 元素。请记住,对文章分段的工作也是使用section元素完成的。可能有人会问,为什么没有对第一段使用section元素,这里其实是可以使用 section元素的,但是由于其结构比较清晰,分析器可以识别第一段内容在一个section元素里,所有也可以将第一个section元素省略,但是 第一个section元素里还要包含于section元素或子article元素,那么就必须写明第一个section元素。
在HTML5中,你可以将所有页面的从属部分,譬如导航条、菜单、版权说明等包含一个统一的页面中,以便统一使用CSS样式来进行装饰。最后,关于section元素的使用禁忌总结如下:
1)不要将section元素用作设置样式的页面容器,那是div元素的工作。
2)如果article元素、aside元素或nav元素更符合使用条件,不要使用section元素。
3)不要为没有标题的内容区块使用section元素。
三、两者的区别:
以上讲述了那么多,两者的区别到底是什么呢?事实上,在HTML5中,article元素可以看成是一种特殊类型的section元素,它比 section元素更强调独立性。即section元素强调分段或分块,而article强调独立性。具体来说,如果一块内容相对来说比较独立的、完整的 时候,应该使用article元素,但是如果你想将一块内容分成几段的时候,应该使用section元素。另外,在HTML5中,div元素变成了一种容 器,当使用CSS样式的时候,可以对这个容器进行一个总体的CSS样式的套用。

如何让IE加载特殊的CSS样式

如果你读了这篇文章,你会觉得IE浏览器很是让人头疼。但是如果你是一名优秀的前端开发人员的话,你必须得解决这个问题,我认为你可以用很多方法去 解决这个问题,当然,hack除外,如果使用了hack,那么你做的网站将变得非常的危险!因为你使用了这些hack,你将不能保证这些暂时显示正常的页 面在以后的浏览器中也是正常的,其中有一种很好的方法可以解决这个问题,那就是使用IE的条件注释语句,IE条件注释语句支持所有的IE版本。

一、为什么使用这种方法呢?

  • 首先,这需要一个合理的解决方法
  • 请不要使用Hack(因为它很危险!),让你的代码更加的标准化
  • 你应该写出精简高效果的代码
  • 这种方法是被认可的(至少微软认可)

需要记住的是:这种选择标签不只在CSS中用到,你也可以用它来有选择的控制JS的加载,甚至可以用它来控制网页中的内容显示。

二、开始编写代码

以下这些代码应该出现在head标签内,链接CSS文件还是常规方法。打开和关闭的标签应该遵循就近原则,这些都是HTML标签的基本知识,在方扩 号之间的“IF”和“IE”等字样应该非常的明显,里面的“!”是“不是”的意思,那么“!IE”就是“不是IE”的意思,gt是greater than的缩写,就是高于的意思,gte是greater than or equal的缩写,就是高于或等于的意思,lt是less than的缩写,就是低于的意思,lte是less than or equal的缩写,就是低于或等于的意思。

代码示例:

所有的IE都起作用:

<!--[if IE]>
      <link rel="stylesheet" type="text/css" href="all-ie-only.css/>
<![endif]-->

IE以外的浏览器起作用:

<!--[if !IE]><!-->
        <link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->

只有IE7起作用:

<!--[if IE 7]>
      <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

只有IE6起作用:

<!--[if IE 6]>
      <link rel="stylesheet" type="text/css" href="ie6.css"/>
<![endif]-->

只有IE5起作用:

<!--[if IE 5]>
      <link rel="stylesheet" type="text/css" href="ie5.css"/>
<![endif]-->

只有IE5.5起作用:

<!--[if IE 5.5000]>
      <link rel="stylesheet" type="text/css" href="ie55.css"/>
<![endif]-->

只对IE6及以下的版本起作用:

<!--[if lt IE 7]>
      <link rel="stylesheet" type="text/css" href="ie6-and-down.css"/>
<![endif]-->
<!--[if lte IE 6]>
      <link rel="stylesheet" type="text/css" href="ie6-and-down.css"/>
<![endif]-->

只对IE7及以下的版本起作用:

<!--[if lt IE 8]>
      <link rel="stylesheet" type="text/css" href="ie7-and-down.css"/>
<![endif]-->
<!--[if lte IE 7]>
      <link rel="stylesheet" type="text/css" href="ie7-and-down.css"/>
<![endif]-->

只对IE8及以下的版本起作用:

<!--[if lt IE 9]>
      <link rel="stylesheet" type="text/css" href="ie8-and-down.css"/>
<![endif]-->
<!--[if lte IE 8]>
      <link rel="stylesheet" type="text/css" href="ie8-and-down.css"/>
<![endif]-->

只对IE6及以上的版本起作用:

<!--[if gt IE 5.5]>
      <link rel="stylesheet" type="text/css" href="ie6-and-up.css"/>
<![endif]-->
<!--[if gte IE 6]>
      <link rel="stylesheet" type="text/css" href="ie6-and-up.css"/>
<![endif]-->

只对IE7及以上的版本起作用:

<!--[if gt IE 6]>
      <link rel="stylesheet" type="text/css" href="ie7-and-up.css"/>
<![endif]-->
<!--[if gte IE 7]>
      <link rel="stylesheet" type="text/css" href="ie7-and-up.css"/>
<![endif]-->

只对IE8及以上的版本起作用:

<!--[if gt IE 7]>
      <link rel="stylesheet" type="text/css" href="ie8-and-up.css"/>
<![endif]-->
<!--[if gte IE 8]>
      <link rel="stylesheet" type="text/css" href="ie8-and-up.css"/>
<![endif]-->

三、通常对IE6做这样的处理:
(本站就是这样处理的)
对于IE6及以下版本的处理是很具有挑 战性的.近来,人们都在呼吁对IE6不要太在意,包括一些企业,一些网络应用,甚至是政府。现在有一个比让这些在 IE6下让人惨不忍睹的网站下地域更好的解决方案,那就是单独写一个针对IE6的精简的CSS样式表,这样至少不会影响人们浏览网页的主要内容。然后再写 一个IE6以上版本及其它的浏览器用的正常的CSS,这样不是很好?

<!--[if !IE 6]><!-->
  <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<!--<![endif]-->
 
<!--[if gte IE 7]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<![endif]-->
 
<!--[if lte IE 6]>
  <link 
rel="stylesheet" type="text/css" media="screen, projection" 
href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" />
<![endif]-->

四、如果你非要用HACK来解决的话……请往下看
只对IE7起作用:

* html #div {
    height: 300px;
}

对非IE7起作用:

#div {
    _height: 300px;
}

只对IE6以上的版本起作用:

#div {
   height: 300px;
}
html->body #div {
      height: 300px;
}

十六进制色值什么时候能缩写为3位

制作网页时,我们经常会把色标值简写为:#FFF,或#CCC等,但有时会写成#FFFFFF,#CCCCCC,这两种书写形式有什么不同呢,或者说它们之间有什么联系呢?下面就简要的说说。

我们知道:#FFF,#CCC,#FFFFFF,#CCCCCC,这种格式是十六进制的色值写法,当书写的为3位时,那3位字母分别对应代表的是三原色R(red)、G(green)、B(blue)的取值数;若书写为6位时,那第1、2位代表的是R取值,第3、4位代表的是G的取值,第5、6位代表的是B的取值。

明白了这两种书写格式分别代表的函义,那就比较好理解它们之前的区别和联系了。

其实,#FFF是#FFFFFF的缩写,#CCC是#CCCCCC的缩写,但并不是所有的色标值都可以缩写的,必须符合一定格式的色标值才能缩写。比如:
#000000 –> #000;
#AABBCC –> #ABC;
#999999 –> #999;
#112233 –> #123

从上面的例子可总结出,6位可以缩写为3位的,都是以每2位为缩写单位,且数值必须相同的,即R、G、B对应的两位取值数完全一致时才可以缩写为3位。

url与uri 区别

url是全球资源定位符的英文所写,您平时上网时在IE浏览器中输入的那个地址就是url。
比如:网易 http://www.163.com就是一个url。 uri是Web上可用的每种资源 - html文档、图像、视频片段、程序,
由一个通过通用资源标志符( universal Resource Identifier, 简称” uri”)进行定位。

url的格式由下列三部分组成:

第一部分是协议(或称为服务方式);

第二部分是存有该资源的主机IP地址(有时也包括端口号);

第三部分是主机资源的具体地址。

  uri一般由三部分组成:

 访问资源的命名机制。

 存放资源的主机名。

 资源自身的名称,由路径表示。

==========================================================

URIs, URLs, and URNs

首 先,URI,是uniform resource identifier,统一资源标识符,用来唯一的标识一个资源。而URL是uniform resource locator,统一资源定位器,它是一种具体的URI,即URL可以用来标识一个资源,而且还指明了如何locate这个资源。而 URN,uniform resource name,统一资源命名,是通过名字来标识资源,比如mailto:java-net@java.sun.com。也就是说,URI是以一种抽象的,高层 次概念定义统一资源标识,而URL和URN则是具体的资源标识的方式。URL和URN都是一种URI。