HTML6 展望

HTML5 概述
HTML5 是 HTML 语言最受欢迎的版本之一,它支持音频和视频、离线存储、移动端、和标签属性等等。还提供了<article>, <section>, <header>这样的标签来帮助开发者更好地组织页面内容。然而 HTML5 规范仍然没有最后定稿,并且它并不是一个真正意义上的语义标记语言。

HTML6 展望
你有没有曾经希望能在 HTML 中使用自定义标签?比如:使用<logo>来显示你的网站logo,还有使用<toolbar>来显示工具栏等等。我们经常使用<div id=”container”>和<div id=”wrapper”>来组织页面,在 HTML6 里我们希望可以直接使用象<container>和<wrapper>这样的自定义标签。

和 XML 一样,HTML6 应该支持 namespace(命名空间),如:xmlns:xhtml=”http://www.w3.org/1999/xhtml”

HTML6 代码样例:

<!DOCTYPE html>
 <html:html>
 <html:head>
 <html:title>A Look Into HTML6</html:title>
 <html:meta type="title" value="Page Title">
 <html:meta type="description" value="HTML example with namespaces">
 <html:link src="css/mainfile.css" title="Styles" type="text/css">
 <html:link src="js/mainfile.js" title="Script" type="text/javascript">
 </html:head>
 <html:body>
 <header>
 <logo>
 <html:media type="image" src="images/xyz.png">
 </logo>
 <nav>
 <html:a href="/img1">a1</a>
 <html:a href="/img2">a2</a>
 </nav>
 </header>
 <content>
 <article>
 <h1>Heading of main article</h1>
 <h2>Sub-heading of main article</h2>
 <p>[...]</p>
 <p>[...]</p>
 </article>
 <article>
 <h1>The concept of HTML6</h1>
 <h2>Understanding the basics</h2>
 <p>[...]</p>
 </article>
 </content>
 <footer>
 <copyright>This site is © to Anonymous 2014</copyright>
 </footer>
 </html:body>
 </html:html>

在上面的代码中,你也许注意到了一些奇怪的标签,它们是 W3C 和 HTML6 规范中在命名空间里定义的标签。例如:负责设定你浏览器的标题栏文字,负责显示图片等等。用户可以自己定义标签以便 JavaScript 和 CSS 识别和处理,这样页面代码会更易读,语义更清晰。

HTML6 APIs
HTML6 的标签前带有命名空间,如:<html:html>, <html:head>等等。

1.<html:html>

<!DOCTYPE html>
 <html:html>// this is equivalent to <html> tag written in previous HTML versions
 <!-- sample of HTML document -->
 </html:html>

2. <html:head> 和 <head> 标签一样。

<!DOCTYPE html>
 <html:html>
 <html:head>
 <!-- Main content would come here, like the <html:title> tag -->
 </html:head>
 </html:html>

3. <html:title> 和 <title> 标签类似。

<!DOCTYPE html>
 <html:html>
 <html:head>
 <html:title>A Look Into HTML6</html:title>
 </html:head>
 </html:html>

4.<html:meta> 和 <meta> 标签类似,不同之处在于,在 HTML5 中你只能使用标准的元数据类型,如:”keywords”, “description”, “author”等,而在 HTML6 中你可以使用任何元数据类型。

<!DOCTYPE html>
 <html:html>
 <html:head>
 <html:title>A Look Into HTML6</html:title>
 <html:meta type="description" value="HTML example with namespaces">
 </html:head>
 </html:html>

5. <html:link> 和 HTML6 之前版本的 <link> 标签类似。

<!DOCTYPE html>
 <html:html>
 <html:head>
 <html:title>A Look Into HTML6</html:title>
 <html:link src="js/mainfile.js" title="Script" type="text/javascript">
 </html:head>
 </html:html>

6. <html:body> 和 <body> 标签一样。

<!DOCTYPE html>
 <html:html>
 <html:head>
 <html:title>A Look Into HTML6</html:title>
 </html:head>
 <html:body>
 <!-- This is where your website content is placed -->
 </html:body>
 </html:html>

7. <html:a> 和 <a> 标签类似,区别是 <html:a> 只有 “href” 一个属性。

<!DOCTYPE html>
 <html:html>
 <html:head>
 <html:title>A Look Into HTML6</html:title>
 </html:head>
 <html:body>
 <html:a href="http://siteurl">Go to siteurl.com!</html:a>
 </html:body>
 </html:html>

8. <html:button> 和 <button> 及 <input type=”button”> 一样。

