成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端學(xué)習(xí)筆記14 HTML表格和為網(wǎng)頁添加JavaScript

MarvinZhang / 2691人閱讀

摘要：表格結(jié)構(gòu)化表格從基本層面看，元素是由行組成的，行又是由單元格組成的。如果認(rèn)為為整個單元格添加一個標(biāo)題有助于訪問者理解該表格，可以提供。輸入單元格的內(nèi)容。表格中的每一列都應(yīng)該具有相同的單元格數(shù)量。

HTML表格 結(jié)構(gòu)化表格

??從基本層面看，table元素是由行組成的，行又是由單元格組成的。每個行（tr）都包含標(biāo)題單元格（th）或數(shù)據(jù)單元格（td），或者同時包含這兩種單元格。如果認(rèn)為為整個單元格添加一個標(biāo)題有助于訪問者理解該表格，可以提供caption。scope屬性（是可選的，但推薦使用）可告訴屏幕閱讀器和其他輔助設(shè)備當(dāng)前的th是列表的標(biāo)題單元格（使用scope="col"）還是行的標(biāo)題單元格（使用scope="row"），抑或是用于其他目的的單元格。

??在默認(rèn)情況下，表格在瀏覽器中呈現(xiàn)的寬度是其中的信息在頁面可用空間里所需的最小寬度，也可以用CSS改變表格的格式?？梢酝ㄟ^在每行開頭添加一個th元素為每個行添加標(biāo)題單元格。列標(biāo)題應(yīng)設(shè)置scope="col"，而每個行的th（位于td之前）則應(yīng)設(shè)置scope="row"。


??在默認(rèn)情況下，th文本是以粗體顯示的，th和caption文本都是居中對齊的，表格的寬度就是內(nèi)容所需的寬度。

...



    Quarterly Financials for 1962-1964 (in Thousands)
    

        1962
        1963
        1964
    

    

        $145
        $167
        $161
    

    

        $140
        $159
        $164
    

    

        $153
        $162
        $168
    

    

        $157
        $160
        $171


??下面這段程序中，thead、tbody和tfoot顯示的定義了表格的不同部分。接著在每行的開頭添加了th元素。tbody和tfoot中的th設(shè)置了scope="row"，表明它們是行標(biāo)題。

...



    Quarterly Financials for 1962-1964
 (in Thousands)
     
        

            Quarter
            1962
            1963
            1964
        

    
     
        

            Q1
            $145
            $167
            $161
        

        

            Q2
            $140
            $159
            $164
        

        

            Q3
            $153
            $162
            $168
        

        

            Q4
            $157
            $160
            $171
        
                        
    
     
        

            TOTAL
            $595
            $648
            $664

??上面程序中的thead元素可以顯示的將一行或多行標(biāo)題標(biāo)記為表格的頭部。tbody元素用于包圍所有的數(shù)據(jù)行。tfoot元素可以顯示的將一行或多行標(biāo)記為表格的尾部。可以使用tfoot包圍對列的計(jì)算值，也可以在長表格（如列車時刻表）中使用tfoot重復(fù)thead元素的內(nèi)容。以上三個元素不影響表格的布局也不必需。如果包含了thead或tfoot，則必須同時包含tbody。此外還可以對它們添加樣式。
??如果table是嵌套在figure元素內(nèi)除figcaption以外的唯一元素，則可以省略caption，使用figcaption對表格進(jìn)行描述。
??可以通過scope屬性指定th為一組列的標(biāo)題（使用scope="colgroup"），或者為一組行的標(biāo)題（使用scope="rowgroup"）。


讓單元格跨越多列或多行

??可以通過colspan和rowspan屬性讓th或td跨越一個以上的列或行。

讓單元格跨越兩個或兩個以上列的步驟

在需要定義跨越一個以上的列的單元格的地方，如果為標(biāo)題單元格，輸入后加一個空格，否則輸入后加一個空格。

輸入colspan="n">，這里的n是單元格要跨越的列數(shù)。

輸入單元格的內(nèi)容。

根據(jù)前面的內(nèi)容，輸入或者。

完成表格的其余部分。如果創(chuàng)建一個跨越兩列的單元格，在該行就應(yīng)該少定義一個單元格；如果創(chuàng)建了一個跨越三列的單元格，在該行就應(yīng)該少定義兩個單元格。

...



    TV Schedule
     
        

            Time
            Mon
            Tue
            Wed
        

    
     
        

            8 pm
            Staring Contest
            Celebrity Hoedown
        

        

            9 pm
            Hardy, Har, Har
            What"s for Lunch?
            Screamfest Movie of the Weak
        

        

            10 pm
            Healers, Wheelers & Dealers
            It"s a Crime
        

        




body {
    font: 100% sans-serif; /* This results in Arial on Windows and Helvetica on OS X. */
}
table {
    /* The default setting is border-collapse: separate;. By changing separate to collapse as shown below, the space between each table cell is removed. */
    border-collapse: collapse;

    -webkit-box-shadow: 3px 3px 7px #055584;
    -moz-box-shadow: 3px 3px 7px #055584;
    box-shadow: 3px 3px 7px #055584;
}
caption {
    color: #055584;
    font-size: 1.25em;
    font-weight: bold;
    margin: 0 0 .5em;
    text-shadow: 1px 1px 1px #c0e0f2;
}
td,
th {
    font-size: .8125em;
    border: 1px solid #000;
    padding: .75em;    
}
th {
    background: #055584;
    color: #c0e0f2;
}
td {
    background: #d2ebf9;
    width: 9em;
}
thead th:first-child {
    background: #1a628c;
}
thead th {
    border-bottom: 3px solid #000;
    text-transform: uppercase;
}


