ie input间距
发布于五月 11th, 2012
在最近的工作中遇到了input在ie下的异常问题。表现为在ie6,7,8都有几个像素的间距，已经reset了margin和padding，但还是出现莫名其妙的间距。如图所示
chrome和ff下的input
ie8下的input
标签:
还没有评论
CSS3学习笔记之选择器
发布于五月 8th, 2012
first-child选择器,last-child选择器,nth-child选择器，nth-last-child选择器，nth-of-type选择器与nth-last-of-type选择器.
首先说first-child与last-child，这两个选择器很容易明白，就是父元素下的第一个子元素和最后一个子元素。而nth-child和nth-last-child则是父元素下指定序号的子元素，甚至第偶数个、奇数个子元素精选样式的制定。
/*选择器写法示例*/
nth-child(n) //正数第n个子元素
nth-last-child(n) //倒数第n个子元素
nth-child(odd) //正数下来所有的第偶数个子元素
nth-last-child(even) //倒数上去的第奇数个子元素
那么nth-of-type与nth-last-of-type呢？
在一个div中有数篇文章，h2与p多次使用的情况要对h2实现奇偶异色，如果使用nth-child或是nth-last-child来实现就会发现一些问题(不提供demo代码，读者可自行编写h2ph2ph2p如此)，试验的结果是没有出现奇偶异色，仅仅是奇数的变色了。
这个问题产生的原因是 阅读更多
标签:css3
还没有评论
HTML5之使用数据库实现web留言本
发布于四月 27th, 2012
在HTML5中，大大丰富了客户端本地可以存储的内容，添加了很多功能来将原本必须要保存在服务器上的数据转为保存在客户端本地，从而大大提高了WEB应用程序的性能，减轻了服务器端的负担，使WEB时代重新回到了“客户端为重、服务器端为轻”的时代。
在这其中，一项非常重要的功能就是数据库的本地存储功能。在HTML5中内置了一个可以通过SQL语言来访问的数据库。在HTML4中，数据库只能放在服务器端，只能通过服务器来访问数据库，但是在HTML5中，可以就像访问本地文件那样轻松地对内置数据库进行直接访问了。
现在，像这种不需要存储在服务器上的，被称为“SQLLite”的文件型SQL数据库已经得到了很广泛的利用，所以HTML5中也采用了这种数据库来作为本地数据库。因此，如果先掌握了SQLLite数据库的基本知识的话，接着再学如何使用HTML5的数据库也就不困难了。
嗯，接下来就是利用HTML5本地数据库这个东西来写个留言本，这里把JS放出（注释已给出），HTML代码可以参考DEMO
var datatable = null;
var db = openDatabase(‘MyData’,”,’My Database’,102400); /*打开数据库*/
function init() /*把已保存的留言信息显示在表格中*/ 阅读更多
标签:html5
1 评论
HTML5之web storage简易数据库
发布于四月 26th, 2012
在HTML5中，除了Canvas元素之外，另一个新增的非常重要的功能是可以在客户端本地保存数据的web storage功能，我们知道，在HTML4中可以使用cookies在客户端保存诸如用户名等简单的用户信息，但是，通过长期的使用下来，会发现用cookies储存永久数据存在如下几个问题:大小，带宽，复杂性。在这种情况下，在HTML5中重新提供了一种在客户端本地保存数据的功能，他就是web storage功能。
web storage功能，顾名思义，就是在web上存储数据的功能，而这里的存储，是针对客户端本地而言的。
上述简单的介绍web storage，这里POST一个利用web storage实现的本地简易数据库，HTML代码和JS代码加起来不超过3K。
<!DOCTYPE html>
<head>
<meta charset=”UTF-8″>
<title>canvas</title>
<script type=”text/javascript” src=”script.js”></script>
</head>
<body>
<article> 阅读更多
标签:html5
还没有评论
标题字符截取的小技巧
发布于四月 15th, 2012
今天分享一个标题字符截取的小技巧，虽说是小技巧，但用好这个技巧，多多少少可以把一些麻烦的工作变得简单，而且有利于搜索引擎抓取。
这里以wordpress为例，有时自己写主题或者自己修改主题，经常都会遇到文章标题的字符需要限制某个长度，这是我们会用substr()这个函数来截取字符，而且在很多cms或是php程序，程序都能搞定字符的输出。就笔者所想到的这样程序来截取字符会遇到这些问题:
1）如果页面重构，则前端需要和程序商量字符截取的改变，如果一个页面仅仅是一处有标题截取处理那还好，但如果多处呢？如果多个页面呢？这无疑会增加一些不必要的工作量。
2）互联网早就迎来了搜索引擎时代，网民习惯用搜索引擎搜索各式网站，字符截取在这里会带来一个问题，譬如本文，如果标题为:”标题字符截取的小技巧”，经过字符截取为”标题字符”，那自然搜索引擎抓取标题的时候就抓取了”标题字符”，没有完整地表达出文章标题所传达的意思，大量标题字符经过截取后被搜索引擎抓取，减少的就不是一个页面了。 阅读更多
标签:优化
2 评论
HTML5学习笔记之time元素与微格式
发布于四月 14th, 2012
HTML5新增的主要结构元素-time元素与微格式，首先来说一下微格式，它是一种利用HTML的class属性来对网页添加附加信息的方法，附加信息例如新闻事件发生的日期和时间、个人电话号码、企业邮箱等。
微格式并不是在HTML5之后才有的，在HTML5之前它就和HTML结合使用了，但是在使用过程中发现在日期和时间的机器编码上出现了一些问题，编码过程中会产生一些歧义。HTML5增加了一种新的元素来无歧义地、明确地对机器的日期和时间进行编码，并且以让人易读的方式来展现它。这个元素就是time元素。
time元素代表24小时中的某个时刻或某个日期，表示时刻允许带时差。它可以定义很多格式的日期和时间，如下所示
<time datetime=”2010-11-13″>2010年11月13日</time>
<time datetime=”2010-11-13″>11月13日</time>
<time datetime=”2010-11-13″>我的生日</time>
<time datetime=”2010-11-13T20:00″>我生日的晚上8点</time>
<time datetime=”2010-11-13T20:00z”>我生日的晚上8点</time>
<time datetime=”2010-11-13T20:00+09:00″>我生日的晚上8点的美国时间</time> 阅读更多
标签:html5
还没有评论
HTML5学习笔记之aside元素
发布于四月 13th, 2012
HTML5新增的主要结构元素之一-aside元素，aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分。
aside元素主要有以下两种使用方法。
1）被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的参考资料、名词解释，等等。（在使用article元素的正文中，在文章段落之后需要添加文章中的相关名词解释，则在文章段落p元素之后使用aside元素用来存放名词解释的部分）
2）在article元素之外使用，作为页面或站点全局的附属信息部分。最典型的形式是从侧边栏，其中的内容可以说友情链接，博客中其他文章列表、广告单元等。
侧边栏示例 阅读更多
标签:html5
还没有评论
HTML5学习笔记之nav元素
发布于四月 12th, 2012
HTML5新增的主要结构元素之一-nav元素。nav元素是一个可以用作页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要被放进nav元素，只需要将主要的、基本的链接组放进nav元素即可。例如，在页脚中通常会有一组链接，包括服务条款、首页、版权声明等，这是使用footer元素是最恰当的。一个页面中可以拥有多个nav元素，作为页面整体或不同部分的导航。
nav元素示例
<body>
<h1></h1>
<nav><ul><li></li><li></li></ul></nav>
<article>
<header><h1></h1><nav><ul><li></li><li></li></ul></nav></header>
<section><h1></h1><p></p></section>
<footer><p></p></footer></article>
</body>(值得一提的是在HTML5中，h1的语义发生了变化)
在这个例子中，第一个nav元素用于页面导航，将页面跳转到其他页面上去(跳转到网站主页或开发文档目录页面)；第二个nav元素放置在article元素中，用作这篇文章中两个组成部分的页内导航。
具体来说，nav元素可以用于以下这些场合: 阅读更多
标签:html5
1 评论
HTML5学习笔记之section元素
发布于四月 9th, 2012
HTML5新增主要结构元素-section元素,section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。
我们可以这样理解：section元素中的内容可以单独存储到数据库中或输出到word中。
section元素示例
<section><h1>苹果</h1><p>苹果文章正文</p></section>
通常不推荐为那些没有标题的内容使用section元素，可以使用HTML5轮廓工具来检查页面中是否有没标题的section。
section元素的作用是对页面上的内容进行分块，或者说对分钟进行分段，请不要与“有着自己的完整的、独立的内容”的article元素混淆。这里POST两段section元素与article元素混合使用的示例代码
section元素示例一
标签:html5
1 评论
HTML5-article元素
发布于四月 8th, 2012
article元素是HTML5新增的主要结构元素之一，article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部应用的内容。它可以说一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件、或其他任何独立的内容。可以独自被外部应用的内容-article
除了内容部分，一个article元素通常有它自己的标题(一般放在一个header元素里面)，有时还有自己的脚注。
article元素是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联。例如，一篇博客文章中，针对该文章的评论就可以使用嵌套article元素的方式；呈现评论的article元素被包含在表示整体内容的article元素里面。嵌套使用时有前提的，在相关联的原则嵌套。
关于article元素的语义大概如此，之后还会把section元素也post一下，section元素与article元素初初接触容易混一起，搞不清楚到底该用哪个元素，这里顺便也说下如果区别开这两个HTML5新增的重要结构元素:section元素指的是相关内容，它比article元素包含的范围要广。使用article的地方可以使用section元素替代（这里是区别两者，在实际应用中应遵循语义，什么结构该用什么元素就用什么元素）。而使用section的地方不一定可以使用article元素替代。
标签:html5
1 评论
