分享8个能提升你网站质量的HTML代码片段

HTML5是迄今为止最有趣的超文本标记语言。在本文中整理了9个有趣实用的HTML5代码片段,相信这些一定能让你的网站更出色。

1.Url和Email   input类型

url和email是HTML5推出新的input类型中的一个。这能够让你写出一个语义上更正确的代码,并能更简单的在移动设备上完成表单form的制作,它能根据不同的input类型显示特殊的按钮(如@或COM按钮)。

下面是url的属性:

<input type="url" value="">

同样email的属性,记得添加pattern属性:

<input type="email" pattern="[^ @]*@[^ @]*" value="">

来源:http://davidwalsh.name/html5-email

2.表单验证的正则表达式

HTML5之前,当你使用表单时,你必须使用JavaScript来创建前端验证,现在利用HTML5和pattern属性,可以定义一个正则表达式来验证数据。

下面的代码是用来验证email地址的有效性:

<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />

下面用来验证密码强度:

<input title="密码不得少于8个字符,其中至少包含一个数字,一个小写字母和一个大写字母" type="text" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required />

下面这个是用来验证手机号位数是否正确:

<input type="text" required pattern="(\+?\d[- .]*){7,13}" title="国际,国家或地方的电话号码"/>

来源:http://blog.staffannoteberg.com/2012/03/01/html5-form-validation-with-regex/

3.HTML5添加右键菜单选项-contextmenu

什么是contextmenu?它有什么作用?基本上来说,它只需几行html代码就能让你再鼠标右键菜单中添加上不同的选项,甚至会禁用Javascript,不过到现在为止,只有Fierfox浏览器支持。

如何用contextmenu比你想象的还简单,你要做的只是添加像下面那样的代码就可:

<section contextmenu="my-right-click-menu">
<!-- 
Add anything you want here 
--> 
</section>

正像你看到的那样你可以添加他就像添加任何id和class那样。

下面我们创建menu:

<menu type="context" id="my-right-click-menu">

<!--

Here we will add the new 'right-click' menu items

-->

</menu>

menu的id一定要跟contextmenu的名称一致。它提供了很大的灵活性,在不同的章节页面上添加多个菜单项。

下面添加menu的选项,我在第一个菜单项上添加一段纯文本和一个图标;第二个选项上添加一个连接;第三个选项上添加一个刷新连接。代码如下

<menu type="context" id="my-right-click-menu">

<menuitem label="Please do not steal our images" icon="img/forbidden.png"></menuitem>

<menuitem label="Share on Facebook" onclick="goTo('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>

<menuitem label="Refresh" onclick="window.location.reload()"></menuitem>

</menu>

你还可以嵌套使用:

<menu type="context" id="my-right-click-menu">

<menuitem label="Please do not steal our images" icon="img/forbidden.png"></menuitem>

<menu label="Social Networks">

<menuitem label="Share on Facebook" onclick="window.location.href = 'http://facebook.com/sharer/sharer.php?u=' + window.location.href;"></menuitem>

</menu>

<menuitem label="Refresh" onclick="window.location.reload()"></menuitem>

</menu>

来源:contextmenu

4.用HTML5中的datalists自动完成数据的填写

利用HTML5中的datalists属性,能预先创建一系列数据来自动完成表单的填写。 

<input name="frameworks" list="frameworks" />

<datalist id="frameworks">
	<option value="MooTools">
	<option value="Moobile">
	<option value="Dojo Toolkit">
	<option value="jQuery">
	<option value="YUI">
</datalist>

input中的list名称跟datalist的id相同。

来源:http://davidwalsh.name/datalist

5.Html5隐藏元素

html5具有新的hidden属性,它能够隐藏特定元素,而不用再css中使用display:none;

<p hidden>You can't see this text</p>

来源:http://html5demos.com/hidden

6.自动聚焦

autofocus属性能强制聚焦到某个特定元素上,经常应用到搜索页面。

<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>

来源:http://davidwalsh.name/autofocus

7.Html5链接预取功能

对于图片预加载功能你可能已经了解,html5预取功能将图片延伸到页面内容。在用户使用到时提前加载下来,提高网页速度。