<!DOCTYPE html>
 <html:html>
 <html:head>
 <html:title>A Look Into HTML6</html:title>
 </html:head>
 <html:body>
 <html:button>Click Here</html:button>
 </html:body>
 </html:html>

9. <html:media> 涵盖 <img>, <video>, <embed> 等标签的所有功能。<html:media> 的好处是你不用根据不同的媒体文件类型使用不同的标签,媒体的类型由浏览器从文件内容(类型属性,扩展名,和MIME type)中来判断。

<!DOCTYPE html>
 <html:html>
 <html:head>
 <html:title>A Look Into HTML6</html:title>
 </html:head>
 <html:body>
 <!-- Image would come here -->
 <html:media src="img1/logo.jpg" type="image">
 <!-- Video doesn't need a type -->
 <html:media src="videos/slide.mov">
 </html:body>
 </html:html>

标签类型(Tag types)概述
和 HTML5 一样, HTML6 也有两种标签类型:单标签(single tag) 和双标签(double tag)

<html:meta type="author" content="single tag">
<html:meta type="author" content="double tag" />

单标签不需要结束符’/’

结语
HTML6 规范还未发布,本文原作者 Oscar Godson 只是为我们提供了一个对 HTML6 规范的展望,或者说他希望 HTML6 能够支持的一些新特性。

原文链接:A Look Into HTML6 – What Is It, and What Does it Have to Offer?

 

iframe实现无刷新上传文件[升级版本]

【改进】
使用label的for属性来取代js的event转移,解决IE下“SCRIPT5: 拒绝访问”的问题;

【html】

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
// 当前上传对象
var _current    = null;
// 上传回调方法
function onUploadSuccess(info){
    // 控制台调试,可能是因为console没定义导致IE无法使用此功能
    typeof console.dir!=='undefined' && console.dir(info);
    // 上传成功
    if(typeof info.status!=='undefined' && typeof info.path!=='undefined' && info.status==1 && info.path!=''){
        // 改变图片src,实现实时预览
        if(_current.find('img').size()>0)
            _current.find('img:eq(0)').prop('src', info.path);
        else
            _current.html('<img src="'+info.path+'" width="100%" height="100%" />');
        // 返回
        return;
    }
    // 上传失败则提示错误信息
    alert(info.info);
    // 返回
    return;
}
$(function(){
    $('label[for]').click(function(){
        _current    = $(this);
        $('.uploadform')[0].reset();
    });
    $('.uploadform input:file').change(function(){
        $(this).parent().submit();
    });
});
</script>
</head>
<body>

<label for="photo1" style="border:1px solid #CCC; padding:2px; width:120px; height:80px; display:block;"></label>
<label for="photo1" style="border:1px solid #CCC; padding:2px; width:120px; height:80px; display:block;"></label>

<form style="display:none;" class="uploadform" action="{:U('upload?callback=window.parent.onUploadSuccess')}" method="post" enctype="multipart/form-data" target="uploadiframe">
    <input type="file" name="photo1" id="photo1" />
    <iframe style="display:none;" name="uploadiframe"></iframe>
</form>

</body>
</html>

【php】

<?php
$retval = array('status'=>0, 'info'=>'', 'path'=>'');
if(/*upload success*/){
    $retval['status'] = 1;
    $retval['path'] = 'somepath';
}else{
    $retval['info'] = 'someerror';
}
echo "<script>{$_GET['callback']}(".json_encode($retval).");</script>";
exit;

利用正则为css和js链接增加版本信息

$html = <<< HTML
<style type="text/css">import url("/css.css?a=1");</style> 
<link rel="stylesheet" type="text/css href="http://s.8591.com.tw/css/main.css"" media="all">
<link href="http://s.8591.com.tw/css/index.css" type="text/css" rel="stylesheet" media="all">
<script type='text/javascript' src='/js/jquery/jquery.js'></script>
<script src='/js/jquery/colorbox/min.js?v=1329959498' type='text/javascript'></script>
HTML;

$ver    = '1.0.3';
$p      = "/(<style.*?url\([\'\"]|<(?:link|script).*?(?:href|src)=[\"\'])([^\'\"]+)/i";
$html   = preg_replace_callback($p, create_function('$m', 'return $m[1].$m[2].(strpos($m[2], "?")?"&":"?")."_v='.$ver.'";'), $html);
echo $html;

执行结果

