新增结构元素分为主体结构元素和非主体结构元素,AJAX初级应用

做移动端有一段时间,今天有同事问了我 article 和 section
标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬。忽然间觉得自己有必要再翻翻书籍,重温下
html5 的新元素。今天先介绍下 html5
新增的结构元素,有的经常使用到,有的用不上,虽然说它们的出现是更促进页面更有语义,更好的
seo,但其实当页面禁用样式后,它们的展现跟 div
是没撒差别,有同学可能会说,既然一样,又不影响页面的最终展现,不管是
article 还是 section
能用就好了。如果考虑实际项目的针对用户,我也是这么认为的,但作为一个重构仔,我们还是得专业点,再考虑到无障碍这块,那么
html5
标签的作用就更明显了。于是复习下内容并记录在博客上,顺便分享给大家,也方便自己以后查找。

  HTML5
游戏开发是一个热门的话题,开发人员和设计人员最近经常谈论到。虽然不能迅速取代
Flash 的地位,但是 HTML5 凭借它的开放性和强大的编程能力,取代 Flash
是必然的趋势。你会看到,越来越多的界面设计精美、效果很酷的 HTML5
游戏不断涌现出来。

rss.js

 

  这篇文章推荐的15款精彩的 HTML5 游戏把技术发挥到了极致,用事实证明,HTML5 能够可以创建出好玩的游戏。赶紧来体验这些精彩的游戏吧。(温馨提示:推荐在
Chrome、Firefox、Safari 等现代浏览器中体验)

复制代码 代码如下:

HTML5 新增结构元素分为主体结构元素和非主体结构元素

您可能感兴趣的相关文章

  • 35款非常优秀的基于 HTML5 网页游戏
  • 8个惊艳的 HTML5 和 JavaScript 特效
  • 20个惊艳的 HTML5 Canvas 应用试验
  • 10套精美的免费网站后台管理系统模板
  • 29款基于 HTML5 Canvas 的网页游戏

 