讓單元格跨越兩個或兩個以上行的步驟

在需要定義跨越一個以上的行的單元格的地方，如果為標(biāo)題單元格，輸入后加一個空格，否則輸入后加一個空格。

輸入rowspan="n">，這里的n是單元格要跨越的行數(shù)。

輸入單元格的內(nèi)容。

根據(jù)前面的內(nèi)容，輸入或者。

完成表格的其余部分。如果創(chuàng)建一個rowspan等于2的單元格，就不需要定義下一行中該單元格對應(yīng)的單元格了；如果創(chuàng)建了一個rowspan等于3的單元格，就不需要定義下面兩行中該單元格對應(yīng)的單元格了，以此類推。

??表格中的每一行都應(yīng)該具有相同的單元格數(shù)量?？缭蕉嗔械膯卧駪?yīng)該算作多個單元格，它的colspan屬性值為多少就算做多少個單元格。表格中的每一列都應(yīng)該具有相同的單元格數(shù)量。跨越多行的單元格應(yīng)該算作多個單元格，它的rowspan屬性值為多少就算做多少個單元格。


為網(wǎng)頁添加JavaScript 加載腳本

??腳本主要分為外部腳本和嵌入在頁面中的腳本。


加載外部腳本的方法

??輸入，這里的script.js是外部腳本在服務(wù)器上的位置及文件名。應(yīng)盡量將腳本元素放在結(jié)束標(biāo)簽之前，而不放在文檔的head元素里（因?yàn)檫@樣會影響頁面顯示的速率）。大多數(shù)情況下，最好在頁面的最末尾加載腳本，即結(jié)束標(biāo)簽的前面。


壓縮JavaScript腳本的工具

Google Closure Compiler
供下載的版本及文檔

UglifyJS
供下載的版本及文檔

在線版本

YUI Compressor
供下載的版本及文檔

非官方的在線版本


添加嵌入腳本

??嵌入腳本位于HTML文檔內(nèi)，同嵌入樣式表很類似。




    
    Adding an Embedded Script
    


    
... All of your HTML content is here ...

    
See the HTML code regarding how to embed JavaScript directly before the  end tag.


HTML and CSS 讀書筆記

歡迎來我的博客，在那會有更多更新：Levi.Blog


本文為本人原創(chuàng)，采用 知識共享 “署名-非商業(yè)性使用-相同方式共享” 4.0 (CC BY-NC-SA 4.0)”許可協(xié)議 進(jìn)行許可。
本作品可自由復(fù)制、傳播及基于本作品進(jìn)行演繹創(chuàng)作。如有以上需要，請通過E-mail等方式告知，并在文章開頭明顯位置加上署名  [丁學(xué)文 ] 、原文鏈接及許可協(xié)議信息，并明確指出修改（如有），不得用于商業(yè)用途。謝謝合作。詳情請點(diǎn)擊查看許可協(xié)議及版權(quán)聲明具體內(nèi)容。

聯(lián)系方式：
E-mail： [email protected] [ 請注明來意 ]
GitHub： Levi.GitHub

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50591.html

相關(guān)文章

  • 前端學(xué)習(xí)筆記14 HTML表格和為網(wǎng)頁添加JavaScript

    摘要：表格結(jié)構(gòu)化表格從基本層面看，元素是由行組成的，行又是由單元格組成的。如果認(rèn)為為整個單元格添加一個標(biāo)題有助于訪問者理解該表格，可以提供。輸入單元格的內(nèi)容。表格中的每一列都應(yīng)該具有相同的單元格數(shù)量。 HTML表格 結(jié)構(gòu)化表格 ??從基本層面看，table元素是由行組成的，行又是由單元格組成的。每個行（tr）都包含標(biāo)題單元格（th）或數(shù)據(jù)單元格（td），或者同時包含這兩種單元格。如果認(rèn)為為整...

    CastlePeaK 評論0 收藏0

  • 前端學(xué)習(xí)筆記14 HTML表格和為網(wǎng)頁添加JavaScript

    摘要：表格結(jié)構(gòu)化表格從基本層面看，元素是由行組成的，行又是由單元格組成的。如果認(rèn)為為整個單元格添加一個標(biāo)題有助于訪問者理解該表格，可以提供。輸入單元格的內(nèi)容。表格中的每一列都應(yīng)該具有相同的單元格數(shù)量。 HTML表格 結(jié)構(gòu)化表格 ??從基本層面看，table元素是由行組成的，行又是由單元格組成的。每個行（tr）都包含標(biāo)題單元格（th）或數(shù)據(jù)單元格（td），或者同時包含這兩種單元格。如果認(rèn)為為整...

    Ververica 評論0 收藏0

  • 重學(xué)前端學(xué)習(xí)筆記（三）--前端知識框架圖

    摘要：筆記說明重學(xué)前端是程劭非前手機(jī)淘寶前端負(fù)責(zé)人在極客時間開的一個專欄，每天分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入的專欄學(xué)習(xí)原文有的語音，如有侵權(quán)請聯(lián)系我，郵箱。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以...

    bbbbbb 評論0 收藏0

  • 重學(xué)前端學(xué)習(xí)筆記（三）--前端知識框架圖

    摘要：筆記說明重學(xué)前端是程劭非前手機(jī)淘寶前端負(fù)責(zé)人在極客時間開的一個專欄，每天分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入的專欄學(xué)習(xí)原文有的語音，如有侵權(quán)請聯(lián)系我，郵箱。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以...

    Coding01 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<