<style type="text/css">import url("/css.css?a=1&_v=1.0.3");</style> 
<link rel="stylesheet" type="text/css href="http://s.8591.com.tw/css/main.css?_v=1.0.3"" media="all">
<link href="http://s.8591.com.tw/css/index.css?_v=1.0.3" type="text/css" rel="stylesheet" media="all">
<script type='text/javascript' src='/js/jquery/jquery.js?_v=1.0.3'></script>
<script src='/js/jquery/colorbox/min.js?v=1329959498&_v=1.0.3' type='text/javascript'></script>

DNS预获取(dns-prefetch)

今天翻看twitter的源码的时候看到了一下内容:

<link rel=”dns-prefetch” href=”http://a0.twimg.com”/>
<link rel=”dns-prefetch” href=”http://a1.twimg.com”/>
<link rel=”dns-prefetch” href=”http://a2.twimg.com”/>
<link rel=”dns-prefetch” href=”http://a3.twimg.com”/>
<link rel=”dns-prefetch” href=”http://api.twitter.com”/>

查阅了相关资料,知道DNS Prefetch也就是DNS预获取,也是前段优化的一部分。在前段优化中关于DNS的有两点:一是减少DNS的请求次数,第二个就是进行DNS预先获取。

DNS Prefetch 已经被下面的浏览器支持

Firefox: 3.5+
Chrome: Supported
Safari 5+
Opera: Unknown
IE: 9 (called “Pre-resolution” on blogs.msdn.com)
默认情况下浏览器会对页面中和当前域名(正在浏览网页的域名)不在同一个域的域名进行预获取,并且缓存结果,这就是隐式的DNS Prefetch。如果想对页面中没有出现的域进行预获取,那么就要使用显示的DNS Prefetch了,也就是使用link标签:

DNS Prefetch应该尽量的放在网页的前面,推荐放在后面。

PS:可以通过下面的标签禁止隐式的DNS Prefetch。

php/js获取客户端mac地址

废话不多讲,直接上代码吧!

<?php  
class MacAddr
{  
    public $returnArray = array();   
    public $macAddr;  

    function __contruct($os_type=null){
        if(is_null($os_type)) $os_type = PHP_OS;  
        switch (strtolower($os_type)){  
        case "linux":  
            $this->forLinux();  
            break;  
        case "solaris":  
            break;  
        case "unix":  
            break;  
        case "aix":  
            break;  
        default:  
            $this->forWindows();  
            break;  
        }  
        $temp_array = array();  
        foreach($this->returnArray as $value ){  
            if(preg_match("/[0-9a-f][0-9a-f][:-]"."[0-9a-f][0-9a-f][:-]"."[0-9a-f][0-9a-f][:-]"."[0-9a-f][0-9a-f][:-]"."[0-9a-f][0-9a-f][:-]"."[0-9a-f][0-9a-f]/i", $value, $temp_array)){  
                $this->macAddr = $temp_array[0];  
                break;  
            }  
        }  
        unset($temp_array);  
        return $this->macAddr;  
    }

    function forWindows(){  
        @exec("ipconfig /all", $this->returnArray);  
        if($this->returnArray)  
            return $this->returnArray;  
        else{  
            $ipconfig = $_SERVER["WINDIR"]."system32ipconfig.exe";  
            if (is_file($ipconfig))  
                @exec($ipconfig." /all", $this->returnArray);  
            else  
                @exec($_SERVER["WINDIR"]."systemipconfig.exe /all", $this->returnArray);  
            return $this->returnArray;  
        }  
    }

    function forLinux(){  
        @exec("ifconfig -a", $this->returnArray);  
        return $this->returnArray;  
    }  
}  

$mac = new MacAddr(PHP_OS);  
echo $mac->macAddr;  
echo "<br />";

// 获取客户端
// linux
$command = "arp -a {$_SERVER['REMOTE_ADDR']}";
echo $command;
echo "<br />";
$result=`{$command}`; 

// windows
$command = "nbtstat -a {$_SERVER['REMOTE_ADDR']}";
echo $command;
echo "<br />";
$result=`{$command}`; 
print_r($result);  
?>  

获取服务端的逻辑没什么大问题,可能会存在权限问题。
获取客户端的时候,可能会比较慢,arp/nbstat命令执行会比较慢。