预取功能是非常有用的,对于抢先预取和高速缓存指定的资源是非常有意义的,因为它极有可能是用户需要的当前资源。有些时候搜索引擎会在搜索页面添加<link rel=prefetch href=”URL of top search result”>,他们可能认为搜索到的第一条信息比其他信息更受欢迎。

加载时间对于一个网站质量来说绝对是一个很重要的因素,提前加载页面对于用户体验度来说也是十分重要的。但是要注意,不要预取你的整个网站。

如何使用?

预取页面是非常简单的,你只要将下面的代码放到<head>和</head>标签之间就可以。href属性是要预取的页面的url。

<link rel="prefetch" href="http://www.example.com/">

他也可以只预取一个图片:

<link rel="prefetch" href="http://www.catswhocode.com/wp-content/uploads/my_image.png">

目前这个属性只有火狐浏览器和高版本的google chrome支持。

不过在chrome浏览器中用prerender来替代prefetch属性,所以你在应用这个的时候需要同时写上下面两条代码。

<link rel="prefetch" href="http://www.example.com/"> <!-- Firefox -->
<link rel="prerender" href="http://www.example.com/"> <!-- Chrome -->

wordpress博客中如何预取页面?
blog是一个典型的预取网站的案列,很多时候靠猜的来预想用户下一步将要到达哪个页面。

比如:一个访问者正在阅读你的第二页内容,那么他极有可能下一步就会阅读第三页,那么下面这段代码就非常有用,直接粘贴到header.php就可以。

<?php if (is_archive() && ($paged > 1) && ($paged < $wp_query->max_num_pages)) { ?>
<link rel="prefetch" href="<?php echo get_next_posts_page_link(); ?>">
<link rel="prerender" href="<?php echo get_next_posts_page_link(); ?>">
<?php } ?>

当然上面的代码可以根据你实际的需要进行拓展,不过根据我的分析,来我的bolg看某篇文章的访问者,下一步很有可能阅读首页,那么可以将上面的代码修改如下:

<?php if (is_archive() && ($paged > 1) && ($paged < $wp_query->max_num_pages)) { ?>
<link rel="prefetch" href="<?php echo get_next_posts_page_link(); ?>">
<link rel="prerender" href="<?php echo get_next_posts_page_link(); ?>">
<?php } elseif (is_singular()) { ?>
<link rel="prefetch" href="<?php bloginfo('home'); ?>">
<link rel="prerender" href="<?php bloginfo('home'); ?>">
<?php } ?>

采用jQuery来进行预取

// create an object named "app" which we can define methods on
var app = {
    // returns an array of each url to prefetch
    prefetchLinks: function(){
        // returns an array of each a.prefetch link's href
        var hrefs = $("a.prefetch").map(function(index, domElement){
            return $(this).attr("href");
        });
        // returns the array of hrefs without duplicates
        return $.unique(hrefs);
    },

    // adds a link tag to the document head for each of prefetchLinks()
    addPrefetchTags: function(){
        // for each prefetchLinks() ...
        this.prefetchLinks().each(function(index,Element){
            // create a link element...
            $("<link />", {
                // with rel=prefetch and href=Element...
                rel: "prefetch", href: Element
                // and append it to the end of the document head
            }).appendTo("head");
        });
    },
}
// when the document is ready...
jQuery(function(){
  // call the method we defined above.
    app.addPrefetchTags();
}

将上面的代码粘贴到你的页面上,在需要预取的页面添加个prefect class。

来源:http://www.catswhocode.com/blog/mastering-html5-prefetching

8.用Html5播放音频文件

<audio id="player" src="sound.mp3"></audio>
<div>
	<button onclick="document.getElementById('player').play()">Play</button>
	<button onclick="document.getElementById('player').pause()">Pause</button>
	<button onclick="document.getElementById('player').volume+=0.1">Volume Up</button>
	<button onclick="document.getElementById('player').volume-=0.1">Volume Down</button>
</div>

来源:http://www.catswhocode.com/blog/mastering-the-html5-audio-property
来源:catswhocode

 

“分享8个能提升你网站质量的HTML代码片段”的4个回复

评论已关闭。