<!–
//控制ID
function getId(objId){
    return document.getElementById(objId)
}
//链接对应数组,请注明转载自
function urlArrary(urlName){
    switch(urlName){
        case “clear”:
            return “”
        case “a-fei”:
            return “”
        case “ryanxia”:
            return “”
        case “awflasher”:
            return “”
        case “seles”:
            return “”
        case “wawa”:
            return “”
        case “dreammx”:
            return “”
        default:
            return false
    }
}
//侧边栏控制,请注明自
function closebar(targetid,objId){
    if(document.getElementById){
        target = getId(targetid);
        objsty = getId(objId);
        if(target.style.display == “none”){
            target.style.display = “”;
            main.style.width = “800px”;
            objsty.innerHTML = “关闭侧边栏”
        }else{
            target.style.display = “none”;
            main.style.width = “100%”;
            objsty.innerHTML = “开启侧边栏”
        }
    }
}
//加载变灰,注明自
function listen(a){
    getId(“prolist”).className=a;
}
function btnSty(objId,objStyle)
{
    getId(objId).style.display = objStyle
}
//提示窗口控制
function ifodis(){
    btnSty(“loadifo”,”none”);
}
function settime(a){
    setTimeout(a,1000);
}
function loadtime(){
    getId(“loadifo”).innerHTML += “.”
}
//数据入口
function ent(urlName){
    window.location.hash = urlName
    var frmUrl = saveState(urlName);//写入信息到ifream
    var gamestart = loadrss(urlName);//AJAX数据过程
}
//XML数据绑定
var xmldoc = false;
function loadrss(urlName){
    var myurl = urlArrary(urlName)
    if(myurl){
        listen(“mainbg2”);
    //生成随机数,同时限制刷新次数
        var Num=Math.floor(Math.random()*100);
    //定义往址参数
        url = myurl+”?id=”+Num;
    //定义为异步传输模式
        xmldoc = false;
    //Mozill,Safari等浏览器时需要创建的XMLHttp类
        if(window.XMLHttpRequest){
            xmldoc = new XMLHttpRequest();
            if(xmldoc.overrideMimeType){
                    xmldoc.overrideMimeType(‘text/xml’);
            }
        }
    //IE浏览器时创建的XMLHttp类
        else if(window.ActiveXObject){
            try{
                xmldoc = new ActiveXObject(“Msxml3.XMLHTTP”);
            }
            catch(e){
                try{
                    xmldoc = new ActiveXObject(“Msxml2.XMLHTTP”);
                }
                catch(e){
                    try{
                        xmldoc = new ActiveXObject(“Microsoft.XMLHTTP”);
                    }
                    catch(e){}
                }
            }
        }
    //不能创建XMLHTTP类时返回
        if(! xmldoc){
            return false;
        }
    //调用CheckState函数
        xmldoc.onreadystatechange = CheckState;
        xmldoc.open(‘GET’,url,true);
        xmldoc.send(null);
    }else{
        getId(“listnum”).innerHTML = “您输入的地址错误,请重试!”
    }
}
//状态检测
function CheckState(){
    var response = xmldoc.responseXML.documentElement;
    btnSty(“loadifo”,”block”)
//收到完整的服务器响应
    if(xmldoc.readyState == 1){
        getId(“loadifo”).innerHTML = “连接服务器”
        }
    else if(xmldoc.readyState == 2){
        getId(“loadifo”).innerHTML = “开始加载数据”
        }
    else if(xmldoc.readyState == 3){
        getId(“loadifo”).innerHTML = “正在加载数据”
        settime(loadtime)
        }
    else if(xmldoc.readyState == 4){
//HTTP服务器响应值成功
        if(xmldoc.status == 200){
//将服务器返回的字符串写到页面中ID为showdiv的区域
     getId(“loadifo”).innerHTML = “加载完成”
         settime(ifodis)
         num(response)
        }
        else{
            getId(“loadifo”).innerHTML = “错误”+xmldoc.status+”点这里刷新”;
        }
    }
}
//检查数据合法性
function trydata(nodeName,nodeName2){
    try{
        var nodeV = nodeName.firstChild.nodeValue;
    }catch(e){
        try{
            var nodeV = nodeName2.firstChild.nodeValue;
        }catch(e){
            var nodeV = “没有可用信息”
        }
    }
    return nodeV;
}
//记录集总数
function num(b){
    try{
        var titleNode = b.selectNodes(“//rss/channel/title”);
        var a = b.getElementsByTagName(“item”).length
        titleV = trydata(titleNode(0));
        getId(“listnum”).innerHTML = “共有”+a+”篇文章 来源于:”+titleV;
        setlist(a,b);
    }catch(e){}
}
if (top.location != self.location)top.location=self.location; 

 

Contre Jour

《黑暗旅行》将把您带入一个光影交织,让人流连忘返的绝美世界,此作堪称游戏与互动艺术的完美交集。在游戏中,运用手指改变景观,帮助神秘小家伙Petit安全抵达目的地。通过拖拉,滑动和触碰一些小道具,如触角、喷气口和滑轮等来智勇闯关。

图片 1

//节目列表显示
//定义接收指向各个元素的节点信息的变量
var titleNode,linkNode,categoryNameNode,authorNode,pubDateNode,descriptionNode
//定义接收元素值的变量
var titleV,linkV,categoryNameV,authorV,pubDateV,descriptionV
//分类聚合
function setlist(a,b)
{
    var prograNode = b.getElementsByTagName(“item”);
    var adminlinkNode = b.selectNodes(“//rss/channel/link”);
    var titleNode = b.selectNodes(“//rss/channel/item/title”);
    var linkNode = b.selectNodes(“//rss/channel/item/link”);
    var categoryNode = b.selectNodes(“//rss/channel/item/category”);
    var authorNode = b.selectNodes(“//rss/channel/item/author”);
    var pubDateNode = b.selectNodes(“//rss/channel/item/pubDate”);
    var descriptionNode = b.selectNodes(“//rss/channel/item/description”);
    var category2sNode = b.selectNodes(“//rss/channel/item/dc:subject”);
    var author2sNode = b.selectNodes(“//rss/channel/item/dc:creator”);
    var pubDate2sNode = b.selectNodes(“//rss/channel/item/dc:date”);
    var listchar=””
//使用for循环,产生列表信息
    for (i=0; i<a; i++)
    {
        titleV = trydata(titleNode(i))
        linkV = trydata(linkNode(i))
        categoryV = trydata(categoryNode(i),category2sNode(i))
        authorV = trydata(authorNode(i),author2sNode(i))
        pubDateV = trydata(pubDateNode(i),pubDate2sNode(i))
        descriptionV = trydata(descriptionNode(i))
        adminlinkV = trydata(adminlinkNode(0))
        //将得到的元素值装载到产生表格的字符串中
        listchar += “<h5><a href='”+linkV+”‘ target=’_blank’>”+titleV+”</a></h5><span>发表时间:”+pubDateV+”</span><div class=’article’>”+descriptionV+”</div><div class=’bottom’>文章分类:”+categoryV+” <a href='”+adminlinkV+”‘ target=’_blank’>作者:”+authorV+”</a></div>”;
    }
    //将生成的表格输出到页面的DIV元素
    getId(“prolist”).innerHTML = listchar;
    listen(“mainbg”)
}
//浏览器回退部分
//重写IFREAM链接,浏览器回退重点
function saveState(message) {
    var hisFrm = getId(“historyFrame”)
    hisFrm.src = “blank.html?”+message
}
//检测IFREAM
window.dhtmlHistory = {
    iframeLoaded:function(newLocation){
        var hash = new String(newLocation.search)
        if (hash.length >= 2 && hash.charAt(0) == “?” && hash.substring(1) !=delChar()){
            hash = hash.substring(1)
            window.location.hash = hash;
            var hisFrmdata = loadrss(hash)
        }
    }
}
//浏览器链接指向部分
//去除符号,请注明
function delChar(){
    var a = window.location.hash
    return     a.substring(1)
}
window.onload = function(){
    if(window.location.hash.length >= 2){
        ent(delChar())
    }
}
// –>

主体结构元素包括 article、section、nav、aside、time

Koubachi

很简单的一款游戏,学习如何照顾植物,有浇水、施肥、喷洒农药等动作。

图片 2

复制代码 代码如下: !– //控制ID
functiongetId(objId){ returndocument.getElementById(objId) }
//链接对应数组,请注明转载自 functi…

非主体结构元素包括 header、hgroup、footer、address

BananaBread

由 Mozilla 实验室出品,基于 HTML5 WebGL 的虚拟3D环境射击游戏。

图片 3

一、主体结构元素

Cube

这是基于 Google 地图的一个游戏。玩的方式是通过谷歌地图世界的立方。 

图片 4

article

3D Bricks

基于 WebGL 技术实现的 3D 打砖块游戏,带给你不一样的游戏体验。

图片 5

article 标签,从语义化上看为文档、页面,其用法如下:

Save the Day

可以邀请朋友一起玩,一起互动的一款 HTML5 游戏。

图片 6

 

Connection

基于 HTML5 技术实现的另一种模式的连连看游戏。

图片 7

通常是一篇文章、一个页面、一个独立完整的内容模块

Sand Trap

很好玩的一款 HTML5 游戏,要把沙子都从场景中的方格内倒入下方的容器中。

图片 8

一般会带个标题,并放在 header 标签中

Entanglement

图片 9

article 元素可以互相嵌套

Shell heroes

场景设计很精美一款游戏,帮助乌龟为他们的国王铺设道路。

图片 10

使用频率极高,强调独立性,多注意下与 header 标签的使用。

Fluid Table Tennis

图片 11

 

Unsnarl it

一款基于 HTML5 实现的解绳子游戏,来挑战一下吧。

图片 12

复制代码

Missile game

图片 13

<article>

HeadBoxing

来自 Mozilla 实验室的拳击游戏,移动头部来躲避攻击。

图片 14

    <header>

Get Motion Media

综合运用 JavaScript, HTML5, Canvas, Audio, Video 构建的体感游戏。

图片 15

 

        <h1>是我标签</h1>

您可能感兴趣的相关文章

  • 2012年最佳 Web 前端开发工具和框架
  • 分享21款丰富多彩的 HTML5 网页游戏
  • 推荐10款优秀的 HTML5 在线设计工具
  • 45个激发灵感的 HTML5 网站设计作品
  • 29款基于 HTML 5 Canvas 的网页游戏

 

本文来源:前沿技术:让你忘记 Flash 的15款精彩 HTML5 游戏

文章来源:梦想天空 ◆ 关注Web前端开发技术 ◆ 分享网页设计资源

游戏开发是一个热门的话题,开发人员和设计人员最近经常谈论到。虽然不能迅速取代
Flash 的地位,但是 HTML5 凭借它的开放性和强大…

    </header>

    <p>我是段落</p>

    <article>

        <div>我的内容</div>

    </article>

</article>

复制代码

section

section 标签,从语义化上看为部分,其用法如下:

 

用于页面内容的独立分块,往往是文章的一段

通常由内容和标题组成,没有标题的内容不推荐使用 section

使用频率低,强调分段分块。

 

注:《HTML5与CSS3权威指南》这本书中说明:一个容器需要被定义样式或者脚本定义行为时,推荐用div而非section,不要将section用作设置样式的容器。

 

复制代码

<section>

    <h1>水果</h1> 

    <article> 

        <h2>苹果</h2>

        <div>苹果是撒?</div> 

    </article> 

     <article> 

        <h2>桔子</h2>

        <div>桔子是撒?</div> 

    </article> 

</section>

<!–
article可以看成是一种特殊种类的section元素,它比section更强调独立性
–>

<article>

    <h1>中国人物</h1>

    <p>三国、两晋、南北朝</p>

    <section>

        <h2>三国</h3>

        <p>猛将猛将猛将猛将</p>

    </section>

    <section>

        <h2>两晋</h3>

        <p>猛将猛将猛将猛将</p>

    </section>

</article>

复制代码

nav

nav 标签,从语义化上看为导航,其用法如下:

 

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注