【拆了CSS照样是页面】之——...-获取随机的颜色-采用Jquery,在table上实现对行的单击、双击、返回选中行数据的功能，可作为GridView控制客户端的扩展

当前位置: 编程技术>WEB前端

本页文章导读:

▪【拆了CSS照样是页面】之——HTML语义化（含H5）介绍HTML是提供网页文档内容的上下文结构和含义；HTML本身是没有表现的，我们看到的例如<h1>是粗体，字号为2em；<strong>的加粗，不要认为这些是html的表现，这是html的默认样式在起.........

▪获取随机的颜色 function randomColor(){ r = Math.floor(Math.random()*255).toString(16); g = Math.floor(Math.random()*255).toString(16); b = Math.floor(Math.random()*255).toString(16); return "#"+r+g+b; } var div=document.........

▪采用Jquery,在table上实现对行的单击、双击、返回选中行数据的功能，可作为GridView控制客户端的扩展 (function ($) { $.fn.gridview = function (settings) { var dfop = { .........

[1]【拆了CSS照样是页面】之——HTML语义化（含H5）

来源: 发布时间: 2013-11-06

介绍

HTML是提供网页文档内容的上下文结构和含义；HTML本身是没有表现的，我们看到的例如<h1>是粗体，字号为2em；<strong>的加粗，不要认为这些是html的表现，这是html的默认样式在起作用，所以我们要知道html和页面的表现是没有关系的，表现是CSS的事。html在页面中的作用是结构、含义，说白了就是划分内容，这里放什么，我们放的是什么。

结构化

一个页面比作房子，那HTML就是钢筋混凝土的墙，房盖房梁一样的架子；而CSS就是装饰材料，地板油漆一类的东西。好的页面结构就是在没有CSS装饰的情况下，页面结构依然清晰明了，房屋依然可现。而人们常说的DIV+CSS，只是通俗的说法，并不是通篇的DIV，记住：DIV不是神！

语义化

HTML是一种对文本内容和意义（即语义）的补充说法。它会告诉我们说：“这行是一个标题，这几行组成一个段落，这是一个项目列表，那是一个链接。”而不是来告诉我们：“这些字是蓝色的，那些又是红色的，这部分内容靠右，这几个是斜体。”这些是CSS的工作。总之：HTML告诉我们一块内容是什么（或其意义），而不是它长什么样子。

<div id="header">
<div >前砖攻城师</div>
<div >搭积木也要玩艺术</div>
</div>


<div id="header">
<h1>前砖攻城师</h1>
<h2>搭积木也要玩艺术</h2>
</div>

语义化的好处？

去掉样式能让页面结构呈现清晰

屏幕阅读器会按标记“读”你的网页

有益于SEO

便于团队开发和维护

附:HTML5新增元素

标签含义与html4对照<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容HTML5:<article></article>
HTML4:<div></div><section>标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。HTML5: <section></section>
HTML4: <div></div><aside>标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。HTML5:<aside>Aside 的内容是独立的内容，但应与文档内容相关。</aside>
HTML4:<div>Aside 的内容是独立的内容，但应与文档内容相关。</div><header>标签定义 section 或 document 的页眉。HTML5: <header></header>
HTML4: <div></div><footer>标签定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。HTML5: <footer></footer>
HTML4: <div></div><hgroup>标签用于对网页或区段（section）的标题进行组合。HTML5: <hgroup></hgroup>
HTML4: <div></div><nav>标签定义导航链接的部分HTML5: <nav></nav>
HTML4:<ul></ul><canvas>标签定义图形，比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。HTML5:<canvas id="myCanvas" width="200" height="200"></canvas>
HTML4:<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object><video>标签定义视频，比如电影片段或其他视频流。HTML5: <video src="/blog_article/movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>
HTML4:<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object><audio>标签定义声音，比如音乐或其他音频流。HTML5:<audio src="/blog_article/someaudio.wav">您的浏览器不支持 audio 标签。</audio>
HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object><embed>标签定义嵌入的内容，比如插件。HTML5: <embed src="/blog_article/horse.wav" />
HTML4: <object data="flash.swf" type="application/x-shockwave-flash"></object><source>标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。HTML5: <source>
HTML4: <param><datalist>标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。HTML5: <datalist></datalist>
HTML4: none<details>标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。与 <legend> 一起使用，来制作 detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail。HTML5: <details></details>
HTML4: <dl ></dl><summary>标签包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。HTML5: <detail

[2]获取随机的颜色

来源: 发布时间: 2013-11-06

function randomColor(){
r = Math.floor(Math.random()*255).toString(16);
g = Math.floor(Math.random()*255).toString(16);
b = Math.floor(Math.random()*255).toString(16);
return "#"+r+g+b;
}

var div=document.getElementById("div");
var clr=randomColor();
div.style.color=clr;

本文链接

[3]采用Jquery,在table上实现对行的单击、双击、返回选中行数据的功能，可作为GridView控制客户端的扩展

来源: 发布时间: 2013-11-06

(function ($) {
    $.fn.gridview = function (settings) {
        var dfop =
            {
                SelectedRow: false,
                onrowclick: false,
                ondblclick: false,
                 onbuttonclick: false

               }
        $.extend(dfop, settings);
        var me = $(this);

        InitEvent(me.attr("id"));
        function InitEvent(gridviewid) {
           $("#" + gridviewid + ">tbody>tr:gt(0)").each(function () {
               if (dfop.onbuttonclick) {
                    $(this).find('.btntext').click(buttonclick);
                }
                $(this).click(rowclick).dblclick(rowdblclick);
            });

}

        function rowdblclick(e) {
            if (dfop.ondblclick) {
                dfop.ondblclick.call(this, dfop.SelectedRow);
            }
        }

      me[0].t = {
            getCurrentRow: function () {
                return dfop.SelectedRow;
            }
        };
        return me;
    }

    $.fn.getCurrentRow = function () {
        if (this.length > 0 && this[0].t) {
            return this[0].t.getCurrentRow();
        }
        return null;
    }
})(jQuery);

本文链接