<script language="JScript" event="OnCompleted(hResult,pErrorObject, pAsyncContext)" for="foo">   
document.forms[0].lbMacAddr.value=unescape(MACAddr);   
</script>  
<script language="JScript" event="OnObjectReady(objObject,objAsyncContext)" for="foo">   
if(objObject.IPEnabled != null && objObject.IPEnabled != "undefined" && objObject.IPEnabled == true && objObject.MACAddress != null && objObject.MACAddress != "undefined") MACAddr = objObject.MACAddress;   
</script>  
<object id="locator" classid="CLSID:76A64158-CB41-11D1-8B02-00600806D9B6"></object>  
<object id="foo" classid="CLSID:75718C9A-F029-11d1-A1AC-00C04FB6C223"></object>  
<script language="JScript">   
var service = locator.ConnectServer();   
var MACAddr ;   
var IPAddr ;   
var DomainAddr;   
var sDNSName;   
service.Security_.ImpersonationLevel=3;   
service.InstancesOfAsync(foo, 'Win32_NetworkAdapterConfiguration');   
</script>  
<form><input type="text" id='lbMacAddr' name='lbMacAddr' /></form>

只适用于IE浏览器,而且会有告警提示,挺遗憾的。

input的几个基本属性-禁用、只读和隐藏

之前在处理一个问题(禁止用户更改日期),把一个 input 设置成 disabled=”disabled”,导致日期没有根据 Form 提交到后端。
后来在公司的前端工程师面试题里发现也有这么一道题:

input的两种类型,readonly和disabled有什么区别?

居然大多数在职的工程师都不了解,这让我很惊讶,所以决定写下这篇扫盲文章。

对于 disabled 和 readonly 两个属性,W3C: Disabled and read-only controls 是这样讲的:

In contexts where user input is either undesirable or irrelevant, it is important to be able to disable a control or render it read-only. For example, one may want to disable a form’s submit button until the user has entered some required data. Similarly, an author may want to include a piece of read-only text that must be submitted as a value along with the form. The following sections describe disabled and read-only controls.

另外一句是(也是这次掉坑的原因):

In this example, the INPUT element is disabled. Therefore, it cannot receive user input nor will its value be submitted with the form.

对于 type=”hidden” 大家都比较熟悉了。理解这这两句话,其他的就只是常识层面上的运用了:

  1. 禁用(disabled):value 不会在 Form 提交时发送出去。这个对于按钮来说用处比较大,一般的 type=”text” 最好是隐藏,而不是禁用,因为它不需要发送数据。
  2. 只读(readonly):value 会在 Form 提交时被发送出去。所以需要在外观上显示跟一般 input/textarea 一样,但不允许用户修改数据,可以用这个属性。
  3. 隐藏(hidden):这个比较好理解,value 会被发送,并且用户看不到。

这是技术上的理解,但技术这种东西永远都会有盲目,所以如何去做?用脚趾头想的做法就是强制测试,或者成立专门的测试团队。当然,用脚趾头想也知道这种做法让流程变得很复杂,开发速度会变慢,放松测试则可能出现 bug 情况更多。一方面是得罪用户,一方面是公司效率变差,都边都不好,如果平衡?

HTML5的hidden属性

我们已经知道了很多HTML5新增的属性,比如placeholder、download、autofocus等,还有个新的可能会常用的属性hidden,也是蛮好用的,这里简单介绍下~~
用法很简单:

<div hidden>
  You can't see me!
</div>

这个属性的表现类似css的display:none,用了这个属性后,元素会被隐藏,块级元素也会折叠起来不再占位,和visible:hidden不一样。所以,对于不支持HTML5的浏览器来说,也可以做下简单的兼容:

*[hidden] { display: none; }

嗯,之前我们的通用做法是直接给目标元素一个style=”display:none”或者定义一个.none之类的选择器,现在我们又多了一种选择。是否好用,还要看项目实际需要吧~~

[转]提升用户体验:HTML5 拖放文件上传

话说,还是有不少项目里提供让用户上传东西的。小到一个 wordpress 博客,大到一个文件存储网站。为了更好的用户体验。来学习两个新知识吧。HTML5 文件访问(File Access: FileReader)和拖放(Drag and Drop)。或许下个项目就能用上了。

一、起因
今天看到 twitter 上有人在分享 Min.us 这个网站。说是只要把图片进去,就可以分享。是的,它确实是这样。体验了一翻,无论从界面,还操作的方便性上说,这体验还真是很赞的。 继续阅读[转]提升用户体验:HTML5 拖放文件上传

css中的长度单位

css3中也对css中用到的单位进行了改进,单位也就是那几个,所以我们要搞清楚再用。

%——百分比
in——寸
cm——厘米
mm——毫米
pt——point,大约1/72寸;
pc——pica,大约6pt,1/6寸;
px——屏幕的一个像素点;
em——元素的font-size;
ex——font-size的x-height值,为小写字母x的高度,通常相当于font-size的一半。
我们常用的有px、%、em,px就不多说了,em和%多说点儿:
继续阅读css中的长度单位